OTTODesign System

OTTO Design System

Tokens

The real OTTO design tokens as shipped in the public OTTO Storybook build (fetched 28.09.2026), in three forms:

File Content
tokens.css CSS custom properties verbatim from the component CSS: 631 on :root (light), dark overrides on html[data-color-scheme=dark] and @media (prefers-color-scheme: dark) html[data-color-scheme=auto], OneX overrides on html[data-onex=yeah]
tokens.json 1583 tokens from the Style Dictionary tree in the preview bundle: name, tier, category, type, resolved value per theme (light, dark, onex), referenced token, comment, deprecation, and the literal CSS value
component-tokens.md component and feature tokens (internal to OTTO Components, listed for reference only)
Fonts folder OTTO Sans (regular 400, medium 500, bold 700, black 800 = otto-sansko-black), OTTO Sans Thin, OTTO Play, with fonts.css (@font-face verbatim; the CSS family name is OttoSans, the token value says 'OTTOSans'; CSS family matching is case-insensitive). fonts/static.otto.de/ holds the otto.de site build of OTTO Sans regular and bold (different file build of the same cuts)

Token counts by tier: base 291, component 947, feature-component 60, feature-semantic 32, semantic 253.

How to use them (rules)

  • Use semantic tokens (--oc-semantic-*) in anything that ships. They are themeable (light, dark, OneX) and stable.
  • Base tokens (--oc-base-*) are raw values. Use them only as references for semantic tokens or in drafts; never in production code. Storybook: "Do not use Base tokens in your production code. Base tokens are subject to change and can break. Instead, use semantic tokens."
  • Component tokens (--oc-component-*, --oc-feature-*) are internal to OTTO Components and not part of the public API. Do not use them.
  • If a token is missing, do not invent one: take the closest semantic token and flag the gap.
  • Dark mode: set data-color-scheme="dark" (or auto) on <html>; only semantic tokens switch. See Theming.
  • Prefer the Fragments utility classes (oc-text-color-*, oc-background-color-*, oc-p-*, oc-gap-*, oc-border-radius-*, oc-shadow-*, oc-headline-*, oc-copy-*) where they exist; they wrap these tokens. See Fragments folder.

Full rule text from Storybook: Development/Use design tokens, Fragments/Design tokens overview, Theming.

Categories

Tier Category Count Meaning
semantic animation 3 Animations
semantic border 13 Border (radius, width)
semantic checked-outline 5 Checked outline
semantic color 132 Color
semantic duration 11 Motion durations
semantic focus-outline 12 Focus outline
semantic font 20 Typography (families, sizes, weights, line heights)
semantic gestures 1 Gestures
semantic shadow 4 Shadow / elevation
semantic spacing 38 Spacing
semantic transition 14 Transitions
base breakpoint 5 Breakpoints (viewport widths)
base color 190 Color
base dimension 45 Dimensions (rem/px scale referenced by spacing, radius, font sizes)
base duration 11 Motion durations
base easing 9 Motion easings
base font 25 Typography (families, sizes, weights, line heights)
base repetition 2 Animation repetition counts
base shadow 4 Shadow / elevation

Semantic tokens (use these)

semantic / animation

Token Light Dark References Note
--oc-semantic-animation-loop-duration 1000ms --oc-semantic-duration-long-150 @reduced-motion:1500ms
--oc-semantic-animation-loop-easing cubic-bezier(0.8,0.35,0.6,0.85) --oc-base-easing-continuous
--oc-semantic-animation-loop-repetition infinite --oc-base-repetition-infinite

semantic / border

Token Light Dark References Note
--oc-semantic-border-radius-0 0rem --oc-base-dimension-relative-0
--oc-semantic-border-radius-25 0.125rem --oc-base-dimension-relative-2
--oc-semantic-border-radius-50 0.25rem --oc-base-dimension-relative-4
--oc-semantic-border-radius-100 0.5rem --oc-base-dimension-relative-8
--oc-semantic-border-radius-150 0.75rem --oc-base-dimension-relative-12
--oc-semantic-border-radius-200 1rem --oc-base-dimension-relative-16
--oc-semantic-border-radius-250 1.25rem --oc-base-dimension-relative-20 from main
--oc-semantic-border-radius-300 1.5rem --oc-base-dimension-relative-24
--oc-semantic-border-width-0 0px
--oc-semantic-border-width-100 1px
--oc-semantic-border-width-150 1.5px
--oc-semantic-border-width-200 2px
--oc-semantic-border-width-400 4px

semantic / checked-outline

Token Light Dark References Note
--oc-semantic-checked-outline-inline-color #ffffff --oc-semantic-color-background-canvas
--oc-semantic-checked-outline-outline-color #212121 --oc-semantic-color-background-inverted
--oc-semantic-checked-outline-width-inline-100 1px --oc-semantic-border-width-100
--oc-semantic-checked-outline-width-outline-100 1.5px --oc-semantic-border-width-150
--oc-semantic-checked-outline-width-outline-200 2px --oc-semantic-border-width-200

