№ bolt-new

Bolt New

Deep indigo expanse, crisp sans-serif clarity, and subtle gradients evoke focused digital space.

Specimenminimalism dark mode monochrome ai developer toolsdark

The design prioritizes clarity and functionality with a stark contrast between the bold white text and the deep blue background. The layout is clean and spacious, emphasizing the central call to action. It feels like a digital tool's landing page. · ai builder, no-code platform, developer tools, saas landing, dark ui, minimalist design, code generation, bolt ai, build with ai, developer platform

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · high-contrast · cool

SwatchHexOKLCHSuggested roleCopy

Hex#148cfc
OKLCHoklch(64.0% 0.192 253)
RoleDominant
find sites →
Hex#14448c
OKLCHoklch(39.9% 0.130 259)
RoleSurface
find sites →
Hex#7fbcf6
OKLCHoklch(77.6% 0.105 248)
RoleInk
find sites →
Hex#9c765c
OKLCHoklch(59.7% 0.061 56)
RoleAccent
find sites →
Hex#d4cfb7
OKLCHoklch(85.2% 0.033 97)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Inter Display	48px	700	1	-1.2px	Aa Bb Cc
h2	Inter	48px	700	1	-1.2px	Aa Bb Cc
h3	Inter	18px	600	1.56	0	Aa Bb Cc
body	Inter	16px	400	1.5	0	Aa Bb Cc
caption	Inter	14px	500	1.43	0	Aa Bb Cc
button	Inter	14px	500	1.43	0	Aa Bb Cc

Spacing scale

8px

10px

32px

40px

48px

50px

76px

80px

120px

192px

Radius scale

0px

4px

6px

7px

8px

12px

16px

24px

Container

Max content width 638px

Export

:root {
  --color-dominant: #148cfc;
  --color-surface: #14448c;
  --color-ink: #7fbcf6;
  --color-accent: #9c765c;
  --color-detail: #d4cfb7;
}

