Builder.io — decoded design system

builder.io · dark · modern · custom · deep decode — measured live

Builder.io's design system, decoded live by Mozaika: measured color roles, type scale, buttons with real hover/focus states, motion and the brand's own tokens.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/decode/builder.io.

Decoded design system

Builder.io's decoded design system: background #0A0A0A, text #FAF9F5, accent #01C8F1, link #9A9997, primary #01C8F1; type scale h1 56px / h2 46px / body 15px; 4px spacing base; 4px base radius. The single interactive/action color is #01C8F1 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Using these colors

• Action color #01C8F1 — the single interactive color; only on things you click or must notice, never large fills.
• primary, accent, button_bg are all #01C8F1 — one role, not several (the action color).
• accent #01C8F1 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
• link #9A9997 — reads as a neutral UI color, not a link accent — verify against the reference (action = #01C8F1).
• secondary #BEF0F5 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

• Heading: Geist
• Body: Poppins
• Mono: Geist Mono
• h1: 56px
• h2: 46px
• body: 15px

Spacing

• base unit: 4px
• scale: 2px, 4px, 6px, 8px, 9px, 12px, 15px, 16px, 24px, 32px

Radii

• base: 4px
• button: 6px

Shadows (elevation)

• card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
• overlay: rgba(0, 0, 0, 0.5) 0px 8px 24px 0px

Motion

Micro-interactions run at 200ms (dominant) with ease.

• durations: 200ms · 150ms · 800ms
• easings: ease · ease-out
• animated properties: background, color, border-color, box-shadow

Native design tokens

…and 82 more measured on the page.

Button states (measured)

• primary hover: box-shadow rgba(1, 200, 241, 0.4) 0px 0px 16px 0px · background #00DFF6
• primary focus: outline 2px solid rgb(250, 249, 245)

Layout (measured)

• container max-width: 1200px
• nav: 104px sticky, backdrop blur(12px)

Motion choreography (measured)

Load order: span.cursor-maya×3 → div.cursor-devon×3 → div.cursor-sam×2 → div.cursor-lin×3 → div.css-b48cbg×2 → div.otFloatingRounded

Responsive (measured)

• breakpoints: 640px · 768px · 800px · 1024px
• mobile (390px): hero 32px · nav inline

Install it

Drop this measured system into any shadcn/Tailwind project in one command:

npx shadcn add mozaika.design/r/decode/builder.io

registry item · or query it over MCP: get_design_system("Builder.io")

Export: DESIGN.md

# Builder.io — Design System

> dark, modern, high, custom — deep decode (measured live)

## Colors

| Role | Value |
|------|-------|
| bg | `#0A0A0A` |
| surface | `#181818` |
| border | `#2E2D2D` |
| text | `#FAF9F5` |
| text_muted | `#9E9E9B` |
| primary | `#01C8F1` |
| accent | `#01C8F1` |
| link | `#9A9997` |
| secondary | `#BEF0F5` |
| button_bg | `#01C8F1` |
| button_text | `#0A0A0A` |

**Using these colors**

