OTTODesign System

Foundations

Color

Overview

The base color system is divided into the following clusters at the base level:

  • Neutral = Neutral colors include black, gray, and white. These colors form the foundation of our design system.
  • Exclusive = The exclusive colors are success-green, error-red, warning-orange, hint-purple, interactive-blue, sustainable-green and service-blue. These colors are chosen specifically for their context and should not be used differently.
  • Corporate = The corporate colors consists of all colors from our overarching corporate design and should be used to represent the OTTO brand.

Note: Mainly use semantic color design tokens for live! Base color design tokens are intended for drafts and special cases only.

black/100
white/100
gray/400
gray/200
gray/150
gray/100
gray/25
Liveneutral colors
HTML
<div style="overflow-x:auto"><div style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-width:27.5rem;gap:4px;">
<div style="background:var(--oc-base-color-black-100);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">black<wbr>/100</div>
<div style="grid-column:2/-1"></div>
<div style="background:var(--oc-base-color-white-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;box-shadow:inset 0 0 0 1px var(--oc-base-color-gray-150)">white<wbr>/100</div>
<div style="grid-column:2/-1"></div>
<div style="background:var(--oc-base-color-gray-400);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">gray<wbr>/400</div>
<div style="background:var(--oc-base-color-gray-200);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">gray<wbr>/200</div>
<div style="background:var(--oc-base-color-gray-150);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">gray<wbr>/150</div>
<div style="background:var(--oc-base-color-gray-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">gray<wbr>/100</div>
<div style="background:var(--oc-base-color-gray-25);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">gray<wbr>/25</div>
</div>
success-green/100
success-green/75
success-green/50
success-green/25
error-red/100
error-red/75
error-red/50
error-red/25
warning-orange/100
warning-orange/75
warning-orange/50
warning-orange/25
hint-purple/100
hint-purple/75
hint-purple/50
hint-purple/25
interactive-blue/100
interactive-blue/75
interactive-blue/50
interactive-blue/25
sustainable-green/140
sustainable-green/130
sustainable-green/120
sustainable-green/110
sustainable-green/80
sustainable-green/70
service-blue/140
service-blue/130
service-blue/120
service-blue/110
service-blue/100
service-blue/80
Liveexclusive colors
HTML
<div style="display:grid;gap:40px">
<div style="overflow-x:auto"><div style="display:grid;grid-template-columns:repeat(6,minmax(0,1fr));min-width:33rem;gap:4px;">
<div style="background:var(--oc-base-color-success-green-100);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">success-green<wbr>/100</div>
<div style="background:var(--oc-base-color-success-green-75);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">success-green<wbr>/75</div>
<div style="background:var(--oc-base-color-success-green-50);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">success-green<wbr>/50</div>
<div style="background:var(--oc-base-color-success-green-25);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">success-green<wbr>/25</div>
<div style="grid-column:5/-1"></div>
<div style="background:var(--oc-base-color-error-red-100);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">error-red<wbr>/100</div>
<div style="background:var(--oc-base-color-error-red-75);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">error-red<wbr>/75</div>
<div style="background:var(--oc-base-color-error-red-50);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">error-red<wbr>/50</div>
<div style="background:var(--oc-base-color-error-red-25);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">error-red<wbr>/25</div>
<div style="grid-column:5/-1"></div>
<div style="background:var(--oc-base-color-warning-orange-100);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warning-orange<wbr>/100</div>
<div style="background:var(--oc-base-color-warning-orange-75);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warning-orange<wbr>/75</div>
<div style="background:var(--oc-base-color-warning-orange-50);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warning-orange<wbr>/50</div>
<div style="background:var(--oc-base-color-warning-orange-25);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warning-orange<wbr>/25</div>
<div style="grid-column:5/-1"></div>
<div style="background:var(--oc-base-color-hint-purple-100);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">hint-purple<wbr>/100</div>
<div style="background:var(--oc-base-color-hint-purple-75);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">hint-purple<wbr>/75</div>
<div style="background:var(--oc-base-color-hint-purple-50);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">hint-purple<wbr>/50</div>
<div style="background:var(--oc-base-color-hint-purple-25);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">hint-purple<wbr>/25</div>
<div style="grid-column:5/-1"></div>
<div style="background:var(--oc-base-color-interactive-blue-100);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">interactive-blue<wbr>/100</div>
<div style="background:var(--oc-base-color-interactive-blue-75);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">interactive-blue<wbr>/75</div>
<div style="background:var(--oc-base-color-interactive-blue-50);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">interactive-blue<wbr>/50</div>
<div style="background:var(--oc-base-color-interactive-blue-25);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">interactive-blue<wbr>/25</div>
<div style="grid-column:5/-1"></div>
</div>
<div style="overflow-x:auto"><div style="display:grid;grid-template-columns:repeat(6,minmax(0,1fr));min-width:33rem;gap:4px;">
<div style="background:var(--oc-base-color-sustainable-green-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">sustainable-green<wbr>/140</div>
<div style="background:var(--oc-base-color-sustainable-green-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">sustainable-green<wbr>/130</div>
<div style="background:var(--oc-base-color-sustainable-green-120);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">sustainable-green<wbr>/120</div>
<div style="background:var(--oc-base-color-sustainable-green-110);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">sustainable-green<wbr>/110</div>
<div style="background:var(--oc-base-color-sustainable-green-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">sustainable-green<wbr>/80</div>
<div style="background:var(--oc-base-color-sustainable-green-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">sustainable-green<wbr>/70</div>
<div style="background:var(--oc-base-color-service-blue-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">service-blue<wbr>/140</div>
<div style="background:var(--oc-base-color-service-blue-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">service-blue<wbr>/130</div>
<div style="background:var(--oc-base-color-service-blue-120);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">service-blue<wbr>/120</div>
<div style="background:var(--oc-base-color-service-blue-110);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">service-blue<wbr>/110</div>
<div style="background:var(--oc-base-color-service-blue-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">service-blue<wbr>/100</div>
<div style="background:var(--oc-base-color-service-blue-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">service-blue<wbr>/80</div>
</div>
otto-red/125
otto-red/100
mint/140
mint/130
mint/120
mint/110
mint/100
mint/90
mint/80
mint/70
blue/140
blue/130
blue/120
blue/110
blue/100
blue/90
blue/80
blue/70
green/140
green/130
green/120
green/110
green/100
green/90
green/80
green/70
purple/140
purple/130
purple/120
purple/110
purple/100
purple/90
purple/80
purple/70
pink/140
pink/130
pink/120
pink/110
pink/100
pink/90
pink/80
pink/70
warm-red/140
warm-red/130
warm-red/120
warm-red/110
warm-red/100
warm-red/90
warm-red/80
warm-red/70
orange/140
orange/130
orange/120
orange/110
orange/100
orange/90
orange/80
orange/70
yellow/140
yellow/130
yellow/120
yellow/110
yellow/100
yellow/90
yellow/80
yellow/70
beige/110
beige/100
beige/90
beige/80
beige/70
Livecorporate colors
HTML
<div style="display:grid;gap:40px">
<div style="overflow-x:auto"><div style="display:grid;grid-template-columns:repeat(8,minmax(0,1fr));min-width:44rem;gap:4px;">
<div style="background:var(--oc-base-color-otto-red-125);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">otto-red<wbr>/125</div>
<div style="background:var(--oc-base-color-otto-red-100);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">otto-red<wbr>/100</div>
</div>
<div style="overflow-x:auto"><div style="display:grid;grid-template-columns:repeat(8,minmax(0,1fr));min-width:44rem;gap:4px;">
<div style="background:var(--oc-base-color-mint-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">mint<wbr>/140</div>
<div style="background:var(--oc-base-color-mint-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">mint<wbr>/130</div>
<div style="background:var(--oc-base-color-mint-120);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">mint<wbr>/120</div>
<div style="background:var(--oc-base-color-mint-110);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">mint<wbr>/110</div>
<div style="background:var(--oc-base-color-mint-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">mint<wbr>/100</div>
<div style="background:var(--oc-base-color-mint-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">mint<wbr>/90</div>
<div style="background:var(--oc-base-color-mint-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">mint<wbr>/80</div>
<div style="background:var(--oc-base-color-mint-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">mint<wbr>/70</div>
<div style="background:var(--oc-base-color-blue-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">blue<wbr>/140</div>
<div style="background:var(--oc-base-color-blue-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">blue<wbr>/130</div>
<div style="background:var(--oc-base-color-blue-120);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">blue<wbr>/120</div>
<div style="background:var(--oc-base-color-blue-110);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">blue<wbr>/110</div>
<div style="background:var(--oc-base-color-blue-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">blue<wbr>/100</div>
<div style="background:var(--oc-base-color-blue-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">blue<wbr>/90</div>
<div style="background:var(--oc-base-color-blue-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">blue<wbr>/80</div>
<div style="background:var(--oc-base-color-blue-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">blue<wbr>/70</div>
<div style="background:var(--oc-base-color-green-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">green<wbr>/140</div>
<div style="background:var(--oc-base-color-green-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">green<wbr>/130</div>
<div style="background:var(--oc-base-color-green-120);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">green<wbr>/120</div>
<div style="background:var(--oc-base-color-green-110);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">green<wbr>/110</div>
<div style="background:var(--oc-base-color-green-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">green<wbr>/100</div>
<div style="background:var(--oc-base-color-green-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">green<wbr>/90</div>
<div style="background:var(--oc-base-color-green-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">green<wbr>/80</div>
<div style="background:var(--oc-base-color-green-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">green<wbr>/70</div>
<div style="background:var(--oc-base-color-purple-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">purple<wbr>/140</div>
<div style="background:var(--oc-base-color-purple-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">purple<wbr>/130</div>
<div style="background:var(--oc-base-color-purple-120);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">purple<wbr>/120</div>
<div style="background:var(--oc-base-color-purple-110);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">purple<wbr>/110</div>
<div style="background:var(--oc-base-color-purple-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">purple<wbr>/100</div>
<div style="background:var(--oc-base-color-purple-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">purple<wbr>/90</div>
<div style="background:var(--oc-base-color-purple-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">purple<wbr>/80</div>
<div style="background:var(--oc-base-color-purple-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">purple<wbr>/70</div>
<div style="background:var(--oc-base-color-pink-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">pink<wbr>/140</div>
<div style="background:var(--oc-base-color-pink-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">pink<wbr>/130</div>
<div style="background:var(--oc-base-color-pink-120);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">pink<wbr>/120</div>
<div style="background:var(--oc-base-color-pink-110);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">pink<wbr>/110</div>
<div style="background:var(--oc-base-color-pink-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">pink<wbr>/100</div>
<div style="background:var(--oc-base-color-pink-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">pink<wbr>/90</div>
<div style="background:var(--oc-base-color-pink-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">pink<wbr>/80</div>
<div style="background:var(--oc-base-color-pink-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">pink<wbr>/70</div>
<div style="background:var(--oc-base-color-warm-red-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warm-red<wbr>/140</div>
<div style="background:var(--oc-base-color-warm-red-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warm-red<wbr>/130</div>
<div style="background:var(--oc-base-color-warm-red-120);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warm-red<wbr>/120</div>
<div style="background:var(--oc-base-color-warm-red-110);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warm-red<wbr>/110</div>
<div style="background:var(--oc-base-color-warm-red-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warm-red<wbr>/100</div>
<div style="background:var(--oc-base-color-warm-red-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warm-red<wbr>/90</div>
<div style="background:var(--oc-base-color-warm-red-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warm-red<wbr>/80</div>
<div style="background:var(--oc-base-color-warm-red-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">warm-red<wbr>/70</div>
<div style="background:var(--oc-base-color-orange-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">orange<wbr>/140</div>
<div style="background:var(--oc-base-color-orange-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">orange<wbr>/130</div>
<div style="background:var(--oc-base-color-orange-120);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">orange<wbr>/120</div>
<div style="background:var(--oc-base-color-orange-110);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">orange<wbr>/110</div>
<div style="background:var(--oc-base-color-orange-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">orange<wbr>/100</div>
<div style="background:var(--oc-base-color-orange-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">orange<wbr>/90</div>
<div style="background:var(--oc-base-color-orange-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">orange<wbr>/80</div>
<div style="background:var(--oc-base-color-orange-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">orange<wbr>/70</div>
<div style="background:var(--oc-base-color-yellow-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">yellow<wbr>/140</div>
<div style="background:var(--oc-base-color-yellow-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">yellow<wbr>/130</div>
<div style="background:var(--oc-base-color-yellow-120);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">yellow<wbr>/120</div>
<div style="background:var(--oc-base-color-yellow-110);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">yellow<wbr>/110</div>
<div style="background:var(--oc-base-color-yellow-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">yellow<wbr>/100</div>
<div style="background:var(--oc-base-color-yellow-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">yellow<wbr>/90</div>
<div style="background:var(--oc-base-color-yellow-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">yellow<wbr>/80</div>
<div style="background:var(--oc-base-color-yellow-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">yellow<wbr>/70</div>
<div style="background:var(--oc-base-color-beige-110);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">beige<wbr>/110</div>
<div style="background:var(--oc-base-color-beige-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">beige<wbr>/100</div>
<div style="background:var(--oc-base-color-beige-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">beige<wbr>/90</div>
<div style="background:var(--oc-base-color-beige-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">beige<wbr>/80</div>
<div style="background:var(--oc-base-color-beige-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;">beige<wbr>/70</div>
</div>

