Design System Foundations

Build your design system's foundations in one place — color scales, a fluid type scale with your fonts, space & grid, radii, borders, elevation, and motion — then export everything as one file.

px
px

Set once, used everywhere: the type, space, and grid scales all interpolate between these two anchors.

🎨 Color Scales

👀 WCAG Compliant Combinations

Pick a background color

Showing text colors that are legible onblue-900#002242· 7 pass (≥3:1)
AAA4 · Passes at any text size.
  • The quick brown fox
    blue-5014.7:1
  • The quick brown fox
    blue-10012.3:1
  • The quick brown fox
    blue-20010.2:1
  • The quick brown fox
    blue-3008.3:1
AA2 · Use at 16px or larger for body text.
  • The quick brown fox
    blue-4006.7:1
  • The quick brown fox
    blue-5005.3:1
AA Large1 · Large text only — 24px, or 18.66px bold.
  • The quick brown fox
    blue-6003.5:1

📑 Type Scale

Pick your font families first, then set a font size and modular-scale ratio at each viewport anchor. Every step fluidly interpolates with a CSS clamp().

🔤 Font Stacks

The quick brown fox jumps over the lazy dog — 0123456789

The quick brown fox jumps over the lazy dog — 0123456789

The quick brown fox jumps over the lazy dog — 0123456789

Hosting your own fonts? Paste the stylesheet URL that declares the @font-face rules, then type the family name into a stack above. It loads here for the preview and ships as an @import in the exports.

System stacks (modernfontstacks.com) are OS-native — zero downloads. Google Fonts load from fonts.googleapis.com in the preview and add an @import to the exported CSS.

📏 Scale

At min viewport (320px)
px
At max viewport (1440px)
px

👀 Preview

880px
  • Step 5“Less, but better” — Dieter Rams52.91px · 3.307rem
  • Step 4“Less, but better” — Dieter Rams43.08px · 2.6923rem
  • Step 3“Less, but better” — Dieter Rams35.08px · 2.1927rem
  • Step 2“Less, but better” — Dieter Rams28.59px · 1.7866rem
  • Step 1“Less, but better” — Dieter Rams23.30px · 1.4562rem
  • Step 0“Less, but better” — Dieter Rams19.00px · 1.1875rem
  • Step -1“Less, but better” — Dieter Rams15.50px · 0.9688rem
  • Step -2“Less, but better” — Dieter Rams12.65px · 0.7906rem

📐 Space & Grid

A fluid spacing scale (T-shirt sizes on an 8pt grid by default) and a matching layout grid, each interpolating between the shared viewport anchors with a CSS clamp().

px
px

📏 Space scale

Size@min@max3xs
4px · 0.25rem
5px · 0.3125rem
2xs
8px · 0.5rem
10px · 0.625rem
xs
12px · 0.75rem
15px · 0.9375rem
s
16px · 1rem
20px · 1.25rem
m
24px · 1.5rem
30px · 1.875rem
l
32px · 2rem
40px · 2.5rem
xl
48px · 3rem
60px · 3.75rem
2xl
64px · 4rem
80px · 5rem
3xl
96px · 6rem
120px · 7.5rem

⬌ Space pairs

  • 3xs → 2xs4px → 10px
  • 2xs → xs8px → 15px
  • xs → s12px → 20px
  • s → m16px → 30px
  • m → l24px → 40px
  • l → xl32px → 60px
  • xl → 2xl48px → 80px
  • 2xl → 3xl64px → 120px

🔭 Layout grid

px
px
px
Width@min@maxContainer320px1240pxGutter16px32pxColumn9.33px68.67px
Round @min column:

🧱 Foundations

The token layers beyond color, type, and space: corner radii, border widths, elevation, and motion. Grab everything from the Export section below.

⭕ Corner radii

px
none0px
sm4px
md8px
lg16px
xl32px
full9999px

〰️ Border widths

px
  • s1px
  • m2px
  • l4px

📦 Elevation

blue

Light

1
2
3
4
5

Dark

1
2
3
4
5

⏱️ Motion

ms
ms
ms
standard

cubic-bezier(0.4, 0, 0.2, 1)

decelerate

cubic-bezier(0, 0, 0.2, 1)

