---
name: Bolt
description: "A clean, professional dark-mode interface for an AI developer tool that balances bold typography with a restrained color palette."
version: alpha

colors:
  background: "#111114"
  primary: "#ffffff"
  secondary: "rgba(255,255,255,0.75)"
  tertiary: "#1488fc"
  neutral: "rgba(255,255,255,0.6)"
  bg-soft: "#1e1e21"
  bg-quiet: "#171719"
  muted-soft: "rgba(255,255,255,0.4)"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-0.9px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A modern dark-themed AI platform that allows users to create apps and websites through natural language.

*An AI-powered creative studio for developers.*

## Colors

High-contrast dark mode with a single vibrant blue accent.

- **Background (`#111114`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`rgba(255,255,255,0.75)`)** — uses `ink-soft` token
- **Accent (`#1488fc`)** — uses `accent` token
- **Muted (`rgba(255,255,255,0.6)`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

## Layout

Centered content with a fixed maximum width.

*Rhythm:* Consistent use of 4px increments with 16px and 24px as primary gutters.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid blue primary action, ghost secondary actions with rounded pill or small radii.
- **card:** Dark surfaces with subtle borders and soft shadows.
- **chip:** Outlines or minimal backgrounds for tags and tools.
- **input:** Dark text areas with soft borders and subtle inner shadows.
- **hero:** Large centered typography with a glowing blue curved gradient background.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```