Design token categories
Our colour system is built on a foundation of design tokens, structured to ensure consistency, scalability, and clarity across all applications.
The process begins with a basic Swisscom brand colour, defined by its hex value.
Each colour is then expanded into a colour scale of ten hues, ranging from 50 to 900, representing tints and shades of the same colour family. Where it made sense, we combined several brand colours into the same scale (e.g. navy and dark navy). This scale forms the visual spectrum designers and developers can draw from, while maintaining alignment with Swisscom’s identity.
From this scale we create the base tokens, the single source of truth for that colour. Base tokens are the lowest level tokens and map directly to a raw value. They are only to be used as a reference for functional tokens. Base tokens should never be used directly in code or design.
From each base token, we create a set of functional tokens. Functional tokens are semantic references that describe how and where the colour is used rather than its appearance (e.g. sdx-surface-ui-interaction-default or sdx-color-text-heading). These tokens reference the base tokens within the scales but provide a layer of abstraction that connects colour meaning with design intent.
For designers and developers, functional tokens are what you interact with in your daily workflow.
They allow you to design using names that describe purpose and context, not just hue. Making it easier to maintain consistency across components, themes, and accessibility states.
This token hierarchy of brand colour → base token → scale → functional token ensures that every colour in the system is traceable to its brand origin, and applied meaningfully throughout our interfaces.
Semantics explained
Semantics are typically used to communicate status, action, or emphasis. Each semantic colour is tied to a role with a specific meaning.
emphasis
The emphasis token is used to draw attention to key elements or actions. It typically represents a strong, brand‑accented colour that stands out against surrounding elements.
When to use:
- To highlight primary actions, such as buttons or links.
- For emphasizing key data points, notifications, or alerts.
- In components where a distinct visual hierarchy is required.
onEmphasis
The onEmphasis token defines the foreground colour that sits on top of an emphasis surface. It ensures legibility and accessibility by providing sufficient contrast against the emphasis background.
When to use:
- For text, icons, or symbols placed over emphasis backgrounds.
- In primary buttons or attention‑drawing UI components that use the emphasis colour.
muted
The muted token represents restrained or secondary colours used for de‑emphasized elements. It helps differentiate supporting content from primary actions or highlights.
When to use:
- For secondary text, disabled elements, or subtle surfaces.
- To provide visual hierarchy when multiple elements compete for attention.
hover
The hover token introduces subtle interactive feedback, signaling that an element is interactive. It adds depth and responsiveness without overwhelming the user.
When to use:
- For hover states of buttons, links, cards, or list items.
- Wherever a colour change on pointer interaction indicates affordance.
inverse
The inverse token is designed for contexts where light text or iconography must be visible on dark backgrounds, or conversely, dark content must appear on light inversion themes. It ensures cross‑theme contrast.
When to use:
- On dark or coloured backgrounds where standard text colours wouldn’t meet contrast requirements.
inactive
The inactive token communicates elements that are disabled, non‑interactive, or in a resting state. It generally uses low‑contrast, desaturated colours.
When to use:
- For disabled components, inputs, or icons.
- To visually represent items not currently active or unavailable.