Getting startedWhy this system
Why this system
The izaias design system is the contract that holds the portfolio together. This page is the argument for the contract.
The argument
A design system is, before anything else, a way of being consistent with yourself over time. The izaias design system is the way I resolve the tension between the work I shipped a year ago and the work I want to ship a year from now. It is small because the work is small. It is opinionated because the work is opinionated.
The system is public because the portfolio is public. The system is documented because the work deserves to be readable. The system is documented publicly because the work is small enough that keeping it hidden wouldn't buy anything.
Who this is for
This site is for three people.
- Hiring managers evaluating a portfolio. Read the home, the case studies, the long-form articles. The system itself is here to be inspected, but you don't have to inspect it to understand the work.
- Designers who want to see how a system is built. Read the foundations, then the components, then the patterns. The order is the argument.
- Engineers who want to see how a system is shipped. Read the components (the code is the actual code that ships), then the patterns, then the contribution model. The order is the contract.
The five decisions that shaped it
| Decision | What | Why |
|---|---|---|
| Warm-neutral palette | Cream + ink + a single accent | Reads as editorial, not corporate |
| Two typefaces | Instrument Serif + DM Sans | Editorial + UI in one pairing |
| No dark mode | One palette, well-tuned | Editorial voice, not a productivity tool |
| Hand-rolled | No shadcn, no MUI, no Chakra | Constraints are visible, tradeoffs are arguable |
| Documentation is a first-class artifact | The system lives in /designsystem | The system is the proof |
The five principles that hold it
- Tokens are the system. Components are proof. If a value is hard-coded, it's a bug.
- Fewer is more. Eight color tokens, three radii, two shadows. The next value is usually the nearest existing one.
- One source of truth.
app/globals.cssfor tokens,components/for components. No inline values anywhere else. - Document the tradeoffs. A token without a reason is a guess. Every page in this system ends with "Why this value" because the next contributor needs the argument.
- Accessibility is the default. WCAG 2.1 AA, keyboard-first, screen-reader-tested, reduced-motion-respected. None of it is a feature flag.
What this is, what it isn't
This system is:
- A personal design system — not a brand, not a product
- An artifact of the work — not a tool for the work
- A documentation of intent — not a replacement for the intent
- An MIT-licensed codebase — not a drop-in for a SaaS dashboard
This system is not:
- A Figma library (it lives in code)
- A SaaS component library (it doesn't ship to consumers)
- A dark mode (it doesn't have one, by design)
- A complete design language (it is what this site needs, nothing more)
Where to go next
If you have 5 minutes: read theFoundations overview.
If you have 20 minutes: read theFoundations, the Components overview, and the Accessibility overview.
If you have an hour: read everything, in order. The system is a single argument; it doesn't make sense in pieces.