System

Design system

Live reference for the design system. Values are read back out of the running document, so this page always shows what the site actually uses.

Ground

Surfaces

Near-black with a faint green cast. The accent is red, and that complementary tension is what stops the page reading as a generic dark theme.

--groundn/apage ground

--panel-sunkn/adeepest panel

--paneln/apanel

--panel-raisedn/araised panel

Lines

--rulen/ahairline

--rule-strongn/aemphasised hairline

--rule-solidn/asolid edge

Text

Ramp

Secondary text is a desaturated green-grey so dimmed copy reads as depth, not as grey UI chrome.

--inkn/aprimary

--ink-dimn/asecondary

--ink-faintn/atertiary, labels

Accent

The one accent

Interactive affordances, live values, section eyebrows. Never decoration, never large fills, never body text.

--primaryn/arest

--primary-hotn/ahover

--primary-darkn/apressed

Semantic: a separate axis

Status colours. These never stand in for the accent: --ok marks a product that is live, and that is the only claim it is allowed to make.

--okn/alive, success

--warningn/awarning

--errorn/aerror

Type

t-heroTeko 600 · clamp 3.5–8.5rem · lh .80 · −.03em

Kleczewsky

t-displayTeko 600 · clamp 2.75–4.5rem · lh .82 · −.03em

Hire me for

t-titleSpline Sans 600 · clamp 1.5–2rem · lh 1.05

Production Laravel systems

t-leadSpline Sans 400 · clamp 1.06–1.25rem · ink-dim

Production Laravel and React, shipped and running.

t-bodySpline Sans 400 · 1rem · lh 1.6

Body copy sits at one rem with a 1.6 line height and a 64ch measure.

t-smallSpline Sans 400 · .875rem

Secondary detail and captions.

t-labelJetBrains Mono 500 · 11px · tracking .14em

02 / Work

t-microJetBrains Mono 400 · 10px · tabular · tracking .2em

Status AVAILABLE · Local 19:40

Width axis

One family covers both cuts. Display is condensed, reading is normal.

wdth 78, display

Kleczewsky

wdth 100, reading

Kleczewsky

Space

--s1n/a

--s2n/a

--s3n/a

--s4n/a

--s5n/a

--s6n/a

--s7n/a

--s8n/a

--s9n/a

Motion

Instruments move mechanically: fast to leave, long to settle. Hover a row to run its duration on the house curve.

--d-instantn/astate acknowledgement

--d-fastn/ahover, focus

--d-basen/apanels, disclosure

--d-slown/asection entrances

--d-cinen/athe intro sequence

Components

Buttons

One filled button per screen: it is the single conversion action. Everything else is a hairline.

Readouts

Status: Available
Local: 19:40
Tier: A

Panel and rule

Panel

Translucent, so the scene continues behind it. Corner ticks rather than a radius: this reads as a registered panel, not a card.