--- name: Bolt tagline: 'An electric-blue command line for the web — StackBlitz''s AI builder on a near-black #1e1e21 canvas, Inter Display, builder''s register.' updated_at: 2026-05-28T23:11:25.190Z published_at: 2026-05-28T23:11:25.190Z author: webdesignhot source_url: https://bolt.new spec: webdesignhot/0.1 quality: curated featured: false categories: [ai, dev-tools] tags: [dark, bold, sans, ai, builder] preview_swatch: ['#1e1e21', '#1488fc', '#2ba6ff'] related: [v0, vercel, linear] description: 'Bolt is StackBlitz''s AI app and website builder, and its surface is a dark developer console dressed for prompting. The canvas sits at a near-black `#1e1e21` (warm-neutral, not pure black), display copy uses **Inter Display** at 48px weight 700 with tight `-0.018em` tracking, and body runs **Inter** at 16px/400. The whole identity hinges on one electric move: a high-voltage blue `#1488fc` (rgb 20, 136, 252) that lights the primary CTA, the prompt-submit affordance, and every "go" moment on the page. Where v0 strips all chroma to make the prompt the hero, Bolt does the opposite — it keeps the dark IDE register but charges it with a single saturated blue so the page reads like a terminal with one glowing run button. Radius is a deliberate mix: 6px on the workhorse "Get started" button, full pills on the brighter `#2ba6ff` secondary and the dark utility buttons.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-muted border: border ring: brand themes: default: dark available: [dark] switch-via: 'dark-only marketing surface; the product IDE has its own theming but the public site stays on the #1e1e21 canvas' colors: bg: '#1e1e21' # observed body bg, rgb(30,30,33) — near-black warm-neutral canvas bg-deep: '#161618' # slightly deeper recess for footer / wells surface: '#26262a' # raised panel one value step above the canvas surface-soft: '#2a2a2e' # cards and chips surface-strong: '#2e2e33' # emphasised dividers, code wells text: '#ffffff' # observed body color, rgb(255,255,255) — pure white copy text-display: '#fffeff' # observed h1, rgb(255,254,255) — effectively white, the hero text-medium: '#b2b2b8' # secondary copy, ~7.9:1 on canvas text-muted: '#a3a3a8' # captions / metadata, ~6.6:1 on canvas text-faint: '#8a8a8f' # quietest microcopy, ~4.8:1 on canvas text-disabled: '#5c5c61' # disabled labels brand: '#1488fc' # observed "Get started" bg, rgb(20,136,252) — electric blue, the identity brand-bright: '#2ba6ff' # observed "Build now" bg, rgb(43,166,255) — brighter pill / hover lift brand-deep: '#0f6fd6' # pressed / active darker step brand-wash: 'rgba(20, 136, 252, 0.12)' # 12% blue tint for hover halos and selected zones on-brand: '#f3f0f5' # observed "Get started" text, rgb(243,240,245) — near-white label on blue on-brand-bright: '#ffffff' # observed "Build now" text — pure white on the brighter pill utility-dark: '#101010' # observed "Figma" button bg, rgb(16,16,16) — near-black utility pill utility-dark-text: 'rgba(255, 255, 255, 0.75)' # observed — 75% white label on the dark pill link: '#2ba6ff' # links pick up the brighter blue for value lift on the dark canvas link-hover: '#5cbbff' selected-bg: '#26262a' border: 'rgba(255, 255, 255, 0.10)' # default hairline on the dark canvas border-strong: 'rgba(255, 255, 255, 0.16)' # emphasised rule on inputs border-subtle: 'rgba(255, 255, 255, 0.06)' # quietest division border-focus: '#1488fc' # focus ring picks up the brand blue success-bg: 'rgba(34, 134, 58, 0.18)' success-text: '#3fce6a' warning-bg: 'rgba(166, 120, 20, 0.18)' warning-text: '#e2b13c' danger-bg: 'rgba(196, 52, 60, 0.18)' danger-text: '#ff6b73' info-bg: 'rgba(20, 136, 252, 0.14)' info-text: '#5cbbff' typography: display: family: '"Inter Display", Inter, system-ui, -apple-system, sans-serif' weights: [500, 600, 700] opentype-features: ['kern', 'liga', 'calt'] body: family: 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' weights: [400, 500, 600] opentype-features: ['kern', 'liga'] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace' weights: [400, 500] opentype-features: ['tnum', 'zero'] scale: display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display } h1: { size: 48, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display, note: 'observed 48px/700 Inter Display — the homepage hero' } h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display } h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } h5: { size: 16, weight: 600, lineHeight: 1.4, tracking: '0', family: body } eyebrow: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.08em', family: body, transform: uppercase } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body, note: 'observed 16px/400 Inter — default body' } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } code: { size: 13, weight: 400, lineHeight: 1.55, tracking: '0', family: mono, opentype: 'tnum zero' } code-micro: { size: 11, weight: 400, lineHeight: 1.4, tracking: '0', family: mono } radius: micro: 2 sm: 4 md: 6 lg: 8 xl: 12 card: 16 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128] layout: page-width: 1280 prose-width: 720 site-gutter: 'clamp(16px, 4vw, 32px)' header-height: 64 grid-columns: 12 hero-pattern: 'centered hero headline + prompt input + framework chip row below' section-rhythm: '96-128px' components: button-primary: background: '#1488fc' text: '#f3f0f5' padding: '10px 16px' radius: 6 border: 'none' font: 'Inter 600 / 15px' hover-bg: '#2ba6ff' active-bg: '#0f6fd6' use: 'Primary CTA — electric blue at 6px radius. Get started, Deploy, Run.' button-pill: background: '#2ba6ff' text: '#ffffff' padding: '10px 18px' radius: 9999 border: 'none' font: 'Inter 600 / 15px' hover-bg: '#5cbbff' use: 'Brighter secondary pill — Build now, in-flow continue. The high-energy twin.' button-utility-dark: background: '#101010' text: 'rgba(255, 255, 255, 0.75)' padding: '10px 16px' radius: 9999 border: '1px solid rgba(255, 255, 255, 0.10)' font: 'Inter 500 / 14px' hover-text: '#ffffff' use: 'Dark utility pill — import-from buttons (Figma), tertiary actions.' button-ghost: background: 'transparent' text: '#ffffff' padding: '8px 12px' radius: 6 font: 'Inter 500 / 14px' hover-bg: 'rgba(255, 255, 255, 0.06)' use: 'Quiet utility — nav links, inline actions.' card: background: '#26262a' border: '1px solid rgba(255, 255, 255, 0.10)' radius: 16 padding: '24px' use: 'Feature / template card — one value step up from the canvas, hairline rule.' input: background: '#26262a' border: '1px solid rgba(255, 255, 255, 0.16)' radius: 8 padding: '10px 14px' font: 'Inter 400 / 16px' placeholder-color: '#8a8a8f' focus-ring: '0 0 0 2px #1488fc' use: 'Form fields, search.' prompt-input: background: '#26262a' border: '1px solid rgba(255, 255, 255, 0.16)' radius: 16 padding: '16px 20px' font: 'Inter 400 / 16px' placeholder-color: '#8a8a8f' inner-button: '36px blue rounded-square at 8px radius hard-right, white arrow' use: 'Hero prompt — the page''s primary input. Multi-line capable with framework chips below.' badge: background: 'rgba(20, 136, 252, 0.14)' text: '#5cbbff' padding: '4px 10px' radius: 9999 font: 'Inter 500 / 12px' use: 'Status / category pill — New, Beta, framework tag.' nav-link: background: 'transparent' text: 'rgba(255, 255, 255, 0.85)' padding: '8px 12px' font: 'Inter 500 / 14px' hover-text: '#ffffff' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — transitions become opacity-only, scroll reveals snap to final state' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: none: 'none' ambient: 'rgba(0, 0, 0, 0.30) 0 1px 2px' standard: 'rgba(0, 0, 0, 0.40) 0 8px 24px -8px' elevated: 'rgba(0, 0, 0, 0.50) 0 16px 40px -12px' modal: 'rgba(0, 0, 0, 0.60) 0 24px 56px -16px' glow-brand: '0 0 0 1px rgba(20, 136, 252, 0.40), 0 8px 32px -8px rgba(20, 136, 252, 0.35)' ring: '0 0 0 2px #1488fc' accessibility: contrast-text-on-bg: 16.63 # #ffffff on #1e1e21 — AAA at all sizes contrast-text-medium-on-bg: 7.88 # #b2b2b8 on #1e1e21 — AAA contrast-text-muted-on-bg: 6.62 # #a3a3a8 on #1e1e21 — AA+ at body sizes contrast-brand-on-bg: 4.72 # #1488fc on #1e1e21 — AA for large text / UI components contrast-on-brand-on-brand: 3.12 # #f3f0f5 on #1488fc — AA for large text; primary label is ≥15px/600 contrast-bright-on-bg: 6.34 # #2ba6ff on #1e1e21 — AA at body sizes focus-ring: '2px solid #1488fc with 2px offset' reduced-motion-honored: true keyboard-nav: 'tab order: skip-link → masthead → prompt input → framework chips → footer; Cmd/Ctrl+Enter submits prompt.' prose-line-length: 'capped at 720px on text pages.' dark-mode: default # the public marketing surface is dark-only at #1e1e21 --- ## 1. Visual Theme & Atmosphere Bolt is StackBlitz's AI app and website builder, and its surface is a dark developer console dressed for prompting. The canvas sits at a near-black `#1e1e21` — `rgb(30, 30, 33)`, a warm-neutral charcoal rather than pure `#000000` — and the body copy is pure white `#ffffff` Inter at 16px/400. Where v0 strips every trace of chroma to make the prompt the hero, Bolt does the opposite: it keeps the dark IDE register but charges it with a single high-voltage blue so the whole page reads like a terminal with one glowing "run" button. That blue is the identity. The primary "Get started" CTA fills with electric `#1488fc` — `rgb(20, 136, 252)` — at a tight 6px radius, and a brighter `#2ba6ff` appears on the secondary "Build now" pill and on hover lifts. The blue is the only saturated color on the page; everything else is the grayscale ladder of a code editor. The effect is unmistakably *builder*: the page doesn't sell, it invites you to type a prompt and watch a stack boot. The dark canvas isn't a fashion choice — it's the IDE the product actually is, brought forward onto the marketing surface so there's no register break between the landing page and the workspace. The display voice is **Inter Display**, set on the homepage hero at 48px weight 700 with `-0.018em` tracking. Inter Display is the optical-size variant of Inter tuned for large sizes — tighter spacing, subtly refined terminals — and Bolt leans on it for confidence rather than spectacle. Body text drops to plain **Inter** at 16px/400, the developer-default UI face that signals "this is software, not a brochure." The pairing is deliberate: one family, two optical sizes, no decorative serif anywhere. The radius story is a **deliberate mix**, and it's worth getting right. The workhorse primary button is 6px — almost a square-ish, technical corner. But the brighter `#2ba6ff` secondary and the dark `#101010` utility buttons (the "import from Figma" style pills) are full 9999px pills. Cards relax to 16px. So Bolt isn't a single-radius system; it's a tiered one where the radius itself signals hierarchy — sharp 6px for the main commit action, soft pills for energetic or secondary moves, generous 16px for content containers. The atmospheric vocabulary: **dark-IDE-canvas, one-electric-blue, builder-not-marketing, Inter-Display-hero, prompt-as-terminal, 6px-and-pill-mix, value-ladder-elevation, blue-glow-on-commit, warm-near-black-not-pure-black, run-button-energy.** The whole composition is closer to a code editor's welcome screen (VS Code, StackBlitz's own IDE, Replit) than a SaaS funnel — but with one charged accent that the calmest dev tools deliberately omit. **Key Characteristics** - Near-black `#1e1e21` canvas — `rgb(30, 30, 33)`, warm-neutral charcoal, never pure black - Pure white `#ffffff` body copy — maximal value contrast on the dark canvas (16.6:1) - Electric blue `#1488fc` is the brand — the sole saturated color, on every "go" moment - Brighter `#2ba6ff` for secondary pills and hover lifts — the high-energy twin - Inter Display 48px/700 hero + Inter 16px/400 body — one family, two optical sizes - Tiered radius: 6px primary button, 9999px pills, 16px cards — radius signals hierarchy - Dark utility pills `#101010` for import/tertiary actions — near-black-on-near-black - Value-ladder elevation (`#1e1e21` → `#26262a` → `#2e2e33`) over heavy shadow - Blue glow on the commit affordance — soft `#1488fc` halo on the prompt-submit button - Builder's register throughout — terminal energy, not marketing exuberance ## 2. Color Palette & Roles ### Primary - **bg** (`#1e1e21`) [→ `--bolt-bg`]: near-black warm-neutral canvas, `rgb(30, 30, 33)`. The default page surface. Never pure `#000000`. - **bg-deep** (`#161618`) [→ `--bolt-bg-deep`]: a deeper recess for footer wells and inset zones. - **text** (`#ffffff`) [→ `--bolt-text`]: pure white body copy, `rgb(255, 255, 255)`. Maximal contrast. - **text-display** (`#fffeff`) [→ `--bolt-text-display`]: the observed h1 color, `rgb(255, 254, 255)` — effectively white; reserved for the hero headline. ### Brand & Accent - **brand** (`#1488fc`) [→ `--bolt-brand`]: electric blue, `rgb(20, 136, 252)`. The primary CTA fill, prompt-submit affordance, focus ring, link energy. The single identity color. - **brand-bright** (`#2ba6ff`) [→ `--bolt-brand-bright`]: brighter blue, `rgb(43, 166, 255)`. The secondary pill fill ("Build now") and the primary hover lift. - **brand-deep** (`#0f6fd6`) [→ `--bolt-brand-deep`]: a darker step for pressed / active states. - **brand-wash** (`rgba(20, 136, 252, 0.12)`) [→ `--bolt-brand-wash`]: 12% blue tint for hover halos, selected zones, and info backgrounds. - **on-brand** (`#f3f0f5`) [→ `--bolt-on-brand`]: near-white label on the electric blue button, `rgb(243, 240, 245)` (observed). - **on-brand-bright** (`#ffffff`) [→ `--bolt-on-brand-bright`]: pure white label on the brighter pill. ### Interactive - **link** (`#2ba6ff`) [→ `--bolt-link`]: links pick up the brighter blue for value lift against the dark canvas. - **link-hover** (`#5cbbff`) [→ `--bolt-link-hover`]: lighter blue on hover. - **utility-dark** (`#101010`) [→ `--bolt-utility-dark`]: near-black pill fill, `rgb(16, 16, 16)` (observed "Figma" button) — for import / tertiary actions. - **utility-dark-text** (`rgba(255, 255, 255, 0.75)`) [→ `--bolt-utility-dark-text`]: 75% white label on the dark pill (observed); brightens to full white on hover. - **selected-bg** (`#26262a`) [→ `--bolt-selected-bg`]: selected state uses a surface step. - **text-disabled** (`#5c5c61`) [→ `--bolt-text-disabled`]: disabled labels. ### Neutral Scale (value ladder) - **text** (`#ffffff`) — primary copy. - **text-medium** (`#b2b2b8`) — secondary copy, ~7.9:1 on canvas. - **text-muted** (`#a3a3a8`) — captions, metadata, ~6.6:1 on canvas. - **text-faint** (`#8a8a8f`) — quietest microcopy, placeholders, ~4.8:1 on canvas. - **text-disabled** (`#5c5c61`) — disabled. - **surface-strong** (`#2e2e33`) — emphasised dividers, code wells. - **surface-soft** (`#2a2a2e`) — cards and chips. - **surface** (`#26262a`) — raised panels. - **bg** (`#1e1e21`) — page canvas. - **bg-deep** (`#161618`) — recesses. ### Surface & Borders - **surface-0 (page)** — `#1e1e21` near-black canvas. - **surface-1 (panel)** — `#26262a`, one value step up. - **surface-2 (card)** — `#26262a` with a hairline border, or `#2a2a2e` for chips. - **border** (`rgba(255, 255, 255, 0.10)`) [→ `--bolt-border`]: 10% white hairline — the default rule on the dark canvas. - **border-strong** (`rgba(255, 255, 255, 0.16)`) [→ `--bolt-border-strong`]: emphasised rule on inputs and active cards. - **border-subtle** (`rgba(255, 255, 255, 0.06)`) [→ `--bolt-border-subtle`]: quietest division. - **border-focus** (`#1488fc`) [→ `--bolt-border-focus`]: focus border picks up the brand blue. ### Shadow Colors On a dark canvas, **shadows do less work and glow does more**. Cast shadows are deep black at 30–60% opacity (a `#1e1e21` surface against `#161618` doesn't read as elevated without them), but the signature depth move is the **blue glow** on the commit affordance — a soft `rgba(20, 136, 252, 0.35)` halo around the prompt-submit button that makes the "run" action feel charged. Elevation is otherwise carried by the value ladder. No tinted gray shadows; black for depth, blue for energy. ### Semantic - **success** — bg `rgba(34, 134, 58, 0.18)`, text `#3fce6a`. Build success, deploy complete. - **warning** — bg `rgba(166, 120, 20, 0.18)`, text `#e2b13c`. Token limits, deprecation notices. - **danger** — bg `rgba(196, 52, 60, 0.18)`, text `#ff6b73`. Build errors, validation failures. - **info** — bg `rgba(20, 136, 252, 0.14)`, text `#5cbbff`. Notably, info reuses the brand blue family — Bolt has no separate "info" hue because the brand *is* the information color. Note: semantic tints are low-opacity washes of saturated hues over the dark canvas — the standard dark-IDE pattern. Info collapsing into the brand blue is a Bolt signature: the page already speaks in blue, so informational states simply turn up the same voice. ## 3. Typography Rules ### Font Family - **Display**: `"Inter Display", Inter, system-ui, -apple-system, sans-serif` — the optical-size variant of Inter tuned for large headings (tighter spacing, refined terminals). Carries the hero and section headings. - **Body**: `Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif` — the developer-default UI face. Carries all body, labels, and captions. - **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace` — for code previews, terminal output, and stack metadata. - **OpenType features**: `kern` and `liga` enabled across display/body; `calt` (contextual alternates) in display. `tnum` (tabular figures) and `zero` (slashed zero) in mono. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |---|---|---|---|---|---|---| | Display Hero | Inter Display | 80px | 700 | 1.0 | -0.03em | Reserved for major launch pages | | Display Large | Inter Display | 56px | 700 | 1.05 | -0.02em | Secondary hero | | H1 | Inter Display | 48px | 700 | 1.1 | -0.018em | Homepage hero — *the observed signature* | | H2 | Inter Display | 32px | 600 | 1.2 | -0.012em | Major section heading | | H3 | Inter Display | 24px | 600 | 1.25 | -0.005em | Sub-section | | H4 | Inter | 20px | 600 | 1.3 | normal | Card heading | | H5 | Inter | 16px | 600 | 1.4 | normal | Inline emphasis | | Eyebrow | Inter | 12px | 500 | 1.4 | 0.08em | Section pre-label, uppercase | | Body Large | Inter | 18px | 400 | 1.55 | normal | Lede paragraph | | Body | Inter | 16px | 400 | 1.55 | normal | Default body — *the observed default* | | Body Small | Inter | 14px | 400 | 1.5 | normal | Compact UI body | | Label | Inter | 13px | 500 | 1.4 | normal | UI labels | | Caption | Inter | 12px | 500 | 1.4 | 0.02em | Metadata, image captions | | Code | Mono | 13px | 400 | 1.55 | normal | Inline + block, `tnum zero` | | Code Micro | Mono | 11px | 400 | 1.4 | normal | Terminal output, version tags | ### Principles - **Inter Display for headings, Inter for everything else.** The optical-size split is the typographic discipline — display variant above 24px, UI variant below. Don't render headings in plain Inter or body in Inter Display. - **Hero at 48px/700.** The observed homepage signature. Push to 56–80px only on dedicated launch pages. - **Negative tracking compresses with size.** `-0.03em` at 80px, `-0.018em` at 48px, `-0.012em` at 32px, easing to normal at body sizes. - **Body at 16px/1.55.** Generous line height for readability on the dark canvas — white-on-dark needs more leading than dark-on-light to avoid glare halation. - **Weight does the emphasis, not color.** Headings live at 600–700; body at 400. The single blue is reserved for interactive elements, not for emphasising prose. - **Eyebrows are uppercase Inter 500 + 0.08em tracking.** The quiet "this is a builder's tool" pre-label. - **No serifs, no decorative faces.** One family, two optical sizes, one mono fallback — the developer-tool typographic register. - **Mono carries the terminal voice.** Code previews and stack metadata use the system mono stack with tabular figures and slashed zeros. ## 4. Component Stylings ### Buttons **Primary (Electric Blue)** - Background: `#1488fc`. Text: `#f3f0f5`, Inter 600 / 15px. - Padding: `10px 16px`. Radius: `6px`. No border. - Hover: bg → `#2ba6ff` over 150ms; optional blue glow `0 8px 32px -8px rgba(20,136,252,0.35)`. - Active: bg → `#0f6fd6` (instant). - Focus: 2px `#1488fc` ring with 2px offset. - Use: The main commit action — *Get started, Deploy, Run, Create.* The 6px radius is the signature sharp corner. **Pill (Brighter Blue)** - Background: `#2ba6ff`. Text: `#ffffff`, Inter 600 / 15px. - Padding: `10px 18px`. Radius: `9999px` (full pill). - Hover: bg → `#5cbbff`. - Use: High-energy secondary — *Build now, Continue, in-flow forward actions.* The pill shape signals momentum versus the primary's square commit. **Utility Dark (Pill)** - Background: `#101010`. Text: `rgba(255, 255, 255, 0.75)`, Inter 500 / 14px. - Border: `1px solid rgba(255, 255, 255, 0.10)`. Padding: `10px 16px`. Radius: `9999px`. - Hover: text → `#ffffff`; border → `rgba(255, 255, 255, 0.16)`. - Use: Import-from and tertiary actions — *Figma, Import, GitHub.* Near-black-on-near-black, identified by the hairline and icon. **Ghost (Quiet)** - Background: transparent. Text: `#ffffff`, Inter 500 / 14px. - Padding: `8px 12px`. Radius: `6px`. - Hover: bg → `rgba(255, 255, 255, 0.06)`. - Use: Nav links, footer, repeated inline actions. ### Cards **Feature Card** - Background: `#26262a`. Border: `1px solid rgba(255, 255, 255, 0.10)`. Radius: `16px`. Padding: `24px`. - Shadow: none at rest; on hover, border → `rgba(255, 255, 255, 0.16)` + subtle lift. - Use: Capability tile, feature explainer. **Template Card** - Background: `#26262a`. Border: `1px solid rgba(255, 255, 255, 0.10)`. Radius: `16px`. Padding: `24px`. - Preview area: screenshot or framework logo at 12px radius inside the card. - Hover: `transform: translateY(-2px)` + border brighten over 240ms. - Use: Starter / framework grid tile. **Code Well** - Background: `#2e2e33` (or `#161618` for a recessed terminal). Border: none or `rgba(255, 255, 255, 0.06)`. Radius: `12px`. Padding: `16px 20px`. - Use: Inline code preview, terminal output. Mono 13px with `tnum zero`. ### Badges, Tags, Pills **Brand Badge** — bg `rgba(20, 136, 252, 0.14)`, text `#5cbbff`, Inter 500 / 12px, padding `4px 10px`, radius `9999px`. Used for "New", "Beta", framework tags. **Neutral Chip** — bg `#2a2a2e`, text `#b2b2b8`, Inter 500 / 12px, padding `4px 10px`, radius `9999px`. Used for category metadata. **Status Pill** — semantic wash bg + matching text (e.g. success `rgba(34,134,58,0.18)` / `#3fce6a`). Build status, deploy state. ### Inputs / Forms **Text Input** - Background: `#26262a`. Border: `1px solid rgba(255, 255, 255, 0.16)`. Radius: `8px`. Padding: `10px 14px`. - Font: Inter 400 / 16px. Placeholder: `#8a8a8f`. - Focus: `0 0 0 2px #1488fc` ring, border → `#1488fc`. - Error: border → `#ff6b73`, helper text below in danger. **Prompt Input (Hero)** - Background: `#26262a`. Border: `1px solid rgba(255, 255, 255, 0.16)`. Radius: `16px`. Padding: `16px 20px`. - Font: Inter 400 / 16px. Placeholder: `#8a8a8f`. Multi-line capable. - Inner button: 36px blue (`#1488fc`) rounded-square at 8px radius hard-right, white arrow icon, with a soft blue glow on focus. - Framework chips below: a row of neutral pills ("Next.js", "Astro", "Vite", "Expo") to pre-seed the stack. - Focus: ring `0 0 0 2px #1488fc`; the border picks up brand blue. - Use: The page's primary input — the terminal prompt where you type what to build. **Search Input** — same as text input with a 14px search glyph in `#8a8a8f` icon-left. ### Navigation - Header height `64px`. Background `#1e1e21` (transparent on hero, opaque with a `border-subtle` bottom rule on scroll). - Logo: Bolt wordmark / lightning mark hard-left. - Nav links: Inter 500 / 14px, color `rgba(255, 255, 255, 0.85)`, padding `8px 12px`. Hover: text → `#ffffff`. - Right-side: ghost "Docs", ghost "Pricing", primary blue "Get started" button at 6px radius. - Mobile (<640px): hamburger collapses to a full-screen dark sheet. ### Optional Components **Dropdown Menu** — bg `#26262a`, border `rgba(255, 255, 255, 0.10)`, radius `12px`, shadow `rgba(0,0,0,0.40) 0 8px 24px -8px`. Items: Inter 400 / 14px, hover bg `rgba(255, 255, 255, 0.06)`. **Tooltip** — bg `#101010`, text `#ffffff`, radius `6px`, padding `6px 10px`, Inter 500 / 12px. **Toast** — bg `#26262a`, border `rgba(255, 255, 255, 0.10)`, radius `12px`, padding `12px 16px`, standard shadow. **Modal** — bg `#26262a`, radius `16px`, shadow `rgba(0,0,0,0.60) 0 24px 56px -16px`, max-width `560px`. Backdrop: 70% black. **Code Block** — bg `#161618`, radius `12px`, padding `16px 20px`, border `rgba(255, 255, 255, 0.06)`. Mono 13px / 400 with `tnum zero`; syntax tokens in muted accents over the dark well. ## 5. Layout Principles ### Spacing System - **Base unit**: 4px. - **Scale**: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. - **Density observation**: Bolt is *medium-generous*. Section rhythm runs 96–128px (looser than v0's 64–96px calm, tighter than broadsheet editorial). Intra-section spacing: 16–32px. The hero gets the most air to keep the prompt input uncrowded. ### Grid & Container - **Page max width**: `1280px` — standard wide marketing container. - **Site gutter**: `clamp(16px, 4vw, 32px)`. - **Grid**: 12 columns with 24px gutters. - **Hero treatment**: centered headline (Inter Display 48px/700) above a wide centered prompt input, with a framework chip row beneath. Feature sections fan below in 2–3 column grids. ### Whitespace Philosophy The whitespace philosophy is **terminal-focus**: the dark canvas reads as deep, contained space, and the prompt input floats with deliberate air around it so the eye lands on the single charged action. Empty dark space isn't emptiness — it's the console waiting. Sections breathe at 96–128px so the page never feels like a dense dashboard, but it stays purposeful, not editorial-loose. ### Section Cadence - Hero (prompt input centered, framework chips) → Social proof / stack logos → Features (2–3 column cards) → Showcase (template/example grid) → CTA band → Footer (`#161618` deep step). - The whole site stays on the `#1e1e21` canvas; the only value shifts are the surface ladder (`#26262a` cards) and the deeper footer well. - Section breaks: 96–128px vertical space + occasional `rgba(255, 255, 255, 0.06)` hairlines. ## 6. Shapes & Radius Scale | Tier | Value | Use | |---|---|---| | Micro | 2px | Decorative dividers, icon-corner inheritance | | Standard (sm) | 4px | Small inline chips | | Comfortable (md) | 6px | **Primary buttons** — the signature sharp commit corner | | Relaxed (lg) | 8px | Inputs, inner prompt-submit button | | Featured (xl) | 12px | Code wells, dropdowns, small panels | | Card | 16px | Cards, prompt input, modals | | Pill | 9999px | Secondary pills, utility buttons, badges | Bolt's radius system is a **deliberate two-pole mix**: the workhorse primary button at 6px (sharp, technical, "commit") and the energetic secondary/utility actions at full pills (soft, momentum). Containers relax to 12–16px. The radius itself carries hierarchy — a 6px corner reads as the main action, a pill reads as a forward/secondary move. Don't flatten the two poles into one radius; the contrast is intentional. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 | Flat — `#1e1e21`, no shadow | Default page surface, hero, body sections | | 1 | Tonal — `#26262a` against `#1e1e21` | Cards, raised panels | | 2 | `rgba(0,0,0,0.30) 0 1px 2px` | Sticky nav on scroll | | 3 | `rgba(0,0,0,0.40) 0 8px 24px -8px` | Dropdowns, popovers, hovered cards | | 4 | `rgba(0,0,0,0.50) 0 16px 40px -12px` | Floating panels | | 5 | `rgba(0,0,0,0.60) 0 24px 56px -16px` | Modals, dialogs | | Glow | `0 0 0 1px rgba(20,136,252,0.40), 0 8px 32px -8px rgba(20,136,252,0.35)` | The prompt-submit / commit affordance | ### Shadow Philosophy On the dark canvas, **elevation is value-ladder-first, shadow-second, and glow for energy.** The surface ladder (`#1e1e21` → `#26262a` → `#2e2e33`) does the primary lifting — each step is a perceptible value increase. Cast shadows are deep black at 30–60% opacity because a dark surface against a dark canvas needs real darkness underneath to separate. The brand's distinctive depth move is the **blue glow** reserved for the commit affordance (the prompt-submit button): a soft `rgba(20, 136, 252, 0.35)` halo that makes the "run" action feel electrified. Glow is never decorative — it marks the single most important action on a surface. ## 8. Interaction & Motion ### Easing Curves - **`ease-standard`**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material default; hover, focus, color transitions. - **`ease-emphasized`**: `cubic-bezier(0.2, 0, 0, 1)` — modal enter, prompt focus expand, hero reveal. ### Duration Buckets - **Fast (150ms)** — color transitions, focus rings, link and button hovers. - **Standard (240ms)** — card hover, dropdown reveal, pill morphs. - **Slow (320ms)** — modal enter/exit, prompt focus expand, hero reveal. ### Per-Component Micro-States - **Button hover (primary)**: bg `#1488fc` → `#2ba6ff` over 150ms; optional blue glow fades in. - **Button active (primary)**: bg → `#0f6fd6` instantly on press. - **Card hover**: `transform: translateY(-2px)` + border `rgba(255,255,255,0.10)` → `rgba(255,255,255,0.16)` over 240ms. - **Link hover**: color `#2ba6ff` → `#5cbbff` over 150ms. - **Input focus**: 2px `#1488fc` ring fades in over 150ms; border picks up brand blue. - **Prompt focus**: ring + soft blue glow on the submit button; placeholder dims. ### Page Transitions Feature sections and template cards fade in via `IntersectionObserver` at ~80% viewport, 320ms with an 8px translate-up. The masthead persists across routes; the body cross-fades. ### Reduced Motion Honored globally via `prefers-reduced-motion: reduce`. All transforms become opacity-only; scroll-linked reveals snap to their final state; the blue glow renders statically rather than pulsing. ## 9. Accessibility & A11y ### Contrast Pairs - **`#ffffff` text on `#1e1e21` bg**: 16.63:1 — AAA at all sizes. - **`#b2b2b8` text-medium on `#1e1e21` bg**: 7.88:1 — AAA. - **`#a3a3a8` text-muted on `#1e1e21` bg**: 6.62:1 — AA at body sizes, comfortably above 4.5. - **`#8a8a8f` text-faint on `#1e1e21` bg**: 4.84:1 — AA at body sizes; use for placeholders and quietest microcopy only. - **`#1488fc` brand on `#1e1e21` bg**: 4.72:1 — AA for UI components and large text (the blue is used on buttons/borders, not as body text). - **`#2ba6ff` brand-bright on `#1e1e21` bg**: 6.34:1 — AA at body sizes; this is why links use the brighter blue, not `#1488fc`. - **`#f3f0f5` on-brand on `#1488fc` button**: 3.12:1 — meets AA for large text; the primary label is rendered at 15px/600 (large-text threshold). For body-size text on blue, prefer pure `#ffffff` (3.53:1). ### Focus Indicators - Default ring: `0 0 0 2px #1488fc` with 2px offset — the brand blue reads clearly against both the dark canvas and the blue button (where it appears as a halo). - All interactive surfaces show a visible focus state. ### ARIA Patterns - **Navigation**: `