What will you build today?

Create stunning apps & websites by chatting with AI.

Let’s build a prototype…
+ ☉ Plan Build now ➤
🌐
Website
New
📊
Slides
Prototype
or import from▢ Figma◉ GitHub
GoogleCLOUDFLAREawsMicrosoftstripesalesforce

Empowering product builders
with the most powerful coding agents

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

The best model, every time

Bolt automatically routes to the right model for each task, balancing quality and cost.

Bolt Agent
StandardAll users
Max🔒 Pro only

Build big without breaking

Bolt handles projects 1,000 times larger than before, running the toolchain in the browser.

$ npm run dev
✓ deps installed in 1.2s
› local http://localhost:5173
! 2 warnings
x type error in App.tsx line 42
Controls

Small chrome, one blue

Get started Primary · hover Sign in Secondary · hover Ghost Ghost · hover Delete Disabled
Build now ➤ ☉ Plan ▢ Figma New brandBgSubtle neutralBgSubtle
Describe your app… A dashboard for my team

Page buttons are 32px at 6px radius with 12/16 labels — only the composer’s inline actions and badges go to 9999px. Hover is either the next surface step #2c2c30 or the 4%-white wash #fffefe0a. Every semantic hue also ships as a 10% 1a subtle background with a 20% 33 hover.

Typography

Inter Display, then Inter

h1 · Inter Display · 48/48 · 700 · -1.2pxWhat will you build today?
h2 section · Inter · 48/48 · 700 · -1.2pxEmpowering product builders
h3 card title · Inter · 18/28 · 600 · normalThe best model, every time
Lead · Inter · 18/28 · 500 · normalCreate stunning apps & websites by chatting with AI.
Body · Inter · 16/24 · 400 · normalBolt automatically routes to the right model for each task.
Nav link · Inter · 14/20 · 500 · normalCommunity · Enterprise · Careers · Pricing
Button label · Inter · 12/16 · 500 · normalGet started
Composer CTA · Inter · 14/20 · 500 · normalBuild now
Badge · Inter · 10 · 500 · normalNew
Palette

--bolt-ds-*

Text & icons
textPrimary#f9f6f9
textSecondary#d6d5de
textTertiary#a4a3ac
neutral / iconTertiary#73737b
Surfaces & borders
bg#111114
bgAlt / bgSecondary#171719
bgTertiary#1e1e21
bgTertiaryHover#2c2c30
borderPrimary / divider#2c2c30
borderSecondary#1e1e21
utilHover#fffefe0a
inverseBg#fffefe
neutralBgSubtle#73737b1a
Accent
brand#1488fc
brandHover#2ba6ff
onBrand#eef9ff
brandBgSubtle#2ba6ff1a
Semantic — each with its own 10% subtle ground
danger#ef4444
dangerHover#dc2626
onDanger#fef2f2
onDangerBgSubtle#f87171
success#16a34a
successHover#4ade80
onSuccess#f0fdf4
onSuccessBgSubtle#22c55e
warning#f79009
warningHover#fdb022
onWarning#fffaeb
Terminal — quarantined to the embedded terminal
term background#171719
blue#57c7ff
cyan#9aedfe
green#5af78e
magenta#ff6ac1
red#ff5c57
yellow#f3f99d
white#f1f1f0
brightBlack#686868
Depth & motion

Hairline plus bevel, not shadow

4px
6px button / tile
8px
12px
16px 16px 0 0 hero panel
24px composer / card
9999px pill
bevel · rgba(255,255,255,.05) 0 1px 0 0 inset
contact · rgba(0,0,0,.05) 0 1px 2px 0
glow · rgba(0,0,0,.35) 0 0 40px -12px
blue haze from the top edge

Motion is 0.15s cubic-bezier(.4, 0, .2, 1) on 30 elements, with 0.2s and 0.3s variants for larger moves. No keyframe library, no video, no canvas. One backdrop-filter: blur(10px) saturate(1.2) on floating chrome. The blue hero field is a raster background.webp, not a CSS gradient — the version above is an approximation.