accelerate

cubic-bezier(0.4, 0, 1, 1)

📦 Export

Your whole design system in one file — color scales, type scale & fonts, space & grid, and foundations, live from the sections above. The Markdown style guide documents the color palette.

/* ===== Color ===== */
:root {
  --blue-50: #EEF6FF;
  --blue-100: #CBE4FF;
  --blue-200: #A7D2FF;
  --blue-300: #81BFFF;
  --blue-400: #6CACED;
  --blue-500: #5799DB;
  --blue-600: #3B79B5;
  --blue-700: #205A91;
  --blue-800: #003D6E;
  --blue-900: #002242;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue-50: #002242;
    --blue-100: #003D6E;
    --blue-200: #205A91;
    --blue-300: #3B79B5;
    --blue-400: #5799DB;
    --blue-500: #6CACED;
    --blue-600: #81BFFF;
    --blue-700: #A7D2FF;
    --blue-800: #CBE4FF;
    --blue-900: #EEF6FF;
  }
}

/* ===== Type ===== */
:root {
  --step-5: clamp(2.7994rem, 2.5093rem + 1.4505vw, 3.8147rem);
  --step-4: clamp(2.3328rem, 2.1274rem + 1.0271vw, 3.0518rem);
  --step-3: clamp(1.944rem, 1.8019rem + 0.7106vw, 2.4414rem);
  --step-2: clamp(1.62rem, 1.5248rem + 0.4759vw, 1.9531rem);
  --step-1: clamp(1.35rem, 1.2893rem + 0.3036vw, 1.5625rem);
  --step-0: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
  --step--1: clamp(0.9375rem, 0.9196rem + 0.0893vw, 1rem);
  --step--2: clamp(0.7813rem, 0.7759rem + 0.0268vw, 0.8rem);

  /* Font stacks */
  --font-heading: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

/* ===== Space & Grid ===== */
:root {
  --space-3xs: clamp(0.25rem, 0.2321rem + 0.0893vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4643rem + 0.1786vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6964rem + 0.2679vw, 0.9375rem);
  --space-s: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3929rem + 0.5357vw, 1.875rem);
  --space-l: clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.7143rem + 1.4286vw, 5rem);
  --space-3xl: clamp(6rem, 5.5714rem + 2.1429vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1429rem + 0.5357vw, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.375rem + 0.625vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.75rem + 1.25vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.4286rem + 2.8571vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 3rem + 5vw, 7.5rem);
}

:root {
  --grid-max-width: 77.5rem;
  --grid-gutter: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);
  --grid-columns: 12;
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}

/* ===== Foundations ===== */
:root {
  /* Corner radii */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Border widths */
  --border-s: 1px;
  --border-m: 2px;
  --border-l: 4px;

  /* Elevation */
  --elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 1px rgba(0, 0, 0, 0.08);
  --elevation-2: 0px 2px 6px 0px rgba(0, 0, 0, 0.14), 0px 1px 4px 1px rgba(0, 0, 0, 0.08);
  --elevation-3: 0px 4px 12px 0px rgba(0, 0, 0, 0.14), 0px 2px 6px 1px rgba(0, 0, 0, 0.08);
  --elevation-4: 0px 8px 24px 0px rgba(0, 0, 0, 0.14), 0px 3px 8px 1px rgba(0, 0, 0, 0.08);
  --elevation-5: 0px 16px 48px 0px rgba(0, 0, 0, 0.14), 0px 4px 12px 1px rgba(0, 0, 0, 0.08);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.25), 0px 1px 3px 1px rgba(0, 0, 0, 0.14);
    --elevation-2: 0px 2px 6px 0px rgba(0, 0, 0, 0.25), 0px 1px 4px 1px rgba(0, 0, 0, 0.14);
    --elevation-3: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 2px 6px 1px rgba(0, 0, 0, 0.14);
    --elevation-4: 0px 8px 24px 0px rgba(0, 0, 0, 0.25), 0px 3px 8px 1px rgba(0, 0, 0, 0.14);
    --elevation-5: 0px 16px 48px 0px rgba(0, 0, 0, 0.25), 0px 4px 12px 1px rgba(0, 0, 0, 0.14);
  }
}
Simulate color blindness