Introduction
Design tokens are standardized values that represent the visual attributes of an interface, such as color, typography, spacing, and elevation.
They serve as the single source of truth in our Mews Design System, ensuring consistent styling across platforms and products.
Why use design tokens?
Using tokens allows us to:
- Enable large-scale updates without manual adjustments.
- Support fast theming and accessibility options (e.g., light and dark modes).
- Create a shared foundation for designers and engineers, reducing errors and improving speed.
- Simplify cross-platform implementation across Figma, GitHub, Flutter, and more.
Our tokens
Types
Our tokens reflect real design decisions and are organized into three main types:
- Color: backgrounds, text, borders, shadows.
- Typography: font family, size, weight, line height, letter spacing, text decoration.
- Numeric values: spacing, sizing, border radius, border width, opacity.
Hierarchy
We build our tokens starting with foundation tokens that define the core design language. You should use only theme tokens in your work; everything else is managed by the Design System and is not meant for direct use.
Below is an overview of how we structure tokens and related elements:
|
Level |
Description |
Also known as |
|---|---|---|
|
Raw values |
Direct values in tools like Figma or React. They are not tokens themselves. |
|
|
Foundation tokens |
Global tokens that define the base design language. They are used to build Theme tokens. |
Base tokens, global, primitives. |
|
Theme tokens |
Contextual tokens that assign meaning, like background, border, typography, etc. |
Semantic tokens, alias tokens. |
|
Component tokens |
Specific to components, currently used to map legacy components only. |
|
Naming convention
Theme token names are structured to clearly describe their function. We organize them into three main groups:
- Namespace: Identifies the broad context of the token.
- Base: Defines the core meaning of the token, what it is, and where it applies.
- Modifiers: Specify variations and states to refine the token usage.
|
Group |
Element |
Description |
Example |
|---|---|---|---|
|
Namespace |
Domain |
Identifies product or brand. |
B2B GX |
|
|
Mode |
Specifies the visual style. |
light dark |
|
Base |
Category |
Defines the design attribute. |
color spacing sizing |
|
|
Property |
Indicates where the token applies. |
background border text |
|
|
Concept |
Represents the role or purpose. |
static interactive alert |
|
Modifiers |
Scale |
Numeric size or scale. |
50 100 200 |
|
|
Variant |
Indicates emphasis or intent. |
secondary success bold |
|
|
State |
Represents an interaction state. |
default hover active |
Themes and modes
Themes define how the designs adapt to different products and contexts. They are applied across Mews products such as PMS, EMS, Booking Engine, and Guest Portal.
As of now, we support the following theme + mode combinations:
- B2B Light
- B2B Dark
- GX Light
- GX Dark