semantic / color

  • above-background#ffffff · #474747@deprecated: use background-above
  • background-above#ffffff · #474747
  • background-block-beige#f5e6d7 · #603117@deprecated: Use semantic/background-soft instead
  • background-block-blue#c5eaff · #14374b@deprecated: Use semantic/background-soft instead
  • background-block-green#dbfb98 · #456501@deprecated: Use semantic/background-soft instead
  • background-block-mint#b4e1d7 · #194743@deprecated: Use semantic/background-soft instead
  • background-block-orange#ffc5a5 · #bf430d@deprecated: Use semantic/background-soft instead
  • background-block-pink#ffd7f5 · #63056b@deprecated: Use semantic/background-soft instead
  • background-block-purple#e5d5fe · #522eb7@deprecated: Use semantic/background-soft instead
  • background-block-warm-red#fec5c6 · #6e1937@deprecated: Use semantic/background-soft instead
  • background-block-yellow#fffaaf · #8d6b06@deprecated: Use semantic/background-soft instead
  • background-brand#eb001f
  • background-canvas#ffffff · #2e2e2e
  • background-card-blue#1e5a78 · #6ea0eb@deprecated: Use semantic/background-strong instead
  • background-card-green#5e8114 · #a9e034@deprecated: Use semantic/background-strong instead
  • background-card-mint#006058 · #64c8b9@deprecated: Use semantic/background-strong instead
  • background-card-orange#bf430d · #f8a171@deprecated: Use semantic/background-strong instead
  • background-card-pink#801489 · #e89fdd@deprecated: Use semantic/background-strong instead
  • background-card-purple#6c49cf · #b198db@deprecated: Use semantic/background-strong instead
  • background-card-warm-red#8c2d4b · #e85f80@deprecated: Use semantic/background-strong instead
  • background-card-yellow#8d6b06 · #ffdc73@deprecated: Use semantic/background-strong instead
  • background-disabled#e5e5e5 · #474747
  • background-emphasized-error#f78ca1 · #b30023Use for alternative/graphical/emphasized backgrounds. Contrast >4.5:1 on black100.
  • background-emphasized-hint#47bbff · #2366cbUse for alternative/graphical/emphasized backgrounds. Contrast >4.5:1 on black100.
  • background-emphasized-info#cccccc · #545454Use for alternative/graphical/emphasized backgrounds. Contrast >4.5:1 on black100.
  • background-emphasized-success#67bd88 · #227642Use for alternative/graphical/emphasized backgrounds. Contrast >4.5:1 on black100.
  • background-emphasized-sustainable#7ea87b · #50734dUse for alternative/graphical/emphasized backgrounds. Contrast >4.5:1 on black100.
  • background-emphasized-warning#ff8e5d · #ae4518HINT: Do not use for text, as contrast not given. Use for alternative, graphical or emphasized backgrounds. Contrast >4.5:1 on black100.
  • background-error#ffe2e2 · #570011@deprecated. Contrast ~1:1 on frame-background.
  • background-frame#f0f0f0 · #212121
  • background-hint#dcf2ff · #0e2850@deprecated. Contrast ~1:1 on frame-background.
  • background-info#e5e5e5 · #3a3a3a@deprecated. Contrast ~1:1 on frame-background.
  • background-inverted#212121 · #ffffff
  • background-primary#dc001d
  • background-sale#dc001d
  • background-soft-beige#f5e6d7 · #603117
  • background-soft-blue#c5eaff · #14374b
  • background-soft-error#ffe2e2 · #570011Contrast ~1:1 on frame-background.
  • background-soft-green#dbfb98 · #456501
  • background-soft-hint#dcf2ff · #0e2850Contrast ~1:1 on frame-background.
  • background-soft-info#e5e5e5 · #3a3a3aContrast ~1:1 on frame-background.
  • background-soft-mint#b4e1d7 · #194743
  • background-soft-orange#ffc5a5 · #bf430d
  • background-soft-pink#ffd7f5 · #63056b
  • background-soft-purple#e5d5fe · #522eb7
  • background-soft-success#d3eedd · #0f331cContrast ~1:1 on frame-background.
  • background-soft-sustainable#e5fbe3 · #1f2f1eContrast ~1:1 on frame-background.
  • background-soft-warm-red#fec5c6 · #6e1937
  • background-soft-warning#fee3d3 · #4a1d0aContrast ~1:1 on frame-background.
  • background-soft-yellow#fffaaf · #8d6b06
  • background-stacked#f0f0f0 · #3a3a3a
  • background-sticky#ffffff · #545454
  • background-strong-blue#1e5a78 · #6ea0eb
  • background-strong-error#b30023 · #f78ca1Use for inverted background color. Contrast >4.5:1 on text-inverted.
  • background-strong-green#5e8114 · #a9e034
  • background-strong-hint#2366cb · #47bbffUse for inverted background color. Contrast >4.5:1 on text-inverted.
  • background-strong-info#212121Use for inverted background color. Contrast >4.5:1 on text-inverted.
  • background-strong-mint#006058 · #64c8b9
  • background-strong-orange#bf430d · #f8a171
  • background-strong-pink#801489 · #e89fdd
  • background-strong-purple#6c49cf · #b198db
  • background-strong-success#227642 · #67bd88Use for inverted background color. Contrast >4.5:1 on text-inverted.
  • background-strong-sustainable#50734d · #7ea87bUse for inverted background color. Contrast >4.5:1 on text-inverted.
  • background-strong-warm-red#8c2d4b · #e85f80
  • background-strong-warning#ae4518 · #ff8e5dUse for inverted background color. Contrast >4.5:1 on text-inverted.
  • background-strong-yellow#8d6b06 · #ffdc73
  • background-success#d3eedd · #0f331c@deprecated. Contrast ~1:1 on frame-background.
  • background-sustainable#e5fbe3 · #1f2f1e@deprecated. Contrast ~1:1 on frame-background.
  • background-warning#fee3d3 · #4a1d0a@deprecated. Contrast ~1:1 on frame-background.
  • brand#eb001f@deprecated: use background-brand or text-brand
  • canvas-background#ffffff · #2e2e2e@deprecated: use background-canvas
  • disabled-background#e5e5e5 · #474747@deprecated: use background-disabled
  • disabled-border#cccccc · #6d6d6d@deprecated: use stroke-disabled
  • disabled-overlayrgba(214, 214, 214, 0.6392156862745098) · rgba(92, 92, 92, 0.6392156862745098)@deprecated: use overlay-disabled #D6D6D6 is grey/lighten/71 64% explanation: on white it appears as grey100 (disabled background) and on black100 it appears as grey200 (disabled text)
  • disabled-text#949494@deprecated: use text-disabled
  • dividerrgba(33, 33, 33, 0.10196078431372549) · rgba(255, 255, 255, 0.2)@deprecated: use stroke-divider
  • error-25#ffe2e2 · #570011@deprecated: use background-error.
  • error-50#f78ca1 · #b30023@deprecated: use background-emphasized-error.
  • error-75#e64b69@deprecated: use stroke-error.
  • error-100#b30023 · #f78ca1@deprecated: use text-error.
  • frame-background#f0f0f0 · #212121@deprecated: use background-frame
  • hint-25#dcf2ff · #0e2850@deprecated: use background-hint.
  • hint-50#47bbff · #2366cb@deprecated: use background-emphasized-hint.
  • hint-75#418ade@deprecated: use stroke-hint.
  • hint-100#2366cb · #47bbff@deprecated: use text-hint.
  • inverted-background#212121 · #ffffff@deprecated: use background-inverted
  • overlay-activergba(0, 0, 0, 0.09019607843137255) · rgba(255, 255, 255, 0.12156862745098039)
  • overlay-active-invertedrgba(255, 255, 255, 0.12156862745098039) · rgba(0, 0, 0, 0.09019607843137255)
  • overlay-defaultrgba(0, 0, 0, 0) · rgba(255, 255, 255, 0)@deprecated: useless
  • overlay-disabledrgba(214, 214, 214, 0.6392156862745098) · rgba(92, 92, 92, 0.6392156862745098)#D6D6D6 is grey/lighten/71 64% explanation: on white it appears as grey100 (disabled background) and on black100 it appears as grey200 (disabled text)
  • overlay-hoverrgba(0, 0, 0, 0.03137254901960784) · rgba(255, 255, 255, 0.0784313725490196)
  • overlay-hover-invertedrgba(255, 255, 255, 0.0784313725490196) · rgba(0, 0, 0, 0.03137254901960784)
  • overlay-scrimrgba(33, 33, 33, 0.6509803921568628)
  • overlay-stackedrgba(33, 33, 33, 0.058823529411764705) · rgba(255, 255, 255, 0.10196078431372549)
  • primary-background#dc001d@deprecated: use background-primary
  • sale-background#dc001d@deprecated: use background-sale
  • scrimrgba(33, 33, 33, 0.6509803921568628)@deprecated: use overlay-scrim
  • stacked-background#f0f0f0 · #3a3a3a@deprecated: use background-stacked
  • sticky-background#ffffff · #545454@deprecated: use background-sticky
  • stroke-disabled#cccccc · #6d6d6d
  • stroke-dividerrgba(33, 33, 33, 0.10196078431372549) · rgba(255, 255, 255, 0.2)
  • stroke-error#e64b69Use for graphical foreground and borders. Contrast >3:1 on frame-background.
  • stroke-hint#418adeUse for graphical foreground and borders. Contrast >3:1 on frame-background.
  • stroke-info#6d6d6d · #949494Use for graphical foreground and borders. Contrast >3:1 on frame-background.
  • stroke-success#3e935eUse for graphical foreground and borders. Contrast >3:1 on frame-background.
  • stroke-sustainable#658c62Use for graphical foreground and borders. Contrast >3:1 on frame-background.
  • stroke-warning#e35316Use for graphical foreground and borders. Contrast >3:1 on frame-background.
  • success-25#d3eedd · #0f331c@deprecated: use background-success.
  • success-50#67bd88 · #227642@deprecated: use background-emphasized-success.
  • success-75#3e935e@deprecated: use stroke-success.
  • success-100#227642 · #67bd88@deprecated: use text-success.
  • sustainable-25#e5fbe3 · #1f2f1e@deprecated: use background-sustainable.
  • sustainable-50#7ea87b · #50734d@deprecated: use background-emphasized-sustainable.
  • sustainable-75#658c62@deprecated: use stroke-sustainable.
  • sustainable-100#50734d · #7ea87b@deprecated: use text-sustainable.
  • text-brand#eb001f · #ffffffonly use for large font (min. headline-300)
  • text-default#212121 · #ffffff
  • text-disabled#949494
  • text-error#b30023 · #f78ca1Use for text color, icon color. Contrast >4.5:1 on frame-background and error-background.
  • text-hint#2366cb · #47bbffUse for text color, icon color. Contrast >4.5:1 on frame-background and hint-background.
  • text-info#212121Use for text color, icon color. Contrast >4.5:1 on frame-background and info-background.
  • text-interactive#2366cb · #53bfff
  • text-inverted#ffffff · #212121
  • text-sale#dc001d · #ff435cUse with caution on grey25. Accessibility cannot be guaranteed.
  • text-secondary#6d6d6d · #cccccc
  • text-success#227642 · #67bd88Use for text color, icon color. Contrast >4.5:1 on frame-background and success-background.
  • text-sustainable#50734d · #7ea87bUse for text color, icon color. Contrast >4.5:1 on frame-background and sustainable-background.
  • text-warning#ae4518 · #ff8e5dUse for text color, icon color. Contrast >4.5:1 on frame-background and warning-background.
  • warning-25#fee3d3 · #4a1d0a@deprecated: use background-warning.
  • warning-50#ff8e5d · #ae4518@deprecated: use background-emphasized-warning.
  • warning-75#e35316@deprecated: use stroke-warning.
  • warning-100#ae4518 · #ff8e5d@deprecated: use text-warning.

