CURATED · OPEN · FREE

Bolt

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

aidev

↓ Download design system (5 MB)Open in OpenDesign

Visit: https://bolt.new

📦 Browse pack contents →

Identity DNA

AIBuilderDeveloperModernPrompt

An AI-powered creative studio for developers.

Color

#1488fcAccent

#ffffffInk

rgba(255,255,255,0.75)Ink soft

#111114BG

#1e1e21BG soft

#171719BG quiet

rgba(255,255,255,0.6)Muted

rgba(255,255,255,0.1)Line

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

Typography

humanist-sans · monospace

display56px · 700
heading48px · 600
body16px · 400
small14px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(255, 255, 255, 0.1)

0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px -15px 24.8px 0px rgba(17, 114, 226, 0.6)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered content with a fixed maximum width.

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Color transitions on interactive elements · Opacity fades on hover and focus

Subtle color shifts or opacity changes. · Immediate visual response.

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.

Voice & Don'ts

Tone Direct, empowering, and modern.
Headlines Question-oriented and action-driven.
CTAs Clear and imperative.

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
Avoid: Technical jargon
Avoid: Formal corporate language
Avoid: Overly complex sentences

Inside the pack — real screenshots

Bolt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko