Cambio Design System - Marika Capraro

The Challenge

This personal project demonstrates my ability to build comprehensive design systems from the ground up. Working with the Cambio app redesign as a case study, I created a complete design system to showcase how standardized foundations and reusable components can improve consistency and scalability.

The goal was to establish a unified design language that could streamline workflows, improve collaboration between designers and developers, and create a foundation for scalable product development.

Why a Design System?

This project demonstrates my understanding of common challenges that design systems solve in real-world applications.

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

This project showcases my systematic approach to building design systems: auditing existing patterns, defining foundational standards, and documenting everything for seamless designer-developer collaboration.

1

Audit UI Patterns

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

2

Define Foundations

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

3

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

This project demonstrates how comprehensive accessibility annotations and technical specifications ensure seamless implementation.

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

Value & Key Learnings

This project demonstrates how a well-structured design system can transform workflows and improve product development.

Expected Benefits

Faster Design Iterations Reusable components would eliminate redundant work, allowing designers to focus on solving user problems instead of recreating UI elements.
Consistent User Experience Standardized patterns would create a cohesive experience across all screens, improving usability and building user trust.
Improved Developer Efficiency Comprehensive documentation and accessibility specs would reduce implementation time and eliminate guesswork during handoff.
Scalable Foundation New features could be built faster by leveraging existing components, accelerating product development timelines.
Better Collaboration A shared design language would improve communication between designers, developers, and stakeholders, reducing miscommunication.