Switch between the rendered Visual preview and the Raw DESIGN.md.
Bolt's design system embodies a modern, high-performance aesthetic optimized for speed and productivity. The visual language combines deep dark tones with vibrant electric blues, creating a premium interface that feels cutting-edge and energetic. The system prioritizes clarity and accessibility through generous whitespace, refined typography, and carefully calibrated depth. This is a design system built for developers and creators who demand both beauty and function—UI elements feel lightweight and responsive, with minimal ornamentation. The overall mood is contemporary, forward-thinking, and trustworthy, designed to inspire confidence in an AI-powered builder platform.
Key Characteristics
#1488FC): Primary action buttons, key CTAs, brand identity#2BA6FF): Secondary interactions, hover states, links#111114): Primary text, dominant UI element backgrounds#F79009): Secondary actions, warnings, attention-grabbing elements#B7D7F6): Subtle backgrounds, disabled states, low-emphasis surfaces#8FC1F2): Interactive hover states, medium emphasis#64ACF6): Tertiary interactions, alternate accents#1488FC): Main action buttons#2BA6FF): Alternative actions, links#000000 at opacity): Dark overlays, modal backgrounds#FFFFFF): Primary background, card surfaces#FFFEFF): Subtle background variation, alternative surfaces#E5E7EB): Borders, dividers, disabled states#F3F0F5): Soft background accents#2C2C30): Secondary text, reduced emphasis#1E1E21): Tertiary text, fine detail#171719): Deepest text, maximum contrast#E5E7EB): Standard component borders#1E1E21): Dark-mode card backgrounds#FFFFFF at 10% opacity): Subtle borders on dark backgrounds#22C55E): Positive confirmation, successful states#00BC00): Alternative success indicator#EF4444): Error states, destructive actions, alerts#CD3131): Alternative error state, stronger warningPrimary: Inter Display (https://fonts.googleapis.com/), sans-serif
Secondary: Inter (https://fonts.googleapis.com/), sans-serif
Code: ui-monospace, monospace
Fallback stacks: Inter Display, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Inter Display | 48px | 700 | 48px | 0px | Brand hero text, page titles |
| Heading / H2 | Inter | 30px | 500 | 36px | 0px | Major section headers |
| Subheading / H3 | Inter | 18px | 500 | 28px | 0px | Section dividers, card titles |
| Feature Text / Span | Inter | 24px | 600 | 32px | 0px | Emphasis, highlight callouts |
| Button / CTA | Inter | 14px | 500 | 20px | 0px | Interactive elements, buttons |
| Input / Form | Inter | 14px | 400 | 20px | 0px | Form fields, input placeholders |
| Body Text / List Item | Inter | 16px | 400 | 24px | 0px | Body copy, lists, descriptions |
| Code | ui-monospace | 16px | 400 | 24px | 0px | Code snippets, terminal output |
0px maintains modern, tight typographic controlPrimary Button (Large)
#1488FC (Brand Blue)#F3F0F5 (Lavender Gray)12px5000px 10px32px6pxrgba(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 0px16px#1077E0 (darker blue), shadow intensifies slightly#0D5FA8, reduced shadow#B7D7F6, text #8FC1F2, no shadowSecondary Button (Ghost)
#FFFEFF (Off-White)12px5000px 10px32px6px1px solid rgba(255, 255, 255, 0.1) (subtle white border)rgba(0, 0, 0, 0.05) 0px 1px 2px 0px16pxrgba(255, 255, 255, 0.05), border opacity increases to 0.2rgba(255, 255, 255, 0.1), border 1px solid rgba(255, 255, 255, 0.3)rgba(255, 255, 255, 0.5), border rgba(255, 255, 255, 0.05)Icon Button (Circle)
#FFFEFF (Off-White)14px5000px32px32px9999px (fully rounded)1px solid rgba(255, 255, 255, 0.1)17.5pxrgba(255, 255, 255, 0.1), border opacity 0.2#1E1E21, text #2BA6FFText Button (Plain)
#FFFFFF (Pure White)16px40010px6px24px#2BA6FF, background rgba(43, 166, 255, 0.05)text-decoration: underline for link-style variantNavigation Button (Full Height)
rgba(255, 255, 255, 0.75) (semi-transparent white)14px5000px 10px49px0px20px#FFFFFF (full opacity), background rgba(255, 255, 255, 0.05)#2BA6FF, border-bottom 2px solid #2BA6FFStandard Card
#FFFFFF (Pure White)16px4000px (content padding applied separately)387px (example; adapt to content)350px (example; responsive)16px24px24px internal padding for text/imagesrgba(0, 0, 0, 0.1) 0px 10px 24px 0px, scale 1.02Dark Container (Badge/Avatar)
#1E1E21 (Dark Gray)#FFFFFF (Pure White)16px4000px40px40px9999px (circular)24pxflex, align-items: center, justify-content: centerFeature Card with Border
#FFFFFF (Pure White)#111114 (Dark Charcoal)16px40020px 24px16px1px solid #E5E7EB (Light Gray)rgba(0, 0, 0, 0.05) 0px 1px 3px 0px24px#2BA6FF, shadow rgba(20, 136, 252, 0.1) 0px 4px 12px 0pxText Input / Form Field
#FFFFFF (Pure White)#111114 (Dark Charcoal)14px40010px 12px40px6px1px solid #E5E7EB (Light Gray)20pxrgba(17, 17, 20, 0.5) (semi-transparent dark)#1488FC, box-shadow rgba(20, 136, 252, 0.1) 0px 0px 0px 3px#EF4444, box-shadow rgba(239, 68, 68, 0.1) 0px 0px 0px 3px#F3F0F5, text #2C2C30, border #E5E7EBTextarea
#FFFFFF (Pure White)#111114 (Dark Charcoal)14px40012px 12px100px6px1px solid #E5E7EB#1488FC, box-shadow rgba(20, 136, 252, 0.15) 0px 0px 0px 3pxSelect / Dropdown
#FFFFFF (Pure White)#111114 (Dark Charcoal)14px40010px 12px 10px 12px40px6px1px solid #E5E7EB#1488FC, box-shadow rgba(20, 136, 252, 0.1) 0px 0px 0px 3px#2BA6FFHeader Navigation
#FFFFFF depending on contextrgba(255, 255, 255, 0.75) (semi-transparent on dark), #111114 (on light)14px5000px 10px49px0px20pxflex, align-items: center, justify-content: center#FFFFFF (full opacity), background rgba(255, 255, 255, 0.05)#2BA6FF, border-bottom 2px solid #2BA6FFBreadcrumb Navigation
/ or > in rgba(255, 255, 255, 0.5)#2BA6FF#FFFFFF14px400#64ACF6Primary Link (Large Heading)
#FFFEFF (Off-White)24px6000px24px0px32px#2BA6FF, underline appears#1488FCSecondary Link (Body)
rgba(255, 255, 255, 0.75) (semi-transparent white)14px5000px 10px49px0px20px#FFFFFF, underline 2px solid #2BA6FF#2BA6FF, underline persistent#8FC1F2Success Badge
#22C55E (Success green)#FFFFFF12px5004px 10px24px6pxError Badge
#EF4444 (Error red)#FFFFFF12px5004px 10px24px6pxWarning Badge
#F79009 (Warm orange)#111114 (Dark charcoal for contrast)12px5004px 10px24px6pxNeutral Badge
#2C2C30 (Dark gray)#FFFFFF12px5004px 10px24px6px1px solid rgba(255, 255, 255, 0.1)Base Unit: 4px
Scale:
4px — Fine gaps, icon spacing8px — Tight component spacing, close relationships12px — Comfortable spacing, related elements16px — Standard padding, primary spacing20px — Generous padding, section breathing room24px — Card and container padding32px — Component margins, medium sections36px — Between feature blocks40px — Large component padding, emphasized areas48px — Section margins, clear separation64px — Large padding, major layout regions76px — Extra-large gaps, full-page sectionsUsage Context:
0px 10px or 10px 10px horizontal/vertical24px internal padding, 24px–48px gaps between12px gaps between inputs48px–76px margin between major sections8px–12px gaps between itemsMax Width: 1280px (default full-width; limit content to 1200px with side gutters of 40px)
Column Strategy: Flexible 12-column grid, adapts to 8 columns on tablet, 4 on mobile
Section Patterns:
64px padding top/bottom48px vertical margin, content centered or split 50/50 horizontally3 cards per row (desktop) with 24px gaps, responsive down to 1 on mobile49px, full-width background when neededNegative space is deliberate and purposeful. Wide margins and generous gaps between sections create visual breathing room and reduce cognitive load. Interior padding within components (16px–24px) prevents text from feeling cramped. Vertical rhythm guides the eye downward; horizontal alignment creates stability. Dark backgrounds demand more breathing room than light ones. Cards and containers float with intent, never crammed together.
0px — Navigation bars, full-width sections6px — Buttons, input fields, small components16px — Cards, larger containers, modals9999px — Icon buttons, avatars, badges with extreme rounding| Level | Treatment | Use |
|---|---|---|
| 0 (Flat) | No shadow | Default buttons, text elements, borders only |
| 1 (Subtle) | rgba(0, 0, 0, 0.05) 0px 1px 2px 0px | Input fields, secondary buttons, low-emphasis cards |
| 2 (Raised) | rgba(0, 0, 0, 0.1) 0px 4px 12px 0px | Hover cards, popovers, elevated content |
| 3 (Modal) | rgba(0, 0, 0, 0.2) 0px 10px 24px 0px | Modals, drawers, maximum prominence |
| 4 (Overlay) | rgba(0, 0, 0, 0.3) 0px 20px 40px 0px | Fullscreen overlays, dropdowns over all content |
Shadow Philosophy: Shadows in Bolt's design are used sparingly and with restraint. They serve primarily to distinguish interactive hover states and layered surfaces, creating subtle depth without theatrical drama. Most components rely on color, borders, and typography to establish hierarchy. When shadows appear, they're soft-edged and semi-transparent, reinforcing that elevation comes from purposeful interaction, not default styling. Dark backgrounds demand lighter, more diffused shadows to remain readable.
#1488FC) for all major CTAs — it commands attention and drives conversions#F79009) for primary actions — it's reserved for secondary emphasis1200px max-width with side gutters for readability| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–639px | Single column, 16px side margins, full-width cards, stacked navigation |
| Tablet | 640px–1023px | Two-column grid, 24px side margins, reduced heading sizes, sidebar collapses |
| Desktop | 1024px–1279px | 12-column grid, full navigation, 40px side margins, optimized card layouts |
| Wide | 1280px+ | Max-width 1200px centered, extended side padding, multi-column features |
44px × 44px (accessible minimum)48px × 48px (recommended for mobile)56px × 56px (buttons, primary actions)8px minimum gap to prevent mis-tapsMobile (320px–639px):
16px padding24px becomes 16px, 48px becomes 32pxTablet (640px–1023px):
24px padding but gaps reduce to 16px40px height preferred, 32px acceptableDesktop (1024px+):
24px gaps350px width; container max-width 1200px32px height standard, 40px for primary CTAsResponsive Font Scaling:
#1488FC)#2BA6FF)#111114)#FFFFFF)#E5E7EB)#22C55E)#EF4444)#F79009)rgba(255, 255, 255, 0.75))#F3F0F5)#1E1E21)14px font, 500 weight, Inter font, rounded at 6px (or 9999px if circular) — never use fonts outside Inter family#1488FC background with white/light text; secondary buttons are transparent with 1px solid rgba(255, 255, 255, 0.1) border — contrast matters16px border radius, no shadow by default, 24px internal padding — add shadows only on hover or elevation change40px height, 1px solid #E5E7EB border, focus ring rgba(20, 136, 252, 0.1) 0px 0px 0px 3px — always show focus state8px, 12px, 16px, 24px, 32px, 48px, 64px — maintain grid consistency48px 700, h2 30px 500, h3 18px 500, body 16px 400, button 14px 500 — stick to spec1200px centered; side margins are 40px desktop, 24px tablet, 16px mobile — use containers:hover, :active, and :focus states — no invisible interactions16px except on circular elements (9999px) — maintain modern aesthetic