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.

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.