Brand-in-a-Box

Turn one seed colour (or an image) into a complete design system — OKLCH-computed scales, accessible pairings with one-tap fixes, a modular type scale, and exports to CSS, Tailwind and Figma tokens.

OKLCH colour science · runs entirely in your browser

Brand name

Seed — Molten Clay

From image — or drop anywhere

Type · ratio & base

Harmony — generates the secondary hue

Palette — OKLCH, gamut-mapped

Primary

Secondary

Neutral

Accessibility — WCAG 2 + APCA, with one-tap fix

Primary on whiteWCAG 5.30 · APCA Lc 75

AAAAAAPCA

White on primaryWCAG 5.30 · APCA Lc 80

AAAAAAPCA

Accent on whiteWCAG 3.49 · APCA Lc 62

AAAAAAPCA

light text on bgWCAG 12.15 · APCA Lc 94

AAAAAAPCA

Type scale

DisplayBody

Atlas5xl · 3.815rem

Atlas4xl · 3.052rem

Atlas3xl · 2.441rem

Atlas2xl · 1.953rem

Atlasxl · 1.563rem

Atlaslg · 1.25rem

Atlasbase · 1rem

Atlassm · 0.8rem

Atlasxs · 0.64rem

Live preview

atlas.app

Atlas · design system

Built from a single seed.

Tints, neutrals and accents computed in OKLCH and gamut-mapped — so every step is as vivid as the screen allows, in light and dark alike.

Primary actionSecondaryAccent

Surface card

Muted copy on an elevated surface.

Export

:root {
  /* ramps */
  --color-primary-50: #fff3f0;
  --color-primary-100: #ffe5de;
  --color-primary-200: #feccbf;
  --color-primary-300: #fda58f;
  --color-primary-400: #fd7351;
  --color-primary-500: #e55029;
  --color-primary-600: #c73608;
  --color-primary-700: #a12a04;
  --color-primary-800: #7d1d01;
  --color-primary-900: #5b1100;
  --color-primary-950: #3e0600;
  --color-neutral-50: #fff3ef;
  --color-neutral-100: #f4e8e5;
  --color-neutral-200: #e2d6d3;
  --color-neutral-300: #c8bcb9;
  --color-neutral-400: #aba09d;
  --color-neutral-500: #918683;
  --color-neutral-600: #796f6c;
  --color-neutral-700: #625856;
  --color-neutral-800: #4c4340;
  --color-neutral-900: #372e2c;
  --color-neutral-950: #241c1a;
  --color-secondary-50: #e7faff;
  --color-secondary-100: #caf4fe;
  --color-secondary-200: #92e9fe;
  --color-secondary-300: #1fd5f7;
  --color-secondary-400: #18b6d3;
  --color-secondary-500: #1299b2;
  --color-secondary-600: #0c7f94;
  --color-secondary-700: #076677;
  --color-secondary-800: #034e5c;
  --color-secondary-900: #003742;
  --color-secondary-950: #00232b;
  --color-accent: #1a96ad;
  --color-success: #20a04e;
  --color-warning: #ac7c15;
  --color-danger: #d5584f;
  --color-info: #2389e2;
  /* semantic roles — light */
  --bg: #fff3ef;
  --surface: #ffffff;
  --surface-alt: #f4e8e5;
  --text: #372e2c;
  --text-muted: #796f6c;
  --border: #e2d6d3;
  --primary: #c73608;
  --primary-fg: #ffffff;
  --accent: #1a96ad;
  --accent-fg: #0a0a0a;
  /* type */
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --text-5xl: 3.815rem;
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
}

[data-theme="dark"] {
  /* semantic roles — dark */
  --bg: #241c1a;
  --surface: #372e2c;
  --surface-alt: #4c4340;
  --text: #fff3ef;
  --text-muted: #aba09d;
  --border: #4c4340;
  --primary: #fd7351;
  --primary-fg: #0a0a0a;
  --accent: #1a96ad;
  --accent-fg: #0a0a0a;
}