semantic / duration

Token Light Dark References Note
--oc-semantic-duration-instant 15ms --oc-base-duration-15
--oc-semantic-duration-long-100 750ms --oc-base-duration-750
--oc-semantic-duration-long-150 1000ms --oc-base-duration-1000
--oc-semantic-duration-long-50 500ms --oc-base-duration-500
--oc-semantic-duration-medium-100 350ms --oc-base-duration-350
--oc-semantic-duration-medium-150 425ms --oc-base-duration-425
--oc-semantic-duration-medium-50 275ms --oc-base-duration-275
--oc-semantic-duration-reduced-motion 0ms --oc-base-duration-0
--oc-semantic-duration-short-100 125ms --oc-base-duration-125
--oc-semantic-duration-short-150 200ms --oc-base-duration-200
--oc-semantic-duration-short-50 50ms --oc-base-duration-50

semantic / focus-outline

Token Light Dark References Note
--oc-semantic-focus-outline-color #418ade #53bfff --oc-base-color-interactive-blue-75
--oc-semantic-focus-outline-offset 2px --oc-semantic-spacing-absolute-12
--oc-semantic-focus-outline-radius-12 calc(0rem + 2px)
--oc-semantic-focus-outline-radius-25 calc(0.125rem + 2px)
--oc-semantic-focus-outline-radius-50 calc(0.25rem + 2px)
--oc-semantic-focus-outline-radius-100 calc(0.5rem + 2px)
--oc-semantic-focus-outline-radius-150 calc(0.75rem + 2px)
--oc-semantic-focus-outline-radius-200 calc(1rem + 2px)
--oc-semantic-focus-outline-radius-250 calc(1rem + 2px)
--oc-semantic-focus-outline-radius-300 calc(1rem + 2px)
--oc-semantic-focus-outline-style solid
--oc-semantic-focus-outline-width 2px --oc-semantic-border-width-200

