№ builder-io--c-docs-widgets

Builder

Deep, dark code temple: crisp, geometric sans-serifs on a stark, digital canvas.

Specimenminimalism monochrome brutalism swiss developer tools saaslight

The page prioritizes code display with a stark, dark aesthetic. Typography is clean and functional, emphasizing clarity over ornamentation. The overall mood is focused and efficient, reflecting a developer-centric product. · developer tools, code platform, saas interface, dark ui, technical website, code editor, builder io, minimal design, coding 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: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#24defb
OKLCHoklch(82.8% 0.139 212)
RoleDominant
find sites →
Hex#107195
OKLCHoklch(51.5% 0.099 230)
RoleSurface
find sites →
Hex#2cf0f8
OKLCHoklch(87.0% 0.142 199)
RoleInk
find sites →
Hex#ab795b
OKLCHoklch(61.9% 0.076 52)
RoleAccent
find sites →
Hex#bdbebf
OKLCHoklch(80.1% 0.002 248)
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	Geist	56px	500	1.05	-1.12px	Aa Bb Cc
h2	Geist	46px	500	1.1	-0.92px	Aa Bb Cc
h3	Geist	28px	500	1.15	-0.56px	Aa Bb Cc
body	Poppins	16px	400	1	0	Aa Bb Cc
button	Geist	15px	500	1.4	0	Aa Bb Cc

Spacing scale

4px

8px

12px

Radius scale

0px

6px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #24defb;
  --color-surface: #107195;
  --color-ink: #2cf0f8;
  --color-accent: #ab795b;
  --color-detail: #bdbebf;
}

/* CSS variables exposed by source */
:root {
  --border: 220 10% 90%;
  --color-muted-foreground: hsl(220 5% 45%);
  --color-amber-400: oklch(82.8% .189 84.429);
  --text-2xl: 1.5rem;
  --color-slate-200: oklch(92.9% .013 255.508);
  --color-emerald-300: oklch(84.5% .143 164.978);
  --color-sky-500: oklch(68.5% .169 237.323);
  --color-slate-700: oklch(37.2% .044 257.287);
  --color-violet-600: oklch(54.1% .281 293.009);
  --text-7xl: 4.5rem;
  --color-red-900: oklch(39.6% .141 25.723);
  --text-lg: 1.125rem;
  --primary-foreground: 0 0% 100%;
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-amber-600: oklch(66.6% .179 58.318);
  --color-yellow-800: oklch(47.6% .114 61.907);
  --color-slate-500: oklch(55.4% .046 257.417);
  --color-emerald-700: oklch(50.8% .118 165.612);
  --text-base--line-height: 1.5;
  --color-red-200: oklch(88.5% .062 18.334);
  --color-blue-300: oklch(80.9% .105 251.813);
  --color-card-foreground: hsl(220 10% 10%);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-yellow-400: oklch(85.2% .199 91.936);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --accent-foreground: 220 10% 15%;
  --color-slate-300: oklch(86.9% .022 252.894);
  --color-amber-300: oklch(87.9% .169 91.605);
  --color-primary-foreground: hsl(0 0% 100%);
  --color-green-500: oklch(72.3% .219 149.579);
  --color-emerald-600: oklch(59.6% .145 163.225);
  --color-violet-400: oklch(70.2% .183 293.541);
  --text-lg--line-height: calc(1.75 / 1.125);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-white: #fff;
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-slate-400: oklch(70.4% .04 256.788);
  --radius-sm: calc(.5rem - 4px);
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --color-yellow-300: oklch(90.5% .182 98.111);
  --font-weight-bold: 700;
  --radius: .5rem;
  --color-emerald-100: oklch(95% .052 163.051);
  --color-red-800: oklch(44.4% .177 26.899);
  --color-red-500: oklch(63.7% .237 25.331);
  --color-background: hsl(0 0% 100%);
  --color-emerald-200: oklch(90.5% .093 164.15);
  --text-xs--line-height: calc(1 / .75);
  --color-violet-500: oklch(60.6% .25 292.717);
  --color-amber-800: oklch(47.3% .137 46.201);
  --color-green-900: oklch(39.3% .095 152.535);
  --radius-2xl: 1rem;
  --radius-md: calc(.5rem - 2px);
  --color-sky-700: oklch(50% .134 242.749);
  --color-blue-800: oklch(42.4% .199 265.638);
  --text-7xl--line-height: 1;
  --text-xl: 1.25rem;
  --radius-lg: .5rem;
  --color-violet-700: oklch(49.1% .27 292.581);
}

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 Builder.
Reference design system (extracted from the live site):
- Palette: #24defb, #107195, #2cf0f8, #ab795b, #bdbebf
- Typefaces: Geist, Poppins
- 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/builder-io--c-docs-widgets

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Geist

