OTTODesign System

Rules

Do, Don't and Caution rules from the OTTO Design System

All 401 rule cards from zeroheight, grouped by page. Generated by scripts/zeroheight/build.py; do not edit by hand. Images show the official example.

Accessibility

Page: Accessibility

  • Caution (Target size): Respect dead space around undersized components.
  • Don't (Target size): Place undersized components too close or within other interactive elements.

Image alt texts

Page: Image alt texts

  • Do (Product): alt="Schwarze TOM TAILOR Geldbörse LARY aus Leder, geöffnet mit mehreren Kartenfächern und Münzfach"
  • Don't (Product): alt="Leder Portemonnaie"
  • Do (Topic): alt="Zwei Hände formen ein Herz als Symbol für Liebesbeweis"
  • Don't (Topic): alt="Herz"
  • Do (Outfit): alt="Person trägt schwarzen Adidas Trainingsanzug mit weißen Streifen und rosa Cap, lehnt sich an weißen Hocker"
  • Don't (Outfit): alt="Trainingsanzug"

Color

Page: Color

  • Do (Principles): Use the corporate colors for a different purpose
  • Don't (Principles): Reserve corporate colors for specific cases, e.g. OTTO UP
  • Do (Principles): Use exclusive colors for their intended purpose e.g. error-red for error messages.
  • Don't (Principles): Use exclusive colors for different purpose.
  • Do (Best practices): Use a combination of color, icons and text to express the meaning and give better context.
  • Don't (Best practices): Use color as the only indicator. This does not work well for people with low vision or color blindness.
  • Do (Best practices): Be intentional when using color, as they can convey meanings. The semantic colors are used for example to show an error or a success.
  • Don't (Best practices): Use color without taking their meaning into account.
  • Do (Best practices): Use the components only with their intended color.
  • Don't (Best practices): Use different colors for components.
  • Do (Best practices): Use colors to differentiate between components, for example by using different colors for the primary or secondary variant.
  • Don't (Best practices): Use the same color for components with a different hierarchy.

Design tokens

Page: Design tokens

  • Do (Best practices): Use semantic design tokens for live.
  • Don't (Best practices): Use hardcoded values or base tokens for live.
  • Do (Best practices): Use components with component tokens as intended.
  • Don't (Best practices): Overwrite the component tokens.

Elevation

Page: Elevation

  • Do (Best practices): Use the default style.
  • Don't (Best practices): Change the elevation style.
  • Do (Best practices): Use the default shadow style.
  • Don't (Best practices): Use custom shadows.
  • Do (Best practices): Only use gray for the frame.
  • Don't (Best practices): Change the color of the frame.
  • Do (Best practices): Only place cards or block inside a frame.
  • Caution (Best practices): Place content inside a frame.
  • Do (Best practices): Only use white for the canvas.
  • Caution (Best practices): Use colors other than white for the canvas.
  • Caution (Best practices): To elevate a cut out image use the overlay stack token.

Guidelines

Page: Guidelines

  • Do (Best practices): The same icon should be used for the same functionality in different views to avoid confusion and make it easier to learn
  • Don't (Best practices): Use new icons for functions that already have a suitable icon.
  • Do (Best practices): If the icon should be interactive, use an icon button for accessibility purposes: states, extended hitboxes, etc.
  • Don't (Best practices): Use only the icon for interactive purposes.
  • Do (Best practices): Scale icons proportionally in 8px steps.
  • Don't (Best practices): Distort icons by only scaling the height or width.
  • Do (Best practices): If multiple icons are placed side by side, they should have the same size.
  • Don't (Best practices): Mix different icon sizes when placed side by side.
  • Do (Best practices): Use icons purposefully and only where necessary.
  • Don't (Best practices): Overuse icons.
  • Do (Best practices): Use icons with a label and within the right context.
  • Caution (Best practices): Use unlabeled icons only if it's meaning is very clear from context or if the icons itself is intuitive enough.
  • Do (Best practices): Use identical color for icon and label.
  • Don't (Best practices): Use different colors for icon and label.
  • Do (Best practices): Use decorative and affordance icons as intended. The decorative icon is usually on the left and the affordance icon is on the right.
  • Caution (Best practices): Some components may have the affordance icon placed on the left.
  • Do (Best practices): Use the intended icon if it is not meant to be changable.
  • Don't (Best practices): Change the intended icon if it is not meant to be changable.

