# Bolt · Design system migration spec

> Source: https://bolt.new  ·  Curated by OpenDesign  ·  en

> A clean, professional dark-mode interface for an AI developer tool that balances bold typography with a restrained color palette.

## 1. Identity DNA

Bolt operates like an AI-powered creative studio, a workshop where developers assemble applications through natural language. Its design language reflects this directness: a focused, high-contrast environment that prioritizes clarity over ornamentation.

**One-liner:** A modern dark-themed AI platform that allows users to create apps and websites through natural language.
**Keywords:** AI · Builder · Developer · Modern · Prompt
**Analogy:** An AI-powered creative studio for developers.

## 2. Color

The system's palette is disciplined, built on a foundation of deep, high-contrast dark grays and blacks. A single, vibrant blue accent cuts through the darkness for interactive elements, ensuring immediate visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#111114` | main background |
| `--bg-soft` | `#1e1e21` | card background |
| `--bg-quiet` | `#171719` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `rgba(255,255,255,0.75)` | secondary text |
| `--muted` | `rgba(255,255,255,0.6)` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.4)` | weak hint |
| `--accent` | `#1488fc` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast dark mode with a single vibrant blue accent.

The core principle is restraint; every color choice is deliberate, maintaining a focused, high-technology atmosphere.

## 3. Typography

Typography relies on a clean, modern humanist sans-serif family, chosen for its clarity and approachability. A specialized display face is reserved for bold, tight-tracked headlines, establishing a voice that is both confident and technical.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1.2px | Hero headline |
| heading | 48px | 1.1 | 600 | -0.9px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Body text |
| small | 14px | 1.4 | 400 | 0px | UI labels and navigation |

## 4. Spacing

Spacing follows a strict 4px base unit, creating a consistent vertical and horizontal rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent use of 4px increments with 16px and 24px as primary gutters.

## 5. Surfaces

Surfaces are defined by depth through subtlety, using soft, dark shadows and thin, semi-transparent white borders. The effect is one of layered information without visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
  - 0px -15px 24.8px 0px rgba(17, 114, 226, 0.6)
- **Borders:** 1px solid rgba(255, 255, 255, 0.1)

## 6. Layout

The layout skeleton is a centered column with a fixed maximum width, providing a stable reading and interaction canvas. Generous gutters of 24px maintain breathing room between content blocks.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with a fixed maximum width.

## 7. Motion & Interaction

Motion philosophy is utilitarian; transitions are fast and smooth, serving to confirm interactions rather than decorate them. Micro-interactions like hover states and focus changes use quick opacity or color shifts.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color transitions on interactive elements
  - Opacity fades on hover and focus

- **Hover:** Subtle color shifts or opacity changes.
- **Click:** Immediate visual response.
- **Transition:** Fast 0.15s to 0.2s cubic-bezier transitions.
- **Keyboard:** Standard focus outlines.

## 8. Voice & Don'ts

The editorial voice is direct, empowering, and action-driven, speaking in clear questions and imperatives. It avoids technical jargon and formal corporate language in favor of clarity.

- **Tone:** Direct, empowering, and modern.
- **Headline style:** Question-oriented and action-driven.
- **CTA style:** Clear and imperative.
- **Avoid:** Technical jargon / Formal corporate language / Overly complex sentences

### Don'ts
- ❌ don't use a light background — the screenshot shows a strictly dark mode interface
- ❌ don't use a serif font — the screenshot shows a modern humanist sans-serif throughout
- ❌ don't add heavy drop shadows — the screenshot shows subtle, soft shadows at most
- ❌ don't use a wide variety of colors — the screenshot shows a strict palette of dark grays, white, and one vibrant blue
- ❌ don't use sharp, square corners — the screenshot shows consistently rounded corners and pill shapes
- ❌ don't use low-contrast text — the screenshot shows high-contrast white text on dark backgrounds

The system deliberately rejects light backgrounds, serif typography, heavy shadows, and color excess to maintain its focused, developer-oriented aesthetic.

## System Prompt (paste into AI tool)

```
Bolt.new is a modern AI-powered developer tool for building apps and websites through natural language. The design utilizes a deep, high-contrast dark mode palette with a vibrant electric blue (#1488fc) as the sole high-chroma accent. Typography relies on clean humanist-sans-serif families, including a specialized display face for bold, tight-tracked headlines. Critical constraints: do not introduce light backgrounds or secondary bright colors, avoid using serif fonts, and never apply harsh square corners to components. The overall layout is centered and spacious, emphasizing a clean, high-tech, and focused user experience.
```