Design System

This portfolio has a deliberately tactile, editorial feel: thin borders, pill labels, VT323 caps accents, and motion that supports (not replaces) content. This page documents the tokens and primitives that power that vibe.

Primitives

tag sm tag md active more

Frame + hover lift

Reusable border/radius/overflow + the signature float-on-hover motion.

Color tokens

Background primary

--bg-primary

Background secondary

--bg-secondary

Background tertiary

--bg-tertiary

Text primary

--text-primary

Text secondary

--text-secondary

Text tertiary

--text-tertiary

Border primary

--border-primary

Border secondary

--border-secondary

Accent

--accent

Scales

Space 4xs

--space-4xs

Space 3xs

--space-3xs

Space 2xs

--space-2xs

Space xs

--space-xs

Space s

--space-s

Space m

--space-m

Space l

--space-l

Space xl

--space-xl

Space 2xl

--space-2xl

Border hairline

--border-width-hairline

Border strong

--border-width-strong

Radius card

--radius-card

Radius pill

--radius-pill

Hover lift

--lift-distance

Shadow float

--shadow-float

Conventions

These conventions keep the site cohesive while still leaving room for one-off editorial layouts.

Prefer tokens over raw values. Use raw values only for intentional hero moments (e.g. oversized type on the home page).
Use primitives for repeated motifs: ui-frame, ui-hoverlift, ui-pill, and layout helpers.
Keep is:global for truly global rules (resets, tokens, view transitions). Prefer scoped styles in components.