Guidelines

Page: Guidelines

  • Do (Design):
  • Don't (Design):
  • Do (Best Practices): Integrate illustrations via the image server path.
  • Don't (Best Practices): Hard-code or host illustration locally in your code.
  • Do (Best Practices): Work with the team to create a new illustration, following the intended process.
  • Don't (Best Practices): Create your own illustrations without seeking permission.

Dialog siteframe

Page: Dialog siteframe

  • Do (Best practices): Only use the dialog siteframe with a focused dialog within.
  • Don't (Best practices): Use the dialog siteframe without a focused dialog within.
  • Do (Best practices): Show the close and back buttons of the focused dialog if you hide the native bars.
  • Don't (Best practices): Hide the close and back buttons of the focused dialog if you hide the native bars.

Page: Logo

  • Do (Best practices): Use logos on backgrounds with sufficient contrast.
  • Do (Best practices): Use the white logos on darker backgrounds.
  • Don't (Best practices): Logos should not be placed on backgrounds with low contrast.
  • Don't (Best practices): Logos should not be placed within the bleed area.
  • Don't (Best practices): Logo should not be distorted or bent.
  • Caution (Best practices): Logos should not be integrated in headlines or continuous text.

Naming

Page: Naming

  • Do (Best practices): Name variants semantically such as primary or secondary.
  • Don't (Best practices): Name variants descriptive such as shiny, big or red.

Typography

Page: Typography

  • Do (Best practices): Use copy100 or headline100 for most use cases. Especially use copy100 for longer text. Smaller styles are acceptable for less important information but should be used sparingly. This ensures that the content remains accessible to all our customers.
  • Don't (Best practices): Don't use styles below copy100 or headline50 for body text and components, unless the text is short and secondary.
  • Do (Best practices): Use headline in the correct order to provide structure and support the user.
  • Don't (Best practices): Don't use headlines in an incorrect order, as this will confuse screen readers. For example, starting a section with a headline200 or headline100, and placing a headline300 further down in the hierarchy.
  • Do (Best practices): Adhere to our design tokens and ensure color combinations maintain a 4.5:1 contrast ratio between text and background.
  • Don't (Best practices): Don't create text that fails to meet the 4.5:1 contrast ratio when tested with Figma accessibility plugins.
  • Do (Best practices): Left align typography.
  • Caution (Best practices): Center or right align typography only after careful consideration because it is not as readable and as structured as aligning to the left.
  • Caution (Best practices): If necessary, the line height for short texts can be overridden with other line height tokens.
  • Do (Best practices): Use the intended text styles especially for continuous text.

Functional communication

Page: Functional communication

  • Do (Best practices): State the problem clearly and precisely.
  • Don't (Best practices): Use irony or humor.
  • Do (Best practices): Keep the tone calm and serious.
  • Don't (Best practices): Use emotional or dramatic language.
  • Do (Best practices): Do focus on how the user can resolve the issue.
  • Don't (Best practices): Blame the user.
  • Do (Best practices): Guide the user to the next step.
  • Don't (Best practices): Leave users without a clear way forward.
  • Do (Best practices): Clearly state the risk.
  • Don't (Best practices): Exaggerate or dramatize the risk.
  • Do (Best practices): Explain the possible consequences.
  • Don't (Best practices): Downplay potential consequences.
  • Do (Best practices): Keep the tone objective and matter-of-fact
  • Don't (Best practices): Use vague or ambiguous wording.
  • Do (Best practices): Help user understand the situation.
  • Don't (Best practices): Create unnecessary urgency.
  • Do (Best practices): Confirm what was successfully completed.
  • Don't (Best practices): Over-celebrate or sound euphoric.
  • Do (Best practices): Keep the message short and clear.
  • Don't (Best practices): Add unnecessary details.
  • Do (Best practices): Use a positive and appreciative tone.
  • Don't (Best practices): Use overly emotional language.
  • Do (Best practices): Provide orientation on what happens next (if relevant).
  • Don't (Best practices): Leave users without clarity on the outcome.
  • Do (Best practices): Support, optimize, and help in the current context.
  • Don't (Best practices): Make the hint feel required or blocking.
  • Do (Best practices): Keep the tone friendly, light, and approachable.
  • Don't (Best practices): Sound instructive or commanding.
  • Do (Best practices): Make it clear that the hint is optional.
  • Don't (Best practices): Interrupt or distract from the main flow.
  • Do (Best practices): Use an inviting, slightly conversational tone.
  • Don't (Best practices): Overload with information.
  • Do (Best practices): Provide clear and neutral information.
  • Don't (Best practices): Add unnecessary evaluation or opinion.
  • Do (Best practices): Keep the tone factual and unbiased.
  • Don't (Best practices): Sound instructive or commanding.
  • Do (Best practices): Use intended variants of components and color for functional communication.
  • Don't (Best practices): Design own functional communication with custom colors.
  • Do (Best practices): Place functional messages close to their context.
  • Don't (Best practices): Separate functional messages from their context.
  • Do (Best practices): Show only relevant functional messages.
  • Don't (Best practices): Overload users with unnecessary or low-value functional messages.

