Foundations

The tokens every Buildpad screen is built from. Everything here is rendered from the real app/design-tokens.css — the swatches read the live CSS custom properties, so this page cannot drift from the shipped values. See Design System for how the token, theme and override layers fit together, and the styleguide overview for the rest of the showcase.

Usage rules

Ink vs. ember: A Button with no color is the ink CTA (--ds-cta-bg). Orange is for interactive state (checkbox, switch, radio, slider, focus ring, active tab underline, active nav, progress), brand marks, and explicit brand CTAs (color="primary").
Main Stop: The unsuffixed main of each hue (--ds-primary, --ds-success, …) equals its 600 stop. Dark mode mirrors the scales, so the main becomes the light-mode 400 tone (#fd9843 for primary).
Small Text Contrast: Small colored text on white/tinted backgrounds must use the 700 stop (--ds-primary-700, or --ds-accent-text for orange) to meet WCAG AA. Never orange body text below 700; white on filled orange is for graphics and large brand CTAs only.
Built-in hues: color="red" | "green" | "yellow" | "blue" | "orange" resolve to danger / success / warning / info / primary, so status props get the brand scales automatically.
Borders: gray-200 (--ds-border-color, hairline #e8e9ec) is for cards and dividers. gray-300 is used for form inputs.

Colors

Each hue has eleven numbered stops (50–950) plus an unsuffixed semantic main. In dark mode the numbered scales mirror (50↔950, 100↔900, …), so a token chosen for light backgrounds stays legible automatically — ink inverts to light greys and the neutral scale is hand-tuned so muted text stays AA. Click any swatch to copy its variable.

Primary — Embermain --ds-primary = the 600 stop (mirrored scales make it the lighter tone in dark)brand accent — interactive state, focus, highlights (aliased as orange / accent)

Secondary — Inkmain --ds-secondary = the 600 stop (mirrored scales make it the lighter tone in dark)ink — the default CTA colour; inverts to light greys in dark mode

Success — Emeraldmain --ds-success = the 600 stop (mirrored scales make it the lighter tone in dark)aliased as green

Info — Bluemain --ds-info = the 600 stop (mirrored scales make it the lighter tone in dark)aliased as blue

Warning — Ambermain --ds-warning = the 600 stop (mirrored scales make it the lighter tone in dark)aliased as yellow

Danger — Redmain --ds-danger = the 600 stop (mirrored scales make it the lighter tone in dark)aliased as red

Gray — Neutralcool neutrals (no blue cast) · numbered stops only, no unsuffixed main · hand-tuned in dark so muted text stays AA

Semantic tokens

Prefer these over raw stops — they carry the light/dark switch with them.

page background (flat, no gradient)

default text

headings & strongest text

secondary text, idle nav links

muted text (AA on white)

orange text — links, accents (primary-700)

card surface

hairline card border

dividers & cards (gray-200)

subtle separators (gray-100)

default Button background (ink)

default Button text

input border on focus (primary-500)

focus ring overlay

Typography

Inter for body and UI (--ds-font-family, --ds-font-sans), Inter Tight for headings and display (--ds-font-display, weight 600 with --ds-letter-spacing-tight: -0.02em, h1 --ds-letter-spacing-tighter: -0.03em), JetBrains Mono for code (--ds-font-mono). App UI runs at the sm size (--ds-body-font-size: 0.875rem) for density.

Inter--ds-font-sans

Schema-aware components for Next.jsbody & UI (--ds-font-family) · 400 / 500 / 600 / 700

Inter Tight--ds-font-display

Build apps on your dataheadings & display · 600, letter-spacing -0.02em (h1 -0.03em)

JetBrains Mono--ds-font-mono

buildpad add input --with-depscode, kbd, hex values · 400 / 500

xs · The quick brown fox jumps over the lazy dogcaptions, badges, table headers

sm · The quick brown fox jumps over the lazy dogbody text in apps (--ds-body-font-size)

base · The quick brown fox jumps over the lazy dogdefault paragraph size

lg · The quick brown fox jumps over the lazy doglead text

xl · The quick brown fox jumps over the lazy dogh4 / section titles · display

2xl · The quick brown fox jumps over the lazy dogh3 · display

3xl · The quick brown fox jumps over the lazy dogh2 · display

4xl · The quick brown fox jumps over the lazy dogh1 / hero · display, tighter tracking

Spacing

A 4px base grid (--ds-spacing-1 … --ds-spacing-16), identical to the Tailwind spacing scale.

spacing-1 ·

spacing-2 ·

spacing-3 ·

spacing-4 ·

spacing-5 ·

spacing-6 ·

spacing-8 ·

spacing-10 ·

spacing-12 ·

spacing-16 ·

Radius

One radius language: inputs 8px, popovers and menus 12px, cards and modals 16px, large surfaces 24px, and pill buttons and badges.

sm · tooltips, small controls

base · inputs (default)

md · Paper

lg · popovers, menus

xl · modals

card · cards

hero · large surfaces

pill · buttons, badges

Shadows

Ink-tinted, soft and long, like buildpad.ai. Cards use --ds-card-shadow (a hairline lift plus a long, faint drop); elevation increases with interactivity (popovers and menus lg, modals xl).

xshairline lift

smsmall controls

baseraised elements

mdhover elevation

lgpopovers, menus, dropdowns

xlmodals

cardcards (default)

Focus & states

Focus is an ember ring (--ds-focus-ring) with an ember border on inputs (--ds-focus-border); hover, disabled, and active states are shared across the system.

Always-on ring

--ds-focus-ring + --ds-focus-border · hover opacity --ds-hover-opacity: 0.85 · disabled opacity --ds-disabled-opacity: 0.5 · transitions 150ms / 200ms cubic-bezier(0.2, 0, 0, 1)