semantic / font

Token Light Dark References Note
Ag--oc-semantic-font-copy-50 400 0.625rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-copy-75 400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-copy-100 400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-copy-125 400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif
--oc-semantic-font-copy-font-family 'OTTOSans', Arial, Helvetica, sans-serif --oc-base-font-otto-sans
--oc-semantic-font-copy-font-weight 400 --oc-base-font-weight-regular
Ag--oc-semantic-font-display-100 800 2rem/2.5rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-display-200 800 2.5rem/3rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-display-300 800 3rem/3.5rem 'OTTOSans', Arial, Helvetica, sans-serif
--oc-semantic-font-display-font-family 'OTTOSans', Arial, Helvetica, sans-serif --oc-base-font-otto-sans
--oc-semantic-font-display-font-weight 800 --oc-base-font-weight-black
Ag--oc-semantic-font-headline-10 700 0.625rem/0.75rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-headline-25 700 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-headline-50 700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-headline-100 700 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-headline-200 700 1.25rem/1.75rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-headline-300 700 1.5rem/2rem 'OTTOSans', Arial, Helvetica, sans-serif
Ag--oc-semantic-font-headline-400 700 1.75rem/2.25rem 'OTTOSans', Arial, Helvetica, sans-serif
--oc-semantic-font-headline-font-family 'OTTOSans', Arial, Helvetica, sans-serif --oc-base-font-otto-sans
--oc-semantic-font-headline-font-weight 700 --oc-base-font-weight-bold

semantic / gestures

Token Light Dark References Note
--oc-semantic-gestures-long-press-delay 500ms --oc-semantic-duration-long-50

semantic / shadow

Token Light Dark References Note
--oc-semantic-shadow-above drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) --oc-base-shadow-200
--oc-semantic-shadow-canvas unset --oc-base-shadow-0
--oc-semantic-shadow-stacked unset --oc-base-shadow-0
--oc-semantic-shadow-sticky drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.30)) drop-shadow(0px 9px 10px rgba(0, 0, 0, 0.10)) --oc-base-shadow-300

semantic / spacing

Token Light Dark References Note
--oc-semantic-spacing-0 0px --oc-base-dimension-absolute-0 @deprecated: use spacing-absolute-0
--oc-semantic-spacing-12 2px --oc-base-dimension-absolute-2 @deprecated: use spacing-absolute-12
--oc-semantic-spacing-25 4px --oc-base-dimension-absolute-4 @deprecated: use spacing-absolute-25
--oc-semantic-spacing-50 8px --oc-base-dimension-absolute-8 @deprecated: use spacing-absolute-50
--oc-semantic-spacing-75 12px --oc-base-dimension-absolute-12 @deprecated: use spacing-absolute-75
--oc-semantic-spacing-100 16px --oc-base-dimension-absolute-16 @deprecated: use spacing-absolute-100
--oc-semantic-spacing-150 24px --oc-base-dimension-absolute-24 @deprecated: use spacing-absolute-150
--oc-semantic-spacing-200 32px --oc-base-dimension-absolute-32 @deprecated: use spacing-absolute-200
--oc-semantic-spacing-250 40px --oc-base-dimension-absolute-40 @deprecated: use spacing-absolute-250
--oc-semantic-spacing-absolute-0 0px --oc-base-dimension-absolute-0
--oc-semantic-spacing-absolute-12 2px --oc-base-dimension-absolute-2
--oc-semantic-spacing-absolute-25 4px --oc-base-dimension-absolute-4
--oc-semantic-spacing-absolute-50 8px --oc-base-dimension-absolute-8
--oc-semantic-spacing-absolute-75 12px --oc-base-dimension-absolute-12
--oc-semantic-spacing-absolute-100 16px --oc-base-dimension-absolute-16
--oc-semantic-spacing-absolute-150 24px --oc-base-dimension-absolute-24
--oc-semantic-spacing-absolute-200 32px --oc-base-dimension-absolute-32
--oc-semantic-spacing-absolute-250 40px --oc-base-dimension-absolute-40
--oc-semantic-spacing-cinema-gap 16px --oc-semantic-spacing-absolute-100
--oc-semantic-spacing-content-layout-gap 16px --oc-semantic-spacing-absolute-100
--oc-semantic-spacing-content-layout-outer 16px --oc-semantic-spacing-absolute-100
--oc-semantic-spacing-default-between-blocks 4px --oc-semantic-spacing-absolute-25
--oc-semantic-spacing-form-checkbox-radio-button-horizontal 24px --oc-base-dimension-absolute-24
--oc-semantic-spacing-form-checkbox-radio-button-vertical 24px --oc-base-dimension-absolute-24
--oc-semantic-spacing-form-hint-vertical 4px --oc-base-dimension-absolute-4
--oc-semantic-spacing-form-horizontal 8px --oc-base-dimension-absolute-8
--oc-semantic-spacing-form-vertical 24px --oc-base-dimension-absolute-24
--oc-semantic-spacing-page-layout-gap 4px --oc-semantic-spacing-absolute-25
--oc-semantic-spacing-page-layout-outer 0px --oc-semantic-spacing-absolute-0
--oc-semantic-spacing-relative-0 0rem --oc-base-dimension-relative-0
--oc-semantic-spacing-relative-12 0.125rem --oc-base-dimension-relative-2
--oc-semantic-spacing-relative-25 0.25rem --oc-base-dimension-relative-4
--oc-semantic-spacing-relative-50 0.5rem --oc-base-dimension-relative-8
--oc-semantic-spacing-relative-75 0.75rem --oc-base-dimension-relative-12
--oc-semantic-spacing-relative-100 1rem --oc-base-dimension-relative-16
--oc-semantic-spacing-relative-150 1.5rem --oc-base-dimension-relative-24
--oc-semantic-spacing-relative-200 2rem --oc-base-dimension-relative-32
--oc-semantic-spacing-relative-250 2.5rem --oc-base-dimension-relative-40