Accordion

Page: Accordion

  • Do (Best practices): Use a short title to describe the content.
  • Don't (Best practices): Use a long and overdescriptive title to describe the content.
  • Do (Best practices): Use the Accordion to provide additional Content like FAQs.
  • Don't (Best practices): Use the Accordion for relevant content which for example includes primary Buttons.
  • Don't (Best practices): Interlock expanded states of different accordions to each other. This imposes paternalism on users.

Action signifier

Page: Action signifier

  • Do (Best practices): Place the action signifier inside an interactive component.
  • Don't (Best practices): Place the action signifier alone.
  • Do (Content guidelines): Use a short label to describe the action.
  • Don't (Content guidelines): Use a long and overdescriptive label to describe the action.

Page: Banner

  • Do (Best practice): Use banners sparingly as they are very prominent and may disrupt the users journey.
  • Don't (Best practice): Use banners multiple times on one page for uncritical information.
  • Do (Best practice): Use closable banners for uncritical information.
  • Don't (Best practice): Use closable banners for critical, important information.
  • Do (Content guidelines): 1. Use concise, scannable language that communicates the problem.

  1. Indicate the problem directly and offer solutions to fix it (esp. for error or warning)

  2. Action links should be clear and specific, indicating what will happen next.

  3. Write in sentence case and use appropriate punctuation.

  4. Avoid repeating in the headline in the text.

Block

Page: Block

  • Do (Best practices): Use static block.
  • Don't (Best practices): Make block interactive.
  • Do (Best practices): Use blocks with default background color.
  • Caution (Best practices): Overuse blocks with other background colors than canvas or frame.
  • Do (Best practices): Place static content inside a block.
  • Don't (Best practices): Place static content outside of blocks.
  • Do (Best practices): Use stacked block inside a block.
  • Don't (Best practices): Use stacked block outside of a block.
  • Do (Best practices): Use dividers within or spacing between stacked blocks to structure content, if needed.
  • Don't (Best practices): Place stacked blocks directly adjacent to other stacked blocks.

Button

Page: Button

  • Do (Best practices): Place one primary button per view.
  • Don't (Best practices): Place more than one primary button per view.
  • Do (Best practices): Show the full text on buttons. If necessary, they should be stacked when they cannot be placed side by side.
  • Don't (Best practices): Truncate the button text.
  • Do (Best practices): Use few buttons for only the relevant actions.
  • Don't (Best practices): Don't clutter your UI with too many buttons.
  • Do (Best practices): Use the colors assigned by the design system.
  • Don't (Best practices): Don't use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible.
  • Do (Best practices): Place buttons inside a block.
  • Caution (Best practices): Buttons can be used as sticky elements with a shadow300.
  • Do (Best practices): Only use the secondary-over-color variant on frame, stacked or colored background.
  • Don't (Best practices): Use the secondary-over-color button on a white or canvas background.
  • Do (Best practices): Change the label to a positive outcome when using the success button.
  • Don't (Best practices): Use the same label for both the positive action and the positive outcome.
  • Caution (Best practices): Make sure to use the success button sparingly and only to display specific positive outcomes, such as "Marke folgen".
  • Do (Best practices): Use decorative icons for the left icon and affordance icons for the right icon.
  • Don't (Best practices): Use decorative icons for the right icon and affordance icons for the left icon.
  • Do (Content guidelines): 1. Use simple, clear language.

  1. Keep the label concise, under 4 words and fewer than 20 characters, including spaces.

  2. Capitalize the first letter of the first word and proper nouns in the button label text.

  3. Use a verb that describes the action, such as "Zum Warenkorb hinzufügen".

  4. Contextualize the action the user is taking.

  5. Maintain consistent wording for the same button across different views.

  6. Avoid punctuation marks such as periods or exclamation points.

  • Don't (Content guidelines): 1. Use ambiguous wording or overly creative content, as they may not be accessible.

  1. Include polite expressions like "please" and "thank you."

  2. Use non-specific phrases like "learn more" or "click here."

  3. Use emojis or exclamation points, as they aren’t appropriate for the functional nature of buttons.

  4. Write labels as nouns or adjectives, which can be unclear and disorienting.

