AlgaeCal
2025
Design System
Consultant Design Lead
Spine Design System
Building the single source of truth for a $100M supplement brand.
01 — Context
A UI Kit isn't a Design System.
AlgaeCal, the leading bone supplement in North America, had outgrown its Figma file — inconsistent naming, no token logic, components duplicated instead of composable. I co-led the rebuild alongside Neelam Wooley (UX Lead), owning token architecture, component structure, documentation, and Figma delivery — shown here mid-build.
Token Architecture
Component Design
Figma Variables
Design Documentation
Dev Handoff
Storybook Integration
02 — The Problem
Design and Engineering were speaking different languages.
Without a shared token system, every handoff was a negotiation. Four pain points kept surfacing:
01
No token logic
Colors, spacing, and typography hardcoded or inconsistently applied across the file.
02
Structural fragility
Components weren't built for composition. Global changes were painful and risky.
03
Visual inconsistency
The same UI elements appeared with different sizes, colors, and spacing across pages. There was no source of truth.
04
Dev / design drift
Without a consumable system, engineering made their own decisions. What shipped rarely matched what was designed.
03 — The Approach
Token-first. Structure before components.
We didn't start with buttons. We started with a three-tier token architecture — only once that layer was solid did we move to components.
Phase 01
Foundation
Tokens
Color, spacing, type, radius, elevation — the raw values. Defined in Figma Variables.
Phase 02
Semantic
Tokens
Mapped to intent, not value — "text-primary" instead of "blue-600". Enables theming.
Phase 03
Component
Tokens
Scoped per component for precise control — no bleed between components.
Foundations / Breakpoints
No dark mode. Yes to responsive tokens.
Figma Modes map to breakpoints, not themes — switch the mode, every token updates automatically.
Foundations / Color
Four brand ramps, one design language.
Four brand ramps, 9-step scale. Only semantic values reach designers.
Foundations / Typography
Two typefaces. Every size redefined per viewport.
Granville for display, Roboto for body — every size set per breakpoint, not scaled.
Foundations / Others
Nothing left to interpretation.
Spacing, shadows, radius, icons, motion — same rigor, same traceability.
Spacing & Size
Elevation
Breakpoints
04 — Figma Architecture
A Figma file designed to be used, not just admired.
The Spine Figma file mirrors how you actually build: Foundation first, then Components. Non-exportable child structures unlock nested properties — swap icons, toggle states, change labels, all from a single layer.
05 — Components
Every component. One system.
From atomic elements to complex composed patterns — every component ships with all states, responsive behavior via semantic tokens, and annotations for dev consumption.
06 — Outcome
A foundation the team can build on for years.
Spine wasn't just a deliverable — it changed how the team worked. Designers stopped reinventing components. Developers stopped asking "what's the correct spacing?" Storybook became the living reference, and the handoff gap effectively closed.
15+ People
across designers and developers using Spine daily
Every team touching the product uses Spine
2 UI Libraries
built by the Product and Creative teams on top of Spine
The system scaled beyond the team that built it
3 Days
to design a landing page, start to finish
Down from weeks of back-and-forth
2 LPs/Sprint
Landing Pages coded easily and quickly
Developers building, not translating
650+ Tokens
created in Figma and brought to Storybook
One change in Figma. Reflected everywhere.
30+ Components
100+ variants across 3 breakpoints
Built from scratch — zero legacy debt
"Gustavo brought a level of rigor and craft to Spine that we hadn't experienced before. He didn't just deliver components — he gave us a system we could grow into. The token architecture alone saved our dev team weeks of rework."
Neelam Wooley
UX Lead at AlgaeCal