OTTODesign System

Code

Design tokens overview

Storybook group: Fragments · Sidebar path: Fragments/Design tokens overview · Extracted 28.09.2026

Overview

Source: ./src/documentation/development/design-tokens-overview.mdx

Design tokens overview

This page lists all base and semantic tokens that are available.

Note: Use semantic tokens instead of base tokens. Base tokens reference the raw values and are not themed. Semantic tokens are derived from base tokens and can be themed.

Skip to:

Semantic

Use semantic tokens in your codebase for stable, themeable values.

(Live table rendered by Storybook from the design token data; the full data is in OTTO design tokens)

Base

Use base tokens only as references for semantic tokens, not in production code.

(Live table rendered by Storybook from the design token data; the full data is in OTTO design tokens)