Upstream Design System
I'm passionate about design systems. Upstream is one built from the ground up.
Context
Design systems matter more as development moves faster. Upstream supports Arrangr's evolution from desktop to mobile without breaking pace.
The Architecture
Designed to absorb change, not resist it. Three layers: core primitives hold raw values; semantic tokens alias them with meaningful names; component tokens scope to specific UI elements.
Raw values representing foundational design decisions.
"warm-50": { "$value": "#faf9f7", "$type": "color" } References core tokens, never hardcoded.
"bg-base": { "$value": "{color.warm.50}", "$type": "color", "$description": "Default page background" } Used sparingly. Each token here should justify its existence.
"button-bg": { "$value": "{color.interactive.primary}", "$type": "color" } Style Dictionary transforms these into CSS custom properties, TypeScript types, and Figma variables from the same source.
Components
Built with Ark UI headless primitives and Panda CSS slot
recipes. Every component hits WCAG 2.2 AA. During a contrast
audit, I caught text-secondary at 4.24:1 and
bumped it to gray-700.
Quality Rubric
Five lenses applied to every component before it ships:
Can users tell what's interactive?
Does this scale and compose?
Does code match design intent?
Would anyone actually use this?
Does it feel considered?
What I Learned
AI lets me iterate at higher fidelity sooner. The decisions that matter most still require human judgment: consistency vs. flexibility, naming conventions, when to promote a component to the design system.