Foundations
The design tokens Monogem's components are built from: scale, color, type, spacing, radius, shadows, grids, layout, and icons. Each page explains what the foundation covers, the tokens it ships, why it's shaped the way it is, and how to use it correctly. Read them in order — each one references the foundations before it.
| # | Foundation | New tokens? | What it covers |
|---|---|---|---|
| 1 | Scale | Yes | The master 4px ladder every dimension in the system measures against. |
| 2 | Color | Yes | Pure-gray neutrals, red reserved for danger — light + dark, four selectable themes (Onyx / Sapphire / Ruby / Emerald). |
| 3 | Typography | Yes | Geist type: one size ramp, four weights, composed at the call site. |
| 4 | Spacing | No | Task-to-scale recipes for padding, gaps, and margins. |
| 5 | Radius | Yes | One knob (--radius) rounds the whole system; four derived sizes. |
| 6 | Shadows | Yes | Five elevation levels, neutral black, boosted opacity in dark. |
| 7 | Grids | Yes | 12 columns, five breakpoints, gutters that ride the scale. |
| 8 | Layout | No | Containers and four named page patterns, built from Grids + Spacing. |
| 9 | Icons | Yes | Lucide, sized from the scale, one new token for stroke width. |
"New tokens?" — a foundation ships tokens only when it introduces values the master scale doesn't already cover. Spacing and Layout ship none — both are pure recipes against tokens that already exist.
Where the values live
Every token described on these pages is defined in two CSS files at the root of the Monogem
codebase: tokens/primitives.css holds the raw values (the scale, color ramps, type ramps, icon
stroke width), and tokens/semantic.css holds the intent tokens components actually use (color,
radius, shadows, breakpoints, grid columns, font families). The pages here are the reference for
what each token means and how to use it — see
Design Approach for the principles that govern all of
them.