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.
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
Typography
PP Neue Montreal with 7 weights. Use semantic tokens for consistent weight across the site.
Aa
Aa
Aa
Aa
Scales & Dimensions
| Token Name | Description | Value | Preview |
|---|---|---|---|
--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-width-hairline | Border hairline | ||
--border-width-strong | Border strong | ||
--radius-card | Radius card | ||
--radius-pill | Radius pill | ||
--lift-distance | Hover lift |
Component Primitives
Design Rules
Interaction
- Keyboard First: Full support per WAI-ARIA. Visible focus rings are mandatory.
- Touch Targets: Minimum 44px on mobile, 24px on desktop.
- Feedback: Loading states must maintain label. Destructive actions require confirmation.
Typography & Layout
- Optical Alignment: Adjust by Β±1px when perception beats geometry.
- Text Glue: Use non-breaking spaces for terms like 10 MB, Vercel SDK.
- Line Height: Tight for headings (1.1), relaxed for body (1.5).
Accessibility
- Contrast: Meet APCA standards. Increase validation on hover/focus.
- Motion: Respect `prefers-reduced-motion`. Animate transforms/opacity only.
- Semantics: Use native elements (`button`, `a`, `dialog`) before ARIA.