Scale

Brand and neutrals

OTTO red

  • 100#EB001F
  • 125#DC001D

Black

  • 100#212121

White

  • 100#FFF

Beige

  • 70#FFF9F0
  • 80#FFF5E6
  • 90#F5E6D7
  • 100#E9D4BF
  • 110#D8BDA4
  • 140#603117

Palette

Purple

  • 70#F4EEFF
  • 80#E5D5FE
  • 90#C5AFE9
  • 100#B198DB
  • 110#9C7FCB
  • 120#7E63CA
  • 130#6C49CF
  • 140#522EB7

Blue

  • 70#F0FAFF
  • 80#DCF0FA
  • 90#C5EAFF
  • 100#6EA0EB
  • 110#266BD3
  • 120#2E5AAE
  • 130#1E5A78
  • 140#14374B

Mint

  • 70#D1EDE7
  • 80#B4E1D7
  • 90#7DD4C7
  • 100#64C8B9
  • 110#099F91
  • 120#028A7E
  • 130#006058
  • 140#194743

Green

  • 70#E7FFB5
  • 80#DBFB98
  • 90#C5EF6C
  • 100#A9E034
  • 110#8ABC20
  • 120#6A9807
  • 130#5E8114
  • 140#456501

Yellow

  • 70#FFFFCD
  • 80#FFFAAF
  • 90#FFEB91
  • 100#FFDC73
  • 110#F3C640
  • 120#B4890A
  • 130#9E790D
  • 140#8D6B06

