Design System & Tokensfor Strata
How I turned Figma into product infrastructure for an enterprise action system.
In Strata, I designed the visual system that supports the product. I created a multi-tier design system in Figma so it could act as a programmable source of truth for engineering, not just a UI library.
Context
Strata is an enterprise platform that unifies operational processes into an Action Center, coordinating tasks and decisions across multiple views. That level of complexity required a design system built for consistency, scale, and implementation speed.
My Role
I led the work from discovery to delivery, collaborating cross-functionally with founders and engineers, and architected the design system in Figma so product, design, and engineering could work from the same foundation.
Before
–UI decisions were made screen by screen, creating drift between design and code.
–Designers and engineers had partially overlapping definitions of components and states.
–Evolving workflows meant redesigning screens instead of reusing stable patterns.
After
✓A multi-tier system of primitives, tokens, components, and templates mapped directly to code.
✓Design and engineering shared the same token and component definitions with clear guidelines.
✓New features reused tested patterns, enabling faster, safer evolution with lower design variance.
Selected Impact
✓Boosted delivery speed by ~35% by using Figma as a visual API for frontend teams.
✓Reduced UI debt and inconsistencies, making product evolution easier without full redesigns.
✓Enabled faster workflow experimentation while maintaining brand and accessibility standards.
Core Design Decisions
I started by defining a primitives layer decoupled from modules so the system had a stable, implementation-ready base.
Color Primitives
Neutral and accent scales optimized for high-density UIs and critical states.
Spacing Primitives
4/8 spacing system applied consistently across layouts, tables, and cards.
Typography Primitives
Heading, subtitle, and body ramps designed for clarity and operational use.
These primitives lived as base variables in Figma and mapped directly to design tokens in code.
Semantic tokens: from color to intent
I translated primitives into semantic tokens so the system expressed intent, not just appearance.
Colors
primary, neutral, error, warning, success, info.
Typography
primary, muted, critical, on-accent.
States & Feedback
Success, warning, and error states reused across the Action Center, lists, and task details.
This made theming and branding changes easier without rebuilding components and created a 1:1 mapping from Figma semantic tokens to code tokens.
Components for enterprise workflows
I structured components to support multi-role workflows, making the system predictable, scalable, and developer-friendly.
Naming and structure
Components such as Action Item, Task Row, Workflow Step, and Timeline Event were named by their role in the system, not just by appearance.
Auto Layout and slots
Heavy use of Auto Layout with slots for leading/trailing icons, metadata, and AI-generated content to support dynamic data.
Variants and booleans
Action Item used variants for type, priority, and state, plus booleans like has-assignee; Workflow Step used variants for default, current, completed, and exception states.
Figma to code architecture
I treated the Figma file as a structured system, with semantically named tokens and components that mapped cleanly to code.
Structured Dataset
Figma acted as the single source of truth for visual values.
Mirrored Architecture
Component structure mirrored frontend components and container logic.
Shared Language
Design and engineering worked from the same token and state model, reducing handoff friction and ambiguity.
AI-native and implementation-ready
I used Claude Code and Figma AI to explore component structures, states, and content variants faster while keeping primitives and semantic tokens stable as the contract with engineering. I delivered the system as implementation-ready projects so tokens, components, and example flows aligned with real product structure instead of staying only in Figma. Because the file was semantically organized, it also became a stronger foundation for future AI-driven guidance, validation, and automation.
Extending token architecture to B2B2C layer.
White-labeled component:
The Strata widget had to work outside the core app shell while still feeling native on client sales pages.
Consistency across surfaces.
I extended the token architecture to adapt to external theming without breaking the internal system of record.
Shared design logic:
The system preserved semantic tokens, component states, and interaction rules across the internal Action Center and the customer-facing checkout/tracking layer.
Results & Impact
Reduced time to implement new UI by around 30-40% — the same ~35% delivery gain from Selected Impact, measured at the implementation level.
Reduced visual and behavioral inconsistencies across modules.
Created a cleaner handoff because frontend teams consumed the same visual API defined in Figma.
Built a stronger foundation for future AI-driven features by encoding states and action types semantically.