Card

Page: Card

  • Do (Border radiuses): If you are using a card 100 with a padding of 4px your image should have a border radius of 12 px.

16px (card border radius) - 4 px (card padding) = 12px (content border radius)

  • Do (Border radiuses): If you are using a card 100 with a padding of 8px your image should have a border radius of 8 px.

16px (card border radius) - 8 px (card padding) = 8px (content border radius)

  • Don't (Border radiuses): Use border radiuses that are too sharp or too blunt for content.
  • Caution (Border radiuses): If you use a card 100 with padding set to 16 px, the result would be 0 px. However, due to the interactive element rule, the minimum border radius is 4 px. You may still use slightly rounded corners for the content in this case.

16px (card border radius) - 16 px (card padding) = 0px (content border radius)

  • Do (Best Practices): Use an interactive card with or without action siginifier.
  • Don't (Best Practices): Use a static card without interactive components.
  • Do (Best Practices): Only use cards with a filled background.
  • Don't (Best Practices): Use cards with an Outline.
  • Do (Best Practices): Use same card size inside a feature.
  • Don't (Best Practices): Mix different card dimensions inside a feature.
  • Do (Best Practices): Use the provided semantic tokens "color/background-card" when using the over-color variant.
  • Don't (Best Practices): Use custom colors.
  • Caution (Best Practices): Avoid placing over-color cards on colored blocks or colored backgrounds.
  • Caution (Best Practices): Avoid placing content which belongs to the card outside of the card.
  • Do (Best Practices): Use cards with a single link target.
  • Caution (Best Practices): Use cards with overlapping link targets very cautious, expecially if the targets are rather small.
  • Caution (Best Practices): When using a card as a interactive cluster, try to clearly separate link targets

Page: Carousel

  • Do (Best practices): Place within a layout with full-bleed.
  • Don't (Best practices): Place with additional outer spacing.
  • Do (Best practices): Use with at least one indicator, like the scroll buttons or pagination dots.
  • Don't (Best practices): Use no indicator.

Chat bubble

Page: Chat bubble

  • Caution (Best practices): Change the background and text colors according to our accessibility guidelines.

Chip

Page: Chip

  • Do (Best practices): Use in groups of more than 3.
  • Don't (Best practices): Use only one chip.
  • Do (Best practices): Only use the same chip size in the same feature.
  • Don't (Best practices): Mix chips sizes in the same feature.
  • Do (Best practices): Make the width of the chip fit its content (fit-content).
  • Caution (Best practices): Make the width of the chip larger than its content (e.g. fill-parent). Make width of the chip smaller than its content so that it gets truncated.
  • Do (Best practices): Only use removable or non removable chips within the same feature.
  • Don't (Best practices): Mix removable chip with non removable chips.
  • Do (Best practices): Use Tabs for navigation.
  • Caution (Best practices): Use Chips for navigating.
  • Do (Content guidelines): 1. Keep the label of the chip shorter than 3 words.
  1. Use adjectives or nouns for the label.
  • Don't (Content guidelines): 1. Use long sentences with 3 or more words, including puncuation.
  1. Use verbs for the label.

Cinema

