# Bolt (bolt.new) — Marketing site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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.

## 3. Typography Rules

- Display: `Inter Display` — the h1 only.
- Everything else: `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.

## 4. Component Stylings

- **Nav** — `position: fixed`, height **50px**, fully transparent, separated only by a `1px solid #2c2c30` bottom rule. Links 14/20/500 in `#d6d5de` inside 46px hit areas at radius 8px.
- **Primary button** — `#1488fc` fill, `#f9f6f9` label, radius **6px**, height **32px**, padding `0 10px`, 12/16 at 500.
- **Secondary button** — `#111114` fill, `1px solid #2c2c30`, `#f9f6f9` label, same 6px / 32px geometry.
- **Composer (the hero)** — 640 × 139px, ground `#1e1e21`, radius **24px**, `1px solid #2c2c30`, lifted by `rgba(0,0,0,.35) 0 0 40px -12px`. Placeholder in `#73737b`; a circular `+` attach button at the left; a ghost "Plan" pill (transparent, 9999px, 36px, 12/16 at 400 in `#a4a3ac`) and the **Build now** pill (`#2ba6ff`, white, 9999px, 36px, `0 16px`, 14/20 at 500) at the right.
- **Capability tile** — 64 × 88px, transparent, radius 6px, icon over a 12/16 label in `#d6d5de`.
- **Badge** — `#1488fc` fill, `#eef9ff` label, radius `9999px`, height 14px, padding `2px 6px`, 10px at 500.
- **Import pill** — `rgba(16,20,27,.55)` fill, `1px` border, radius `9999px`, height 28px, padding `0 8px`, 12/16 at 500, with a leading brand glyph.
- **Bento card** — `#171719`/`#1e1e21` ground, radius **24px**, `1px solid #2c2c30`, no drop shadow; the top edge carries `inset 0 1px 0 rgba(255,255,255,.05)`.

## 5. Layout Principles

Fixed 50px nav over a full-bleed hero panel that is top-rounded at 16px and inset from the viewport edges, so it reads as a card rather than a background. The composer sits centred at 640px inside it, under a 48px headline and an 18px sub, with the capability tiles and the "or import from" row beneath — the entire above-the-fold is the product's own entry field. Below, a greyscale logo wall, then a centred two-tone section heading, then an asymmetric bento grid of 24px cards.

## 6. Depth & Elevation

Radius scale by frequency: `9999px` (pills, badges) · `6px` (buttons, tiles) · `12px` · `8px` · `4px` · `16px` (the hero panel's top corners, as `16px 16px 0 0`) · `24px` (composer and bento cards).

```css
/* signature top bevel — the primary separator, on 5 elements */
box-shadow: rgba(255,255,255,.05) 0 1px 0 0 inset;

/* small contact shadow */
box-shadow: rgba(0,0,0,.05) 0 1px 2px 0;

/* composer / floating card glow */
box-shadow: rgba(0,0,0,.35) 0 0 40px -12px;
```

Philosophy: **hairline plus inset highlight, not drop shadow.** On a near-black ground a 1px `#2c2c30` border plus a 5%-white top bevel does the lifting; the only real shadow is the composer's wide, negative-spread glow. One `backdrop-filter: blur(10px) saturate(1.2)` is used on floating chrome.

## 7. Motion

House transition is `0.15s cubic-bezier(0.4, 0, 0.2, 1)` (30 elements), with `0.2s cubic-bezier(0.4, 0, 0.2, 1)`, `0.2s ease` and `0.3s cubic-bezier(0, 0, 0.2, 1)` as secondary steps. No keyframe library or scroll-driven animation detected; there is no video and no canvas on the page.

## 8. Backgrounds, Effects & WebGL

The blue hero field is **a raster image, not CSS** — `background.webp`, sized `100% 100%` and pinned to `50% 0%`, so the electric blue bloom is painted artwork rather than a gradient stack. CSS gradients are used sparingly and only as light sources:

```css
/* the small "light source" point above each section heading */
radial-gradient(circle, rgb(17,114,226) 0%, rgba(17,114,226,0) 70%);

/* blue haze falling from the top edge of a card */
radial-gradient(74.14% 99.89% at 50% 0%, rgba(59,130,246,.25) 0%, rgba(30,30,33,0) 100%);

/* fading rule */
linear-gradient(90deg, rgb(20,136,252) 8.51%, rgba(20,136,252,0) 97.71%);
```

Plus one very large `radial-gradient(50% 50%, #1e1e21 0%, rgba(30,30,33,0) 100%)` ambient wash at 2300 × 2300px. No blend modes, no grain, no WebGL.

## 9. Do's and Don'ts

### Do
- Open on the composer — it is the hero, not a screenshot of one.
- Keep the surface ladder tight: `#111114` → `#171719` → `#1e1e21` → `#2c2c30`, nothing outside it.
- Separate cards with a `1px #2c2c30` hairline plus the `inset 0 1px 0 rgba(255,255,255,.05)` bevel.
- Set display type at 48/48 with -1.2px tracking, and split section headings two-tone (`#a4a3ac` then `#ffffff`).
- Pair each semantic hue with its 10% `1a` subtle background rather than filling with it.
- Keep chrome small — 14px nav, 12px buttons at 32px height.

### Don't
- Don't use `#ffffff` for text; primary is the warm `#f9f6f9`.
- Don't introduce a second accent — `#1488fc`/`#2ba6ff` is the only hue in chrome.
- Don't reach for drop shadows on cards, or for glass/violet/gradient-mesh treatments.
- Don't apply negative tracking below 24px.
- Don't let the terminal palette leak out of the terminal.
- Don't make buttons pills — only the composer's inline actions and badges are `9999px`; page buttons are `6px`.

## 10. Responsive Behavior

Not captured — desktop viewport only (1512px).

## 11. Agent Prompt Guide

- Canvas `#111114` · Text `#f9f6f9` · Muted `#a4a3ac` · Border `#2c2c30` · Accent `#1488fc`
- Font: Inter (Inter Display for h1) · Body: 16px · Radius: 6px button / 24px card · Control height: 32px
- Focus: not captured · Hover fill: `#2c2c30` (or the 4%-white `#fffefe0a` wash)

<bolt_design_language>
A near-black AI-builder page that opens straight onto its own prompt composer instead of a marketing hero. Surfaces run a very tight four-step ladder — canvas #111114, ground #171719, cards #1e1e21, hover #2c2c30 — separated by 1px #2c2c30 hairlines plus a signature inset 0 1px 0 rgba(255,255,255,.05) top bevel, never a drop shadow; the only real shadow is the composer's rgba(0,0,0,.35) 0 0 40px -12px glow. Text is a warm off-white #f9f6f9 stepping to #d6d5de and #a4a3ac, and section headings are two-toned within one sentence, grey clause then white clause. Inter Display sets the 48/48 headline at 700 with -1.2px tracking; everything below 24px returns to normal tracking, with 14px nav and small 12/16 buttons at 32px on a 6px radius. One accent, #1488fc (hover #2ba6ff), on the primary button, badges and the raster blue hero field; every semantic hue ships with a 10% 1a subtle background rather than a solid fill. The composer is 640x139 at 24px radius holding a ghost Plan pill and a #2ba6ff Build-now pill. Motion is 0.15s cubic-bezier(.4,0,.2,1). Feels: dark, engineered, focused, electric. Avoid: pure white text, a second accent, violet or gradient-mesh treatments, card drop shadows, pill-shaped page buttons, or negative tracking on small text.
</bolt_design_language>