An unofficial, original StackBlitz-inspired Browser Forge system grounded in 17 retained, evidence-backed interface patterns.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
A browser-first development surface that explains why a working Node.js environment can boot, run, debug, and reset inside a tab.
Reference style: Dark browser-native runtime story with oversized Manrope display type, Inter UITypography
Manrope
Observed oversized hero and section display type
Manrope, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
Inter
Navigation, body, labels, and controls
Inter, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
Palette
canvas
#f4f7ffPage canvas in light mode
surface
#ffffffRaised content surface in light mode
surface-dark
#272b33Raised content surface in dark mode
text
#171925Primary readable text
muted
#687085Supporting copy and metadata
border
#dbe4f7Quiet dividers and control outlines
accent
#4d8dffPrimary action or active state
accent-secondary
#23c7a6Secondary signal or gradient stop
dark-canvas
#1c1f25Page canvas in dark mode
dark-text
#ffffffPrimary readable text in dark mode
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| display-xl | clamp(44px, 7vw, 94px) | 700 | 0.98–1.08 | -0.06em |
| display-lg | clamp(32px, 5vw, 64px) | 700 | 1.0–1.12 | -0.05em |
| heading | 24–32px | 600 | 1.2–1.35 | -0.035em |
| body | 14–16px | 400 | 1.45–1.6 | normal |
| label | 11–13px | 600 | 1.3–1.45 | 0.01em |
| technical | 10–12px | 500 | 1.45–1.7 | normal |
Spacing & shape
Iconography
Use an inline or masked SVG with an accessible label for browser, code, debug, reset, and navigation actions; do not replace labels with arbitrary glyphs.
System metrics
Radius
Spacing
Motion
Elevation
browser
0 24px 70px rgba(0,0,0,.32)Browser frame and proof
card
0 14px 36px rgba(0,0,0,.18)Runtime detail cards
Surfaces & shape
light-canvas
#f4f7ffQuiet page background
light-surface
#ffffffCards and form surfaces
dark-canvas
#1c1f25Dark page background
dark-surface
#272b33Dark cards and console surfaces
Guidelines
Imagery
Use original abstract geometry, code-like lines, gradients, and browser/runtime framing only when they clarify the workflow. Never copy reference screenshots, logos, customer imagery, template thumbnails, or proprietary illustrations.
Layout
Use a centered max-width shell, clear section rhythm, one dominant task per specimen, and a single-column fallback at 520–760px. Keep tables and runtime rows scroll-safe.
Assigned collection
17 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
