Portfolio design system · v1.0
A quiet system for showing expressive work.
This page makes the system behind the portfolio visible: 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.
Clear to people, search engines, and agents.
The same claims appear in semantic HTML, descriptive metadata, structured data, and plain-text discovery files. The goal is consistent meaning across interfaces—not a hidden layer of keywords.
- Semantic source Landmarks, heading order, lists, definitions, and case-study sections remain readable without client-side motion.
- Structured identity Schema.org data connects Pete’s profile, expertise, selected work, and canonical project pages.
- Crawl map sitemap.xml and robots.txt make the public surface explicit.
- Agent context llms.txt offers a concise, proposed AI-readable index; llms-full.txt provides the public case-study text in one place.