Colour
Autumn/Winter 2025
Overview
101
LEVEL
01 – Beginner
Colour 01
INFO
Colour sets visual order across the HUX interface. The palette supports clear hierarchy, stable rhythm and consistent depth. Each tone sits within a defined scale that aligns with layout, typography and component structure. The aim is simple: predictable colour behaviour across all themes and states.
20251125/HUX/SYSTEMS/COLOUR
Introduction
Application of the HUX colour palette creates a coherent, recognisable rhythm across all digital surfaces. This consistency comes from a clear set of rules that govern how colours behave within our components and how they adapt across light and dark themes.
Colour anatomy
Colour sets visual order across the HUX interface. The palette supports clear hierarchy, stable rhythm and consistent depth. Each tone sits within a defined scale that aligns with layout, typography and component structure. The aim is simple: predictable colour behaviour across all themes and states.
PRIMARY, SECONDARY & ALERTS
Primary
ALERT 01
ALERT 03
SECONDARY
ALERT 02
SCALE
NEUTRALS
WHITE
Mid Grey
BLACK
Light Grey
Dark Grey
Layering model
HUX's themes. This logic is baked into the themes, colour tokens, and components.
The model works differently in light and dark modes.
In light themes, layers alternate between White and Gray 10 as you move upwards. In dark themes, each layer shifts one step lighter, building clarity without noise.
The model works differently in light and dark modes.
In light themes, layers alternate between White and Gray 10 as you move upwards. In dark themes, each layer shifts one step lighter, building clarity without noise.
Interaction of colour
HUX uses tokens and themes to manage colour. Tokens are role-based. Themes define the colour values that fulfil those roles in the interface. This separation keeps colour consistent, adaptable and easy to change at scale.
Term
Definition
Theme
A theme is a controlled set of colour values designed to create a specific visual environment. Themes define the value assigned to each token. For example, a light or dark theme.
Token
A token is a role-based colour identifier. Tokens describe purpose, not appearance, and remain consistent across themes. In Webflow, tokens are implemented as CSS variables and referenced by classes.
Role
A role defines the intended use of a colour in the interface. Roles are fixed and do not change between themes. This protects semantic consistency across the system.
Value
A value is the literal colour definition (hex or rgba) assigned to a token by a theme. Values exist only at the theme level, never in components.
Themes
Theme defines how colour behaves in context. Rather than applying raw colour values directly to the interface, HUX uses themes to map semantic roles—such as background, text, accent, and border—to specific colour values. This allows the same components to adapt across light, dark, and accented modes without structural change, keeping colour decisions consistent, intentional, and easy to evolve over time.
Role Name
Purpose
Background / Primary
Base UI surfaces
Background / Secondary
Cards, panels, elevated surfaces
Text / Primary
Default body text
Text / Secondary
Subtle text (labels, metadata)
Text / Inverse
Text on dark backgrounds
Accent / Primary
Brand action colour
Accent / Interactive
Brand action colour
Border / Default
Lines, outlines
Border / Subtle
Minor separators
Surface Highlight
Hover/backdrop indicates interaction
TOKENS
HUX uses tokens and themes to manage colour. Tokens are role-based. Themes define the colour values that fulfil those roles in the interface. This separation keeps colour consistent, adaptable and easy to change at scale.
Term
Definition
Theme
Copy
Token
COPY
Role
COPY
Value
COPY
INTERACTION STATES
Typography sets the texture of the interface and directs attention through clear hierarchy. The right choice of type styles, used with control, shapes how content appears and keeps information useful, simple, and easy to work with across the system.
ACCESSIBILITY
HUX uses tokens and themes to manage colour. Tokens are role-based. Themes define the colour values that fulfil those roles in the interface. This separation keeps colour consistent, adaptable and easy to change at scale.
Term
Definition
Theme
Copy
Token
COPY
Role
COPY
Value
COPY
RESOURCES
Typography sets the texture of the interface and directs attention through clear hierarchy. The right choice of type styles, used with control, shapes how content appears and keeps information useful, simple, and easy to work with across the system.
BRISTOL, UK
Winter 2025/26 workshops now open.
hamish@hamishduncan.com
+44 (0)7832 839 543