<!-- Generated by ExtractVibe — https://extractvibe.com/brand/bolt.new -->
<!-- Extracted: 2026-07-11T01:19:25.541Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Bolt"
description: "Bolt AI projects a sleek, developer-centric aesthetic that balances technical precision with modern minimalism. The brand feels efficient and direct, utilizing a clean monochrome base punctuated by vibrant blue accents to signal action and innovation. It avoids clutter, focusing on clarity and speed to empower users to build without friction."
colors:
  primary: "#1488fc"
  tertiary: "#2ba6ff"
  surface: "#ffffff"
  surface-dark: "#171719"
  on-surface-dark: "#ffffff"
typography:
  display-lg:
    fontFamily: "Inter Display"
    fontSize: "48px"
    fontWeight: "700"
    lineHeight: "48px"
    letterSpacing: "-1.2px"
  headline-lg:
    fontFamily: "Inter"
    fontSize: "30px"
    fontWeight: "500"
    lineHeight: "36px"
  headline-md:
    fontFamily: "Inter"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "28px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "6px"
  md: "8px"
  lg: "9999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#ffffff"
    rounded: "0px"
    padding: "0px"
    fontSize: "24px"
    fontWeight: "400"
    borderColor: "#e5e7eb"
  button-outline:
    textColor: "#fffefe"
    rounded: "6px"
    padding: "0px 10px"
    fontSize: "12px"
    fontWeight: "500"
    borderColor: "#ffffff"
    borderWidth: "1px"
    boxShadow: "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"
  button-primary:
    backgroundColor: "#1488fc"
    textColor: "#f3f0f5"
    rounded: "6px"
    padding: "0px 10px"
    fontSize: "12px"
    fontWeight: "500"
    borderColor: "#e5e7eb"
    boxShadow: "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"
---

# Bolt — Design System

## Overview

Bolt’s design language is defined by ruthless efficiency and technical clarity, mirroring the precision of the code it helps generate. The aesthetic draws heavily from the disciplined minimalism of Linear and Vercel, prioritizing information density without sacrificing readability. It embodies the archetype of The Creator empowered by The Sage: tools that are intuitive yet powerful, stripping away decorative noise to reveal the underlying structure of development. The visual register is cool, calm, and authoritative, fostering a sense of flow state where friction is eliminated. Interfaces feel lightweight and responsive, using whitespace not as emptiness but as breathing room for complex tasks. This design is not playful, whimsical, or overly illustrative. It rejects skeuomorphism and heavy gradients in favor of flat, functional surfaces. It is not a consumer-facing social platform; it is a professional instrument for builders. The system relies on strict grid alignment, consistent spacing, and high-contrast data visualization to ensure that every pixel serves a functional purpose. Users should feel they are operating a high-performance machine, where the interface recedes to let the work take center stage. The atmosphere is one of focused intensity, supporting deep work through visual silence and deliberate action states. Every component is designed to accelerate the feedback loop between thought and implementation, ensuring that the toolchain remains invisible until needed. This approach builds trust through consistency and predictability, establishing a reliable foundation for complex AI-assisted workflows.

**Key characteristics:**

- Vibe — developer-first, minimalist, efficient, modern, technical, clean
- Archetypes — The Creator, The Sage
- Comparable to — Vercel, Linear, Stripe, Figma
- Design era — contemporary-minimal
- Emotional tone — efficient-confident
- Target audience — Developers, designers, and founders who value speed, technical capability, and clean interfaces over decorative elements.
- Visual energy — 7/10 (high-energy/bold)

## Colors

