A product page with no marketing hero at all: it opens directly onto its own prompt composer, a 640x139 card at 24px radius sitting on a full-bleed field of electric blue that turns out to be a raster background.webp rather than a CSS gradient. Everything below drops back to a strikingly tight four-step surface ladder — #111114 canvas, #171719 ground, #1e1e21 cards, #2c2c30 hover — all published as a --bolt-ds-* token set in space-separated RGB, where cards are lifted by a 1px hairline plus a signature inset 0 1px 0 rgba(255,255,255,.05) top bevel instead of a drop shadow. Text is a faintly warm off-white #f9f6f9, never pure white, and section headings are two-toned inside a single sentence: a grey clause in #a4a3ac followed by a white one, each lit by a small radial light-source point placed directly above it. Inter Display sets 48/48 at 700 with -1.2px tracking while chrome runs unusually small at 14px nav and 12/16 buttons on a 6px radius, and one blue #1488fc carries the primary button, the badges and the hero field, with every semantic hue shipping a 10% subtle ground rather than a solid fill.
Browse Bolt in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: bolt.new (live DOM, computed styles + the published --bolt-ds-* token set), 2026-07-21. Coverage: home page — nav, composer hero, capability tiles, logo wall, "Empowering product builders" section, bento cards. Logged-in builder not captured (needs login). Responsive: not captured.
A near-black product page that opens directly onto the prompt composer — there is no marketing hero above it, the composer *is* the hero. The one saturated thing on the page is a full-bleed raster field of electric blue behind that composer, top-rounded like a panel slid up under the nav; everything below it drops back to a very tight near-black ladder where cards are separated by 1px hairlines and a signature inset 0 1px 0 rgba(255,255,255,.05) top bevel rather than drop shadows. Section headings are two-toned — half the sentence in grey, half in white — and each is lit by a single small radial "light source" glow directly above it. It deliberately avoids the AI-builder defaults: no violet, no gradient mesh, no glass, no illustration.
Feels: dark, engineered, focused, electric.
The site ships a published design-system token set, --bolt-ds-*, most of it as space-separated RGB triples.
Text & icons
| Token | Hex | Role / usage |
|---|---|---|
textPrimary / iconPrimary / onNeutral | #f9f6f9 | Headings, primary text (a faintly warm off-white, not #fff) |
textSecondary | #d6d5de | Body copy, nav links |
textTertiary / iconSecondary / neutralHover | #a4a3ac | Muted copy, the grey half of two-tone headings |
iconTertiary / neutral / onNeutralBgSubtle | #73737b | Tertiary icons, placeholders |
Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
bg / onInverseBg | #111114 | Page canvas |
bgAlt / bgHover / bgSecondary | #171719 | Body ground, terminal background |
bgAltHover / bgTertiary / bgSecondaryHover | #1e1e21 | Cards, the composer |
bgTertiaryHover / bgTertiaryAltHover | #2c2c30 | Deepest hover step |
borderPrimary / divider | #2c2c30 | Every hairline, including the nav's bottom rule |
borderSecondary | #1e1e21 | Softer internal divider |
utilHover | #fffefe0a | 4%-white universal hover wash |
inverseBg / inverseBgHover | #fffefe / #f9f6f9 | Inverted (white) surfaces |
neutralBgSubtle / neutralBorderSubtle | #73737b1a | 10% neutral chip ground |
The whole ladder spans only #111114 → #2c2c30 — four steps inside 27 levels of grey.
Accent
| Token | Hex | Role / usage |
|---|---|---|
brand | #1488fc | Primary button, badges, the blue field |
brandHover / onBrandBgSubtle | #2ba6ff | Hover, and the composer's Build-now fill |
onBrand | #eef9ff | Text on brand |
brandBgSubtle / brandBorderSubtle | #2ba6ff1a | 10% brand chip ground (hover #2ba6ff33) |
Semantic
| Token | Hex | Role / usage |
|---|---|---|
danger / dangerHover | #ef4444 / #dc2626 | Destructive |
onDanger / onDangerBgSubtle | #fef2f2 / #f87171 | — |
success / successHover | #16a34a / #4ade80 | Success |
onSuccess / onSuccessBgSubtle | #f0fdf4 / #22c55e | — |
warning / warningHover | #f79009 / #fdb022 | Warning |
onWarning / onWarningBgSubtle | #fffaeb / #f79009 | — |
Terminal palette (--bolt-terminal-*, quarantined to the embedded terminal): background #171719, blue #57c7ff, cyan #9aedfe, green #5af78e, magenta #ff6ac1, red #ff5c57, yellow #f3f99d, white #f1f1f0, brightBlack #686868.
Rules: one accent, #1488fc, on the primary button, badges and the hero field only. Every semantic hue is paired with its own 1a (10%) subtle-background and 33 (20%) hover variant rather than being used at full strength as a fill.
Inter Display — the h1 only.Inter.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| h1 (Inter Display) | 48 / 48 | 700 | -1.2px |
| h2 section | 48 / 48 | 700 | -1.2px |
| h3 card title | 18 / 28 | 600 | normal |
| Lead paragraph | 18 / 28 | 500 | normal |
| Body | 16 / 24 | 400 | normal |
| Nav link | 14 / 20 | 500 | normal |
| Button label | 12 / 16 | 500 | normal |
| Composer CTA | 14 / 20 | 500 | normal |
| Badge | 10 | 500 | normal |
Patterns: display type is set at a 1.0 line-height with -2.5% tracking so headlines stack tightly; below 24px, tracking returns to normal everywhere. The distinguishing move is that section headings are two-toned — the first clause in #a4a3ac, the emphasised clause in #ffffff, inside one sentence. Chrome runs unusually small: nav 14px, buttons 12px.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.