/* CSS variables exposed by source */
:root {
  --font-variations: "opsz" auto;
  --font-settings: "cv01", "ss03";
  --brands-supabase-button-background: rgb(12,143,95);
  --radius: .5rem;
  --brands-netlify-background: #05bdba22;
  --brands-supabase-accent: rgb(12,143,95);
  --brands-supabase-button-backgroundHover: rgb(24,177,117);
  --bolt-ds-dangerBgSubtleHover: #ef444433;
  --header-height: 50px;
  --cm-gutter-backgroundColor: rgb(23 23 25);
  --cm-search-backgroundColor: rgb(23 23 25);
  --un-ring-shadow: 0 0 rgb(0 0 0 / 0);
  --bolt-ds-dangerBgSubtle: #ef44441a;
  --cm-search-closeButton-backgroundColor: transparent;
  --workbench-inner-width: calc(calc(100% - clamp(300px, 450px, calc(100vw - 400px) )) - 1rem);
  --bolt-ds-iconSecondary: 164 163 172;
  --bolt-ds-onBrand: 238 249 255;
  --bolt-terminal-brightRed: #ff5c57;
  --bolt-ds-brandBorderSubtle: #2ba6ff1a;
  --un-rotate-y: 0;
  --cm-panels-borderColor: #2C2C30;
  --bolt-terminal-magenta: #ff6ac1;
  --bolt-ds-neutralBorderSubtle: #73737B1a;
  --bolt-terminal-brightWhite: #f1f1f0;
  --cm-search-input-backgroundColor: transparent;
  --bolt-ds-bgAltHover: 30 30 33;
  --bolt-terminal-green: #5af78e;
  --bolt-ds-onWarning: 255 250 235;
  --un-translate-z: 0;
  --cm-search-input-borderColor: #2C2C30;
  --bolt-terminal-cyan: #9aedfe;
  --bolt-ds-bgHover: 23 23 25;
  --un-translate-y: 0;
  --bolt-ds-textPrimary: 249 246 249;
  --cm-selection-backgroundColorFocused: rgb(20 136 252);
  --bolt-ds-onDangerBgSubtle: 248 113 113;
  --bolt-ds-brandBgSubtleHover: #2ba6ff33;
  --un-shadow: 0 0 rgb(0 0 0 / 0);
  --chat-prompt-bg: 30 30 33;
  --toastify-color-progress-error: rgb(239 68 68);
  --cm-textColor: rgb(249 246 249);
  --cm-tooltip-textColor: rgb(249 246 249);
  --un-scroll-snap-strictness: proximity;
  --bolt-terminal-white: #f1f1f0;
  --bolt-ds-inverseBg: 255 254 254;
  --cm-search-button-textColor: rgb(214 213 222);
  --bolt-ds-bgTertiaryAlt: 30 30 33;
  --bolt-ds-brand: 20 136 252;
  --bolt-ds-bgAlt: 23 23 25;
  --cm-foldGutter-textColorHover: rgb(249 246 249);
  --toastify-color-progress-success: rgb(22 163 74);
  --cm-search-button-backgroundColorHover: #FFFEFE0a;
  --bolt-ds-brandBgSubtle: #2ba6ff1a;
  --bolt-ds-bgTertiaryAltHover: 44 44 48;
  --bolt-ds-textTertiary: 164 163 172;
  --cm-search-button-backgroundColor: rgb(23 23 25);
  --cm-search-button-borderColorHover: transparent;
  --cm-cursor-width: 2px;
  --bolt-ds-successBgSubtleHover: #22c55e33;
  --bolt-ds-borderPrimary: #2C2C30;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Bolt New.
Reference design system (extracted from the live site):
- Palette: #148cfc, #14448c, #7fbcf6, #9c765c, #d4cfb7
- Typefaces: Inter Display, Inter
- Macrostructure: Specimen
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/bolt-new

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter Display

48px

700

-1.2px

Aa Bb Cc

Inter

48px

700

-1.2px

Aa Bb Cc

Inter

18px

600

1.56

Aa Bb Cc

body

Inter

16px

400

1.5

Aa Bb Cc

caption

Inter

14px

500

1.43

Aa Bb Cc

button

Inter

14px

500

1.43

Aa Bb Cc

:root { --color-dominant: #148cfc; --color-surface: #14448c; --color-ink: #7fbcf6; --color-accent: #9c765c; --color-detail: #d4cfb7; } /* CSS variables exposed by source */ :root { --font-variations: "opsz" auto; --font-settings: "cv01", "ss03"; --brands-supabase-button-background: rgb(12,143,95); --radius: .5rem; --brands-netlify-background: #05bdba22; --brands-supabase-accent: rgb(12,143,95); --brands-supabase-button-backgroundHover: rgb(24,177,117); --bolt-ds-dangerBgSubtleHover: #ef444433; --header-height: 50px; --cm-gutter-backgroundColor: rgb(23 23 25); --cm-search-backgroundColor: rgb(23 23 25); --un-ring-shadow: 0 0 rgb(0 0 0 / 0); --bolt-ds-dangerBgSubtle: #ef44441a; --cm-search-closeButton-backgroundColor: transparent; --workbench-inner-width: calc(calc(100% - clamp(300px, 450px, calc(100vw - 400px) )) - 1rem); --bolt-ds-iconSecondary: 164 163 172; --bolt-ds-onBrand: 238 249 255; --bolt-terminal-brightRed: #ff5c57; --bolt-ds-brandBorderSubtle: #2ba6ff1a; --un-rotate-y: 0; --cm-panels-borderColor: #2C2C30; --bolt-terminal-magenta: #ff6ac1; --bolt-ds-neutralBorderSubtle: #73737B1a; --bolt-terminal-brightWhite: #f1f1f0; --cm-search-input-backgroundColor: transparent; --bolt-ds-bgAltHover: 30 30 33; --bolt-terminal-green: #5af78e; --bolt-ds-onWarning: 255 250 235; --un-translate-z: 0; --cm-search-input-borderColor: #2C2C30; --bolt-terminal-cyan: #9aedfe; --bolt-ds-bgHover: 23 23 25; --un-translate-y: 0; --bolt-ds-textPrimary: 249 246 249; --cm-selection-backgroundColorFocused: rgb(20 136 252); --bolt-ds-onDangerBgSubtle: 248 113 113; --bolt-ds-brandBgSubtleHover: #2ba6ff33; --un-shadow: 0 0 rgb(0 0 0 / 0); --chat-prompt-bg: 30 30 33; --toastify-color-progress-error: rgb(239 68 68); --cm-textColor: rgb(249 246 249); --cm-tooltip-textColor: rgb(249 246 249); --un-scroll-snap-strictness: proximity; --bolt-terminal-white: #f1f1f0; --bolt-ds-inverseBg: 255 254 254; --cm-search-button-textColor: rgb(214 213 222); --bolt-ds-bgTertiaryAlt: 30 30 33; --bolt-ds-brand: 20 136 252; --bolt-ds-bgAlt: 23 23 25; --cm-foldGutter-textColorHover: rgb(249 246 249); --toastify-color-progress-success: rgb(22 163 74); --cm-search-button-backgroundColorHover: #FFFEFE0a; --bolt-ds-brandBgSubtle: #2ba6ff1a; --bolt-ds-bgTertiaryAltHover: 44 44 48; --bolt-ds-textTertiary: 164 163 172; --cm-search-button-backgroundColor: rgb(23 23 25); --cm-search-button-borderColorHover: transparent; --cm-cursor-width: 2px; --bolt-ds-successBgSubtleHover: #22c55e33; --bolt-ds-borderPrimary: #2C2C30; }

Build a landing page in the visual style of Bolt New. Reference design system (extracted from the live site): - Palette: #148cfc, #14448c, #7fbcf6, #9c765c, #d4cfb7 - Typefaces: Inter Display, Inter - Macrostructure: Specimen Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/bolt-new