Upskill Design System

Designing a comprehensive design system for UpSkill that bridges design and development workflows, enabling consistent user experiences across mobile, tablet, and desktop.

Role

UX lead / Product Designer

The Challenge

UpSkill's learning platform required a cohesive design system adaptable for different devices. Without foundational standards, the project faced three key challenges: establishing responsive typography and spacing systems, creating a scalable token structure, and balancing flexibility with constraint to support diverse content within a unified visual language.

Objectives

Responsive foundations with adaptive typography and modular spacing across devices
Semantic token taxonomy supporting light and dark themes without duplication
Production-ready component library with clear implementation guidelines
Scalable system architecture that maintains quality as features grow

Approach

1. Discovery

I began by reviewing user stories and acceptance criteriafor the home page, user dashboard, and course details page. To contextualize these requirements, I conducted a competitive audit of learning platforms to understand content structure, user flow, and visual hierarchy. These insights shaped the initial responsive wireframes across mobile, tablet, and desktop, helping define the necessary components and interaction patterns.

2. Modular design & Theming

With a solid functional foundation, I developed a modular component framework built from reusable elements such as navigation, course cards, and progress trackers, validating their behavior across breakpoints. I then explored theming to define the platform's visual direction—applying the 60/30/10 rule and testing color, typography, and component styling. This led to the creation of foundational design tokens, including a responsive type scale, a 12-tints color palette, and core UI elements, ensuring consistency, scalability, and a cohesive brand experience.

3. Token Taxonomy Strategy

To establish a scalable and intuitive naming system, I explored multiple token structure models, including more complex taxonomies with role-based layers. After testing different outputs across use cases —such as container layering and CTA differentiation— I adopted a streamlined structure:

category | property | variant | state

Key decisions:

Removed "role" layer to eliminate duplication and reduce token name length
Avoided "primary/secondary" labels that become ambiguous across different contexts
Surfaced common tokens at the property level (e.g., color-text-default) for quick access, while nesting specific cases deeper (e.g., color-text-feedback-error)
Introduced inversion tokens (e.g., color-text-inverted) that work on different surfaces

Solution

Responsive Type Scale

To simplify typography while keeping it adaptable, I built the system on a single primitive type scale — 11 fixed sizes from 12px to 32px in 2-pixel increments, aligned to the 16px/8px grid. This scale acts as the source of truth, and all responsive behavior is handled through token aliasing, not separate scales.

For each breakpoint, I applied tailored modular ratios — Minor Third on mobile, Major Third on tablet, and Perfect Fourth on desktop—to adjust typographic contrast. These ratios remap the primitives to create a distinct, responsive hierarchy using only eight surface-level type roles: two body sizes, four title sizes, and two display sizes.

This approach provides a streamlined, easy-to-use system for designers and developers while maintaining flexibility across dense dashboards, content-heavy pages, and expressive hero sections.

Modular Spacing System

Following the same logic as the typographic scale, I created a set of primitive spacing tokens aligned to the 8px grid and named using fractions of the 16px base (1rem). This keeps the scale both semantically meaningful and future-proof. For example, 100 = 1rem = 16px and 050 = 0.25rem = 4px.

I then expanded these primitives into a semantic spacing system with clear, purpose-driven categories: inline for horizontal gaps, stack for vertical spacing, and inset for internal padding, along with contextual tokens such as margin and gutter. This separation between primitives and semantics makes layouts more scalable with greater control and flexibility.

Component library and Documentation

I built a 14-component library in Figma with full light/dark theme support, organized through three variable collections: Primitives, Device, and Theme. This structure enables automatic responsive and thematic behavior without manual token swapping. The library includes foundational elements and layout templates, supported by concise documentation that streamlines designer-developer handoff and empowers both teams to work autonomously while maintaining system integrity.

Impact

This design system established a scalable foundation for UpSkill's learning platform, enabling consistent user experiences across all devices. By implementing a token-based architecture with responsive typography and semantic spacing, the system reduced design-to-development handoff friction and accelerated future feature development. The modular component library empowered the team to maintain visual consistency while adapting quickly to new requirements, positioning the platform for sustainable growth while maintaining design quality at scale.