56px

500

1.05

-1.12px

Aa Bb Cc

Geist

46px

500

1.1

-0.92px

Aa Bb Cc

Geist

28px

500

1.15

-0.56px

Aa Bb Cc

body

Poppins

16px

400

Aa Bb Cc

button

Geist

15px

500

1.4

Aa Bb Cc

:root { --color-dominant: #24defb; --color-surface: #107195; --color-ink: #2cf0f8; --color-accent: #ab795b; --color-detail: #bdbebf; } /* CSS variables exposed by source */ :root { --border: 220 10% 90%; --color-muted-foreground: hsl(220 5% 45%); --color-amber-400: oklch(82.8% .189 84.429); --text-2xl: 1.5rem; --color-slate-200: oklch(92.9% .013 255.508); --color-emerald-300: oklch(84.5% .143 164.978); --color-sky-500: oklch(68.5% .169 237.323); --color-slate-700: oklch(37.2% .044 257.287); --color-violet-600: oklch(54.1% .281 293.009); --text-7xl: 4.5rem; --color-red-900: oklch(39.6% .141 25.723); --text-lg: 1.125rem; --primary-foreground: 0 0% 100%; --color-blue-700: oklch(48.8% .243 264.376); --color-amber-600: oklch(66.6% .179 58.318); --color-yellow-800: oklch(47.6% .114 61.907); --color-slate-500: oklch(55.4% .046 257.417); --color-emerald-700: oklch(50.8% .118 165.612); --text-base--line-height: 1.5; --color-red-200: oklch(88.5% .062 18.334); --color-blue-300: oklch(80.9% .105 251.813); --color-card-foreground: hsl(220 10% 10%); --color-gray-300: oklch(87.2% .01 258.338); --color-yellow-400: oklch(85.2% .199 91.936); --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --accent-foreground: 220 10% 15%; --color-slate-300: oklch(86.9% .022 252.894); --color-amber-300: oklch(87.9% .169 91.605); --color-primary-foreground: hsl(0 0% 100%); --color-green-500: oklch(72.3% .219 149.579); --color-emerald-600: oklch(59.6% .145 163.225); --color-violet-400: oklch(70.2% .183 293.541); --text-lg--line-height: calc(1.75 / 1.125); --color-red-400: oklch(70.4% .191 22.216); --color-white: #fff; --color-gray-400: oklch(70.7% .022 261.325); --color-blue-400: oklch(70.7% .165 254.624); --color-slate-400: oklch(70.4% .04 256.788); --radius-sm: calc(.5rem - 4px); --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --color-yellow-300: oklch(90.5% .182 98.111); --font-weight-bold: 700; --radius: .5rem; --color-emerald-100: oklch(95% .052 163.051); --color-red-800: oklch(44.4% .177 26.899); --color-red-500: oklch(63.7% .237 25.331); --color-background: hsl(0 0% 100%); --color-emerald-200: oklch(90.5% .093 164.15); --text-xs--line-height: calc(1 / .75); --color-violet-500: oklch(60.6% .25 292.717); --color-amber-800: oklch(47.3% .137 46.201); --color-green-900: oklch(39.3% .095 152.535); --radius-2xl: 1rem; --radius-md: calc(.5rem - 2px); --color-sky-700: oklch(50% .134 242.749); --color-blue-800: oklch(42.4% .199 265.638); --text-7xl--line-height: 1; --text-xl: 1.25rem; --radius-lg: .5rem; --color-violet-700: oklch(49.1% .27 292.581); }

Build a landing page in the visual style of Builder. Reference design system (extracted from the live site): - Palette: #24defb, #107195, #2cf0f8, #ab795b, #bdbebf - Typefaces: Geist, Poppins - 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/builder-io--c-docs-widgets