Page: Cinema

  • Do (Best practices): Place within a layout with full-bleed.
  • Don't (Best practices): Place with additional outer spacing.
  • Do (Best practices): Use default left and right spacings.
  • Don't (Best practices): Use custom left and right spacings.
  • Do (Best practices): Place a cinema on canvas or frame.
  • Don't (Best practices): Place cinemas within other cinemas - doubled horizontal scrolling does not work.

Divider

Page: Divider

  • Do (Best practices): Use the divider to separate content.
  • Don't (Best practices): Use the divider to highlight content, such as text.
  • Do (Best practices): Leave out the first and last divider in a list.
  • Don't (Best practices): Use the divider at the start and end of a list.
  • Caution (Best practices): Use full-width dividers sparingly to maintain enclosure.

Expander

Page: Expander

  • Do (Best practices): Use the expander to provide additional content like more product details.
  • Don't (Best practices): Use the expander to truncate relevant content, for example primary buttons.
  • Do (Best practices): Show the beginning of the truncated content.
  • Don't (Best practices): Hide the truncated content completely or place it before the truncated content.
  • Do (Best practices): Use on canvas background.
  • Don't (Best practices): Use on a background other than canvas, as the fade uses the canvas color to hide content.
  • Caution (Best practices): Be cautious when using use text expander for rows. The layout may be odd if the rows use icons on the right. For rows without icons this solution may be valid.
  • Don't (Best practices): Use row expander for text content. The affordance icon may easily be overseen.
  • Don't (Best practices): Use expander without outer spacing. The usual grid spacing of 16px shall be applied.

Focused dialog

Page: Focused dialog

  • Do (Best practices): Use back buttons for consecutive focused dialogs.
  • Caution (Best practices): Back buttons are not necessary on the first focused dialog in a process.
  • Do (Best practices): Always show the close button.
  • Don't (Best practices): Hide the close button.
  • Don't (Best practices): Call it focussed dialogue 🇬🇧

Auth field

Page: Auth field

  • Do (Best practices): Only place related auth fields and text fields horizontally next to each other.
  • Don't (Best practices): Place unrelated auth fields and text Fields horizontally next to each other.
  • Do (Content guidelines): Use short, precise labels to describe the required input.
  • Don't (Content guidelines): Use overly descriptive labels to describe the required input.
  • Do (Content guidelines): Provide clear an useful error to help the user fix the issue.
  • Don't (Content guidelines): Use generic errors, such as "Die Eingabe ist fehlerhaft".

Checkbox

Page: Checkbox

  • Do (Checkbox vs. switch):
  • Don't (Checkbox vs. switch):
  • Caution (Best Practices): Avoid using horizontal Checkbox lists. Even if they are placed far enough from each other, the associated label for a checkbox may be mixed up with a different one by users.
  • Caution (Best Practices): Only nest checkboxes if you are using the indeterminate state.
  • Do (Best Practices): Use the actual label of the checkbox. This is the only way to ensure consistent behavior and layout.
  • Don't (Best Practices): Use custom text as a label. The spacing may be off, and proper user interaction (i.e., a hitbox spanning the entire element and interactive states) cannot be ensured.
  • Do (Content Guidelines): Use short, precise labels to describe the options.
  • Don't (Content Guidelines): Use overly descriptive labels to describe the options.

Page: Dropdown

  • Do (Best practices): Use dropdowns when there are five or more options.
  • Caution (Best practices): If there are less options consider using radio buttons instead of a dropdown.
  • Do (Content guidelines): Use short, precise labels to describe the selections.
  • Don't (Content guidelines): Use overly descriptive labels to describe the selections.

Form group

Page: Form group

  • Do (Best practices): Combine related components within the form ground. You can also combine different but related components within the form group.
  • Don't (Best practices): Use related components individually which should be combined in a form group.
  • Do (Best practices): Divide a form into different form groups or components depending on their content.
  • Don't (Best practices): Combine components of a complete form into one form group.
  • Do (Best practices): Only use components that belong to the form cluster and are intended for use within the form group.
  • Don't (Best practices): Use components which are not of the form cluster and not intended for use within the form group.

Radio button