- **Action color** `#01C8F1` — the single interactive color; it appears only on things you click or must notice (buttons, key highlights), never on large fills or backgrounds.
- `primary`, `accent`, `button_bg` are all `#01C8F1` — one role, not several (your action color).
- **accent** `#01C8F1` — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
- **link** `#9A9997` — reads as a neutral UI color, not a link accent — verify against the reference (action = #01C8F1).
- **secondary** `#BEF0F5` — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
- **Page coverage** (full-page screenshot pixels): `#0A0A0A` 88.8% · `#212425` 6.9% · `#50919D` 4.2%

## Typography

- Heading: **Geist**
- Body: **Poppins**
- Mono: **Geist Mono**

| Role | Size / weight · line-height · tracking |
|------|------------------------------------------|
| hero | 56px / 500 · lh 59px · tracking -1.12px |
| h2 | 46px / 500 · lh 51px · tracking -0.92px |
| h3 | 28px / 500 · lh 31px · tracking -0.56px |
| body | 15px / 400 · lh 21px |
| small | 14px / 600 · lh 14px · tracking 1.12px |
| eyebrow | 14px / 600 · tracking 1.12px |

- Weight ladder: 400 · 500 · 600 — use these exact measured weights, not the 400/600 defaults.

> **Fonts —** Geist — free, on Google. Poppins — free, on Google.

## Spacing
- base unit: 4px (inferred from the measured scale)
- measured scale: 2px, 4px, 6px, 8px, 9px, 12px, 15px, 16px, 24px, 32px — snap all gaps/padding to these

## Radius
- base: 4px
- button: 6px
- card: 7px
- pill: 9999px
- sharp: 1px

## Buttons

| Button | Fill / text | Border | Radius | Padding | Font | Shadow |
|--------|-------------|--------|--------|---------|------|--------|
| primary | `#01C8F1` / `#0A0A0A` | 1px solid rgb(0, 223, 246) | 6px | 9px 15px 9px 15px | 600 14px / 0.28px | none |
| secondary | `rgba(0, 0, 0, 0)` / `#FAF9F5` | 1px solid rgb(94, 94, 94) | 6px | 9px 15px 9px 15px | 600 14px / 0.28px | none |

**States (measured, not guessed)**

- primary hover: box-shadow `rgba(1, 200, 241, 0.4) 0px 0px 16px 0px` · background `#00DFF6`
- primary focus: outline `2px solid rgb(250, 249, 245)`
- secondary hover: border `1px solid rgb(154, 153, 151)` · background `#1A1A1A`
- transition: `background 0.15s ease`

## Shadows (elevation)
- card: `rgba(0, 0, 0, 0.2) 0px 0px 18px 0px`
- overlay: `rgba(0, 0, 0, 0.5) 0px 8px 24px 0px`

## Motion
- durations: 200ms (dominant) · 150ms · 800ms
- easings: `ease` (dominant) · `ease-out`
- animated properties: background, color, border-color, box-shadow

Micro-interactions use the dominant duration + easing; nothing on the page animates slower than the longest duration above — don't invent springier motion.

## Their own tokens (verbatim from :root)

| Token | Value |
|-------|-------|
| `--color-muted-foreground` | `hsl(220 5% 45%)` |
| `--color-amber-400` | `oklch(82.8% .189 84.429)` |
| `--color-emerald-300` | `oklch(84.5% .143 164.978)` |
| `--color-red-900` | `oklch(39.6% .141 25.723)` |
| `--color-amber-600` | `oklch(66.6% .179 58.318)` |
| `--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-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)` |

_…and 80 more measured on the page._

Prefer these names when extending their system — it's the brand's actual vocabulary.

## Layout (measured)
- container max 1200px
- nav: 104px sticky · backdrop blur(12px) · border-bottom 1px solid rgb(20, 20, 20) · bg rgba(10, 10, 10, 0.9)

| Section (y) | Height | Cols | Gap | Pad y | Split |
|---|---|---|---|---|---|
| 104 | 550 | — | — | 0/0 | — |
| 768 | 275 | — | — | 0/0 | — |
| 1043 | 640 | — | — | 0/0 | — |
| 1683 | 932 | — | — | 0/0 | — |
| 2615 | 938 | — | — | 0/0 | — |
| 3553 | 828 | — | — | 0/0 | — |
| 4381 | 898 | — | — | 0/0 | — |

## Motion choreography (measured)
Load order: `span.cursor-maya`×3 @0ms → `div.cursor-devon`×3 @0ms → `div.cursor-sam`×2 @0ms → `div.cursor-lin`×3 @0ms → `div.css-b48cbg`×2 @0ms → `div.otFloatingRounded` @749ms
- `span.css-1a70f77` ×21 — color rgb(250, 155, 242)→rgb(154, 153, 151) — 800ms ease-out
- `span.cursor-maya` — translate 0px→-2px 4px — 6000ms ease-in-out · loops
- `div.cursor-devon` — translate 0px→3px -2px — 7000ms ease-in-out · loops
- `div.cursor-lin` — translate 0px→-3px -2px — 5500ms ease-in-out · loops

Rebuild the timeline, not just the durations — order, delays and staggers above are the choreography.

## Responsive (measured)
- breakpoints: 640px · 768px · 800px · 1024px
- mobile (390px): hero 32px · body 16px · nav: inline

## How to apply
Paste the Tailwind `@theme` (or CSS variables) as your base, then build each
section to its spec — verify every color, radius, and font against these tokens.
Hover/focus states, shadows and motion timings above are measured from the live page — match them exactly, don't re-guess them.

An automated reading of Builder.io's publicly-visible CSS (colors, fonts, spacing, motion) — not affiliated with builder.io. No screenshots stored. Removal requests: hello@mozaika.design.