How to use
This is a proof of concept multi-brand design system. It shows how a set of UI components & sections can adapt to different brand identities through theming.
Quick Start: Brand Presets
The fastest way to explore is by selecting a Brand Preset from the header:
- Granny Smiths — Sharp corners, serif typography, green palette
- Zap & Co — Rounded corners, modern sans-serif, blue palette
- Natures Path — Sharp corners, bold display typography, warm palette
- Wild Child — Pill-shaped corners, monospace accents, earthy palette
Selecting a brand preset updates all global and component-level settings to match that brand's identity.
Global Styles
Use the controls in the sticky header to adjust global design tokens:
| Control | Options | What it affects |
|---|
| Color Preset | Amber, Ochre, Apple, Sky | Brand color palette (50–950 scale) used throughout |
| Corner Radius | Sharp, Rounded, Pill | Border radius on cards, buttons, inputs, and form containers |
| Typography Theme | Mumbai, London, Sydney, Prague, Cairo, Melbourne | Display & body font pairings (e.g.,Spectral + Lora for London) |
Changing any of these will immediately update the entire page.
Section & Component Themes
Individual sections and components can have their own Color Theme. Hover over these elements to reveal a theme switcher in the top-right corner:
- Hero Section — The main banner area
- Form Card — The sign-up form
- Testimonial Section — The "Wall of love" background
- Testimonial Cards — The individual review cards
Available Color Themes
| Theme | Background | Best for |
|---|
| Light | White | Clean, minimal sections |
| Light Alt | Light gray | Subtle contrast from Light |
| Dark | Near-black (neutral) | High-impact, neutral dark sections |
| Brand Light | Tinted with brand color (50) | On-brand light backgrounds |
| Brand Dark | Deep brand color (950) | Bold, branded dark sections |
Mix and match to see how the same components adapt to different color contexts.
Component Variants
Use the Testimonial Card Component toggle to switch between two card designs—demonstrating how the same theming system works across different component structures.
Understanding the System
The design system uses CSS custom properties layered as follows:
- Color Preset → Defines the brand palette (--color-brand-50 through --color-brand-950)
- Color Theme → Maps semantic tokens (--color-background, --color-text-primary, etc.) to the brand palette
- Corner Radius Theme → Sets radius scale (--corner-radius-xs through --corner-radius-xl)
- Typography Theme → Sets font families (--font-family-display, --font-family-body)
This separation allows brands to share the same component code while expressing completely different visual identities.
