UX Case Study

Club
Design
System

CompanyBrandbassador

ProductClub — Ambassador Platform

RoleDesign System Lead · Senior Product Designer

PlatformsFlutter App · React Web

Scroll to explore

00 / Intro

What is the TIE design system?

TIE (Club’s design system) is the single source of truth for UI across the ambassador platform — tokens, components, and patterns shared between Flutter and React. It aligns teams on one visual and interaction language so Club scales without fragmenting the brand.

01 / The Challenge

Why the design
system needed to exist

Club connects brands with ambassadors to run marketing missions — across a Flutter mobile app and a React web platform. As the product scaled, design and development needed a shared language to stay cohesive.

Inconsistency at scale

UI patterns duplicated across both platforms — fragmented brand experience.

Friction between design and dev

Slow handoffs and ambiguous specs led to rework and misaligned components.

No unified brand design language

Club lacked a cohesive visual identity across the ambassador app and brand platform.

Unsustainable design velocity

Every feature designed from scratch — no tokens, no docs, no shared primitives.

Logo System

Wordmark

Brand Identity

Logo Lockups

Club colour tokens — primary palette with accessibility compliance

Colour Tokens

Club extended colour palette — secondary and accent colors

Extended Palette

Club typography system — Gustavo and Hello America typefaces

Typography

Brand Application

03 / System Architecture

Atomic design,
structured in five tiers

The Club TIE design system is organised into five clear tiers — each building on the last. Every UI element traces back to a single source of truth in Figma and in code.

Tier 0
Primitives
Colour Tokens
Typography Scale
Spacing System
Grid & Layout
Motion Values
Border Radius
Tier 1
Foundations
Semantic Colours
Text Styles
Elevation
Clubicons
Illustration Style
Tier 2
Core Components
Buttons
Inputs & Forms
Cards
Navigation
Modals & Sheets
Tags & Badges
Tier 3
Platform Components
App Components (Flutter)
Platform Components (React)
Mission Cards
Ambassador Profiles
Brand Dashboards
Tier 4
Patterns & Templates
App Templates
Design Patterns
Page Layouts
User Flows

Tier 0 Primitive Color Tokens

17 color families · 11–14 stops · from the Primitives Figma library

Grey

Teal

Teal Dark

Red

Green

Orange

Blue

Purple

Pink

Yellow

Tangerine

Lime

Burgundy

Mint

Alpha / White

Alpha / Black

Alpha / Grey 500

Tier 1 Foundation semantic colours

Resolved from the Theme variable collection — Light and Dark modes. Values alias to Tier 0 primitives.

Flutter app

Semantic colours in context

