DESIGN SYSTEM
LIVE
A published design system for erikunha.dev — positioned at /design-system as part of the Staff/Principal frontend hiring artifact.
- PRIMITIVES
- 8
- RSC
- 6
- A11Y
- 100
- CLIENT_KB
- 0
erik@portfolio:~$import { Button, Badge, Field, StatTile } from '@/design-system'
Sections
- Tokens — Color palette, type scale, spacing, motion, layers
- Components — 8 primitive components with live previews and source
- Enforcement — Lint rules, CI gates, contributing guide
- Changelog — Token and component change log
Principles
Utilities over raw values. Components reference Tailwind utilities backed by the @theme palette (text-primary-500, border-primary-subtle), never raw hex. The single @theme block in theme.css is the one place a colour changes.
RSC by default. 6 of 8 primitives are React Server Components — zero client JavaScript. Field and CopyButton require 'use client' for controlled input state and clipboard access respectively.
Enforced, not documented. The contrast gate, axe-core a11y scan, and Lighthouse (a11y = 100) run in CI. The rules don't rely on developer discipline.