Context
- Colors & spacing hardcoded per screen, no central tokens
- Components duplicated 3–5× across different pages
- No naming convention, layers mostly unnamed
- Complex UI built as flat groups, not reusable components
- No states (hover, disabled, error) on interactive components
- Dev handoff was inconsistent and slowed sprint velocity
- Primitive → Semantic → Component token hierarchy
- Single source of truth — one component, one place
- Consistent BEM-style naming across all layers
- Complex UI rebuilt as block components with clear anatomy
- All interactive components have complete state coverage
- Dev-ready specs with token references, not hardcoded values
Token Architecture
The old system had no token layer — everything was hardcoded. The new architecture follows a
streamlined
two-layer system: Primitives as the base palette defined in :root, and
Semantics that alias the primitives based on their roles. By directly applying
Semantics to components (e.g., .card { background: var(--bg-neutral-default); }) rather
than relying on a third 'Component' layer, we enforce a clean 'Single Source of Truth' that makes
theming and maintenance incredibly simple.
Components
When building this component library, I audited the previous, non-tokenized design system. I evaluated the legacy components to identify opportunities for improvement and meticulously renewed them using our new strict variable architecture.
To ensure industry best practices, I also researched established, token-driven systems like the Material UI Kit and others. This informed both our component structure and foundational layout strategies (though full layout documentation is an ongoing case study of its own and not completely pictured here).
Note: Due to strict NDA restrictions, I am only able to display a small, sanitized subset of the full component library below. Any additional proprietary components cannot be put here.
Alongside the interactive UI components, I also carefully designed a custom, cohesive icon set specifically tailored for this system to ensure consistent stroke weights, sizing, and brand alignment:
Mockup Preview
What you're looking at These are real screens from the investment management system, shown with sensitive financial data masked to comply with NDA. The layout structure, component usage, hierarchy, and design decisions remain fully visible.
The screens below demonstrate the new design system applied in production — how the token system, rebuilt components, and block patterns come together across dashboard, portfolio detail, and transaction flow.
