Two things are true about this portfolio, and the whole identity follows
from them: the construction is visible, and the page is a live encounter —
it knows the viewer's time of day, screen, and motion preference, and the
palette follows the viewer's sky.
Product
A one-pager with expandable depth for a senior product designer in London.
Case studies open in place. A per-application variant system
(/for/[company]) recomposes the portfolio for specific roles —
company colour enters the accent system, content reorders to match the job.
The base site is canonical; variants are departures from it.
Tokens
Foundations
Layout. A 40-column square grid derived from body text:
16px × 1.5 leading = 24px = the cell. 960px / 24px = 40 columns. Spacing,
type, and component sizing all derive from the cell. Column count steps down at
800px (30) and 400px (20).
Typography. Two typefaces express built × natural.
Pentameter (monospace) speaks for the system — UI, Data, Meta roles, always
uppercase in UI. GT Sectra (serif) speaks for Alan — Display, Body, Body-sm.
If you're reading sentences it's GT Sectra; if you're scanning the interface
it's Pentameter.
Colour. A time-driven OKLCH palette in P3. A binary day/night
flip at 6am and 6pm, plus a continuous intensity cosine that peaks at the
golden hours. Six tokens breathe together; hue arcs are grounded in
atmospheric physics. A matte glint sweeps the structural borders.
Shape. One non-rectangular form: an irregular 13-vertex
polygon, arc spacing 14°–42°, seeded so each instance is a sibling not a copy.
It appears on the headshot, the CTA, and the colour clock. Every other edge
is a straight cut on the grid.
Behaviours
Interaction. States reveal, they don't decorate. The one
move is var(--surface) appearing on hover; active compresses to
opacity: 0.85. Hover is scoped to devices that support it; touch
uses :active.
Motion. One easing everywhere — a long deceleration that
settles into position — with duration proportional to how much is changing:
0.15s interaction, 0.4s font entrance, 0.6s scroll composition, 1s mode flip.
Reduced motion removes ambient composition; interaction and colour stay.
Rules
- Never mix typeface assignments — a UI role is always Pentameter.
- Never use GT Sectra Bold in the chrome. Medium (500) is the maximum emphasis.
- No border-radius anywhere. Every element has sharp corners.
- The accent colour is structural, not decorative — never for body text or large fills.
- Ground is never pure white or pure black. It always has material quality.
- All colour values are OKLCH.
prefers-color-scheme, prefers-reduced-motion, and prefers-contrast are always respected.
