Cambio Design System

A personal project where I practiced building a design system with foundations and reusable components

Role: UX/UI Designer • Timeline: December 2025 • Type: Design System

The Challenge

I created a design system for the Cambio app redesign to practice building consistent foundations and reusable components.

Why a Design System?

Inconsistent Visual Language Without a design system, different screens often use varying button styles, spacing values, and typography scales, creating a disjointed user experience.
Slow Development Handoff Without standardized specs, developers must make guesses about spacing, colors, and interactions, leading to implementation inconsistencies.
Difficult to Scale Adding new features means reinventing patterns instead of reusing established components, slowing down product iteration.

The Process

Audit UI Patterns

Analyze existing screens to identify repeated elements, inconsistencies, and patterns across the application.

Define Foundations

Establish design tokens for typography, colors, spacing, and iconography to ensure consistency.

Build & Document

Transform patterns into reusable components with comprehensive documentation and accessibility specs.

Foundations

This design system demonstrates core foundations that establish visual consistency and scalability across all components.

Typography

A clear hierarchy with 9 text styles, from hero titles (32px/Bold) to helper text (12px/Regular). Each style serves a specific purpose, creating rhythm and improving readability.

Primary Blue

The main brand color with full tonal range (50-800) used for primary actions, navigation elements, and brand-defining UI components.

Secondary Orange

Accent brand color with full tonal range (50-800) used for highlights, secondary actions, and complementary brand elements.

Neutral Colors

Gray scale palette used for backgrounds, text, borders, surfaces, and disabled states. These support structure and hierarchy.

Spacing

Four fixed tokens (12px, 24px, 32px, 64px) ensure consistent padding, margins, and alignment. These values create visual balance and predictability across all screens.

Components

Examples of reusable, documented components covering primary use cases. Each includes specs, variants, and accessibility guidelines.

Buttons

Primary action buttons with 4 variants (Default, Outline, Secondary, Disabled). All share the same size, radius (30px), and typography (Body-medium-bold).

Form Fields

Input fields with 3 states (Default, Active, Error). Includes helper text, icons, and accessibility-compliant touch targets (44x44px minimum).

Car Cards

Two variants: with and without action buttons. Used in the "Available cars" list and reservation summaries to display vehicle information in a scannable format.

Designer-Developer Handoff

For developer handoff, I would include:

Technical Specs Each interactive element would be documented with HTML attributes, input modes, autocomplete values, and state definitions for accurate implementation.
Accessible Names Clear accessible naming conventions would ensure screen readers can properly announce all interactive elements and their purpose.
Action Definitions Explicit action descriptions would clarify user interactions and navigation flows, reducing implementation guesswork.

View Full Documentation