Page: Radio button

  • Caution (Best Practices): Avoid using horizontal Radio Button lists
  • Don't (Best Practices): Nest Radio Buttons
  • Do (Best Practices): Use Radio Buttons when there are five or fewer options.
  • Caution (Best Practices): If there a more than 5 options consider using a drop-down menu instead of radio buttons.
  • Do (Best Practices): Use the actual label of the radio button. This is the only way to ensure consistent behavior and layout.
  • Don't (Best Practices): Use text as a label. The spacing may be off, and proper user interaction (i.e., a hitbox spanning the entire element and interactive states) cannot be ensured.
  • Do (Content Guidelines): Use short, precise labels to describe the options.
  • Don't (Content Guidelines): Use overly descriptive labels to describe the options.

Text field / text area

Page: Text field / text area

  • Do (Best practices): Use a text field for short input e.g. Name or Mail.
  • Don't (Best practices): Use a text field for longer inputs like review or comments. Instead, use a text area.
  • Do (Best practices): Use a text field for custom inputs.
  • Don't (Best practices): Use a text field for predictable information. Instead, use a dropdown with suggestions.
  • Do (Best practices): Only place related text field on the same line.
  • Don't (Best practices): Place an unrelated text field on the same line.
  • Do (Best practices): Always ensure the text field has a visible label to provide context and help the user filling in information.
  • Caution (Best practices): When using a text field without a label, make sure the user has enough context to fill out the text field. Also ensure that there is no accessibility and usability issue.
  • Do (Best practices): Use a search bar for search requests.
  • Don't (Best practices): Use a text field for search requests.
  • Do (Content Guidelines): Only use short and precise wordings for the label.
  • Don't (Content Guidelines): Use long descriptions or sentences for the label.
  • Do (Content Guidelines): Put further, longer information which help the user filling out the text field inside the hint.
  • Don't (Content Guidelines): Put short information like a title inside the hint. It should only be placed inside the label.
  • Do (Content Guidelines): Provide clear and useful error that help the user fix the issue.
  • Don't (Content Guidelines): Use generic errors, such as "There is an error".

Icon button

Page: Icon button

  • Do (Best practices): Only use the same icon button sizes in the same feature.
  • Don't (Best practices): Mix icon button sizes inside the same feature.
  • Do (Best practices): Leave at least 8px between icon buttons to avoid overlapping hitboxes.
  • Caution (Best practices): Remember that the hitbox of the Icon Button 25 and 50 is larger than the Icon Button itself.
  • Do (Best practices): Use icons that clearly represent the action.
  • Don't (Best practices): Use icons which do not represent the action.

Interactive overlay

Page: Interactive overlay

  • Do (Best practices): Use the interactive overlay to add states to interactive elements that do not have their own states, for example header icons.
  • Don't (Best practices): Use the interactive overlay for static elements or elements that already have states.

Page: Link

  • Do (Best practices): Use links thoughtfully and as few as possible.
  • Don't (Best practices): Overwhelm users with too many distracting links, that might interrupt their journey.
  • Do (Best practices): Use inline Link when surrounded by continuous text.
  • Caution (Best practices): Avoid using the secondary inline Link when surrounded by continuous text because it is less visible.
  • Do (Best practices): Use underlined link on color.
  • Don't (Best practices): Use primary or secondary link on color.
  • Do (Best practices): Use links with one line.
  • Caution (Best practices): Avoid line breaks within the same link. Otherwise it can be perceived as two separate links.
  • Do (Best practices): Use bold text to highlight information.
  • Don't (Best practices): Underline text that is not a link to highlight information.
  • Do (Best practices): Use the same size for link and text.
  • Don't (Best practices): Use different size for link and text.
  • Do (Best practices): Use same link styles in the same context.
  • Don't (Best practices): Mix different link styles in the same context.
  • Do (Content guidelines): Use specific labels that clearly convey the link's function or destination.
  • Don't (Content guidelines): Use generic or vague labels, such as "Hier klicken", "Jetzt entdecken" or "Mehr erfahren".
  • Do (Content guidelines): Keep link labels short concise.
  • Don't (Content guidelines): Use lengthy sentences with punctuation marks for the label.
  • Caution (Accessibility): Use enough spacing spacing for link 50 and 75 to maintain the a dead space of 24×24px.
  • Don't (Accessibility): Use links within other interactive elements like cards.

Media object card