semantic / transition

Token Light Dark References Note
--oc-semantic-transition-appear-duration 125ms --oc-semantic-duration-short-100 @apply-reduced-motion
--oc-semantic-transition-appear-easing cubic-bezier(0,0,0.4,1) --oc-base-easing-default-out
--oc-semantic-transition-collapse-duration 125ms --oc-semantic-duration-short-100 @apply-reduced-motion
--oc-semantic-transition-collapse-easing cubic-bezier(0.8,0,0.4,1) --oc-base-easing-default-in-out
--oc-semantic-transition-disappear-duration 50ms --oc-semantic-duration-short-50 @apply-reduced-motion
--oc-semantic-transition-disappear-easing cubic-bezier(0.8,0,1,1) --oc-base-easing-default-in
--oc-semantic-transition-enter-duration 425ms --oc-semantic-duration-medium-150 @apply-reduced-motion
--oc-semantic-transition-enter-easing cubic-bezier(0.2,1,0.4,1) --oc-base-easing-expressive-out
--oc-semantic-transition-exit-duration 200ms --oc-semantic-duration-short-150 @apply-reduced-motion
--oc-semantic-transition-exit-easing cubic-bezier(0.6,0,0.8,0) --oc-base-easing-expressive-in
--oc-semantic-transition-expand-duration 200ms --oc-semantic-duration-short-150 @apply-reduced-motion
--oc-semantic-transition-expand-easing cubic-bezier(0.8,0,0.4,1) --oc-base-easing-default-in-out
--oc-semantic-transition-navigate-duration 200ms --oc-semantic-duration-short-150 @apply-reduced-motion
--oc-semantic-transition-navigate-easing cubic-bezier(0,0,0.4,1) --oc-base-easing-default-out

Feature semantic tokens

feature-semantic / color

