Foundations
Color
Night band
Dark sections are a layout choice. Public pages stay in light mode. Do not flip a theme.
Typography
Scale
Body is Inter at 16 / 1.6. Secondary text uses ink-muted.
Mono label
I build things that serve people. Highlights also come in orange and blue.
Elevation
Hard shadows
Zero blur. Ink only. Public UI is square.
Components
Buttons
Cards
Orange accent
Interactive cards use press-effect.
Blue accent
6px top border. Paper fill.
Yellow accent
Used on highlight cards.
Form
Focus is outline + press-effect. Never a ring fade.
Inventory
Primitives
| Component | Use |
|---|---|
| RetroButton | primary / ink / outline / ghost / link |
| RetroCard | accents + optional interactive |
| RetroHeading + Highlight | type scale and inline marks |
| Form set | input, textarea, select, checkbox, label |
| RetroAccordion / Dialog / Sheet | FAQ, modal, slide-in |
| RetroStat / Progress / Badge | proof and chips |
| Section / PixelEdge / Marquee | page structure |
| RetroImage / Polaroid / WindowFrame | media treatments |
| Reveal | only entrance mechanism |
Motion
Rules
Reveal is the only entrance. Workhorse is slideUp. stampIn is for badges. wipeIn is for images. No standalone fades. GSAP stays on the about story. Honor reduced motion in CSS, JS, and with an alternate render when the experience itself must change.
Icons: @tabler/icons-react only.
Voice
How it sounds
Warm, pastoral, direct. Short sentences. Specific over abstract. Hyphens with spaces ( - ), never em dashes. No fabricated metrics. No Triumph voice in personal work.