Familiar tasks feel unfamiliar
Different controls, labels and interaction patterns create a new learning curve when customers move between products.
HUMAN-LED · AI-ASSISTEDOne design system.
One design system.
Many brands. One shared foundation.
A shared design system that preserves each brand’s identity while creating a more consistent experience across the Metcash ecosystem, making cross-platform journeys more familiar and helping teams design and build faster from one reusable foundation.
Role · Design System Creator, end-to-end UX ownership
SHARED COMPONENT FOUNDATIONMode-driven
One reusable component source
Meaningful states. Consistent behaviour.
Primary actionSecondary action
CellarbrationsPoppins · Rounded
Bottle-OPoppins · Square
Thirsty CamelLexend Zetta
Colour · Type · Shape3 brand modes
1,000+Variables
11+Variable collections
3Brand modes
35+Core components
A familiar experience across a fragmented ecosystem.
Across Metcash’s food, liquor and grocery ecosystem, customers may move between different products and platforms to complete connected tasks. When each experience uses different visual patterns, controls and behaviours, the journey feels disconnected and teams have to solve similar design and delivery problems again.
The same problems are solved again
Separate implementations lead to duplicated components, inconsistent states and more effort to maintain similar experiences.
Every platform needs its own guidance
Different patterns increase the need for platform-specific onboarding, training and support.
DESIGN INTENT
Keep structure and behaviour familiar while allowing each brand to express its identity through colour, typography and shape.
One system architecture. Every value has a purpose. Every brand has a mode.
Shared foundations define the structure, semantic tokens define purpose, and brand modes apply each brand’s visual expression. Components reuse the same underlying architecture, allowing the system to scale across brands without rebuilding the experience each time.
LAYER 01
Primitives
Raw foundational values for colour, typography, spacing, shape and other system properties.
colour/brand/cellarbrations/primaryLAYER 02
Brand Theme
Semantic tokens define purpose-based roles for actions, text, surfaces, borders, feedback and focus. Brand modes resolve these roles differently for each brand.
action/primary/backgroundLAYER 03 · WHEN NEEDED
Component Tokens
Component-specific control used only when a shared semantic token is not enough.
button/primary/background/defaultLAYER 04
Components
Reusable UI patterns built from tokens, with defined variants, states and properties.
Button / PrimaryColour is shown here as an example. Typography, shape, layout, motion and effects follow the same supporting system structure.
Brand identity through modes
Colour, typography and shape adapt through brand modes, while shared components retain the same structure, properties and behaviour.
Variants represent meaningful differences
Use variants only for meaningful visual or behavioural changes. Editable content, visibility and icon choices remain component properties.
Promotional styling has clear boundaries
Promotional contexts may change approved accents, while error, success, disabled and focus states always retain their semantic meaning.
One system for how products look, behave and speak.
Shared writing guidance brings the same clarity and consistency to labels, actions, guidance and feedback that the design system brings to visual components.
Clear, helpful and consistent
Use shared principles to keep product content clear, respectful, useful and action-oriented.
One voice, adapted to context
Keep a consistent product personality while adjusting tone to the situation, task and level of urgency.
Shared rules for everyday product content
Standardise labels, CTAs, help text, feedback messages, dates, times, grammar and punctuation.
Content is treated as part of the product experience, not added after the interface is designed.
Explore content guidelines in Figma ↗(opens in a new tab)Same foundation. Different brand expression.
The three-brand proof brings colour, typography, shape and semantic states together through shared production sources. Each brand keeps its own visual expression while using the same underlying component structure and behaviour.
Interaction context
SHARED COMPONENT PREVIEW
Cellarbrations
Primary actionSecondary action
Selected control accent
Selected filter
Success feedback retains its semantic meaning.
One component contract
Cellarbrations uses Poppins, rounded controls and an amber primary colour. Its promotional accent intentionally falls back to Primary.
Brand typographyPoppins
Brandable shapeRounded
Primary action#F5A400
Selected accent#F5A400
Component structureShared
Interactive illustration of the documented colour, typography and shape decisions. The live Figma file contains the production components and full state matrices. The success message illustrates retained meaning, rather than reproducing every brand's status tokens.
Make readiness visible and reviewable.
Each component has a documented validation board that brings variants, properties, responsive behaviour, brand modes and key states into one repeatable review structure. This makes design-system readiness easier to inspect before product implementation.
A repeatable validation board
- 00Variant matrix
Production variants shown as real component instances.
- 01Variant and property configuration
Variant axes and consumer-editable properties documented clearly.
- 02Properties and examples
Common configurations, content patterns and composition examples.
- 03Responsive and stress proof
Responsive behaviour, width constraints, long content and reflow.
- 04Brand modes
The same component validated across current brand modes and relevant contexts.
35/35
Core component validation boards completed in the current Figma audit.
Test the constraints that matter
Responsive examples cover key viewport widths where relevant, while intrinsic or capped components are tested within their appropriate content constraints.
320PX
390PX
768PX
1440PX
- ✓Typography and width stress across brand modes
- ✓Brand-mode inheritance and semantic token bindings
- ✓Focus, error and disabled-state precedence
- ✓Shared-source dependencies and variable health
Accessibility design target: WCAG 2.2 AA
The foundation documents contrast, keyboard access, focus, labels, reflow and assistive-technology guidance. Product implementation still requires accessibility testing in the final experience.
The Figma audit records completion of the current component rollout and design-system health checks. Business approval, product adoption and live-product accessibility verification remain separate stages.
Inspect the Button validation board in Figma ↗(opens in a new tab)A shared system needs shared rules to stay healthy.
Governance defines how the system is reused, changed, reviewed and documented so it can evolve without creating duplicate patterns, broken behaviour or disconnected guidance.
REUSE BEFORE CREATE
Start with what already exists
Check existing foundations, tokens and components before creating a new pattern.
CHANGE WITH PURPOSE
Extend only when the need is real
Add variants, properties or new components only when the difference represents a meaningful product or behavioural requirement.
REVIEW AND VALIDATE
Changes pass through the same quality checks
Review structure, states, brand behaviour, responsiveness, documentation and regression impact before release.
RECORD AND ALIGN
Keep the source and guidance in sync
Document approved decisions, maintain release history and keep Figma, guidance and implementation references aligned.
Governance keeps reuse easy, change intentional and the system traceable.
Human judgement led the system. AI accelerated the work.
The system was shaped around a clear principle: use AI to increase speed and consistency without giving up human review, context or design accountability.
Direction, decisions and review
- Frame the customer, business and delivery problem.
- Define scope and decide what the system should support.
- Direct token, component and multi-brand decisions.
- Review outputs and guide corrections.
- Take the system through business validation.
Research, execution and quality support
- Synthesise research and explore alternatives.
- Support Figma implementation and refinements.
- Draft documentation and UX writing guidance.
- Assist structural and visual quality checks.
- Help keep system guidance aligned with the live source.
WORKING MODEL
A repeatable human + AI workflow
Every change follows the same cycle: understand the live system, make the smallest correct change, verify it, then record the decision.
01 · UNDERSTANDInspect the live source
Check the request, existing patterns and current system before making changes.
02 · BUILDReuse, then implement
Reuse existing foundations and components before introducing anything new.
03 · VERIFYStructure + visual QA
Check bindings, states, responsiveness, fit and readability.
04 · GOVERNReview and record
Confirm the change, document the decision and keep guidance aligned with the live system.
Built to work for people and AIHuman-readable guidance, Markdown documentation, reusable prompts and machine-checkable rules make the system easier to understand, maintain and extend.
Read the handbook in Figma ↗(opens in a new tab)One foundation. Less reinvention. More room to scale.
The system creates a shared foundation that can support familiar experiences, faster delivery and future brand growth without removing what makes each brand distinct.
More familiar journeys
Shared patterns can make movement across products and platforms easier to understand.
Faster design and delivery
Reusable foundations, components and guidance reduce the need to solve the same problems repeatedly.
A foundation that can grow
New brands can adopt the shared system while retaining their own visual identity.
Built as a shared foundation, designed to evolve with the Metcash ecosystem.
Explore the sourceSee the decisions.
See the decisions.
Inspect the system.
Open the live Figma file to explore foundations, production components, validation boards and the handbook.
Opens in a new tab. Access follows the Figma file's sharing settings.
01Handbook and working process
F01–F13Foundations
W01–W04Content and UX writing
C01–C35Components and validation
P02Three-brand foundation proof