AlgaeCal
2025
Design System · Freelance Consulting
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 had a growing product team and a Figma file that looked like a design system — but wasn't. Inconsistent naming, no token logic, components duplicated instead of composable. The UX Lead brought me in to stop patching and build something that actually scales.
02 — My Role
Lead designer and system architect.
I co-led Spine alongside Neelam Wooley (UX Lead) — owning the full token architecture, component structure, documentation, and Figma delivery. Implementation went to a PM and 3 developers building in Storybook.
Token Architecture
Component Design
Figma Variables
Design Documentation
Dev Handoff
Storybook Integration
03 — 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. No primitive, semantic, or component-level token layer.
02
Structural fragility
Components weren't built for composition. Variants were duplicated instead of composable — 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.
04 — 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
Primitive tokens for color, spacing, typography, border radius, and elevation. The raw values that feed everything else. Defined in Figma Variables.
Phase 02
Semantic Tokens
Tokens mapped to intent, not value. "color-text-primary" instead of "blue-600". This layer makes theming and future dark mode possible.
Phase 03
Component Tokens
Component-scoped tokens for precise control without bleed. Each component owns its own token namespace, feeding from semantic but isolated from others.
Foundations / Breakpoints
Dark mode was a No. Responsive tokens were a Yes.
AlgaeCal doesn't need dark mode — that was a deliberate product decision, not an oversight. But the system still needed to handle variation across devices. Each Figma Mode maps to a breakpoint: switch the mode on a frame and every component token updates automatically. No overrides, no detached instances.
Foundations / Color
Four brand ramps, one design language.
Four brand ramps (Orange, Green, Yellow, Blue), each on a 9-step luminosity scale. Only values promoted to semantic tokens are available to designers — keeping the working vocabulary intentionally narrow.
Foundations / Typography
Two typefaces. Every size redefined per viewport.
Granville for display and heading, Roboto for paragraph and labels — each with a defined territory. Every size is explicitly set per breakpoint in Figma Modes, not scaled proportionally from desktop.
Foundations / Others
Nothing left to interpretation.
Spacing, shadows, breakpoints, border radius, iconography, and motion — all documented with the same rigor as color and type. Every value tokenized, every decision traceable back to the system.
Spacing & Size
Shadows
Breakpoints
05 — 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.
06 — 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.
Buttons & CTAs
Primary, secondary, ghost, destructive — all sizes and states.
Form Elements
Inputs, selects, checkboxes, radios, toggles, sliders.
Navigation
Navbar, sidebar, breadcrumbs, tabs, pagination.
Feedback & Alerts
Toasts, banners, modals, tooltips, badges.
Cards & Lists
Product cards, testimonials, feature lists, data rows.
Typography
Full type scale: Display, Heading, Body, Label — light and dark.
07 — 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.
0→1
Complete design system built from scratch
In 6 months of consulting
3 layers
Token architecture: primitive, semantic, component
Implemented in Figma Variables
Storybook
All components documented and shipped in production
Consumed by 3 developers
1 source
Single Figma file as the source of truth for the whole team
Design + Engineering aligned
"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 · AlgaeCal