Foundations
Color
Colour is built in two layers. Primitive scales hold the raw values. Semantic tokens give each value a role, such as a surface, a text colour or a border, with a light and a dark mode. Components only use the semantic layer, so a theme can change without touching them.
Palette#
Eight scales of eleven steps, from 950 (darkest) to 50 (lightest). Click a swatch to copy its hex.
Grey
A balanced spectrum of neutral tones designed to support layout, hierarchy, and readability without drawing attention away from content.
Blue
A versatile range of blues that conveys clarity, trust, and focus, suitable for primary actions, links, and informational elements.
Purple
A refined purple spectrum that adds depth and distinction, often used to highlight premium features or expressive brand moments.
Pink
A controlled range of pink tones that introduces warmth and personality while remaining suitable for structured UI applications.
Green
A clear and balanced green spectrum used to communicate success, confirmation, and positive system feedback.
Yellow
A bright but restrained yellow range used for highlights and caution states where visibility and attention are critical.
Orange
A strong, attention-focused orange spectrum commonly used for warnings and emphasis without the severity of error states.
Red
A decisive range of reds designed for error states, destructive actions, and critical system feedback.
Alpha#
Black and white at fixed opacities, for overlays, pressed states and layered effects. They keep the colour underneath visible.
Alpha Black
Opacity-based values used to create overlays, interaction feedback, and layered effects while preserving underlying color context.
Alpha White
Opacity-based values used to create overlays, interaction feedback, and layered effects while preserving underlying color context.
Roles#
Every colour is grouped by its role rather than its hex value, with a target share of the interface for each.
Neutral
The structural backbone of the interface, providing balance, hierarchy, and readability without competing for attention.
Use for:
Backgrounds, surfaces, text, borders, dividers, disabled states.
Usage:
55–65% of your entire design.
Brand Identity
The core color (or set of colors) that represents the product’s visual identity and establishes brand recognition.
Use for:
Brand moments, navigation highlights, key visuals, and identity-driven elements.
Usage:
Varies by product, typically low and intentional.
Primary
The main color that guides users to the most important actions.
Use for:
Primary buttons, key CTAs, selected states, and high-priority interactions.
Usage:
8–12% of your entire design.
Secondary
A supporting color that complements the primary color without overpowering it.
Use for:
Secondary actions, supporting UI elements, highlights where primary would be too strong.
Usage:
5–8% of your entire design.
Accent
A high-impact color used sparingly to draw attention or add emphasis.
Use for:
Badges, indicators, highlights, and subtle visual cues.
Usage:
2–4% of your entire design.
Status
Purpose-driven colors used to communicate system feedback and state changes.
Use for:
Success, warning, error, and informational feedback.
Usage:
3–5% of your entire design (combined).
Brand themes#
A brand theme maps eleven named tones onto one scale. Components use the tone names, so switching the theme rebrands the interface without touching a component.
Extra Soft
The lightest tone, used for barely-there backgrounds and minimal visual presence.
Soft
A gentle tone that adds subtle separation without drawing attention.
Subtle
A low-contrast tone used to support hierarchy while remaining unobtrusive.
Muted
A restrained tone that reduces emphasis while maintaining visibility.
Default
The standard tone used most frequently as the baseline color.
Base
The core reference tone of the color, representing its true identity.
Strong
A high-contrast tone used for emphasis and important UI elements.
Bold
A saturated, attention-forward tone used sparingly for prominence.
Deep
The darkest tone, used for maximum contrast, depth, or dark surfaces.
Content-On-Base
Text color used on solid or filled surfaces, optimized for high contrast and readability.
Content-On-Inverse
Text color used when the surrounding surface is inverted, automatically adapting to maintain readable contrast.
Semantic tokens#
Components use semantic tokens, never raw scale values. Each token has a value for light mode and one for dark mode.
Surface8 tokens
Clear
The lightest surface value, often pure white or near-transparent.
Neutrals/Surface/Clear
Subtle
A very light surface used to gently separate content without creating strong contrast.
Neutrals/Surface/Subtle
Default
The primary surface level used most frequently throughout the interface.
Neutrals/Surface/Default
Soft
A slightly stronger surface that introduces clear separation without feeling heavy.
Neutrals/Surface/Soft
Muted
A restrained surface that adds structure while staying unobtrusive.
Neutrals/Surface/Muted
Strong
A high-contrast surface used to emphasize sections or draw attention.
Neutrals/Surface/Strong
Inverse
A surface that flips contrast relative to the surrounding context.
Neutrals/Surface/Inverse
Disabled
A low-emphasis surface indicating non-interactive or inactive states.
Neutrals/Surface/Disabled
Overlay3 tokens
Medium
A moderate overlay used to clearly communicate active or pressed states.
Neutrals/Overlay/Medium
Strong
A high-intensity overlay used for prominent emphasis or layered focus.
Neutrals/Overlay/Strong
Heavy
A high-intensity overlay used to create strong emphasis or visual depth, typically applied in pressed states, selected surfaces, or moments requiring clear feedback.
Neutrals/Overlay/Heavy
Content6 tokens
Secondary
Supporting content color for less prominent text (e.g., body and paragraphs).
Neutrals/Content/Secondary
Muted
A low-emphasis content tone used to reduce visual priority while remaining readable.
Neutrals/Content/Muted
Faint
The lightest content tone, used for barely visible or reference-only text.
Neutrals/Content/Faint
On-solid
High-contrast content used on solid or filled surfaces.
Neutrals/Content/On-solid
Inverse
Content color used on surfaces with inverted contrast, automatically adapting to light or dark backgrounds to maintain readability.
Neutrals/Content/Inverse
Disabled
Content color indicating non-interactive or inactive states.
Neutrals/Content/Disabled
Border6 tokens
Light
The lightest border tone, used for minimal separation and low visual weight.
Neutrals/Border/Light
Subtle
A low-contrast border for gentle grouping without drawing attention.
Neutrals/Border/Subtle
Soft
A restrained border used to define structure while remaining unobtrusive.
Neutrals/Border/Soft
Focused
High-contrast border used to indicate keyboard or accessibility focus.
Neutrals/Border/Focused
Strong
A prominent border used to emphasize selection or importance.
Neutrals/Border/Strong
Disabled
A muted border indicating non-interactive or inactive elements.
Neutrals/Border/Disabled