Case Study · Design System · 2025
Vault
Design System
A production-grade design language built for Vault- a fictional fintech SaaS dashboard product. It covers the full spectrum: primitive & semantic token architecture, a 58-component Figma library, WCAG 2.1 AA accessibility, motion principles, and a living documentation layer - built entirely in Figma with W3C Design Token tooling.
A single source of truth for colour, type, spacing, and interaction - built in Figma, consumed by engineers.
01 - The Brief
Why a design system?
Vault is a fictional B2B fintech platform for portfolio analytics, transactions, and compliance reporting. The brief was to design a system that a team of 8 engineers and 3 designers could ship from confidently - with zero ambiguity on color, spacing, motion, or component behaviour.
The system needed to be dark-first (dashboard context), fully accessible at AA minimum, and documented well enough that a new hire could be productive on day one. No Storybook - the entire source of truth lives in Figma using Variables and Auto Layout 4.
"A design system is not a component library. It is a shared language. The components are sentences. The tokens are the words."
02 - Process & Decisions
How the key decisions were made
Before a single token was defined, I catalogued every colour, spacing value, and component pattern that a fintech dashboard needs. This produced a list of 60+ raw values that were then grouped into candidates for the token system. Skipping this step is the most common reason design systems get abandoned - you end up with tokens that don't map to real product decisions.
The hardest architectural question was where to draw the line between primitive and semantic tokens. I settled on a strict rule: primitives are pure values (no usage meaning), semantics carry intent and reference primitives. Engineers consume semantics only. This means a rebrand or dark/light switch never touches component code.
color.brand, never color.indigo.500 - the primitive layer is internal scaffolding.Vault is a dashboard product - users spend hours in it. Dark-first reduces eye strain and makes data visualisations pop. But dark-first doesn't mean dark-only: semantic tokens are structured so a light theme can be applied by swapping token values without touching a single component.
Every colour pair was contrast-checked at the primitive layer before being promoted to a semantic token. If a pair failed AA it was adjusted at the source - not compensated for in usage. Focus states are a 2px ring baked into the component API: there is no prop to suppress them.
Token Export (W3C Format)
{
"color": {
"primitive": {
"indigo": {
"400": { "$value": "#818CF8", "$type": "color" },
"500": { "$value": "#6366F1", "$type": "color" },
"600": { "$value": "#4F46E5", "$type": "color" }
},
"slate": {
"950": { "$value": "#0A0E1A", "$type": "color" },
"900": { "$value": "#111827", "$type": "color" }
}
},
"semantic": {
"bg": { "$value": "{color.primitive.slate.950}", "$type": "color" },
"surface": { "$value": "{color.primitive.slate.900}", "$type": "color" },
"brand": { "$value": "{color.primitive.indigo.500}", "$type": "color" },
"brand-hover": { "$value": "{color.primitive.indigo.400}", "$type": "color" },
"success": { "$value": "#10B981", "$type": "color" },
"warning": { "$value": "#F59E0B", "$type": "color" },
"danger": { "$value": "#F43F5E", "$type": "color" }
}
},
"space": {
"1": { "$value": "4px", "$type": "dimension" },
"2": { "$value": "8px", "$type": "dimension" },
"4": { "$value": "16px", "$type": "dimension" },
"6": { "$value": "32px", "$type": "dimension" }
},
"motion": {
"duration": {
"base": { "$value": "200ms", "$type": "duration" },
"moderate": { "$value": "300ms", "$type": "duration" }
},
"ease": {
"standard": { "$value": "cubic-bezier(0.4, 0, 0.2, 1)", "$type": "cubicBezier" }
}
}
}03 - Brand Identity
Personality & visual language
Every visual decision communicates trust. Dark surfaces, precise geometry, no decoration without function.
8pt grid. No arbitrary values. Spacing, radius, and type are mathematically derived - not approximated.
Indigo-forward palette that reads as technical and forward-looking without being cold or clinical.
WCAG 2.1 AA as a floor, not a ceiling. Most pairings achieve AAA. Focus states are never suppressed.
Dark
Light
Mono04 - Color System
Two-tier token architecture
Vault uses a primitive → semantic token model. Primitive tokens are raw values (hex, rem, ms). Semantic tokens reference primitives and carry intent - they are what engineers and designers consume. This decouples the palette from usage, making theming and dark/light switching trivial.
Primitive Palette
Semantic Mapping
05 - Typography
Type system
Plus Jakarta Sans for display and headings (geometric, trustworthy). Inter for body and UI (maximum legibility at small sizes). JetBrains Mono for data, codes, and IDs. All sizes follow a modular scale built on a 1.25 ratio base.
06 - Spacing & Grid
8pt base grid
All spacing tokens are multiples of 4px (half the base unit), enabling both micro (4px, 8px) and macro (32px, 64px) control from a single consistent scale. The layout grid is 12-column with 24px gutters and a max-width of 1280px.
Border Radius Scale
07 - Component Library
58 production components
Every component is built with Auto Layout 4, Figma Variables, and documented with props, variants, and usage rules. Below is a live rendering of key components from the library - built purely in HTML/CSS to demonstrate the token system in action.
Button
Badge
Input
Card
Alert
Full library also includes: Avatar · Checkbox · Radio · Toggle · Select · Combobox · DatePicker · Tooltip · Popover · Modal · Drawer · Toast · ProgressBar · Stepper · Pagination · Table · Tabs · Accordion · Breadcrumb · Skeleton · Spinner · Tag Input · Search · EmptyState · DataCard · KPITile · and more.
08 - Component Anatomy
Every property is a token
No hardcoded values exist inside components. Each visual property - colour, radius, spacing, shadow, duration - references a token. The diagram below traces the primary button back to its source tokens, showing the full semantic chain.
Resting state. Background uses color.brand.
Background shifts to color.brand-hover via 200ms ease.
2px ring using color.brand-hover · 2px offset. Never suppressed.
Button.backgroundcolor.brandcolor.indigo.500#6366F109 - Screen Templates
The system applied
14 screen templates demonstrate the design system in a real product context. Every element on every screen traces back to a token - no hardcoded values. Three key screens are shown below, built entirely from the component library.
Screen 01 - Dashboard Overview
Screen 02 - Transaction History
Screen 03 - Account Settings
Permanently delete your account and all associated data. This action cannot be undone.
Best viewed on desktop. The three screen templates - Dashboard Overview, Transaction History, and Account Settings - are detailed product UI mockups that require a wider viewport to display correctly.
10 - Accessibility
WCAG 2.1 AA - by design
Contrast ratios are baked into the token layer, not checked after the fact. Every semantic color pair was validated at definition time. Focus states use a 2px offset ring in brand color - never suppressed. All interactive components are keyboard-navigable and ARIA-annotated in the Figma component notes.
Focus State Standard
11 - Motion Principles
Purposeful, not decorative
Motion in Vault communicates hierarchy and state - it is never used for its own sake. All durations and easing curves are tokenised. Reduced Motion preferences are always respected via prefers-reduced-motion.
Live Transition Demo
12 - Documentation
The system documents itself
Every Figma component has a Usage, Don't, and Props section built into the frame using a standardised documentation template. Tokens are exported as a W3C-compatible JSON file for engineering handoff. The Figma file is the single source of truth.
W3C Design Token format. One JSON file, auto-imported into the engineering repo via a build step.
Each component frame includes: purpose, props, do/don't, and keyboard nav. No external doc site needed.
Dev Mode annotations cover spacing, colour tokens, radius, and state logic. Zero guessing for engineers.
Separate accessibility layer on every component: ARIA role, focus order, keyboard shortcuts.
Version-controlled Figma branches with semantic versioning. Breaking changes flagged in the component notes.
Each component ships with real-world screen examples from the Vault product showing it in context.
13 - Outcomes
What this system demonstrates
Token architecture that separates primitive values from semantic intent - enabling theming, rebranding, and dark/light mode without component rewrites.
Contrast, focus, and keyboard nav baked into the token layer and component API - not added as an afterthought. All pairs verified at AA minimum.
Each component is designed with the engineer's mental model in mind: predictable props, documented variants, explicit state logic, and zero magic.
A system no one can use is not a system. The documentation layer - built inside Figma - ensures every decision is legible to designers, engineers, and stakeholders.
Vault is a fictional system - but every decision reflects real production constraints. The token architecture, component API thinking, accessibility standards, and documentation approach are all drawn from building design systems that ship.