An onboarding deck for new product teams: what the system contains, how to design and build with it, and how to check a feature before it goes live. Fifteen slides in one style, OTTO Light, with red only as the accent and real OTTO components on the slides.
Onboarding für Produktteams
Mit dem OTTO Design System arbeiten
Was im System steckt, wie du es nutzt und wie du vor dem Livegang prüfst.
Onboarding · Design SystemAgenda
Was dich erwartet
- Das SystemGrundlagen, Komponenten, Tokens und Regeln
- GestaltenFarbe, Typografie und Layout in der Praxis
- UmsetzenKomponenten und semantische Tokens im Code
- PrüfenDesign QA und Barrierefreiheit vor dem Livegang
- HilfeWo du Antworten bekommst
Onboarding · Design System01 · Das System
Einmal entschieden, überall gleich.
Farben, Abstände, Schrift und Komponenten kommen aus einer Quelle. So sieht OTTO in der App, im Shop und in jedem Feature gleich aus.
Onboarding · Design System01 · Das System
Was du heute nutzen kannst
42
Komponenten mit Varianten, Zuständen und Regeln
253
semantische Tokens für Farbe, Abstand, Schrift und Bewegung
427
Icons auf einem Raster, dazu kleine Varianten
Onboarding · Design System01 · Das System
Vier Ebenen, eine Quelle
- Grundlagen: Farbe, Schrift, Raster, Bewegung
- Komponenten: fertige Bausteine mit Zuständen
- Tokens: die Werte hinter jeder Entscheidung
- Regeln: Do, Don't und Caution für jeden Fall
Onboarding · Design System02 · Gestalten
Drei Bausteine tragen jede Seite
Farbe
OTTO-Rot als Akzent, neutrale Flächen, semantische Farben nur für ihre Bedeutung.
Typografie
OTTO Sans in festen Stufen; copy100 für Text, headline100 als Standard.
Layout
8-px-Raster, Blöcke und Karten auf dem Frame, Breakpoints von S bis XL.
Onboarding · Design System02 · Gestalten
Rot bleibt Akzent: höchstens 30 Prozent einer Fläche.
MarkenregelOTTO Brand Hub
Onboarding · Design System03 · Umsetzen
Echte Bausteine statt Nachbauten
Button
Chip
Switch
Onboarding · Design System03 · Umsetzen
Werte kommen aus Tokens
Do
color: var(--oc-semantic-color-text-default);
padding: var(--oc-semantic-spacing-100);Don't
color: #212121;
padding: 16px;03 · Umsetzen
Ein Primary Button pro Ansicht
Do
Don't
Onboarding · Design System04 · Prüfen
Design QA vor jedem Livegang
- Lösung mit Design-Briefing abgleichen
- Komponenten richtig eingesetzt
- Farben aus semantischen Tokens
- Abstände und Schriften korrekt
- Alle Breakpoints geprüft
- Grenzfälle: sehr lange und kurze Texte
- Hover- und Pressed-Zustände
- Chrome, Safari und eine App auf echtem Gerät
Onboarding · Design System04 · Prüfen
Barrierefrei ist der Standard
4,5:1
Mindestkontrast für Text gegen seinen Hintergrund
48px
Zielgröße der meisten Komponenten, mindestens 24 px
1
Signal ist nie genug: Farbe immer mit Icon und Text
Onboarding · Design SystemEinstieg
Deine ersten vier Wochen
Woche 1
Grundlagen lesen
Farbe, Typografie, Layout und die Regeln für dein Medium.
Woche 2
Komponenten kennen
Die Seiten deiner wichtigsten Komponenten mit Do und Don't.
Woche 3
Tokens einsetzen
Semantische Tokens in Entwurf und Code, Dark Mode prüfen.
Woche 4
Erste Design QA
Ein Feature mit der Checkliste durchgehen, Befunde teilen.
Onboarding · Design System05 · Hilfe
Du bist nicht allein
- Fragen, Wünsche und neue Muster: das Design-System-Team
- Neue Komponenten entstehen über das Contribution Model
- Code prüfen lernen: das Team zeigt dir, wie
uxd-design-system@otto.de
Onboarding · Design System
Danke.
Viel Erfolg mit deinem ersten Feature.
Das Design-System-Team hilft dir weiter.
Onboarding · Design SystemHow the deck is built
| Slides | Layout |
|---|---|
| 1 | Title on the red-material still life |
| 2 | Agenda with five numbered rows |
| 3, 7 | Statement and rule as large type on white |
| 4, 12 | Three key figures |
| 5, 14 | Split: list and picture |
| 6 | Three picture cards |
| 8 | Live components on panels |
| 9, 10 | Do and Don't pairs: code and live buttons |
| 11 | Two-column checklist |
| 13 | Four steps |
| 15 | Closing with the letter sculpture |
Sources
- 42 components: the component pages.
- 253 semantic tokens: the design tokens.
- 427 icons: the icon set, without the small variants.
- The checklist follows Design QA; contrast and target sizes follow Accessibility.
- Red at most 30 % of an area: the OTTO Brand Hub.