Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Colour tokens

Color tokens are the single source of truth for all colors used in TDS. They give designers or developers an understanding of how or when to apply our palette and what options are available.

Color tokens ensure that colors remain consistent across various components, screens, and platforms. They also provide a scalable solution, enabling easy maintenance and expansion of color palettes.

Types of colour tokens​

TDS uses two tiers of tokens to manage color. In most cases, you should only use semantic tokens instead of applying core tokens directly.

Core tokens

Core colour tokens are primitive values that do not have any associated explicit meaning or intent, and are only used to be referenced by semantic tokens.

Semantic tokens

Semantic tokens are context-specific and reference core color tokens. They use semantic names that help provide an understanding on how or when the token should be used.

Usage​

Semantic tokens fall into four categories: canvas, surface, border and content



1

Canvas colours are used for page <body> backgrounds. There can be only one canvas per screen.

2

Surfaces sit on top of the canvas. You can have multiple surfaces on a single canvas.

3

Borders can be drawn around surfaces.

4

Content colours are used for text and icons.

Semantic tokens​

CSS variable prefix: tds-color-

Figma collection: Theme / Semantic

Canvas​

Canvas colors are used for page (<body>) backgrounds. There can be only one canvas per screen.

Surface​

Surfaces sit on the top of the canvas. You can have multiple surfaces on a single canvas.

Border​

Borders can be drawn around surfaces.

Content​

Content colors are used for text and icons.