System

Design system

A live reference for the site’s colours, typography, spacing, and components. Token values are read directly from the page.

Ground

Surfaces

Near-black surfaces with a subtle green tint and a red accent.

--groundn/apage background

--panel-sunkn/adeepest panel

--paneln/aPanel

--panel-raisedn/araised panel

Lines

--rulen/athin line

--rule-strongn/aemphasised line

--rule-solidn/asolid edge

Text

Text tones

Muted green-grey tones distinguish supporting text from primary content.

--inkn/aprimary

--ink-dimn/asecondary

--ink-faintn/atertiary, labels

Accent

Accent colour

Red highlights interactive elements, live values, and section labels.

--primaryn/adefault

--primary-hotn/ahover

--primary-darkn/apressed

Status colours

Separate colours communicate success, warnings, and errors.

--okn/alive, success

--warningn/awarning

--errorn/aerror

Typography

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

Kleczewsky

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

How I can help

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

Laravel for the long run

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

People · Laravel · Livewire · Filament · React · WebGL

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

03 / Work

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

Status Available for work · Local time 19:40

Font families

Teko for display headings, Spline Sans for body text, and JetBrains Mono for labels and readouts.

Teko · headings

Kleczewsky

Spline Sans · body

Kleczewsky

JetBrains Mono · labels

Kleczewsky

Spacing

--s1n/a

--s2n/a

--s3n/a

--s4n/a

--s5n/a

--s6n/a

--s7n/a

--s8n/a

--s9n/a

Motion

Quick transitions with a slower finish. Hover over a row to preview its duration and easing.

--d-instantn/astate acknowledgement

--d-fastn/ahover, focus

--d-basen/apanels, disclosure

--d-slown/asection entrances

--d-cinen/aintro sequence

Components

Buttons

A filled button highlights the primary action. Outlined buttons provide secondary actions.

Readouts

Status: Available for work
Local time: 19:40
Graphics: A

Panel and rule

Panel

A translucent panel with corner markers lets the scene remain visible behind it.