Chromatic · design system

Gradation with hue-tinted grays. Never saturation.

A universal, vibrational design system rooted in Edwin Babbitt's Principles of Light and Color (1878) and Besant & Leadbeater's Thought-Forms (1901). Twenty intention-mapped themes, chromatic-gray ramps, and Geist typography — calibrated so every interface feels coherent, calm, and intentional.

Open the Workspace kit Explore tokens Read the readme

8–24%
saturation ceiling: 20
intention themes: 21 × 11
chromatic-gray ramps: 4 px
spacing grid: 1.25
modular type ratio: 12/6/2
card · button · pill radii

Quality of thought determines colour. Nature of thought determines form. Definiteness of thought determines clearness of outline. — Besant & Leadbeater, Thought-Forms (1901)

Themes

Pick an intention. Everything recomposes.

Selecting a theme repaints this page and every preview card below — the cards load the same colors_and_type.css the system ships, so what you see is the real token output.

Twenty intentions, five forces

Every theme maps an intention to one chromatic-gray ramp. The seven above ship in the standalone token CSS and switch live across this site. The rest live in assets/chromatic.css, the Tailwind 4 build.

Thermal

Luminous

Neutral force

Electrical

Special

Brand

4

Mark, voice, iconography, keyboard.

Lucide 1.5-px strokes, sentence case, no emoji. The mark is three concentric arcs — gradation drawn as form.

Iconography

Lucide · 1.5px stroke

Keyboard Shortcuts

<kbd> chrome

Logo

Mark · wordmark · app icon

Voice

Sample lines + tone notes

Colors

9

Twenty-one ramps. Eleven shades each.

Backgrounds 8–12%, surfaces 10–14%, borders 12–16%, interactive 14–18%. No pure black, no pure white.

Achromatic Ramp

11 shades · 0% saturation

Electrical Hues

azure · blue · indigo · violet

Luminous Hues

yellowGray · goldGray · stoneGray

Neutral-Force Hues

green · emerald · teal · cyan

Semantic Tokens

Light + dark side by side

Special Hues

magenta · rose · slate · purple

Status Colors

Success · Warning · Destructive · Info

Theme Intentions

6 of 20 · neutral · trust · energy · harmony · spirit · urgency

Thermal Hues

redGray · orangeGray · crimsonGray

Type

8

Geist for everything. Mono for data.

Modular scale at 1.25 on a 16-px base. Display tracks -0.02em. Numbers are tabular. Pixel is for hero moments only.

Body Type

Lead 18, body 16, small 14

Code Block

Monaspace Neon in context

Display Type

Geist semibold, -0.025em tracking

Heading Scale

H1–H4 · 600 weight

Monaspace Textures

Neon · Argon · Xenon · Radon · Krypton

Geist Mono

Code, pills, eyebrow, tabular nums

Geist Pixel

Hero / accent only

Type Scale

1.25 ratio · 16px base · 12 steps

Spacing

5

Four-pixel grid, layered shadows, concentric radii.

Card padding 24, section gap 32. Shadows are ambient plus direct. A child's radius is always smaller than its parent's.

Elevation

Surface · raised · floating

12-Column Grid

4px gutters scaled

Corner Radii

none · 2 · 6 · 12 · 20 · full

Spacing Scale

4px grid · 4 → 64

Shadow System

xs · sm · md · lg · xl (layered)

Components

9

Primitives that follow the rules.

Buttons, inputs, menus, tabs, toggles, alerts, pills, cards — each rendered from semantic tokens alone.

Alerts

Info · Success · Warning · Destructive

Button States

Idle · Hover · Press · Focus · Disabled

Buttons

Primary · Secondary · Ghost · Destructive · Capsule · Disabled

Card

Canonical card — border, radius-lg, shadow-sm

Inputs

Default · Focused · Error

Pills & Status Dot

Semantic + theme variants

Tabs

Segmented + underline tabs

Toggles & Slider

Checkbox · Radio · Switch · Slider

UI Kits

2

Two surfaces, one substrate.

Hi-fi click-through recreations running live. Each kit carries its own theme switcher, so it stays independent of the page theme.

Open full screen

Chromatic Workspace

1280×760 · neutral · light

Hi-fi click-through of a Chromatic-themed workspace: every sidebar item routes to a real page — Overview, Palettes ramp explorer, Components inventory with live specimens, Typography scale, Activity, Library, Inbox, Team, Billing — plus a keyboard-driven command palette. Press Cmd+K inside the kit for the palette, Cmd+D to flip dark mode.

Launch kit Open raw HTML