Token Light Dark References Note
--oc-feature-semantic-color-background-ai #f4eeff #381e84 --oc-base-color-purple-70
--oc-feature-semantic-color-background-emphasized-ai #c5afe9 #522eb7 --oc-base-color-purple-90
--oc-feature-semantic-color-product-gold-0 #aa5b00
--oc-feature-semantic-color-product-gold-17 #994700
--oc-feature-semantic-color-product-gold-54 #ffe284
--oc-feature-semantic-color-product-gold-70 #ffe284
--oc-feature-semantic-color-product-gold-95 #994700
--oc-feature-semantic-color-product-gold-gradient linear-gradient(to right top, #aa5b00 0, #994700 17%, #ffe284 54%, #ffe284 70%, #994700 95%)
--oc-feature-semantic-color-product-multicolor-0 #7e3906
--oc-feature-semantic-color-product-multicolor-10 #7e3906
--oc-feature-semantic-color-product-multicolor-23 #ff889e
--oc-feature-semantic-color-product-multicolor-37 #8d0083
--oc-feature-semantic-color-product-multicolor-49 #198504
--oc-feature-semantic-color-product-multicolor-63 #334982
--oc-feature-semantic-color-product-multicolor-76 #ffd229
--oc-feature-semantic-color-product-multicolor-90 #ee9201
--oc-feature-semantic-color-product-multicolor-100 #d52b1e
--oc-feature-semantic-color-product-multicolor-10_2 #ff889e
--oc-feature-semantic-color-product-multicolor-23_2 #8d0083
--oc-feature-semantic-color-product-multicolor-37_2 #198504
--oc-feature-semantic-color-product-multicolor-49_2 #334982
--oc-feature-semantic-color-product-multicolor-63_2 #ffd229
--oc-feature-semantic-color-product-multicolor-76_2 #ee9201
--oc-feature-semantic-color-product-multicolor-90_2 #d52b1e
--oc-feature-semantic-color-product-multicolor-gradient linear-gradient(to right top, #7e3906 0, #7e3906 10%, #ff889e 10%, #ff889e 23%, #8d0083 23%, #8d0083 37%, #198504 37%, #198504 48.5%, #334982 48.5%, #334982 63%, #ffd229 63%, #ffd229 76%, #ee9201 76%, #ee9201 90%, #d52b1e 90%, #d52b1e 100%)
--oc-feature-semantic-color-product-silver-17 #888a87
--oc-feature-semantic-color-product-silver-54 #e9ebe7
--oc-feature-semantic-color-product-silver-70 #e9ebe7
--oc-feature-semantic-color-product-silver-95 #888a87
--oc-feature-semantic-color-product-silver-gradient linear-gradient(to right top, #888a87 17%, #e9ebe7 54%, #e9ebe7 70%, #888a87 95%)
--oc-feature-semantic-color-stroke-ai #7e63ca --oc-base-color-purple-120
--oc-feature-semantic-color-text-ai #522eb7 #e5d5fe --oc-base-color-purple-140

Base tokens (reference only, not for production code)

base / breakpoint

Token Light Dark References Note
--oc-base-breakpoint-l 48rem
--oc-base-breakpoint-m 28rem
--oc-base-breakpoint-s 22.5rem
--oc-base-breakpoint-xl 62rem
--oc-base-breakpoint-xxl 77rem

base / color

  • beige-70#fff9f0Text contrast: black-100 AAA
  • beige-80#fff5e6Text contrast: black-100 AAA
  • beige-90#f5e6d7Text contrast: black-100 AAA
  • beige-100#e9d4bfText contrast: black-100 AAA
  • beige-110#d8bda4Text contrast: black-100 AAA
  • beige-140#603117Only to be used for dark mode.
  • black-100#212121
  • black-lighten-5#2e2e2e
  • black-lighten-10#3a3a3a
  • black-lighten-15#474747
  • black-lighten-20#545454
  • black-lighten-25#616161
  • black-lighten-30#6d6d6d
  • black-lighten-45#949494
  • black-lighten-61#bdbdbd
  • black-lighten-67#cccccc
  • black-lighten-71#d6d6d6
  • black-lighten-77#e5e5e5
  • black-lighten-81#f0f0f0
  • black-lighten-84#f7f7f7
  • black-opacity-0rgba(33, 33, 33, 0)
  • black-opacity-3rgba(33, 33, 33, 0.03137254901960784)
  • black-opacity-5rgba(33, 33, 33, 0.050980392156862744)
  • black-opacity-6rgba(33, 33, 33, 0.058823529411764705)
  • black-opacity-10rgba(33, 33, 33, 0.10196078431372549)
  • black-opacity-40rgba(33, 33, 33, 0.4)
  • black-opacity-50rgba(33, 33, 33, 0.5019607843137255)
  • black-opacity-70rgba(33, 33, 33, 0.7019607843137254)
  • blue-70#f0faffText contrast: black-100 AAA
  • blue-80#dcf0faText contrast: black-100 AAA
  • blue-90#c5eaffText contrast: black-100 AAA
  • blue-100#6ea0ebText contrast: black-100 AA
  • blue-110#266bd3Text contrast: white-100 AA, black-100 AA (large only)
  • blue-120#2e5aaeText contrast: white-100 AA
  • blue-130#1e5a78Text contrast: white-100 AAA
  • blue-140#14374bText contrast: white-100 AAA
  • corporate-color-spectrum-coral-25#ffe2e2@deprecated
  • corporate-color-spectrum-coral-50#ffafaf@deprecated, Bright Coral acc. to BXP
  • corporate-color-spectrum-coral-100#ff9196@deprecated, Coral acc. to BXP
  • corporate-color-spectrum-coral-150#d25a5f@deprecated, Dark Coral acc. to BXP
  • corporate-color-spectrum-coral-200#bc3339@deprecated
  • corporate-color-spectrum-cozy-pink-50#ffd7f5@deprecated Bright Cozy Pink acc. to BXP
  • corporate-color-spectrum-cozy-pink-100#ffbef5@deprecated Cozy Pink acc. to BXP
  • corporate-color-spectrum-cozy-pink-150#f578cd@deprecated Dark Cozy Pink acc. to BXP
  • corporate-color-spectrum-deep-navy-50#287396@deprecated Bright Deep Navy acc. to BXP
  • corporate-color-spectrum-deep-navy-100#1e5a78@deprecated Deep Navy acc. to BXP
  • corporate-color-spectrum-deep-navy-150#14374b@deprecated Dark Deep Navy acc. to BXP
  • corporate-color-spectrum-denim-25#deedff@deprecated
  • corporate-color-spectrum-denim-50#78b4ff@deprecated Bright Denim acc. to BXP
  • corporate-color-spectrum-denim-100#6ea0eb@deprecated Denim acc. to BXP
  • corporate-color-spectrum-denim-125#4a88e6@deprecated
  • corporate-color-spectrum-denim-150#374bc8@deprecated Dark Denim acc. to BXP
  • corporate-color-spectrum-natural-beige-50#fff5e6@deprecated Bright Natural Beige acc. to BXP
  • corporate-color-spectrum-natural-beige-100#f5e6d7@deprecated Natural Beige acc. to BXP
  • corporate-color-spectrum-natural-beige-150#dcbe96@deprecated Dark Natural Beige acc. to BXP
  • corporate-color-spectrum-positive-green-25#d1ede7@deprecated
  • corporate-color-spectrum-positive-green-50#b4e1d7@deprecated, Bright Positive Green acc. to BXP
  • corporate-color-spectrum-positive-green-100#64c8b9@deprecated, Positive Green acc. to BXP
  • corporate-color-spectrum-positive-green-150#00aa9b@deprecated, Dark Positive Green acc. to BXP
  • corporate-color-spectrum-positive-green-175#009b8d@deprecated
  • corporate-color-spectrum-positive-green-200#007268@deprecated
  • corporate-color-spectrum-sky-blue-50#f0faff@deprecated Bright Sky Blue acc. to BXP
  • corporate-color-spectrum-sky-blue-100#dcf0fa@deprecated Sky Blue acc. to BXP
  • corporate-color-spectrum-sky-blue-150#98c9f1@deprecated Dark Sky Blue acc. to BXP
  • corporate-color-spectrum-sunny-yellow-50#ffffcd@deprecated Bright Sunny Yellow acc. to BXP
  • corporate-color-spectrum-sunny-yellow-100#fffaaf@deprecated Sunny Yellow acc. to BXP
  • corporate-color-spectrum-sunny-yellow-125#ffeb91@deprecated - will be deleted 31 Dec 2024
  • corporate-color-spectrum-sunny-yellow-150#ffdc73@deprecated Dark Sunny Yellow acc. to BXP
  • corporate-color-spectrum-warm-red-50#c82864@deprecated Bright Warm Red acc. to BXP
  • corporate-color-spectrum-warm-red-100#8c2d4b@deprecated Warm Red acc. to BXP
  • corporate-color-spectrum-warm-red-150#6e1937@deprecated Dark Warm Red acc. to BXP
  • error-red-25#ffe2e2
  • error-red-50#f78ca1
  • error-red-75#e64b69
  • error-red-100#b30023
  • gray-25#f0f0f0formerly "grey"
  • gray-100#e5e5e5formerly "grey"
  • gray-150#ccccccformerly "grey"
  • gray-200#949494formerly "grey"
  • gray-400#6d6d6dformerly "grey"
  • green-70#e7ffb5Text contrast: black-100 AAA
  • green-80#dbfb98Text contrast: black-100 AAA
  • green-90#c5ef6cText contrast: black-100 AAA
  • green-100#a9e034Text contrast: black-100 AAA
  • green-110#8abc20Text contrast: black-100 AAA
  • green-120#6a9807Text contrast: white-100 AA (large only), black-100 AA
  • green-130#5e8114Text contrast: white-100 AA, black-100 AA (large only)
  • green-140#456501Text contrast: white-100 AA
  • hint-purple-25#eee5ff@deprecated
  • hint-purple-50#cb96fa@deprecated
  • hint-purple-75#a85de8@deprecated
  • hint-purple-100#7d00ea@deprecated
  • interactive-blue-25#dcf2ff
  • interactive-blue-50#47bbff
  • interactive-blue-75#418ade
  • interactive-blue-100#2366cb
  • interactive-blue-darken-5#215fbc@deprecated
  • interactive-blue-darken-10#1d54a7@deprecated
  • interactive-blue-darken-15#1a4991@deprecated
  • interactive-blue-darken-20#163e7b@deprecated
  • interactive-blue-lighten-10#4b86df@deprecated, derived from interactive-blue-100
  • interactive-blue-lighten-25#53bfff@deprecated, derived from interactive-blue-lighten-45
  • interactive-blue-lighten-35#86d2ff@deprecated, derived from interactive-blue-lighten-45
  • interactive-blue-lighten-45#b9e5ff@deprecated, derived from interactive-blue-50
  • interactive-blue-lighten-55#dcf2ff@deprecated, derived from interactive-blue-25
  • mint-70#d1ede7Text contrast: black-100 AAA
  • mint-80#b4e1d7Text contrast: black-100 AAA
  • mint-90#7dd4c7Text contrast: black-100 AAA
  • mint-100#64c8b9Text contrast: black-100 AAA
  • mint-110#099f91Text contrast: white-100 AA (large only), black-100 AA
  • mint-120#028a7eText contrast: white-100 AA (large only), black-100 AA (large only)
  • mint-130#006058Text contrast: white-100 AAA
  • mint-140#194743Text contrast: white-100 AAA
  • orange-70#ffe2d2Text contrast: black-100 AAA
  • orange-80#ffc5a5Text contrast: black-100 AAA
  • orange-90#ffb084Text contrast: black-100 AAA
  • orange-100#f8a171Text contrast: black-100 AAA
  • orange-110#eb8f5cText contrast: black-100 AA
  • orange-120#e77433Text contrast: white-100 AA (large only), black-100 AA
  • orange-130#e95d21Text contrast: white-100 AA (large only), black-100 AA
  • orange-140#bf430dText contrast: white-100 AA, black-100 AA (large only)
  • otto-red-100#eb001f
  • otto-red-125#dc001d
  • otto-red-darken-3#dc001d@deprecated
  • otto-red-darken-4#dc001d@deprecated
  • otto-red-darken-10#b80018@deprecated
  • otto-red-darken-20#850012@deprecated
  • pink-70#ffeffbText contrast: black-100 AAA
  • pink-80#ffd7f5Text contrast: black-100 AAA
  • pink-90#ffbef5Text contrast: black-100 AAA
  • pink-100#e89fddText contrast: black-100 AAA
  • pink-110#b060b7Text contrast: white-100 AA (large only), black-100 AA (large only)
  • pink-120#93319cText contrast: white-100 AA
  • pink-130#801489Text contrast: white-100 AAA
  • pink-140#63056bText contrast: white-100 AAA
  • purple-70#f4eeffText contrast: black-100 AAA
  • purple-80#e5d5feText contrast: black-100 AAA
  • purple-90#c5afe9Text contrast: black-100 AAA
  • purple-100#b198dbText contrast: black-100 AA
  • purple-110#9c7fcbText contrast: white-100 AA (large only), black-100 AA
  • purple-120#7e63caText contrast: white-100 AA, black-100 AA (large only)
  • purple-130#6c49cfText contrast: white-100 AA
  • purple-140#522eb7Text contrast: white-100 AAA
  • service-blue-80#c1daeb
  • service-blue-100#76a6c6
  • service-blue-110#538fb7
  • service-blue-120#3f7498
  • service-blue-130#305873
  • service-blue-140#213d4f
  • success-green-25#d3eedd
  • success-green-50#67bd88
  • success-green-75#3e935e
  • success-green-100#227642
  • sustainable-green-70#e5fbe3
  • sustainable-green-80#bfecbb
  • sustainable-green-100#7ea87b@deprecated
  • sustainable-green-110#7ea87b
  • sustainable-green-120#658c62
  • sustainable-green-125#63915f@deprecated
  • sustainable-green-130#50734d
  • sustainable-green-140#3c5939
  • sustainable-green-darken-10#63915f@deprecated
  • sustainable-green-darken-15#588155@deprecated
  • sustainable-green-darken-20#4e724b@deprecated
  • warm-red-70#ffe2e2Text contrast: black-100 AAA
  • warm-red-80#fec5c6Text contrast: black-100 AAA
  • warm-red-90#ff9196Text contrast: black-100 AAA
  • warm-red-100#e85f80Text contrast: white-100 AA (large only), black-100 AA
  • warm-red-110#de3e64Text contrast: white-100 AA (large only), black-100 AA (large only)
  • warm-red-120#c82864Text contrast: white-100 AA, black-100 AA (large only)
  • warm-red-130#8c2d4bText contrast: white-100 AAA
  • warm-red-140#6e1937Text contrast: white-100 AAA
  • warning-orange-25#fee3d3
  • warning-orange-50#ff8e5d
  • warning-orange-75#e35316
  • warning-orange-100#ae4518
  • white-100#ffffffWhite
  • white-opacity-0rgba(255, 255, 255, 0)
  • white-opacity-3rgba(255, 255, 255, 0.03137254901960784)
  • white-opacity-5rgba(255, 255, 255, 0.050980392156862744)
  • white-opacity-10rgba(255, 255, 255, 0.10196078431372549)
  • white-opacity-20rgba(255, 255, 255, 0.2)
  • yellow-70#ffffcdText contrast: black-100 AAA
  • yellow-80#fffaafText contrast: black-100 AAA
  • yellow-90#ffeb91Text contrast: black-100 AAA
  • yellow-100#ffdc73Text contrast: black-100 AAA
  • yellow-110#f3c640Text contrast: black-100 AAA
  • yellow-120#b4890aText contrast: white-100 AA (large only), black-100 AA
  • yellow-130#9e790dText contrast: white-100 AA (large only), black-100 AA (large only)
  • yellow-140#8d6b06Text contrast: white-100 AA, black-100 AA (large only)

base / dimension

Token Light Dark References Note
--oc-base-dimension-0 0px @deprecated: use absolute/0
--oc-base-dimension-2 2px @deprecated: use absolute/2
--oc-base-dimension-4 4px @deprecated: use absolute/4
--oc-base-dimension-8 8px @deprecated: use absolute/8
--oc-base-dimension-12 12px @deprecated: use absolute/12
--oc-base-dimension-16 16px @deprecated: use absolute/16
--oc-base-dimension-20 20px @deprecated: use absolute/20
--oc-base-dimension-24 24px @deprecated: use absolute/24
--oc-base-dimension-32 32px @deprecated: use absolute/32
--oc-base-dimension-40 40px @deprecated: use absolute/40
--oc-base-dimension-48 48px @deprecated: use absolute/48
--oc-base-dimension-56 56px @deprecated: use absolute/56
--oc-base-dimension-64 64px @deprecated: use absolute/64
--oc-base-dimension-72 72px @deprecated: use absolute/72
--oc-base-dimension-80 80px @deprecated: use absolute/80
--oc-base-dimension-absolute-0 0px
--oc-base-dimension-absolute-2 2px
--oc-base-dimension-absolute-4 4px
--oc-base-dimension-absolute-8 8px
--oc-base-dimension-absolute-12 12px
--oc-base-dimension-absolute-16 16px
--oc-base-dimension-absolute-20 20px
--oc-base-dimension-absolute-24 24px
--oc-base-dimension-absolute-32 32px
--oc-base-dimension-absolute-40 40px
--oc-base-dimension-absolute-48 48px
--oc-base-dimension-absolute-56 56px
--oc-base-dimension-absolute-64 64px
--oc-base-dimension-absolute-72 72px
--oc-base-dimension-absolute-80 80px
--oc-base-dimension-relative-0 0rem
--oc-base-dimension-relative-2 0.125rem
--oc-base-dimension-relative-4 0.25rem
--oc-base-dimension-relative-8 0.5rem
--oc-base-dimension-relative-12 0.75rem
--oc-base-dimension-relative-16 1rem
--oc-base-dimension-relative-20 1.25rem
--oc-base-dimension-relative-24 1.5rem
--oc-base-dimension-relative-32 2rem
--oc-base-dimension-relative-40 2.5rem
--oc-base-dimension-relative-48 3rem
--oc-base-dimension-relative-56 3.5rem
--oc-base-dimension-relative-64 4rem
--oc-base-dimension-relative-72 4.5rem
--oc-base-dimension-relative-80 5rem

base / duration

Token Light Dark References Note
--oc-base-duration-0 0ms
--oc-base-duration-15 15ms
--oc-base-duration-50 50ms
--oc-base-duration-125 125ms
--oc-base-duration-200 200ms
--oc-base-duration-275 275ms
--oc-base-duration-350 350ms
--oc-base-duration-425 425ms
--oc-base-duration-500 500ms
--oc-base-duration-750 750ms
--oc-base-duration-1000 1000ms

base / easing

Token Light Dark References Note
--oc-base-easing-continuous cubic-bezier(0.8,0.35,0.6,0.85)
--oc-base-easing-default-in cubic-bezier(0.8,0,1,1)
--oc-base-easing-default-in-out cubic-bezier(0.8,0,0.4,1)
--oc-base-easing-default-out cubic-bezier(0,0,0.4,1)
--oc-base-easing-expressive-bounce cubic-bezier(0.6,0,0.2,1.3)
--oc-base-easing-expressive-in cubic-bezier(0.6,0,0.8,0)
--oc-base-easing-expressive-in-out cubic-bezier(0.9,0.1,0.1,0.9)
--oc-base-easing-expressive-out cubic-bezier(0.2,1,0.4,1)
--oc-base-easing-linear cubic-bezier(0,0,1,1)

base / font

Token Light Dark References Note
--oc-base-font-line-height-75 0.75rem
--oc-base-font-line-height-100 1rem
--oc-base-font-line-height-125 1.25rem
--oc-base-font-line-height-150 1.5rem
--oc-base-font-line-height-175 1.75rem
--oc-base-font-line-height-200 2rem
--oc-base-font-line-height-225 2.25rem
--oc-base-font-line-height-250 2.5rem
--oc-base-font-line-height-300 3rem
--oc-base-font-line-height-350 3.5rem
--oc-base-font-otto-play 'OTTOPlay', serif
--oc-base-font-otto-sans 'OTTOSans', Arial, Helvetica, sans-serif
--oc-base-font-size-62 0.625rem
--oc-base-font-size-75 0.75rem
--oc-base-font-size-87 0.875rem
--oc-base-font-size-100 1rem
--oc-base-font-size-125 1.25rem
--oc-base-font-size-150 1.5rem
--oc-base-font-size-175 1.75rem
--oc-base-font-size-200 2rem
--oc-base-font-size-250 2.5rem
--oc-base-font-size-300 3rem
--oc-base-font-weight-black 800
--oc-base-font-weight-bold 700
--oc-base-font-weight-regular 400

base / repetition

Token Light Dark References Note
--oc-base-repetition-1 1
--oc-base-repetition-infinite infinite

base / shadow

Token Light Dark References Note
--oc-base-shadow-0 unset
--oc-base-shadow-100 drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.07))
--oc-base-shadow-200 drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10))
--oc-base-shadow-300 drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.30)) drop-shadow(0px 9px 10px rgba(0, 0, 0, 0.10))

CSS custom properties without a token-tree entry

Property Scope Value
--oc-base-color-white :root var(--oc-base-color-white-100,#fff)
--oc-base-color-white @media (prefers-color-scheme:dark) html[data-color-scheme=auto] var(--oc-base-color-white-100,#fff)
--oc-base-color-white html[data-color-scheme=dark] var(--oc-base-color-white-100,#fff)
--oc-base-color-white html[data-onex=yeah] var(--oc-base-color-white-100,#fff)

Source

  • CSS: https://www.otto.de/assets-storybook/assets/assets.components.iframe.BkrEKN7G.css
  • Token tree: Style Dictionary output embedded in the Storybook preview bundle (source/storybook/extracted/tokens-tree.json).
  • Regenerate: see github.com › README.