Colour System Design
[Overview]
The Context
Coachi is an AI-powered ski coaching app that helps recreational skiers improve their technique through video feedback and performance tracking.
As Lead UX & Product Designer, I defined the visual and interaction language for the product — shaping how the brand’s tone of voice translated into UI, motion, and system design. I led the creation of Coachi’s colour architecture as part of a wider design-system initiative, collaborating closely with founders, and developers, to ensure brand consistency, accessibility, and technical scalability.
The colour system was designed to balance clarity, confidence, and focus with a tone that felt warm, supportive, and human. My goal was to deliver a scalable, accessible design language that performs in bright outdoor environments while reflecting the optimism and motivation central to great coaching.
The Context
Coachi is an AI-powered ski coaching app that helps recreational skiers improve their technique through video feedback and performance tracking.
As Lead UX & Product Designer, I defined the visual and interaction language for the product — shaping how the brand’s tone of voice translated into UI, motion, and system design. I led the creation of Coachi’s colour architecture as part of a wider design-system initiative, collaborating closely with founders, and developers, to ensure brand consistency, accessibility, and technical scalability.
The colour system was designed to balance clarity, confidence, and focus with a tone that felt warm, supportive, and human. My goal was to deliver a scalable, accessible design language that performs in bright outdoor environments while reflecting the optimism and motivation central to great coaching.
Skills Demonstrated
Figma
Design System & Tokenisation
Accessibility & WCAG
Product UX/UI Design
Cross-functional Collaboration
My Role
Lead Designer
[Impact]
Scalable, Tokenised Colour System
Created a unified colour architecture built from a single expressive hue, enabling consistent branding and efficient design handoff across product, animation, and marketing touchpoints.
AAA Accessibility Compliance in Outdoor-First Interface
Engineered a contrast-optimised colour system for use in variable lighting conditions, ensuring WCAG AAA compliance for all primary interactions and improving usability for diverse user needs.
Defined a Distinct Visual Identity That Balances Clarity with Confidence
Designed a visually minimal, emotionally intelligent palette that reinforced Coachi’s brand values of support and progression — standing out in a saturated sports-tech market while improving user focus and trust.
[My Process]
1. Design Approach
I developed a monochromatic system built around a single base hue — #6533D1, a confident, modern purple symbolising clarity, focus, and progression.
All tones, tints, shades, neutrals, and accents were generated from this hue to create a harmonised, token-based colour system that unites brand, product, and motion design.
1. Design Approach
I developed a monochromatic system built around a single base hue — #6533D1, a confident, modern purple symbolising clarity, focus, and progression.
All tones, tints, shades, neutrals, and accents were generated from this hue to create a harmonised, token-based colour system that unites brand, product, and motion design.
2. System Architecture
Surface Colours:
The surface system establishes spatial hierarchy and depth across light and dark modes.
Secondary and Tertiary surfaces form the main content containers users interact with, while the Primary surface creates separation and rhythm between components.
Layout Rule:
Content containers are spaced by 16px, intentionally revealing the Primary surface between them.
This creates natural hierarchy and separation without relying on borders — a technique that maintains visual clarity even in outdoor or low-light contexts.
2. System Architecture
Surface Colours:
The surface system establishes spatial hierarchy and depth across light and dark modes.
Secondary and Tertiary surfaces form the main content containers users interact with, while the Primary surface creates separation and rhythm between components.
Layout Rule:
Content containers are spaced by 16px, intentionally revealing the Primary surface between them.
This creates natural hierarchy and separation without relying on borders — a technique that maintains visual clarity even in outdoor or low-light contexts.
4. Border Colours
Borders play a quiet but critical role in the Coachi design language. They define spatial rhythm, support hierarchy, and ensure visual clarity without adding unnecessary weight or distraction.
Instead of relying on heavy outlines, the border system uses neutral tones with balanced contrast to maintain a sense of structure and refinement across both light and dark modes.
4. Border Colours
Borders play a quiet but critical role in the Coachi design language. They define spatial rhythm, support hierarchy, and ensure visual clarity without adding unnecessary weight or distraction.
Instead of relying on heavy outlines, the border system uses neutral tones with balanced contrast to maintain a sense of structure and refinement across both light and dark modes.
5. Text Colours
The text colour system defines how typography, contrast, and hierarchy work together across light and dark modes.
It ensures that every piece of text, from instructional copy to interactive labels, remains clear, accessible, and visually consistent.
Rather than treating text colour as a secondary concern, the system was built as an integrated part of the design token architecture, ensuring consistency across product, marketing, and future platform extensions.
5. Text Colours
The text colour system defines how typography, contrast, and hierarchy work together across light and dark modes.
It ensures that every piece of text, from instructional copy to interactive labels, remains clear, accessible, and visually consistent.
Rather than treating text colour as a secondary concern, the system was built as an integrated part of the design token architecture, ensuring consistency across product, marketing, and future platform extensions.
[Key Learnings]
Simplicity Through Systems
Designing from a single expressive hue proved that visual restraint breeds clarity. By committing to one core colour and deriving all tokens from it, I ensured functional harmony and visual calm across all UI states — streamlining scalability, accessibility, and branding.
Outdoor usability drove real design decisions.
Prioritising legibility in variable lighting conditions reframed traditional contrast models. Techniques like spacing surfaces to reveal background layers became vital to maintaining hierarchy without visual clutter.
Emotion Builds Trust
Design systems must express brand personality, not just technical precision. The system balanced performance with warmth, replacing sterile sports-tech norms with a palette that encouraged progression, support, and emotional engagement.
[Persona]
Jhon Roberts
Marketing Manager
Content
Age: 29
Location: New York City
Tech Proficiency: Moderate
Gender: Male
[Goal]
Quickly complete purchases without interruptions.
Trust the platform to handle her payment securely.
Access a seamless mobile shopping experience.
[Frustrations]
Long or confusing checkout processes.
Error messages that don’t explain the issue.
Poor mobile optimization that slows her down.
[Overview]
The Context
Coachi is an AI-powered ski coaching app that helps recreational skiers improve their technique through video feedback and performance tracking.
As Lead UX & Product Designer, I defined the visual and interaction language for the product — shaping how the brand’s tone of voice translated into UI, motion, and system design. I led the creation of Coachi’s colour architecture as part of a wider design-system initiative, collaborating closely with founders, and developers, to ensure brand consistency, accessibility, and technical scalability.
The colour system was designed to balance clarity, confidence, and focus with a tone that felt warm, supportive, and human. My goal was to deliver a scalable, accessible design language that performs in bright outdoor environments while reflecting the optimism and motivation central to great coaching.
The Context
Coachi is an AI-powered ski coaching app that helps recreational skiers improve their technique through video feedback and performance tracking.
As Lead UX & Product Designer, I defined the visual and interaction language for the product — shaping how the brand’s tone of voice translated into UI, motion, and system design. I led the creation of Coachi’s colour architecture as part of a wider design-system initiative, collaborating closely with founders, and developers, to ensure brand consistency, accessibility, and technical scalability.
The colour system was designed to balance clarity, confidence, and focus with a tone that felt warm, supportive, and human. My goal was to deliver a scalable, accessible design language that performs in bright outdoor environments while reflecting the optimism and motivation central to great coaching.
Skills Demonstrated
Figma
Figma
Design System & Tokenisation
Design System & Tokenisation
Accessibility & WCAG
Accessibility & WCAG
Product UX/UI Design
Product UX/UI Design
Cross-functional Collaboration
Cross-functional Collaboration
My Role
Lead Designer
Lead Designer
[Impact]
Scalable Tokenised Colour System
Created a unified colour architecture built from a single expressive hue, enabling consistent branding and efficient design handoff across product, animation, and marketing touchpoints.
AAA Accessibility Compliance in Outdoor-First Interface
Engineered a contrast-optimised colour system for use in variable lighting conditions, ensuring WCAG AAA compliance for all primary interactions and improving usability for diverse user needs.
Defined a Distinct Visual Identity That Balances Clarity with Confidence
Designed a visually minimal, emotionally intelligent palette that reinforced Coachi’s brand values of support and progression — standing out in a saturated sports-tech market while improving user focus and trust.
[My Process]
1. Design Approach
I developed a monochromatic system built around a single base hue — #6533D1, a confident, modern purple symbolising clarity, focus, and progression.
All tones, tints, shades, neutrals, and accents were generated from this hue to create a harmonised, token-based colour system that unites brand, product, and motion design.
1. Design Approach
I developed a monochromatic system built around a single base hue — #6533D1, a confident, modern purple symbolising clarity, focus, and progression.
All tones, tints, shades, neutrals, and accents were generated from this hue to create a harmonised, token-based colour system that unites brand, product, and motion design.
2. System Architecture
Surface Colours:
The surface system establishes spatial hierarchy and depth across light and dark modes.
Secondary and Tertiary surfaces form the main content containers users interact with, while the Primary surface creates separation and rhythm between components.
Layout Rule:
Content containers are spaced by 16px, intentionally revealing the Primary surface between them.
This creates natural hierarchy and separation without relying on borders — a technique that maintains visual clarity even in outdoor or low-light contexts.
2. System Architecture
Surface Colours:
The surface system establishes spatial hierarchy and depth across light and dark modes.
Secondary and Tertiary surfaces form the main content containers users interact with, while the Primary surface creates separation and rhythm between components.
Layout Rule:
Content containers are spaced by 16px, intentionally revealing the Primary surface between them.
This creates natural hierarchy and separation without relying on borders — a technique that maintains visual clarity even in outdoor or low-light contexts.
4. Border Colours
Borders play a quiet but critical role in the Coachi design language. They define spatial rhythm, support hierarchy, and ensure visual clarity without adding unnecessary weight or distraction.
Instead of relying on heavy outlines, the border system uses neutral tones with balanced contrast to maintain a sense of structure and refinement across both light and dark modes.
4. Border Colours
Borders play a quiet but critical role in the Coachi design language. They define spatial rhythm, support hierarchy, and ensure visual clarity without adding unnecessary weight or distraction.
Instead of relying on heavy outlines, the border system uses neutral tones with balanced contrast to maintain a sense of structure and refinement across both light and dark modes.
5. Text Colours
The text colour system defines how typography, contrast, and hierarchy work together across light and dark modes.
It ensures that every piece of text, from instructional copy to interactive labels, remains clear, accessible, and visually consistent.
Rather than treating text colour as a secondary concern, the system was built as an integrated part of the design token architecture, ensuring consistency across product, marketing, and future platform extensions.
5. Text Colours
The text colour system defines how typography, contrast, and hierarchy work together across light and dark modes.
It ensures that every piece of text, from instructional copy to interactive labels, remains clear, accessible, and visually consistent.
Rather than treating text colour as a secondary concern, the system was built as an integrated part of the design token architecture, ensuring consistency across product, marketing, and future platform extensions.
[Key Learnings]
Simplicity Through Systems
Designing from a single expressive hue proved that visual restraint breeds clarity. By committing to one core colour and deriving all tokens from it, I ensured functional harmony and visual calm across all UI states — streamlining scalability, accessibility, and branding.
Outdoor usability drove real design decisions.
Prioritising legibility in variable lighting conditions reframed traditional contrast models. Techniques like spacing surfaces to reveal background layers became vital to maintaining hierarchy without visual clutter.
Emotion Builds Trust
Design systems must express brand personality, not just technical precision. The system balanced performance with warmth, replacing sterile sports-tech norms with a palette that encouraged progression, support, and emotional engagement.