Project Background
Understanding Peach's multi-platform design challenge
About Peach
Peach operates three distinct product platforms under one parent brand: Peach Space Store (e-commerce), Peach Learning Hub (education), and Peach Fashion (luxury retail). Each platform serves different user needs but must reinforce the cohesive Peach brand identity.
The challenge: create a unified design language that works across all three platforms while allowing each to maintain platform-specific visual identity through color and emphasis.
My Role & Scope
Three Platforms, One Fragmented Visual Language
Operating separate design systems was creating inconsistency, slowing design velocity, and making handoff difficult
Fragmented Components
Each platform was building buttons, cards, and headers independently. Same component, three different specs — no single source of truth.
No Token Architecture
Colors, spacing, and typography were inconsistently applied. Color values varied (e.g. three different "Peach" hex codes across platforms).
Design Velocity Impact
Designers had to solve the same UI problems repeatedly. Each new screen required decisions that should have already been documented.
Handoff Friction
Developer handoff was time-consuming. Each component required custom specs instead of referencing a unified library.
Brand Dilution Risk
Without unified guidelines, the three platforms risked looking disconnected from each other despite being part of the same brand family.
Building the System in Four Phases
Strategic approach to unify design across platforms
Audit & Component Inventory
Token Architecture Design
Component Library Build
Platform Adaptation & Guidelines
Unified Palette with Platform Flexibility
Base colors work across all platforms; accent colors differentiate each
Two-Font System
Lora for display and headings; Plus Jakarta Sans for UI and body text
Display / Headings
Lora
Serif font used for all headlines, section titles, and display text. Communicates premium positioning and sophistication.
UI / Body
Plus Jakarta Sans
Clean sans-serif for interface elements, body copy, and forms. Highly legible at all sizes.
11 Core Components Documented
Building blocks for all three platforms
Three-Layer System
Primitive → Semantic → Platform tokens for maximum flexibility
Layer 1: Primitive Tokens
Base values with no semantic meaning
spacing-8, spacing-16, spacing-24color-black, color-white, color-gray-500font-size-12, font-size-16, font-size-24radius-4, radius-8, radius-12Layer 2: Semantic Tokens
Context-aware names that describe purpose
color-primary (maps to Peach), color-action-defaultspacing-section-vertical, spacing-component-paddingtext-body, text-caption, text-heading-largeshadow-card, shadow-elevatedLayer 3: Platform Tokens
Platform-specific overrides for accent colors
peach-store-accent: Peach (#E87B5A)peach-learning-accent: Amber (#F5A500)peach-fashion-accent: Rose (#C45070)Same Core, Three Distinct Experiences
How the design system supports brand differentiation
Peach Store
Primary brand experience. Peach color (#E87B5A) dominates CTAs, product highlights, and conversion touchpoints. Focus on product discovery and checkout experience.
Learning Hub
Educational platform using Amber accent (#F5A500) for course progression, completion badges, and achievement highlights. Calmer aesthetic with progress emphasis.
Fashion
Luxury retail platform using Rose accent (#C45070) for premium product indicators and exclusive collections. Elevated, sophisticated aesthetic.
Outcomes & Measurable Results
How the design system transformed design velocity and consistency
Personal Lessons Learned
What building this system taught me about design at scale
Documentation is design work
The component spec is as important as the component itself. Teams won't use a system they don't understand. I spent 30% of my time writing clear, visual usage guidelines — and it was time well spent.
Constraints create clarity
Having a predefined set of colors, spacing values, and component variants meant teams could move faster. Paradoxically, fewer choices led to more creative execution within those constraints.
Platform differentiation ≠ inconsistency
Using the same core components with platform-specific accent colors proved that you can maintain brand coherence while allowing each platform to feel distinct. It's about smart constraints, not rigid uniformity.
Token architecture scales
The three-layer token system we built allows future platforms to adopt the system by only defining platform-level tokens. The system is built for growth, not just the three platforms we started with.
Interested in discussing design systems, token architecture, or multi-platform design challenges?
Let's talk →