Overview
Types
Although design tokens can represent any design decision, the following types are the most commonly used.
- color
- font (font-size, line-height & font-family)
- spacing
- border
- shadow
- motion (duration & easing)
Value
Values support the following data formats.
- Color: Used for storing color types.
- String: Used e.g. for storing font types.
- Number: Used e.g. for storing spacing types.
Syntax
The syntax of tokens differs between figma and code, as shown below.
figma
semantic/color/background/primarycode
$oc-semantic-color-background-primaryHTML
<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:32px 64px;padding:24px 0">
<div><p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">figma</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-primary);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>semantic/color/background/primary</span></div>
<div><p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">code</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-primary);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>$oc-semantic-color-background-primary</span></div>
Structure
The design tokens are structured in three tiers: base tokens, semantic tokens, and component tokens. The following image shows the relationship between these three tiers.
hex code
#DC001D↓base token
base/color/otto-red/125↓semantic token
semantic/color/background/primary↓component token
component/button/primary/background-color↓HTML
<div style="display:flex;flex-direction:column;align-items:center;padding:16px 0">
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">hex code</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-primary);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>#DC001D</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">base token</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-primary);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>base/color/otto-red/125</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">semantic token</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-primary);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>semantic/color/background/primary</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">component token</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-primary);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>component/button/primary/background-color</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<div style="width:100%;max-width:340px;margin-top:4px"><oc-button-v1 variant="primary">Button</oc-button-v1></div>
Base
Base design tokens store raw values. They are prefixed in the code with 'oc-base-'. Use these tokens only for drafts, and not for live. Therefore, the base tokens are outsourced into a separate library named "OTTO Base Token Library". Within Figma, the tokens are categorized in neutral, functional, and corporate.
Here are some examples of base tokens and the values they point to:
| token name | value |
|---|---|
| oc-base-color-otto-red-100 | #eb001f |
| oc-base-dimension-16 | 16px |
| oc-base-font-line-height-125 | 'OTTOSans', Arial, Helvetica, sans-serif |
Semantic
Semantic design tokens refer to the base design tokens and give them meaning and context through their naming. They are prefixed with 'oc-semantic-'. Use these tokens as intended by their naming. Semantic design tokens have a dark and light mode. Inside Figma, they are located in the main library named "OTTO Design System Library". If you can't find a matching semantic design token for your case, new semantic design tokens can be defined together.
Here are some examples for semantic tokens and the base tokens they point to:
| token name | value |
|---|---|
| oc-semantic-background-primary | oc-base-color-otto-red-100 |
| oc-semantic-border-radius-200 | oc-base-dimension-16 |
| oc-semantic-font-headline-font-family | oc-base-font-line-height-125 |
Component
Component design tokens refer to semantic or base design tokens. They are prefixed with '$oc-component-'. These tokens are for internal use only within the components of the design system and cannot be used by functional teams. They are not public.
HTML
<div style="position:relative;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0;max-width:760px;margin:0 auto">
<div></div>
<div><oc-banner-v1 variant="success" size="300" headline="Überschrift">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.<oc-link-v2 variant="underlined" href="#" slot="actions">Aktion</oc-link-v2><oc-link-v2 variant="underlined-bold" href="#" slot="actions">Aktion</oc-link-v2></oc-banner-v1></div>
<div style="position:absolute;left:0;top:32px;right:212px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none"><span style="display:inline-flex;min-width:0;border:1px solid #f06;border-radius:4px;overflow:hidden;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;background:#f06;width:28px;display:grid;place-items:center"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#fff" stroke-width="1.2" aria-hidden="true"><rect x="8" y="1.5" width="5.5" height="13" rx="1"/><path d="M8 4.5 3 7.5l4.5 6.5M8 3 5 1.8"/><circle cx="10.75" cy="12" r=".7"/></svg></span><span style="padding:5px 10px;min-width:0">component/<wbr>banner/<wbr>success/<wbr>icon-color</span></span><span style="flex:0 0 172px;height:2px;background:#f06"></span></div>
<div style="position:absolute;left:0;top:86px;right:235px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none"><span style="display:inline-flex;min-width:0;border:1px solid #f06;border-radius:4px;overflow:hidden;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;background:#f06;width:28px;display:grid;place-items:center"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#fff" stroke-width="1.2" aria-hidden="true"><rect x="8" y="1.5" width="5.5" height="13" rx="1"/><path d="M8 4.5 3 7.5l4.5 6.5M8 3 5 1.8"/><circle cx="10.75" cy="12" r=".7"/></svg></span><span style="padding:5px 10px;min-width:0">component/<wbr>banner/<wbr>success/<wbr>headline-color</span></span><span style="flex:0 0 149px;height:2px;background:#f06"></span></div>
<div style="position:absolute;left:0;top:170px;right:360px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none"><span style="display:inline-flex;min-width:0;border:1px solid #f06;border-radius:4px;overflow:hidden;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;background:#f06;width:28px;display:grid;place-items:center"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#fff" stroke-width="1.2" aria-hidden="true"><rect x="8" y="1.5" width="5.5" height="13" rx="1"/><path d="M8 4.5 3 7.5l4.5 6.5M8 3 5 1.8"/><circle cx="10.75" cy="12" r=".7"/></svg></span><span style="padding:5px 10px;min-width:0">component/<wbr>banner/<wbr>success/<wbr>background-color</span></span><span style="flex:0 0 24px;height:2px;background:#f06"></span></div>
<div style="position:absolute;left:0;top:256px;right:344px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none"><span style="display:inline-flex;min-width:0;border:1px solid #f06;border-radius:4px;overflow:hidden;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;background:#f06;width:28px;display:grid;place-items:center"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#fff" stroke-width="1.2" aria-hidden="true"><rect x="8" y="1.5" width="5.5" height="13" rx="1"/><path d="M8 4.5 3 7.5l4.5 6.5M8 3 5 1.8"/><circle cx="10.75" cy="12" r=".7"/></svg></span><span style="padding:5px 10px;min-width:0">component/<wbr>banner/<wbr>success/<wbr>link-color</span></span><span style="flex:0 0 40px;height:2px;background:#f06"></span></div>
How to use design tokens
For design, you can access our design tokens through figma with our two libraries OTTO Base Token Library" and the "OTTO Design System Library". For development, find information inside storybook. You can find a complete list of the base and semantic design tokens in the following overview in storybook.
Note that if you are using OTTO components, you don't need to use extra design tokens because they are already prepared for theming.
Theming
Semantic and component design tokens have light and dark mode with different values. The mode depends on the current theme. Since all components are built with design tokens, each one has a dark mode variant that looks mostly different from the light version.
Light Mode
hex code
#FFFFFF↓base token
base/color/white/100↓semantic token
semantic/canvas-background↓component token
component/papercard/background-color↓20 %
Extra auf Sneaker
Gültig bis 30.09.2026
Code: SNEAKER20
Dark Mode
hex code
#2E2E2E↓base token
base/color/black/lighten/5↓semantic token
semantic/canvas-background↓component token
component/papercard/background-color↓20 %
Extra auf Sneaker
Gültig bis 30.09.2026
Code: SNEAKER20
HTML
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));margin:-32px">
<div class="stage" data-scheme="light" style="padding:32px 24px;background:var(--oc-semantic-color-background-frame)">
<p style="margin:0 0 24px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:700;font-size:1.25rem;line-height:1.75rem;color:#f06;text-align:center">Light Mode</p>
<div style="display:flex;flex-direction:column;align-items:center">
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">hex code</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-canvas);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>#FFFFFF</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">base token</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-canvas);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>base/color/white/100</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">semantic token</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-canvas);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>semantic/canvas-background</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">component token</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-canvas);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>component/papercard/background-color</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<oc-paper-card-v1 style="width:100%;max-width:320px"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
</div>
<div class="stage" data-scheme="dark" style="padding:32px 24px;">
<p style="margin:0 0 24px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:700;font-size:1.25rem;line-height:1.75rem;color:#f06;text-align:center">Dark Mode</p>
<div style="display:flex;flex-direction:column;align-items:center">
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">hex code</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-canvas);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>#2E2E2E</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">base token</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-canvas);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>base/color/black/lighten/5</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">semantic token</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-canvas);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>semantic/canvas-background</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<p style="margin:0 0 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.8125rem;line-height:1.25rem;color:#f06;text-align:center">component token</p><span style="display:inline-flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;border:1px solid #f06;border-radius:6px;background:var(--oc-semantic-color-background-canvas);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.875rem;line-height:1.5rem;color:var(--oc-semantic-color-text-default)"><span style="flex:none;width:20px;height:20px;border-radius:50%;background:var(--oc-semantic-color-background-canvas);box-shadow:inset 0 0 0 1px var(--oc-semantic-color-stroke-divider)"></span>component/papercard/background-color</span><span style="display:block;text-align:center;color:#f06;font-size:1.25rem;line-height:1.5rem;margin:6px 0">↓</span>
<oc-paper-card-v1 style="width:100%;max-width:320px"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
</div>
Light Mode
20 %
Extra auf Sneaker
Gültig bis 30.09.2026
Code: SNEAKER20
Dark Mode
20 %
Extra auf Sneaker
Gültig bis 30.09.2026
Code: SNEAKER20
HTML
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin:-32px">
<div class="stage" data-scheme="light" style="padding:32px 24px;background:var(--oc-semantic-color-background-frame)">
<p style="margin:0 0 24px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:700;font-size:1.25rem;line-height:1.75rem;color:#f06;text-align:center">Light Mode</p>
<oc-button-v1 variant="primary">Label</oc-button-v1>
<oc-button-v1 variant="secondary">Label</oc-button-v1>
<oc-button-v1 variant="tertiary">Label</oc-button-v1>
<oc-button-v1 variant="secondary" success icon-type-left="check">Label</oc-button-v1>
<oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
<oc-text-field-v1 validation-message="Fehler">Label</oc-text-field-v1>
<oc-text-field-v1 variant="success">Label</oc-text-field-v1>
<oc-icon-button-v3 variant="secondary-over-color" size="100" icon="wishlist" oc-aria-label="Merken"></oc-icon-button-v3><oc-radio-button-v2 width-behavior="fit"><input type="radio" name="rb-dt-l" checked aria-label="oc-auto"><label slot="label">Label</label></oc-radio-button-v2><oc-checkbox-v2 width-behavior="fit"><input type="checkbox" checked aria-label="oc-auto"><label slot="label">Label</label></oc-checkbox-v2></div>
</div>
<div class="stage" data-scheme="dark" style="padding:32px 24px;">
<p style="margin:0 0 24px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:700;font-size:1.25rem;line-height:1.75rem;color:#f06;text-align:center">Dark Mode</p>
<oc-button-v1 variant="primary">Label</oc-button-v1>
<oc-button-v1 variant="secondary">Label</oc-button-v1>
<oc-button-v1 variant="tertiary">Label</oc-button-v1>
<oc-button-v1 variant="secondary" success icon-type-left="check">Label</oc-button-v1>
<oc-paper-card-v1 style="width:100%"><div style="display:grid;gap:4px"><p class="oc-headline-300 oc-text-color-sale">20 %</p><p class="oc-headline-100">Extra auf Sneaker</p><p class="oc-copy-75">Gültig bis 30.09.2026</p></div><p slot="footer" class="oc-copy-100">Code: <b>SNEAKER20</b></p></oc-paper-card-v1>
<oc-text-field-v1 validation-message="Fehler">Label</oc-text-field-v1>
<oc-text-field-v1 variant="success">Label</oc-text-field-v1>
<oc-icon-button-v3 variant="secondary-over-color" size="100" icon="wishlist" oc-aria-label="Merken"></oc-icon-button-v3><oc-radio-button-v2 width-behavior="fit"><input type="radio" name="rb-dt-d" checked aria-label="oc-auto"><label slot="label">Label</label></oc-radio-button-v2><oc-checkbox-v2 width-behavior="fit"><input type="checkbox" checked aria-label="oc-auto"><label slot="label">Label</label></oc-checkbox-v2></div>
</div>
How to use theming
You can try dark mode on develop.otto.de (VPN required). Use the sticky toggle in the top-right corner to switch between the themes. The toggle is visible only at the XXL breakpoint (≥ 1,232 px) and while toggling themes, the design tokens detect the current theme and provide the corresponding values.
For design, if you stick to semantic design tokens and OTTO Components, theming works out of the box. By default the component appear with the light mode. You can change the mode by changing the appearance of Figma sections, frames or components.
For development information on how to prepare features or whole pages for dark mode, refer to Storybook.
Note that dark mode is in beta and may be subject to changes.
Best practices
→ Icon
→ Überschrift
→ Icon
→ Überschrift
Status
Related foundations
Implementation
Note: For full technical documentation on how to use design tokens, visit Storybook/Use design tokens.