madho.dev/design
Northstar — emitted from one schema
Theme
Density
Accent
01 — Foundations

Typography

Geist for product/body, Geist Mono for code and machine labels. The hierarchy is compact, not airy.

h1
Modern infrastructure, product warmth
h2
Trusted before clever, polished before promotional
h3
Light surfaces carry the narrative
body-lg
Body large — calm, readable lede copy for marketing surfaces.
body-md
Body medium — the default reading size for docs and product UI.
label-caps
Label caps
mono-body
const action = '#4F46E5' // indigo, the single interaction color
02 — Tokens

Color, geometry, density

Every value below is a resolved token. Toggle theme/accent/density up top — the swatches are live CSS variables, not screenshots.

Surfaces & text

--bg #F7F8FA Page wash.
--bg-2 #EEF2F7 Inset page wash.
--surface #FFFFFF Default card/page surface.
--surface-2 #F1F5F9 Secondary surface, inputs, quiet containers.
--surface-3 #0B0F14 Dark panel surface (theme-invariant).
--text #0F1218 Primary text, hero headlines, nav text.
--text-2 #5E6777 Secondary/supporting copy, metadata.
--text-3 #8A94A6 Muted / UI text. AA-fail as small text on white (3.06:1) — use for borders/large/UI only.
--border #E2E8F0 Standard divider/edge.
--border-2 #CBD5E1 Strong divider/edge.
--focus #2563EB Focus ring (theme-invariant).

Action (indigo) & accent (brand)

Action is the single interaction color — every CTA, active tab, selected row. Accent is brand/highlight only; never an action.

--action #4F46E5 All CTAs / active / selected
--action-soft #e6eaff Selected surface (OKLab-derived)
--action-border #afbcf1 Selected surface border
--accent #FF6A3D Brand mark / kicker only
--accent-soft #ffece5 Tracks the accent (per-accent at build)

Code

--code-bg #0F172A
--code-border #243244
--code-text #E2E8F0
--code-comment #94A3B8
--code-keyword #6D28D9
--code-string #22C55E
--code-number #F59E0B

Radius ladder — the only legal radii

radius.control12px
radius.card16px
radius.panel20px
radius.pill9999px

Density axis

TokenComfortableCompact
--control-h46px40px
--control-h-sm38px34px
--panel-pad28px20px
--card-pad18px14px
--cell-pad-y14px10px
--cell-pad-x16px12px
--stack-gap14px10px
03 — States

Status & focus

Status fills use dark or contrast text so the latent §3 contrast traps never surface. Focus is a visible 3px ring.

Operational Degraded Incident success.text warning.text danger.text
Tab to see the focus ring (var(--focus)).
04 — Primitives

Buttons, chips, inputs

The button grammar: one primary (indigo), a quiet secondary, and a tertiary text action. Inputs and pills share the control radius.

Beta Docs
05 — Composites

Cards, metrics, code

Depth comes from contrast and containment — thin borders, soft surface shifts, very little blur.

Card

Default surface for grouped content on light backgrounds.

Card · dark

Developer panels, previews, advanced flows.

99.98% Uptime · 30d 
// emitted from one schema
const action = '#4F46E5';
const radius = 12;
06 — Templates

Navigation shells

Sidebar and segmented nav use the action color for the selected state — never the accent.

Overview01
Tokens02
Components03
Changelog04