DESIGN SYSTEM

A published design system for erikunha.dev — positioned at /design-system as part of the Staff/Principal frontend hiring artifact.

What's here

• Tokens — Color palette, type scale, spacing, motion, layers
• Components — 7 primitive components with live previews
• Enforcement — Lint rules, CI gates, contributing guide
• Changelog — Token and component change log

Principles

Semantic over primitive. CSS always references semantic tokens (--ds-color-signal), never primitives (--ds-green-500). The semantic layer enables theme variants without component churn.

RSC by default. 6 of 7 primitives are React Server Components — zero client JavaScript. The exception is Field, which requires 'use client' for controlled input state and form interactivity.

Enforced, not documented. Boundary lint, no-magic-values lint, and contrast check run in CI. The rules don't rely on developer discipline.