Back to portfolio

Design System

Lead Product Designer • Everee

Creating a scalable design system to align product and engineering

Goal

Create a shared design system that aligns product design and engineering implementation.

As the product grew, multiple designers and engineers were working across different areas of the platform. Without a shared system, UI patterns were being recreated across teams, leading to inconsistencies and slower development cycles.

The goal was to create a practical design system that served both design and engineering. Designers needed a clear source of truth for components and styles, while engineers needed documented patterns they could reliably implement. To bridge this gap, the team adopted Storybook as a shared reference where implemented components could live alongside the design system.

Discovery

Identify where inconsistency was slowing down product development.

Early product work revealed that teams were recreating UI patterns in multiple places, creating inconsistencies and increasing implementation effort. The opportunity was to establish a shared foundation that both design and engineering could rely on.

  • UI patterns were recreated across different parts of the product
  • Designers lacked a centralized source of truth for reusable components
  • Engineers needed clearer standards for implementing UI elements
Research

Understand how designers and engineers interact with UI patterns in practice.

Rather than designing a theoretical system, the focus was on building something the team could use daily. The system needed to reflect the real components already used across the product while creating a path toward consistency.

Research highlights
  • Reviewed common UI patterns across the product interface
  • Identified heavily used components such as buttons, inputs, and tables
  • Collaborated with engineering to align design tokens and component behaviors
Design

Structure the system around Brand, Foundations, and Components.

The system was organized to help designers move from high-level visual identity to reusable UI components. This structure made it easier to maintain consistency and scale the system as the product evolved.

Brand

The brand layer defined the visual identity used across the product.

  • Extended the brand color palette with accessible light and dark variations
  • Created guidelines for contrast and readability
  • Used accessibility tools to validate color usage
Foundations

Foundations established the core design rules that guide the interface.

  • Typography standards for web and mobile
  • Elevation and shadow patterns for visual hierarchy
  • Formatting guidance for dates, time, and sensitive data
Components

Reusable components allowed designers and engineers to build consistent interfaces quickly.

  • Buttons and alerts with defined variations
  • Form inputs with documented interaction patterns
  • Tables with alignment and filtering guidance

Design components were maintained in Figma while implemented components were documented in Storybook, creating a shared reference between design and engineering.

Outcome

The design system created a shared language between design and engineering.

Impact
  • Established a consistent UI framework across the product
  • Reduced duplicated design and development work
  • Accelerated product development using reusable components
  • Improved collaboration between design and engineering
Product Outcomes
  • Designers could quickly assemble interfaces using standardized components
  • Engineers could reference implemented components in Storybook
  • The system created a shared source of truth between design and development
  • Product teams gained a scalable foundation for future features
Code Examples

Below is a sample of the TextProps interface and related constants used in the design system:

export interface TextProps extends RNTextProps {
// The relative size of the text. size?: 'xsmall' | 'small' | 'standard' | 'large' | number;
// The text's tone (color). tone?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'neutral';
// The texts emphasis (opacity) emphasis?: 'high' | 'medium' | 'low';
}

const fontSizes = {
xsmall: 10,
small: 12,
standard: 16,
large: 24, };

const emphasisValues = {
low: 0.4,
medium: 0.6,
high: 1,
};
Reflection

Building the design system reinforced the importance of aligning design and engineering around a shared system rather than separate documentation. By pairing design assets in Figma with implemented components in Storybook, the team created a practical bridge between design intent and production code.

System Adoption & Governance

Creating the system was only the first step. Ongoing adoption required establishing practices that helped designers and engineers consistently reference and expand the system as the product evolved.

  • Used Storybook as the shared implementation reference for engineers
  • Maintained the component library in Figma as the design source of truth
  • Encouraged designers to build new features using system components first before creating new patterns
  • Used design critiques to review new UI patterns and determine whether they should become reusable components

These practices helped ensure the design system remained a living resource rather than static documentation. As new features were developed, both designers and engineers could reference the same system to maintain consistency across the product.