Portfolio design system · v1.0
A quiet system for showing expressive work.
The portfolio uses a small set of durable rules: legible type, structural spacing, functional color, and enough restraint for each project to keep its own voice.
Four operating principles
- Useful
Every visual decision should improve orientation, comprehension, or action.
- Legible
Reading comfort and clear hierarchy take priority over stylistic novelty.
- Adaptable
Semantic tokens allow the same structure to work across themes and project voices.
- Honest
Real work, clear status, and specific ownership are presented without inflation.
Warm neutrals, one signal.
The palette follows the system theme automatically. Components use semantic roles rather than fixed light or dark values.
--color-bg--color-surface--color-bg-subtle--color-text--color-text-muted--color-accentA compact hierarchy with a readable floor.
Concept to code.
Useful systems with character.
A creative technology practice connecting product thinking, visual direction, and technical execution.
SELECTED WORK · 2026 · IN PROGRESS
An eight-pixel rhythm with four-pixel control.
Controls communicate before they decorate.
Actions
Project state
Built into the rules, not added at the end.
- AA contrastText, muted text, signal color, and boundaries are validated in both themes.
- Keyboard firstA skip link, logical tab order, visible focus, and 44px navigation targets support non-pointer use.
- System preferencesLight and dark modes follow the operating system; reduced motion removes nonessential transitions.
- Readable scaleInterface labels never fall below 13px, and long-form copy maintains a controlled measure.