Bolt — design system & UI screens

AI · 1 screen · 2 sections · bolt.new

Pitch-black landing with a centered "What will you build today?" hero where "build" is set in an italic blue gradient, anchored by a large rounded prompt textarea ("Let's build an MVP for my") carrying a Standard model dropdown, Plan toggle, and a blue "Build now" send button. The signature element is the luminous arc of a planet's horizon — a bright cyan-white rim light curving across the lower hero behind the input — with "or import from Figma / GitHub" chips beneath. Below, a "Your company's design system, now in Bolt" section begins a row of rounded app-preview screenshots.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/bolt.

Decoded design system

Bolt's decoded design system: background #111114, text #ECECEE, accent #2BA6FF, link #2BA6FF, primary #1488FC; type scale h1 48px / h2 30px / body 16px; 4px spacing base; 6px base radius. The single interactive/action color is #1488FC — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Using these colors

• Action color #1488FC — the single interactive color; only on things you click or must notice, never large fills.
• primary, button_bg are all #1488FC — one role, not several (the action color).
• accent, link are all #2BA6FF — one role, not several (the action color).
• accent #2BA6FF — accent for emphasis — keep it rare on the page.
• secondary #3D1B1E — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

• Heading: Inter Display
• Body: Inter
• h1: 48px
• h2: 30px
• body: 16px

Spacing

• base unit: 4px
• scale: 2px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 20px, 24px

Radii

• base: 6px
• button: 6px

Shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

Shadows (elevation)

• subtle: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
• card: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(23, 23, 23) 0px 0px 0px 6px, rgba(0, 0, 0, 0) 0px 0px 0px 0px
• overlay: rgba(17, 114, 226, 0.6) 0px -15px 24.8px 0px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

• durations: 150ms · 250ms · 300ms
• easings: cubic-bezier(0.4, 0, 0.2, 1) · linear
• animated properties: color, background-color, border-color, opacity

Native design tokens

…and 92 more measured on the page.

Button states (measured)

• primary hover: background #2BA6FF
• primary focus: outline 2px auto rgb(43, 166, 255)

Layout (measured)

• container max-width: 1280px
• nav: 50px fixed, backdrop blur(17px)
• common grid: 2 columns

Motion choreography (measured)

Load order: div.relative×2 → div.relative×2 → div.relative

Responsive (measured)

• mobile (390px): hero 48px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

• AI app builder landing with centered prompt box over a glowing planet-horizon hero

Sections (2)

• Hero — Centered prompt box over glowing planet-horizon
• Feature — Your company's design system, now in Bolt