This portfolio has a deliberately quiet, editorial feel: hairline borders, restrained caps labels, plain paper and ink with no accent hue, and motion that supports the content instead of replacing it. This page documents the tokens and primitives that produce that feel.
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.