Orange

  • 70#FFE2D2
  • 80#FFC5A5
  • 90#FFB084
  • 100#F8A171
  • 110#EB8F5C
  • 120#E77433
  • 130#E95D21
  • 140#BF430D

Warm red

  • 70#FFE2E2
  • 80#FEC5C6
  • 90#FF9196
  • 100#E85F80
  • 110#DE3E64
  • 120#C82864
  • 130#8C2D4B
  • 140#6E1937

Pink

  • 70#FFEFFB
  • 80#FFD7F5
  • 90#FFBEF5
  • 100#E89FDD
  • 110#B060B7
  • 120#93319C
  • 130#801489
  • 140#63056B

Service blue

  • 80#C1DAEB
  • 100#76A6C6
  • 110#538FB7
  • 120#3F7498
  • 130#305873
  • 140#213D4F

Sustainable green

  • 70#E5FBE3
  • 80#BFECBB
  • 100#7EA87B
  • 110#7EA87B
  • 120#658C62
  • 125#63915F
  • 130#50734D
  • 140#3C5939

States

Success green

  • 25#D3EEDD
  • 50#67BD88
  • 75#3E935E
  • 100#227642

Error red

  • 25#FFE2E2
  • 50#F78CA1
  • 75#E64B69
  • 100#B30023