Page: Media object card

  • Do (Best practices): Use the default colors or the provided semantic tokens "color/background-card" when using the inverted variant of the media object card.
  • Don't (Best practices): Use a custom colored background for the media object card.
  • Do (Best practices): Only use the same sizes of the media object card within a feature.
  • Don't (Best practices): Mix different sizes of the media object card with a feature.
  • Caution (Best practices): Avoid placing inverted media object cards on colored blocks or colored backgrounds.

Paper card

Page: Paper card

  • Do (Best practices): Add your content to the body and place the main actions within the footer.
  • Don't (Best practices): Place the main actions within the body and use content inside the footer.

Popover

Page: Popover

  • Do (Best practices): Use popover for context menus.
  • Don't (Best practices): Use popover for complex multi-step flows.

Progress bar

Page: Progress bar

  • Do (Best Practices): Place the progress bar with context.
  • Don't (Best Practices): Place the progress bar without context.
  • Do (Best Practices): Use the progress bar for tasks.
  • Don't (Best Practices): Use the progress bar for loading states, use the skeleton or spinner instead.
  • Do (Best Practices): Use the functional variants according to their semantic meaning.
  • Don't (Best Practices): Use the functional variants for decorative purposes or against their intended semantic meaning.
  • Caution (Best Practices): Avoid adding too many steps to the stepped progress bar.

Promo card

Page: Promo card

  • Do (Best Practices): Use promo card either with header or footer.
  • Don't (Best Practices): Use both header and footer.
  • Do (Best Practices): Use promo card which is fully interactive.
  • Don't (Best Practices): Use promo card which is only partially interactive.
  • Do (Best Practices): Use promo card only with one target.
  • Don't (Best Practices): Use multiple targets for promo card.
  • Do (Best Practices): Use the provided semantic tokens "color/background-strong" when using the inverted variant.
  • Don't (Best Practices): Use custom color.
  • Caution (Best Practices): Avoid placing inverted promo cards on colored Blocks. or colored backgrounds

Row

Page: Row

  • Do (Best practices): Use the same configuration for each row when placing them in a list of rows.
  • Don't (Best practices): Mix the configurations for each Row when placing them in a list of rows.
  • Do (Best practices): Leave sufficient spacing above the first row and below the last. Hide the divider for the first row.
  • Don't (Best practices): Use no spacing below the last row. Show the divider for the first row.
  • Do (Content guidelines): Only use related content within a row.
  • Don't (Content guidelines): Combine content from different topics within a single row.

Search field

Page: Search field

  • Do (Best Practices): Use the search field only for searches. Use a text field for other types of input.
  • Don't (Best Practices): Use a text field for searches.

Selection tile

Page: Selection tile

  • Do (Best practices): Use selection signifier to emphasize the interactivity and variant of selection tiles. They represent the selection tile's state.
  • Don't (Best practices): Use checkboxes or radio buttons within selection tiles. This creates confusion about the actual state and leads to errors.
  • Caution (Best practices): You can use other interactive components, such as links, inside selection tiles, but be careful of the overlaying touch areas.

Sheet

Page: Sheet

  • Do (Best practices): Use left or right sheet, if it is practical for the user to still see the context he came from.
  • Do (Best practices): Use the center sheet if you explicitly need horizontal space.
  • Don't (Best practices): Adjust the sheets width.
  • Do (Best practices): Use "Zurück" and a primary action if processes are represented using multiple sheets.
  • Don't (Best practices): Stack Sheets on top of each other.
  • Do (Best practices): If primary actions are offered for users to fulfill a task, a secondary action may also be offered to revert from the task.
  • Don't (Best practices): Use closing actions like "Schließen" in the action bar by itself. Rely on the different close interactions provided by the sheet instead.
  • Caution (Best practices): Hide the close button. It is still possible to close the sheet using other methods like browser-back or tapping the scrim.
  • Don't (Best practices): Use icons, that could be mistaken as a function.

Skeleton

Page: Skeleton

  • Do (Best practices): Use the possible configuration of the skeleton.
  • Don't (Best practices): Turn other elements like icons into skeletons or make your own skeletons.
  • Do (Best practices): Use simplified skeleton layouts.
  • Don't (Best practices): Display content detail 1:1 with a skeleton.
  • Do (Best practices): Use skeletons for common content like images, text, buttons etc.
  • Don't (Best practices): Use skeletons for tooltips, snackbars or navigation etc.
  • Do (Best practices): Use skeletons by itself.
  • Don't (Best practices): Combine skeleton with a spinner.
  • Do (Best practices): Use the same shapes, dimensions, and border radiuses as those used in the content.
  • Don't (Best practices): Do not use shapes, dimensions or border radiuses that differ from those used in the content.

