System

Tokens, components, compositions

Everything on this site is built from three layers.

Tokens hold the raw decisions, components combine them into parts, and compositions arrange the parts into pages. Pages never reach past a layer.

Tokens · Color

bgPage background
surfaceTiles, menus
inkNames, headings
bodyRunning text
mutedLabels, dates
faintDecoration
lineDividers
edgeComponent borders
cardInverse surface
telegramTelegram button only
agentAgent view only

Tokens · Type

Article titleheading
Two readers, one surfacequote
Running text for paragraphsbody
Row titles and namestitle
Subtitles, buttons, navsmall
Section labelslabel
Footnotes and metamicro

One family, Inter, with optical sizing. Weights sit between the usual stops: 425 for body, 450 for small text, 480 for leads.

Tokens · Shape and motion

sm

md

lg

xl

button

float

Hover color, press--duration-fast
Menus, switches, dimming--duration-base
Larger movements--duration-slow
Everything that enters--ease-out

Components · Button

Primary Secondary Telegram

Components · Row

With a markProjects, experience20262026
Without a markWritingOct 22Oct 22

Components · Name grid

Components · Switches and contact card

Compositions · Shell

From 1200px: navigation on the left, agent view and links on the right, one 456px reading column between them. Below 1200px the rails fold into a floating pill menu, and the column takes the screen with a 24px gutter.

Compositions · Pages

HomeGreeting, title, lead, actions, projects, writing, card, links
ArticleBack link, heading, meta, prose, more writing
SystemThis page