What is Bolt.new's primary brand color?

Bolt.new runs two brand voltages on the same hue family. The primary button background is a deep cobalt blue wired into CSS as --bolt-elements-button-primary-background, with a slightly darker variant for the press state. The chrome voltage — focus rings, link text, sidebar buttons, loader progress, brand container fills — sits one step brighter as azure, wired as --bolt-ds-brandHighlight across 18+ custom properties. Both appear only on action surfaces; the rest of the page stays on the near-black canvas and its parallel surface tier. Together they carry every chromatic brand moment on the marketing page.

What typeface does Bolt.new use?

The system runs Inter for body, labels, and navigation, with Inter Display reserved for the 48px hero headline and a small set of large display moments. Body sits at 14-16px in weight 400; nav links and small labels at 14px in weight 500; the hero h1 hits 48px in weight 700 with -1.2px letter-spacing. The split between Inter and Inter Display is deliberate — Inter Display is tuned for larger sizes with tighter spacing, and Bolt only invokes it when text crosses about 20px. The mono tier is the system stack (ui-monospace, Fira Code, Menlo, Monaco) used inside the editor and terminal, declared as --bolt-font-monospace.

Why does Bolt use #111114 instead of pure black?

The canvas is a barely-blue near-black wired into CSS as --bolt-ds-surface (17 17 20 in RGB triplets). The editor surface and terminal background sit one step brighter at #1e1e21 (--bolt-ds-surfaceAltLight), and panel headers at #2c2c30 — three tones that ladder the workbench without ever going to true black. The choice keeps the cobalt CTA from glowing too aggressively against the floor (true #000000 would push the saturated blue into a halo) and leaves room for the white-alpha hairlines that mark every panel divider to read as a soft step rather than a harsh edge.

What is Bolt.new's corner-radius philosophy?

The system is binary: 12px for most surfaces and 9999px for pill CTAs and chips. There is no 4-6-8px micro-scale that dev tools like Vercel and Linear lean on; cards, the prompt box, the file-tree panel, and modal surfaces all hold at 12px. Larger feature cards step up to 16px and a few hero surfaces to 24px, but the dominant radius across the workbench is 12px. The pill 9999px appears on the primary CTA, secondary chips, and the brand container badges scattered through the sidebar. The gap between 12px and full-pill is the entire scale — nothing rounds at 4 or 6.

Can I use this DESIGN.md to build my own AI-builder marketing site?

Yes — feed the file to Claude, Cursor, or any tool that reads structured design tokens and it will reproduce Bolt.new's specific moves: near-black canvas with a parallel surface-2 step rather than a single flat dark tone, twin cobalt/azure voltages reserved exclusively for action surfaces, Inter Display only above 20px, 12px-or-pill radius without a small-step ladder underneath, and the terminal-color subpalette held back for actual code surfaces. Token references resolve cleanly — {colors.primary} for the CTA fill, {colors.surface-1} for the editor body, {typography.display-xl} for the hero. The one move worth borrowing only if you actually ship a workspace product: putting the live prompt above the fold.

Bolt.new Design System

Bolt.new's marketing system is its product surface — near-black canvas, Inter Display 48px headline, an electric azure CTA, and the live prompt box dropped into the hero.

About Bolt.new DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source bolt.new

AI & LLM Platforms
Developer Tools & IDEs

Bolt.new's landing surface does something most AI-builder brands tiptoe around: it puts the actual prompt box in the hero. The page opens on a near-black canvas, with an Inter Display headline "What will you build today?" at 48px / weight 700 floating above a live multi-line input — submit a sentence and the page tears down into a four-panel workspace (chat, file tree, code editor, web preview). There is no rotating product video, no animated demo loop; the marketing surface and the editor surface are the same dark workbench. Where Lovable wraps its hero in a candy gradient and Replit pushes a colorful avatar wall, Bolt.new keeps the whole landing chrome inside its own product palette and lets a single azure pill carry the only chromatic brand moment above the fold.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 14 color tokens drawn from the 250+ `--bolt-*` and `--cm-*` CSS custom properties StackBlitz exposes (a brighter azure and a deeper cobalt as twin brand voltages, near-black as the page floor, a parallel charcoal surface tier for the editor and terminal panels, a full terminal-color subpalette borrowed from xterm.js); 11 typography tokens running Inter and Inter Display at the same modest body weights but a sharper 700 display tier; a binary 12px / pill radius pair; and 14 component definitions covering the cobalt primary pill, the dark transparent prompt textarea, the white-alpha secondary button, the code-editor gutter, and the terminal cell.

Feed this file to Claude or Cursor and it reproduces Bolt.new's specific moves: near-black canvas instead of charcoal, twin azure voltages reserved for action surfaces, Inter Display for the hero with a heavier 700 weight than Spline or Vercel use, 12px default rounding without a 4px or 8px tier underneath, and the in-product terminal palette wired in as legitimate brand colors rather than buried inside the editor. The one move worth borrowing only if your product genuinely IS a workspace tool: the willingness to put the live prompt box above the fold instead of a marketing screenshot of it.

What makes it distinct

Prompt-as-herothe centered input field reading what will you build today is the live editor prompt, not a marketing screenshot of one
Twin azure voltagesa brighter azure carries chrome (focus rings, link text, loader progress) and a deeper cobalt fills the primary CTA, both reserved for action surfaces only
Inter plus Inter Displaybody sits on Inter at 14-16px / 400, the 48px hero hits Inter Display at weight 700 with tight tracking for a sharper marketing voice
Twelve-pixel default roundingcards, prompt box, and most surfaces hold at 12px while secondary chips and primary CTAs jump to fully-rounded pill
Terminal-palette colors live in the specbright ANSI green, magenta, red, and cyan map directly to the in-browser xterm.js terminal that ships inside every Bolt project

Live at bolt.new

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

bolt.new

Explore Bolt.new

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Bolt.new design system FAQ

Common questions about Bolt.new's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Bolt.new — official site

Bolt.new's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.