Documentation
Storybook
The technical documentation for the design system is provided in storybook.
It is possible here to test existing components in a live environment, toggle dark mode and read technical data. All the tokens used are the same in both figma and development.
- [Storybook Live](storybook live)
Zeroheight
The design documentation for our design system is provided here in zeroheight.
To begin with, it is important to take a look at the contribution model. For further work with the design system, there is complete documentation on the foundations and components, as well as a checklist for the approval of newly developed features or feature components (design QA).
Figma structure
Figma is structured in the following way: From workspace (e.g. B2B, B2C), to team (e.g. AAL, TAM, FPP, DS), to project, to file.
Templates
Best practice is to adopt the file structure from the project template and position it in the correct project.
There is also a presentation template that can be used for all internal presentations, which will help to ensure that they are consistent looking.
Libraries
The following libraries are provided by the design system team:
- OTTO Design System Library: These are the Figma representations of our new OTTO-Components-based accessible Design System.
- OTTO Base Token Library
- OTTO Icon Library
- OTTO Helper Library
- OTTO Illustration Library
- OTTO Feature Component Library
Feature components
If it is not possible to implement the design using OTTO components, it is important to consider implementing it as an OTTO feature component. It is essential to take the design system foundations into account, and to consult the team library for advice.
The following images provide an overview of the different component types and definitions, as well as a decision tree to help you decide whether a feature component is needed.
Repo
GENERIC
OTTO Design System
OTTO Design System
DOMAIN SPECIFIC
Feature Components
Feature Components
TEAM SPECIFIC
Local Components
Local Components
Purpose
for all reusable, generic frontend resources and utilities, for any service or feature
free of domain-specific logic
extends when identical need for a new generic resource exists across multiple teams, avoiding duplication
free of domain-specific logic
extends when identical need for a new generic resource exists across multiple teams, avoiding duplication
for sharing static resources that solve a domain-specific, recurring problem
addresses domain-specific requirements via cross-team collaboration
extends when multiple teams have the same domain requirements that is too specialised for the central OTTO Design System
addresses domain-specific requirements via cross-team collaboration
extends when multiple teams have the same domain requirements that is too specialised for the central OTTO Design System
use only when a genuinely unique feature need cannot be abstracted into a generic or shared resource
built on reused Design System components, utilities, and resources
if no reuse is foreseeable and no other team needs it, keep it a local component (avoid if possible)
built on reused Design System components, utilities, and resources
if no reuse is foreseeable and no other team needs it, keep it a local component (avoid if possible)
What’s included?
- generic static resources
- frontend utility classes
- siteframes
- design tokens
- icons and logos
- domain specific static resources
- feature component tokens
- individual per team
Who’s responsible?
team assets
business logic: shared ownership across multiple teams
infrastructure: team assets
infrastructure: team assets
individual team
To be used by
HTML
<div style="overflow-x:auto"><div style="min-width:560px;display:grid;grid-template-columns:minmax(90px,.7fr) repeat(3,minmax(0,1fr));border-bottom:1px solid #ff7aae;color:var(--oc-semantic-color-text-default)">
<div style="padding:16px 12px 16px 0;color:#f06;font:700 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace;border-top:1px solid #ff7aae">Repo</div><div style="padding:16px;background:#f06;color:#fff;font:700 14px/18px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="opacity:.75;font-size:11px">GENERIC</span><br>OTTO Design System</div><div style="padding:16px;background:#ff3d8b;color:#fff;font:700 14px/18px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="opacity:.75;font-size:11px">DOMAIN SPECIFIC</span><br>Feature Components</div><div style="padding:16px;background:#ff7aae;color:#fff;font:700 14px/18px ui-monospace,SFMono-Regular,Menlo,monospace"><span style="opacity:.75;font-size:11px">TEAM SPECIFIC</span><br>Local Components</div>
<div style="padding:16px 12px 16px 0;border-top:1px solid #ff7aae;color:#f06;font:700 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace">Purpose</div><div style="padding:16px;background:rgba(255,0,102,.14);border-top:1px solid #ff7aae;font-size:13px;line-height:20px">for all <b>reusable, generic frontend resources and utilities</b>, for any service or feature<br><br><b>free of domain-specific logic</b><br><br>extends when <b>identical need</b> for a new generic resource exists across multiple teams, avoiding duplication</div><div style="padding:16px;background:rgba(255,0,102,.09);border-top:1px solid #ff7aae;font-size:13px;line-height:20px">for <b>sharing static resources</b> that solve a domain-specific, recurring problem<br><br><b>addresses domain-specific requirements</b> via cross-team collaboration<br><br>extends when <b>multiple teams</b> have the same domain requirements that is too specialised for the central OTTO Design System</div><div style="padding:16px;background:rgba(255,0,102,.05);border-top:1px solid #ff7aae;font-size:13px;line-height:20px">use only when a genuinely <b>unique feature need cannot be abstracted</b> into a generic or shared resource<br><br>built on <b>reused</b> Design System components, utilities, and resources<br><br>if no reuse is foreseeable and <b>no other team</b> needs it, keep it a local component (avoid if possible)</div><div style="padding:16px 12px 16px 0;border-top:1px solid #ff7aae;color:#f06;font:700 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace">What’s included?</div><div style="padding:16px;background:rgba(255,0,102,.14);border-top:1px solid #ff7aae;font-size:13px;line-height:20px"><ul style='margin:0;padding-left:16px'><li>generic static resources</li><li>frontend utility classes</li><li>siteframes</li><li>design tokens</li><li>icons and logos</li></ul></div><div style="padding:16px;background:rgba(255,0,102,.09);border-top:1px solid #ff7aae;font-size:13px;line-height:20px"><ul style='margin:0;padding-left:16px'><li>domain specific static resources</li><li>feature component tokens</li></ul></div><div style="padding:16px;background:rgba(255,0,102,.05);border-top:1px solid #ff7aae;font-size:13px;line-height:20px"><ul style='margin:0;padding-left:16px'><li>individual per team</li></ul></div><div style="padding:16px 12px 16px 0;border-top:1px solid #ff7aae;color:#f06;font:700 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace">Who’s responsible?</div><div style="padding:16px;background:rgba(255,0,102,.14);border-top:1px solid #ff7aae;font-size:13px;line-height:20px">team assets</div><div style="padding:16px;background:rgba(255,0,102,.09);border-top:1px solid #ff7aae;font-size:13px;line-height:20px">business logic: shared ownership across multiple teams<br><br>infrastructure: team assets</div><div style="padding:16px;background:rgba(255,0,102,.05);border-top:1px solid #ff7aae;font-size:13px;line-height:20px">individual team</div><div style="padding:16px 12px 16px 0;border-top:1px solid #ff7aae;color:#f06;font:700 13px/18px ui-monospace,SFMono-Regular,Menlo,monospace">To be used by</div><div style="padding:16px;background:rgba(255,0,102,.14);border-top:1px solid #ff7aae;font-size:13px;line-height:20px"><span style="display:flex;align-items:center;gap:12px;font-weight:700"><span style="flex:none;width:40px;height:40px;border-radius:50%;background:#f06;display:grid;place-items:center"><oc-icon-v1 type="person-community" style="--color:#fff"></oc-icon-v1></span>all teams</span></div><div style="padding:16px;background:rgba(255,0,102,.09);border-top:1px solid #ff7aae;font-size:13px;line-height:20px"><span style="display:flex;align-items:center;gap:12px;font-weight:700"><span style="flex:none;width:40px;height:40px;border-radius:50%;background:#ff3d8b;display:grid;place-items:center"><oc-icon-v1 type="person-colleagues" style="--color:#fff"></oc-icon-v1></span>several teams</span></div><div style="padding:16px;background:rgba(255,0,102,.05);border-top:1px solid #ff7aae;font-size:13px;line-height:20px"><span style="display:flex;align-items:center;gap:12px;font-weight:700"><span style="flex:none;width:40px;height:40px;border-radius:50%;background:#ff7aae;display:grid;place-items:center"><oc-icon-v1 type="person" style="--color:#fff"></oc-icon-v1></span>one team</span></div>
</div>You have an idea or demand for a component
Does the component have domain-specific requirements?
no
Can an OTTO Design System component be updated to match your requirement?
no
Potential candidate for a new OTTO Design System component.
yes
Potential update for an existing component.
Contact and get support from the design system team
yes
Is there a need for this in at least 2 teams?
no
Create a local component in your team
yes
Create a shared feature component
HTML
<div style="overflow-x:auto"><div style="min-width:600px"><div style="display:grid;color:var(--oc-semantic-color-text-default)"><div style="justify-self:center;max-width:280px;padding:10px 20px;border-radius:32px;text-align:center;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;background:#f06;color:#fff;font-weight:700">You have an idea or demand for a component</div><div style="display:grid;justify-items:center"><span style="width:1.5px;height:20px;background:#f06"></span><span style="display:block;margin:0 auto;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #f06"></span></div><div style="justify-self:center;max-width:280px;padding:10px 20px;border-radius:32px;text-align:center;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;border:1.5px solid #f06;background:var(--oc-semantic-color-background-canvas);color:var(--oc-semantic-color-text-default)">Does the component have domain-specific requirements?</div><div style="display:grid;justify-items:center"><span style="width:1.5px;height:16px;background:#f06"></span></div><div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px"><div style="display:grid;align-content:start;gap:0"><div style="position:relative;height:44px"><span style="position:absolute;top:0;left:50%;right:0;height:1.5px;background:#f06"></span><span style="position:absolute;top:0;bottom:7px;left:50%;width:1.5px;background:#f06"></span><span style="position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:0 6px;background:var(--oc-semantic-color-background-canvas);font:13px/16px ui-monospace,SFMono-Regular,Menlo,monospace">no</span><span style="position:absolute;bottom:0;left:calc(50% - 5px)"><span style="display:block;margin:0 auto;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #f06"></span></span></div><div style="display:grid"><div style="justify-self:center;max-width:280px;padding:10px 20px;border-radius:32px;text-align:center;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;border:1.5px solid #f06;background:var(--oc-semantic-color-background-canvas);color:var(--oc-semantic-color-text-default)">Can an OTTO Design System component be updated to match your requirement?</div><div style="display:grid;justify-items:center"><span style="width:1.5px;height:16px;background:#f06"></span></div><div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px"><div style="display:grid;align-content:start;gap:0"><div style="position:relative;height:44px"><span style="position:absolute;top:0;left:50%;right:0;height:1.5px;background:#f06"></span><span style="position:absolute;top:0;bottom:7px;left:50%;width:1.5px;background:#f06"></span><span style="position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:0 6px;background:var(--oc-semantic-color-background-canvas);font:13px/16px ui-monospace,SFMono-Regular,Menlo,monospace">no</span><span style="position:absolute;bottom:0;left:calc(50% - 5px)"><span style="display:block;margin:0 auto;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #f06"></span></span></div><div style="justify-self:center;max-width:280px;padding:10px 20px;border-radius:32px;text-align:center;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;border:1.5px solid #f06;background:var(--oc-semantic-color-background-canvas);color:var(--oc-semantic-color-text-default)">Potential candidate for a new OTTO Design System component.</div></div><div style="display:grid;align-content:start;gap:0"><div style="position:relative;height:44px"><span style="position:absolute;top:0;left:0;right:50%;height:1.5px;background:#f06"></span><span style="position:absolute;top:0;bottom:7px;left:50%;width:1.5px;background:#f06"></span><span style="position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:0 6px;background:var(--oc-semantic-color-background-canvas);font:13px/16px ui-monospace,SFMono-Regular,Menlo,monospace">yes</span><span style="position:absolute;bottom:0;left:calc(50% - 5px)"><span style="display:block;margin:0 auto;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #f06"></span></span></div><div style="justify-self:center;max-width:280px;padding:10px 20px;border-radius:32px;text-align:center;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;border:1.5px solid #f06;background:var(--oc-semantic-color-background-canvas);color:var(--oc-semantic-color-text-default)">Potential update for an existing component.</div></div></div><div style="position:relative;height:40px"><span style="position:absolute;top:0;height:20px;left:25%;width:1.5px;background:#f06"></span><span style="position:absolute;top:0;height:20px;right:25%;width:1.5px;background:#f06"></span><span style="position:absolute;top:20px;left:25%;right:25%;height:1.5px;background:#f06"></span><span style="position:absolute;top:20px;bottom:7px;left:50%;width:1.5px;background:#f06"></span><span style="position:absolute;bottom:0;left:calc(50% - 5px)"><span style="display:block;margin:0 auto;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #f06"></span></span></div><div style="justify-self:center;max-width:280px;padding:10px 20px;border-radius:32px;text-align:center;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;background:#f06;color:#fff;font-weight:700">Contact and get support from the design system team</div></div></div><div style="display:grid;align-content:start;gap:0"><div style="position:relative;height:44px"><span style="position:absolute;top:0;left:0;right:50%;height:1.5px;background:#f06"></span><span style="position:absolute;top:0;bottom:7px;left:50%;width:1.5px;background:#f06"></span><span style="position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:0 6px;background:var(--oc-semantic-color-background-canvas);font:13px/16px ui-monospace,SFMono-Regular,Menlo,monospace">yes</span><span style="position:absolute;bottom:0;left:calc(50% - 5px)"><span style="display:block;margin:0 auto;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #f06"></span></span></div><div style="display:grid"><div style="justify-self:center;max-width:280px;padding:10px 20px;border-radius:32px;text-align:center;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;border:1.5px solid #f06;background:var(--oc-semantic-color-background-canvas);color:var(--oc-semantic-color-text-default)">Is there a need for this in at least 2 teams?</div><div style="display:grid;justify-items:center"><span style="width:1.5px;height:16px;background:#f06"></span></div><div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px"><div style="display:grid;align-content:start;gap:0"><div style="position:relative;height:44px"><span style="position:absolute;top:0;left:50%;right:0;height:1.5px;background:#f06"></span><span style="position:absolute;top:0;bottom:7px;left:50%;width:1.5px;background:#f06"></span><span style="position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:0 6px;background:var(--oc-semantic-color-background-canvas);font:13px/16px ui-monospace,SFMono-Regular,Menlo,monospace">no</span><span style="position:absolute;bottom:0;left:calc(50% - 5px)"><span style="display:block;margin:0 auto;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #f06"></span></span></div><div style="justify-self:center;max-width:280px;padding:10px 20px;border-radius:32px;text-align:center;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;background:#f06;color:#fff;font-weight:700">Create a local component in your team</div></div><div style="display:grid;align-content:start;gap:0"><div style="position:relative;height:44px"><span style="position:absolute;top:0;left:0;right:50%;height:1.5px;background:#f06"></span><span style="position:absolute;top:0;bottom:7px;left:50%;width:1.5px;background:#f06"></span><span style="position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:0 6px;background:var(--oc-semantic-color-background-canvas);font:13px/16px ui-monospace,SFMono-Regular,Menlo,monospace">yes</span><span style="position:absolute;bottom:0;left:calc(50% - 5px)"><span style="display:block;margin:0 auto;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #f06"></span></span></div><div style="justify-self:center;max-width:280px;padding:10px 20px;border-radius:32px;text-align:center;font:13px/19px ui-monospace,SFMono-Regular,Menlo,monospace;background:#f06;color:#fff;font-weight:700">Create a shared feature component</div></div></div></div></div></div></div></div></div>Communication channels
Design
Here is an overview about all microsoft teams communication channels linked to the design system user experience designer for questions about design aspects.
- OTTO design system: Addressed to all design system UXDs.
- Changelog design system: Updates and news from UXDs of the design system.
- Betrieb design system: For enquiries about new components and other design-related matters.
Development
Here is an overview about all microsoft teams communication channels linked to team assets for questions about technical aspects.
- General channel team assets: Questions relating to execution or reporting of bugs.
- News channel team assets: Updates and news from team assets relating to the design system or breaking changes.
Feature components
There is also a general feature components questions channel, as well as a separate microsoft teams channels for each feature component created.
Further information and communication
It is also possible to purchase rights in the IT shop for a github membership, allowing access to developer issues of team assets. These rights are called "Otto-EC membership".
An additional opportunity to discuss design topics latest developments is the bi-weekly "dojo" meeting, in which all UX designers participate.