The palette anchors the brand in technical seriousness through a stark monochrome base, ensuring maximum legibility for dense code and data. White surfaces provide a clean canvas that reduces cognitive load, while subtle grays delineate structure without visual noise. The primary blue (#1488fc) acts as the sole vector for energy and direction, reserved strictly for interactive states, active elements, and key innovations. This high-contrast accent strategy signals action and progress without overwhelming the user, reinforcing the brand’s identity as a precise, efficient tool for modern developers.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#1488fc` | Dodger Blue |
| accent / tertiary | `#2ba6ff` | Dodger Blue |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| background | `#171719` | Near-Black |
| text | `#ffffff` | White |

## Typography

The type system utilizes Inter for its neutral, highly readable sans-serif geometry, optimized for screen rendering at various sizes. Inter Display provides weight and presence for headings, establishing a clear, authoritative hierarchy. Monospace fonts are integrated for code snippets and technical data, maintaining a direct connection to the developer’s native environment. This combination ensures that information is processed quickly and accurately, supporting the brand’s core values of speed and clarity. The hierarchy is strict and logical, guiding the eye through complex interfaces with minimal effort, reinforcing the feeling of a streamlined, professional workspace.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | google-fonts | 400, 500, 600 |
| Inter Display | heading | self-hosted | 700 |
| Inter | heading | google-fonts | 500 |
| ui-monospace | mono | system | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter Display | 48px | 700 | 48px | -1.2px |
| Heading 2 | Inter | 30px | 500 | 36px | — |
| Heading 3 | Inter | 18px | 500 | 28px | — |
| Body | Inter | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px
- Monospace — ui-monospace

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `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` |

### Gradients

- `linear-gradient(to right bottom in oklch, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0) 50%, rgba(17, 17, 20, 0.9) 100%)`

## Shapes

Border-radius scale:

- `sm` — 6px
- `md` — 8px
- `lg` — 9999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#ffffff`
- Radius — `0px`
- Padding — `0px`
- Font size — `24px`
- Font weight — `400`
- Border — ` solid #e5e7eb`

**Outline**

- Text — `#fffefe`
- Radius — `6px`
- Padding — `0px 10px`
- Font size — `12px`
- Font weight — `500`
- Border — `1px solid #ffffff`
- 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`
- Sample copy — "Sign in"

**Primary**

- Background — `#1488fc`
- Text — `#f3f0f5`
- Radius — `6px`
- Padding — `0px 10px`
- Font size — `12px`
- Font weight — `500`
- Border — ` solid #e5e7eb`
- 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`
- Sample copy — "Get started"

## Do's and Don'ts

### Do

- Use Inter 700 (self-hosted) for main headings in sentence-case, and Inter 400/500/600 for body text with a strict 24px line-height.
- Apply primary action buttons with background #1488fc, text #f3f0f5, 6px border-radius, and 10px horizontal padding; ensure no shadow is applied.
- Use ui-monospace (system font) for all code snippets and technical data to maintain a native, lightweight feel.
- Maintain a flat design aesthetic: avoid all box-shadows (rgba(0,0,0,0) 0px 0px 0px 0px) and rely on high-contrast borders or subtle gradients for separation.
- Utilize the accent color #2ba6ff for secondary highlights or hover states, keeping the primary palette limited to #1488fc, #2ba6ff, #ffffff, and #171719.
- Implement subtle linear gradients (oklch space, white at 15% opacity) only on dark mode backgrounds to add depth without clutter.
- Keep button borders sharp at 6px radius; avoid pill-shaped (9999px) buttons except for specific tag or badge elements.
- Write copy using direct imperative verbs (e.g., 'Build', 'Create') and avoid exclamations or emojis to maintain a professional, matter-of-fact tone.

### Don't

- Do not use Title Case for headings; strictly adhere to sentence-case to align with the brand's modern, understated voice.
- Do not apply drop shadows or blurs to interactive elements like buttons or cards; the brand is flat and lightweight.
- Do not use serif fonts or decorative typefaces; the entire system relies on Inter and ui-monospace.
- Do not use emoji in any marketing copy or UI labels; the brand maintains a clean, text-only aesthetic for communication.
- Do not use bright reds, greens, or yellows; restrict the color palette to blues, whites, and dark grays (#171719).
- Do not use 0px border-radius on primary buttons; maintain the consistent 6px rounding for all interactive controls.
- Do not use heavy, multi-layered shadows; if depth is needed, use subtle opacity gradients or border colors instead.
- Do not use formal, verbose language; keep vocabulary moderate and jargon heavy only where technically necessary for the developer audience.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 8/10 | casual |
| Playful ↔ Serious | 6/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 6/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — heavy
- CTA style — direct action-oriented verbs
- Rhetorical devices — imperative, contrast, repetition

### Sample copy

> What will you build today?

> Create stunning apps & websites by chatting with AI.

> Bolt does the heavy lifting for you, so you can focus on your vision instead of fighting errors.

> Stop building from scratch. Start building on-brand.

> No more juggling platforms or guessing which agent to use.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | svg | [link](brands/bolt.new/logo-0.svg) | 95% |
| favicon | — | png | [link](brands/bolt.new/logo-1.png) | 95% |
| favicon | — | png | [link](brands/bolt.new/logo-2.png) | 95% |
| favicon | — | png | [link](brands/bolt.new/logo-3.png) | 95% |
| favicon | — | png | [link](brands/bolt.new/logo-4.png) | 95% |

## Sources

- Official brand guidelines — https://www.bolt.com/media-kit
- Live brand page — https://extractvibe.com/brand/bolt.new
- Raw JSON — https://extractvibe.com/api/brand/bolt.new
- DESIGN.md (this file) — https://extractvibe.com/api/brand/bolt.new/design.md
- Extracted — 2026-07-11T01:19:25.541Z
- Generator — ExtractVibe vv1
- Quality score — 100/100