UX/UI Designer

Token-based design system built from scratch color semantic layers, modular typography scale, spacing system, and a full component library with variant & state management.

Year

2024

Client

Freelance Project

Industry

Social / Dating

Project Duration

Ongoing

Context

SoulLink needed a design system built from scratch. As the sole designer, I defined the full token architecture, component structure, and variant logic, creating a foundation that could scale from MVP to team collaboration.

Token Architecture

Three-layer color system: palette → semantic → component tokens, with dark-first approach. Modular typography scale (12–30px) with consistent line-height ratios. 4px base grid spacing system with named increments for predictable layouts.

Component Library

Atoms: buttons (3 types × 4 sizes × 2 states), inputs, icons. Molecules: cards, forms, navigation bars. Organisms: onboarding flows, feed layouts, chat interfaces. Every component documented with all interactive states.

Outcome

The system enabled rapid screen production, with new screens assembled from existing components in hours, not days. Architecture structured for team scaling with clear naming conventions, variant logic, and documentation.