Page: Skip link

  • Do (Best practices): Provide a header skip link for every page with a main siteframe with all applicable entries of „Zur Hauptnavigation“, „Zur Seitennavigation“, „Zu den Filtern“ and „Zum Inhalt“.
  • Don't (Best practices): Don’t provide header skip links on pages using a dialog siteframe. They do not require skip links because they do not contain bypassable structural regions.
  • Don't (Best practices): Don’t place multiple skip‑link containers after each other. A skip link should never directly lead to another skip link.
  • Do (Best practices): Place several header skip links inside one shared skip‑link container. Users should encounter all consecutive skip link options in a single focus stop, not scattered across separate containers.
  • Do (Best practices): Use in‑page skip links where they are practically helpful. Apply them in sections that are long or repetitive.
  • Don't (Best practices): Don’t overuse in‑page skip links. Only insert them where they add real value; too many skip options create noise rather than accessibility.

Snackbar

Page: Snackbar

  • Do (Best practices): Show only one snackbar at a time. Replace the current snackbar when a new one appears.
  • Don't (Best practices): Allow multiple snackbars to appear at once or stack snackbars above each other.
  • Do (Best practices): If a "Rückgänig" or "Wiederholen" action is triggered another snackbar should follow to confirm the action.
  • Caution (Best practices): If you already use a sticky component in your view be aware that the snackbar might overlap with it.
  • Do (Content guidelines): Keep the label to one line, if possible.
  • Don't (Content guidelines): Use stylized text or inline links.
  • Do (Content guidelines): Use a label that provides feedback on a user's action.
  • Don't (Content guidelines): Use a label that has advertising purposes e.g. sale or discounts.
  • Don't (Content guidelines): Use an action with the label "Verwerfen" or "Schließen", as the snackbar features it own close affordance.
  • Don't (Content guidelines): Use a label that contains critical system messages.

Spinner

Page: Spinner

  • Do (Best practices): Use only one standalone spinner at a time.
  • Don't (Best practices): Use multiple standalone spinners at the same time.

Switch

Page: Switch

  • Do (Switch vs. checkbox):
  • Don't (Switch vs. checkbox):
  • Do (Best practices): Use Switches for on / off actions.
  • Don't (Best practices): Use Switches for toggling between opposite options.
  • Don't (Best practices): Nest switches.
  • Do (Content guidelines): Use short, precise labels to describe the options.
  • Don't (Content guidelines): Use overly descriptive labels.
  • Don't (Content guidelines): Use on or off for the label.
  • Do (Content guidelines): Use Sentence case (Großschreibung) for labels.

Tab bar

Page: Tab bar

  • Do (Tab bar vs. chips):
  • Do (Tab bar vs. chips):
  • Do (Content guidelines): Keep the labels short so they do not get abbreviated on mobile.
  • Do (Content guidelines): Use the same type of words for all tab items (e.g. all nouns).

Tag

Page: Tag

  • Do (Best practices): Use static tags by default. Only use interactive tags when adding an info icon for legal reasons.
  • Don't (Best practices): Make all tags interactive.
  • Do (Best practices): Use the colors according to the tag variants.
  • Don't (Best practices): Use different colors than those in the tag variants.
  • Do (Best practices): Use tags to highlight content. Use them sparingly.
  • Don't (Best practices): Clutter your layout with tags.
  • Do (Content guidelines):
  • Don't (Content guidelines):
  • Do (Content guidelines): Do use concise labels on a tag, ideally 2 words or less.
  • Don't (Content guidelines): Use overly verbose labels.

Toggletip

Page: Toggletip

  • Do (Best practices): Use short information describing the parent element.
  • Don't (Best practices): Describe other elements or provide unnecessary information.

Tooltip

Page: Tooltip

  • Do (Content Guidelines): Use short information describing the parent element.
  • Don't (Content Guidelines): Describe other elements or provide unnecessary information.