Warning orange

  • 25#FEE3D3
  • 50#FF8E5D
  • 75#E35316
  • 100#AE4518

Hint purple

  • 25#EEE5FF
  • 50#CB96FA
  • 75#A85DE8
  • 100#7D00EA

Interactive blue

  • 25#DCF2FF
  • 50#47BBFF
  • 75#418ADE
  • 100#2366CB

Most colors come in several shades, ranging from dark to light. The different shades are systematized using a numerical suffix. A higher number stands for a darker, whereas a lower number stands for a brighter shade.

140
130
120
110
100
90
80
70
Livescale
HTML
<div style="overflow-x:auto"><div style="display:grid;grid-template-columns:repeat(8,minmax(0,1fr));min-width:44rem;gap:4px;">
<div style="background:var(--oc-base-color-mint-140);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;display:grid;place-items:center;text-align:center">140</div>
<div style="background:var(--oc-base-color-mint-130);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;display:grid;place-items:center;text-align:center">130</div>
<div style="background:var(--oc-base-color-mint-120);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;display:grid;place-items:center;text-align:center">120</div>
<div style="background:var(--oc-base-color-mint-110);color:rgba(255,255,255,.78);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;display:grid;place-items:center;text-align:center">110</div>
<div style="background:var(--oc-base-color-mint-100);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;display:grid;place-items:center;text-align:center">100</div>
<div style="background:var(--oc-base-color-mint-90);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;display:grid;place-items:center;text-align:center">90</div>
<div style="background:var(--oc-base-color-mint-80);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;display:grid;place-items:center;text-align:center">80</div>
<div style="background:var(--oc-base-color-mint-70);color:rgba(33,33,33,.72);border-radius:4px;min-height:56px;padding:6px 8px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.75rem;line-height:1rem;display:grid;place-items:center;text-align:center">70</div>
</div>