Each frame shows light theme surfaces and typography. Hover or focus to crossfade to dark — same purple accent (#9667F7) in both.

Brand profile

Web platform

Brand dashboard

Same Club web experience in light and dark — hover, focus, or press and hold to crossfade, matching the mobile previews above.

Browse by group — one category at a time.

Surface & canvas6 tokens

Token

Light

Dark

bg/primary/default

#060708

#ffffff

bg/standard/default

#ffffff

#161a1d

bg/neutral/default

#f7f8f9

#101214

elevation/base/default

#f0f2f5

#060708

elevation/surface/default

#ffffff

#22272b

bg/input

#ffffff

#161a1d

Typography5 tokens

Token

Light

Dark

text/default

#060708

#e6e8eb

text/subtle

#475059

#c2c7cc

text/subtler

#69727a

#9da4ab

text/subtlest

#9da4ab

#69727a

text/inverse

#ffffff

#060708

Border3 tokens

Token

Light

Dark

border/default

#dde4ec

#475059

border/subtle

#e6e8eb

#2c333a

border/interact

#c2c7cc

#69727a

Brand4 tokens

Token

Light

Dark

bg/highlight/default

#6131c4

#9667f7

text/highlight/default

#6131c4

#b593f9

bg/highlightSecondary/default

#329994

#0e5056

text/highlightSecondary/default

#329994

#329994

Status7 tokens

Token

Light

Dark

bg/danger/default

#ff403c

#ff403c

text/danger/default

#ff403c

#ff403c

bg/success/default

#00c278

#00c278

text/success/default

#00c278

#12c963

bg/warning/default

#ff960a

#ffa834

text/warning/default

#cc7808

#ff960a

text/Info/default

#004acc

#005dff

Visual / Club graphics & icons

Club graphics & icons

Otto scenes, circular emoji marks (happy, smile, wow, zipper), and icon-led UI share one line weight and palette. Hover any tile to see its label.

Motion / Animations

Animations

Rive micro-interactions from the Club product. Each file stays paused until you hover or focus a tile.

Raster previews for the case study; production uses SVG for icons and scalable illustration where possible.

04 / Component Library

Built for two platforms,
one design language

Eight Figma libraries make up Club TIE — each with a clear scope, shared tokens, and platform-specific variants serving both the Flutter ambassador app and the React brand management platform.

🎨

Colour tokens

Semantic token system with primitive, semantic, and component-level colour roles — supporting light/dark mode across both platforms.

Aa

Typography scale

Harmonious type scale with display, heading, body, and label styles — mapped to both Flutter text themes and CSS variables.

⊞

Spacing & grid

An 8px base spacing system with consistent grid structures for mobile and web — ensuring alignment and rhythm across all layouts.

◉

Elevation & shadow

Defined elevation levels with corresponding shadow values — giving the UI hierarchy and depth across surfaces and overlapping layers.

⟳

Motion & animation

Shared easing curves, durations, and transition patterns ensuring micro-interactions feel cohesive between the app and web platform.

◻

Border radius & shape

Consistent shape language for all interactive elements — from subtle card rounding to fully rounded buttons and input fields.

⬜

Buttons

Primary, secondary, ghost, and destructive variants with all interactive states, sizes, and loading/disabled conditions documented.

▭

Inputs & forms

Text fields, selects, date pickers, and checkbox/radio groups — with validation states and accessibility-first structure.

▣

Cards & surfaces

Content cards, list items, and surface containers that compose cleanly into mission feeds, ambassador profiles, and brand views.

≡

Navigation

Tab bars, top navigation, side drawers, and breadcrumbs — adapted to each platform's navigation paradigm.

⊡

Modals & sheets

Bottom sheets for mobile, dialogs for web — with consistent overlay behaviour, focus trapping, and dismiss patterns.

◈

Tags & badges

Status indicators, category tags, and notification badges used across mission status flows and ambassador tier labels.

📱

Mission cards

Core ambassador touchpoint — cards displaying mission details, reward values, deadlines, and quick-action CTAs for the mobile app.

👤

Ambassador profile

Composed profile view with avatar, tier badge, stats summary, and social handle links — built for the Flutter ambassador experience.

🏆

Reward components

Earning summaries, reward tier progress indicators, and payout status views — key to the ambassador motivation loop.

📊

Progress & stats

Mission completion progress bars, performance summaries, and campaign tracking components for in-app reporting.

🔔

Notifications & feeds

Activity feeds, notification cells, and empty-state patterns with skeleton loading states for perceived performance.

📸

Media upload

Photo/video submission components for mission content delivery — camera picker, gallery selector, and upload progress states.

📋

Brand dashboard

Campaign performance tables, ambassador list views, and analytics summaries — built for the React brand management web platform.

⚙️

Mission builder

Step-by-step form patterns for brands to create and configure missions — with inline validation, rich text, and media upload.

🔍

Search & filters

Advanced filter panels, search bars with suggestion dropdowns, and sort controls adapted to desktop-first interaction patterns.

📈

Analytics views

Chart wrappers, metric cards, and data table components for brand-side reporting on ambassador performance and campaign ROI.

💬

Messaging

Thread lists, message bubbles, and conversation views enabling direct communication between brands and ambassadors.

⬡

Onboarding flows

Multi-step onboarding patterns, progress indicators, and setup checklists for brand account creation and configuration.

Clubicons & Otto

A custom icon library on a 24px grid with a 1.5px stroke — navigation, actions, status, social, and product-specific glyphs. The same visual language extends to Otto and spot illustrations (see Club graphics & icons above).

Design patterns

Beyond components, Club TIE documents repeatable design patterns — structured solutions to common UX problems that guide how components are composed into functional interactions.

Empty states

Consistent patterns for zero-data screens — illustration, message, and action CTA.

Loading & skeleton

Skeleton screen patterns for async content — reducing perceived wait time across feeds.

Error handling

Toast messages, inline errors, and full-page error states with recovery actions clearly signposted.

Confirmation dialogs

Destructive action confirmation patterns with accessible focus management.

Multi-step flows

Progress stepper patterns for mission creation, onboarding, and ambassador application flows.

Responsive layout

Breakpoint-aware patterns showing how components reflow across mobile, tablet, and desktop.

05 / Governance

Design meets code:
Storybook & Widgetbook

A design system only works if it's trusted by the people building with it. Governance means the system is documented, tested, and maintained — not just designed.

Storybook

React Web Platform

Living documentation for all React components on the brand management platform. Each component is catalogued with all its variants, states, and props — giving developers a reliable reference and a visual test suite.

Component stories for all interactive states
Visual regression testing baseline
Accessible component documentation
Isolated development environment
Single source of truth for frontend engineers

Widgetbook

Flutter Mobile App

The same governance layer for the Flutter app. Each widget is catalogued, documented, and testable in isolation — closing the loop between what's designed in Figma and what's shipped in the ambassador app.

Widget catalogue for all Flutter components
Device and theme preview testing
Hot-reload documentation workflow
Direct collaboration with Flutter engineers
Design-to-code consistency verification

Live Storybook

TIE Button — React web documentation

Embedded Storybook for the Club TIE component library (example: TieButton docs). If the frame stays blank, the host may block embedding — open the same URL in a new tab.

Open Storybook in a new tab →

05b / Vibe Coding

Designing in code

One of my most distinctive contributions was participating directly in the development of design system components through a practice I call "vibe coding" — a fluid, collaborative loop between design intent and code output.

Design the component in Figma

Each component starts in Figma with all variants, states, and token references clearly defined — giving engineers a precise specification before a single line of code is written.

Sit alongside the engineer

Rather than throwing specs over a wall, I work directly with the engineer as they build — providing real-time design feedback and catching deviations early, before they become habits.

Contribute code directly

Where possible, I write or adjust code myself — tweaking spacing values, token references, border radii, and animation curves directly in the codebase to match the design intent precisely.

Validate in Storybook or Widgetbook

The finished component is verified against the Figma spec in the documentation environment — checking all states, themes, and responsive behaviour before it's added to the library.

Document and publish

Once validated, the component is documented in both Figma and the code documentation tool — ready to be used, extended, and governed by the full team.

06 / Impact

Outcomes & what
changed for the team

While formal metrics weren't tracked, the impact of Club TIE was felt clearly across design velocity, development quality, and brand consistency — across two platforms and the full product team.

8

Figma libraries built and maintained across the full product

2×

Platforms served — Flutter mobile app and React web platform

↑

Development velocity and design-to-code consistency improved across the team

07 / Process Deep-Dive

How we built it:
phase by phase

The Club TIE system wasn't designed all at once. It evolved through deliberate phases — from discovery and audit through to active governance — with each phase building on a validated foundation.

Phase 01

Audit & discovery

Before designing anything new, we mapped what already existed — cataloguing UI patterns, inconsistencies, and reuse opportunities across both platforms.

Screenshotted and inventoried all existing UI across app and web
Identified duplicated patterns and divergent component states
Interviewed engineers on the biggest friction points in handoff
Benchmarked competitor design systems for structural reference
Defined the scope: what would and wouldn't be in v1

Phase 02

Foundations first

With audit findings in hand, we established the primitive layer — tokens, typography, colour, and spacing — before touching a single component. No building on sand.

Defined the full colour token system: primitive → semantic → component
Built the typography scale in Figma and mapped it to Flutter text themes
Established the 8px spacing grid and component shape language
Created the Primitives and Foundations Figma libraries
Synced token values with the engineering team for alignment

Phase 03

Core component build

With solid foundations, we systematically built the core component library — starting with the highest-frequency, highest-impact UI elements.

Prioritised components by usage frequency across both platforms
Built each component with all variants, states, and interactive props
Documented component anatomy, usage guidelines, and do/don'ts
Ran vibe coding sessions with engineers to ship in parallel
Published core components to Storybook and Widgetbook progressively

Phase 04

Platform specialisation

Once the shared core was stable, we extended it into platform-specific layers — App Components for Flutter, Platform Components for React — each inheriting from the same foundation.

Defined which components diverge by platform vs which stay shared
Built App Components tuned to Flutter's interaction model
Built Platform Components for React's desktop-first paradigms
Maintained token linkage so platform variants stayed in sync
Added mission-specific and ambassador-specific composed components

Phase 05

Icons & graphics

Clubicons and the Club Graphics library were built as dedicated systems — giving the product a distinctive visual voice beyond just UI components.

Defined icon grid, stroke weight, and optical correction rules
Designed Clubicons set across navigation, action, status, and social
Exported icons as optimised SVGs for Flutter and React
Built the Club Graphics illustration library with a consistent art style
Documented usage guidelines for icons and graphic assets

Phase 06

Patterns, templates & governance

The final phase turned the component library into a living system — adding design patterns, app templates, and the governance tooling to keep it healthy over time.

Documented repeatable design patterns for common UX problems
Created app templates for core screens and user flows
Established Storybook and Widgetbook as the governance layer
Defined contribution guidelines for adding new components
Set up a regular design system review cadence with the team

Design-first, then code

Every component was designed in Figma with full spec coverage before any code was written — reducing back-and-forth during development.

Parallel shipping

Vibe coding sessions meant design and code progressed in parallel — components landed in both Figma and production faster than sequential handoff.

Foundations as a forcing function

Building primitives and foundations first made every subsequent decision easier — tokens meant design choices propagated automatically across the system.

Progressive documentation

Rather than documenting everything at the end, each component was documented as it was built — making the system usable from day one of each phase.

Ambassador App

The funnel — Club ambassador community spiral

The Funnel

Co-Branding

Club outdoor advertising — billboard campaign

Outdoor Campaign

08 / Tools & Stack

The tools that
made it work

Club TIE was built across a carefully chosen toolset — covering design, documentation, development, and collaboration. Each tool served a specific role in the system's lifecycle.

🎨

Figma

Design & Library

The central design environment. All 8 libraries live here — from Primitives through to App Templates — connected via shared variables and component references.

📖

Storybook

React Documentation

Living documentation for all React components on the brand management web platform. Every component is catalogued with stories, props, and visual states.

📱

Widgetbook

Flutter Documentation

The Flutter equivalent of Storybook. Each widget is catalogued and testable in isolation across devices and themes — ensuring design fidelity in the ambassador app.

⚛️

React

Web Platform

The frontend framework for the brand management web platform. Components are implemented as reusable React components consuming design tokens directly.

🐦

Flutter

Mobile App

The cross-platform framework for the ambassador mobile app. Widgets are built against the Club TIE token system using Flutter's theme and text theme APIs.

🔷

Figma Variables

Token System

Figma's native variable system powers the token layer — allowing colour, spacing, and radius values to propagate across all 8 libraries from a single source.

🗂️

Notion

Documentation

Component guidelines, usage documentation, contribution rules, and design system governance documentation live here — accessible to the full team.

🔗

Git

Version Control

Component code lives in version control alongside the product — design system updates follow the same branching and review workflow as any product feature.

Design token pipeline

Tokens defined in Figma Variables flow through to both codebases — React consumes them as CSS custom properties, Flutter consumes them via a generated theme file. A single change in Figma propagates to both platforms.

Figma Variables → CSS custom properties → Flutter ThemeData → Storybook → Widgetbook

Collaboration workflow

Design and engineering operated on a shared cadence — weekly design system syncs, vibe coding sessions for new components, and asynchronous Figma comment threads for spec review.

Weekly DS sync Figma comments Vibe coding sessions PR reviews

09 / Learnings

What I'd tell myself
at the start

Building a design system from the ground up across two platforms is one of the most complex design challenges I've faced. Here's what I learned — and what I'd do differently.

01

Foundations are worth the investment — every time

It's tempting to skip straight to components. But every hour spent on a solid token and primitive layer saves ten hours of rework later. The more thorough the foundations, the faster everything built on top of them moves.

02

Governance is a product, not a meeting

A design system without governance is just a Figma file. Storybook and Widgetbook transformed the system from a design artefact into a living product — one that could be trusted, tested, and extended by the full team.

03

Vibe coding changes the relationship

The most impactful thing I did wasn't designing components — it was sitting with engineers and helping ship them. Being present in the codebase earned trust, caught issues early, and made the final result far more faithful to the design intent.

04

Scope ruthlessly in v1

The instinct is to design everything up front. But a focused, well-executed v1 — even if it doesn't cover every edge case — gets adopted faster and builds more momentum than a sprawling system that never ships.

05

Multi-platform is a multiplier — of both value and complexity

Serving Flutter and React from the same foundation amplified the system's value significantly. But it also meant every decision needed to work in two different paradigms. Thinking in tokens rather than platform-specific values was the key to making it sustainable.

06

A design system is never done

The most important mindset shift was accepting that Club TIE is a living product — not a project with an end date. Continuous iteration, regular reviews, and a clear contribution process are what keep a system healthy over time.

What's next for Club TIE

Roadmap & future improvements

Formalise the token pipeline with a dedicated token export tool (e.g. Token Studio) to automate sync between Figma and both codebases
Expand the Clubicons set to cover more mission types, social platforms, and product-specific concepts
Build out a dedicated design system documentation site — going beyond Storybook/Widgetbook to a public-facing reference
Add accessibility audit checkpoints to the component governance process — automated a11y testing in CI
Extend the illustration system into a full motion library — defining animation patterns for the Flutter app
Introduce a contribution framework that allows product squads to propose and ship new components without bottlenecking through one person