Colour
- OTTO red
#eb001f - Text
#212121 - Text secondary
#6d6d6d - Frame
#f0f0f0 - Canvas
#ffffff - Interactive
#2366cb
Build it the OTTO way.
Foundations, components, tokens and the rules for what generated apps, pages, PDFs and pictures may and may not do. With exact values, and with OTTO's real components running on every component page.
Everything in one place
Mirrored from OTTO's public design system and component library, organised for building.
- RulesWhat generated OTTO work may and may not do: hard rules with exact values, a component chooser and rules for every medium.
- FoundationsColour, type, layout, elevation, motion, icons, illustration, accessibility and the app experience patterns.
- ComponentsEvery OTTO component with its purpose, variants, behaviour and the do and don't examples.
- CodeThe OTTO web component library: tag names, attributes, slots, events and examples for every component.
- TokensBase and semantic design tokens with their values in light and dark, plus the OTTO typefaces.
- ImageryGenerating pictures in the OTTO style: model setup, style briefs with exact colours, prompts and checks.
- ReferencesOTTO and the Otto Group compared: voice, annual reports, PDFs, Brand Hub, logos, websites and photography.
- BrandWhere the original logos, typefaces, icons and illustrations live, and how to use them.
- GuideHow OTTO works with its design system: onboarding, contribution, design QA and the glossary.
- Semantic tokens in anything live. Base tokens are for drafts only. Tokens
- At most 30 % OTTO red. More reads as a sales pitch. Brand rules
- Colour is never the only signal. Pair it with an icon and words. Colour
The system at a glance
Real values from the OTTO tokens.
Typography
- Display 300
48 / 56 - Headline 300
24 / 32 - Headline 100
16 / 24 - Copy 100
14 / 24
Icons
OTTO or Otto Group?
Two brands, two looks, two voices. This design system is OTTO's.