Principles

  1. The beginning of the customer journey is inspirational. Selected corporate colors can be used at this stage. By the end, the interface becomes more focused with less color usage.
  2. Corporate and neutral colors are not exclusive and can be used for different contexts. Only exclusive colors are actually exclusive.
  3. You can use colors to highlight certain pages, features or components. When using colors always consider the overall context. Use eye-catching colors sparingly.
DoUse the corporate colors for a different purpose
Don'tReserve corporate colors for specific cases, e.g. OTTO UP
DoUse exclusive colors for their intended purpose e.g. error-red for error messages.
Don'tUse exclusive colors for different purpose.

Best practices

DoUse a combination of color, icons and text to express the meaning and give better context.
Nachname
Don'tUse color as the only indicator. This does not work well for people with low vision or color blindness.
Das ist ein Fehler!
DoBe intentional when using color, as they can convey meanings. The semantic colors are used for example to show an error or a success.
Das ist ein Erfolg!
Don'tUse color without taking their meaning into account.
10% Extra Ausverkauft Sehr beliebt
DoUse the components only with their intended color.
10% Extra Ausverkauft Sehr beliebt
Don'tUse different colors for components.
Jetzt bestellen Auf den Merkzettel
Weiter einkaufen
DoUse colors to differentiate between components, for example by using different colors for the primary or secondary variant.
Jetzt bestellen Auf den Merkzettel Weiter einkaufen
Don'tUse the same color for components with a different hierarchy.

Accessibility

All Otto components meet or exceed WCAG 2.1 AA contrast requirements. When using color outside of a component, ensure that the WCAG 2.1 requirements are always met.

Fragments

You can find an overview of all color tokens here.

Status

Implementation

Note: For full technical documentation of color visit Storybook/Color.

Updated 10 June 2026