Foundations

Twelve focused cards, one concern each

Each card links ../colors_and_type.css and renders the real tokens, real components and real preserved asset files — no screenshots, no redrawn marks. Start with the dark canvas if you are new to the system; it explains why everything else looks the way it does. Full rules live in DESIGN.md.

Color 1/3

Primary & the brand ramp

The action violet, the reserved cyan, all 24 ramp steps and the error ramp, each labelled with its job.

colors-primary.html Color 2/3

The dark canvas

Four surface steps one hair apart, the foreground ramp with contrast ratios, and cards in situ. The system’s defining decision.

colors-theme-dark.html Color 3/3

Light-surface exceptions

The three — and only three — light surfaces that exist, plus why no light theme may be derived.

colors-theme-light.html Typography

Satoshi specimens

Real cuts from fonts/, the nine-step scale at true size, and the eyebrow signature with a counter-example.

typography-specimens.html Spacing 1/3

Gutters & rhythm

Container gutters, the asymmetric 200/120 section rhythm, bottom-heavy card padding and the two control heights.

spacing-tokens.html Spacing 2/3

Radius census

Eight steps at true size, the measured homepage census, and what the same card looks like at 4px.

spacing-radius.html Spacing 3/3

The inverted glow

Violet light thrown upward, side by side with the conventional drop shadow that destroys it. Plus the CTA and input halos.

spacing-shadows.html Components 1/3

Buttons

Eight variants with rest, hover, active, focus and disabled shown together, and the one sanctioned CTA pairing.

components-buttons.html Components 2/3

Inputs

Floating-label field in five states, textarea, both checkbox variants, and the assembled consultation form.

components-inputs.html Components 3/3

Rule & progress

The gradient line carried forward from the previous docs site — as a masthead accent, as a determinate bar, and three ways to break it.

components-progress.html Assets

Brand assets

Every wordmark, glyph, favicon and app icon loaded from the real preserved files in build/ and assets/.

brand-assets.html Imagery

Decorative art

The line-and-glow layer — seven stroke-only section backgrounds, the opacity ladder that makes the falloff, and the two ramp steps they were hiding.

brand-imagery.html

The layer above these cards

A card here proves one token. ../storybook/ proves one component. ../artifacts/ proves they compose — a pitch deck, a contact form, two emails, a landing page and a print poster, each a single self-contained file carrying real density.

Open the artifacts