Before: Fragmented Chaos
- Each product had its own ad-hoc components
- AI-generated UI with no brand consistency
- Hours wasted debating specs and colors
- No shared source of truth for tokens
Go Back to projects
Go Back to projects
Building a unified design foundation for enterprise fintech products with 42+ components, token-driven architecture and an 80% reduction in design time.
Before building the design system, Spheresmith's design and development process was fragmented and inefficient across 7+ products.
Prism, InvestSphere, CorpSphere and FinSphere each had different buttons, inputs and cards while developers rebuilt components repeatedly.
Designers generated UI from Figma, ChatGPT or Claude with no guarantee of brand standards, accessibility or cross-product compatibility.
Every new feature rehashed old decisions, "What shade of grey? How much padding?" Handoffs were unclear, developers guessed at interactions.
Colors from Tailwind standard colours, undefined typography scales, arbitrary spacing and scaling became impossible as products grew.
Rather than continue with fragmented ad-hoc solutions, I built a comprehensive design system from the ground up, the single source of truth for all design decisions across 7+ products.
Audited existing patterns across all products, identified inconsistent tokens and workflow pain points.
Defined color, typography, spacing, shadows, radius, and icon systems with semantic naming.
Designed 42+ reusable components with variants, states, accessibility, and token-driven styling.
GitLab repo, npm package, Storybook docs, and Figma-to-code token sync via MCP export.
I shaped the process around Spheresmith's real complexity — auditing 7+ fintech products while validating a new UI direction in parallel. With a clear Phase 1 plan, I established a three-tier token architecture, built foundations and 42+ components end-to-end, then shipped through GitLab, npm, and Storybook for developers to adopt.
Modular JSON structure synced from Figma via MCP
End-to-end design execution — developers consume via handoff
Define color, typography, spacing, shadows, radius & icons
Design 42+ components with variants, states & WCAG 2.1 AA
Publish Storybook, GitLab & npm for developer adoption
A strong design system starts with a strong foundation. Core design tokens guide every design decision — no hardcoded values, no guesswork.
Semantic scales from 50–950 for primary, secondary, accent, grey, and feedback states.
Primary
Secondary
Accent
Grey
Semantic
Data viz
Text
Border
Background
Skeleton
Be Vietnam Pro with semantic roles — headings, body, captions, and monospace for data.
Heading 1 — Display
Heading 2 — Section
Heading 3 — Subsection
Heading 4 — Card title
Heading 5 — Label
Heading 6 — Overline
Body text — Enterprise readability at scale
Body small — Secondary content
Caption — Supporting metadata
Monospace — Code & data values
Consistent scale from 3xs to 5xl for predictable padding, margins, and card layouts.
Five elevation levels (2xs → 2xl) create depth hierarchy across cards, modals, and popovers.
Consistent radius tokens express brand personality — approachable yet professional across all surfaces.
Consistent 1.5px stroke weight with semantic sizing — clean, lightweight, and readable at every scale.
42+ reusable, production-ready components, each with multiple variants, full state coverage, WCAG 2.1 AA accessibility and Storybook documentation.
Primary, secondary, danger, success, link, icon variants with loading states
Text fields with validation, icons, and placeholder guidance
Selection control with clear checked, indeterminate, and disabled states
Single selection within a group with keyboard navigation
Binary on/off controls with accessible labels
Searchable dropdowns with multi-select support
Secure authentication code entry with auto-focus
File upload with drag-and-drop support
Multi-line text input with resize and character count
Range selection with step values and labels
Compact action trigger with tooltip support
Navigation-styled button for inline actions
Form field wrapper with label, error, and helper text
Calendar-based date selection with range support
Non-blocking notifications for success, error, warning, info
Inline important messages with dismissible option
Confirmation dialogs for destructive actions
Status indicators, tags, and count displays
Metrics and progress display component
Linear and circular progress indicators
Loading state indicator with size variants
Content placeholder during data loading
Stacked toast notification system
Flexible container for grouped content with header/footer
Overlay containers for critical interactions
Context-sensitive floating content panels
Brief contextual help on hover or focus
Side panel for secondary navigation or details
Navigation and filtering panel layouts
Rich preview card on hover interaction
Visual divider between content sections
Custom scrollable container with styled scrollbar
Drag-to-resize panel layouts
Collapsible content sections with smooth animation
Empty state placeholder with call-to-action
Complex data with sorting, filtering, and pagination
Basic tabular data display component
Bar, line, and pie data visualizations
Navigation hierarchy trail
Data browsing across multiple pages
Content organization with tab panels
Scrollable content slideshow
Modular JSON token structure synced from Figma via MCP, keeping design and code in perfect alignment across the entire pipeline.
Tokens organized into a structured JSON hierarchy — synced from Figma via MCP, consumed across all products.
Raw primitives — color hex values, spacing px, font sizes, shadow definitions.
color.primary.500 · space.md · radius.base
Context-aware aliases — text.primary, bg.surface, border.default, feedback states.
text.primary · bg.card · border.focus
Component-specific overrides — button.padding, card.gap, input.height per variant.
button.primary.bg · card.padding · input.border
Single source of truth for tokens and component specs
Pulls design data into structured JSON format
Component code development with Figma MCP accuracy
Version-controlled tokens and components
Package distributed across all Spheresmith products
Interactive documentation and testing for developers
import { color, space, radius, shadow } from "@spheresmith/design-system";
const ButtonStyle = {
backgroundColor: color.primary[500],
padding: space.md,
borderRadius: radius.base,
boxShadow: shadow.md
};More than visual polish — lasting impact across execution, efficiency, and product consistency.
Reduction in design time per product screen
Before — per screen
After — per screen
Unlike systems that live only in Figma, tokens sync seamlessly from Figma → GitLab → Storybook → Production, keeping everything in sync.
All 42+ components follow WCAG 2.1 Level AA — keyboard navigation, screen reader support, color contrast, and focus states from day one.
Every color, spacing, and typography choice is a token — consistent decisions, easy theming, and semantic names instead of magic numbers.
Built for growth. As Spheresmith adds products and features, new teams onboard and build confidently without reinventing the UI.
Designers focus on research and strategy. Developers ship faster with predictable, accessible components. New products launch in weeks, not months.