[
 {
  "type": "caution",
  "text": "Respect dead space around undersized components.",
  "section": "Target size",
  "page": "Accessibility",
  "file": "design-system/foundations/accessibility/README.md",
  "image": "design-system/_images/accessibility/002-caution-respect-dead-space-around-undersized-com.png"
 },
 {
  "type": "dont",
  "text": "Place undersized components too close or within other interactive elements.",
  "section": "Target size",
  "page": "Accessibility",
  "file": "design-system/foundations/accessibility/README.md",
  "image": "design-system/_images/accessibility/003-dont-place-undersized-components-too-close-or.png"
 },
 {
  "type": "do",
  "text": "alt=\"Schwarze TOM TAILOR Geldbörse LARY aus Leder, geöffnet mit mehreren Kartenfächern und Münzfach\"",
  "section": "Product",
  "page": "Image alt texts",
  "file": "design-system/foundations/accessibility/image-alt-texts.md",
  "image": "design-system/_images/accessibility-image-alt-texts/001-do-alt-schwarze-tom-tailor-geldb-rse-lary.png"
 },
 {
  "type": "dont",
  "text": "alt=\"Leder Portemonnaie\"",
  "section": "Product",
  "page": "Image alt texts",
  "file": "design-system/foundations/accessibility/image-alt-texts.md",
  "image": "design-system/_images/accessibility-image-alt-texts/002-dont-alt-leder-portemonnaie.png"
 },
 {
  "type": "do",
  "text": "alt=\"Zwei Hände formen ein Herz als Symbol für Liebesbeweis\"",
  "section": "Topic",
  "page": "Image alt texts",
  "file": "design-system/foundations/accessibility/image-alt-texts.md",
  "image": "design-system/_images/accessibility-image-alt-texts/003-do-alt-zwei-h-nde-formen-ein-herz-als-symb.png"
 },
 {
  "type": "dont",
  "text": "alt=\"Herz\"",
  "section": "Topic",
  "page": "Image alt texts",
  "file": "design-system/foundations/accessibility/image-alt-texts.md",
  "image": "design-system/_images/accessibility-image-alt-texts/004-dont-alt-herz.png"
 },
 {
  "type": "do",
  "text": "alt=\"Person trägt schwarzen Adidas Trainingsanzug mit weißen Streifen und rosa Cap, lehnt sich an weißen Hocker\"",
  "section": "Outfit",
  "page": "Image alt texts",
  "file": "design-system/foundations/accessibility/image-alt-texts.md",
  "image": "design-system/_images/accessibility-image-alt-texts/005-do-alt-person-tr-gt-schwarzen-adidas-train.png"
 },
 {
  "type": "dont",
  "text": "alt=\"Trainingsanzug\"",
  "section": "Outfit",
  "page": "Image alt texts",
  "file": "design-system/foundations/accessibility/image-alt-texts.md",
  "image": "design-system/_images/accessibility-image-alt-texts/006-dont-alt-trainingsanzug.png"
 },
 {
  "type": "do",
  "text": "Use the corporate colors for a different purpose",
  "section": "Principles",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Reserve corporate colors for specific cases, e.g. OTTO UP",
  "section": "Principles",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use exclusive colors for their intended purpose e.g. error-red for error messages.",
  "section": "Principles",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use exclusive colors for different purpose.",
  "section": "Principles",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use a combination of color, icons and text to express the meaning and give better context.",
  "section": "Best practices",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": "design-system/_images/color/005-do-use-a-combination-of-color-icons-and-te.png"
 },
 {
  "type": "dont",
  "text": "Use color as the only indicator. This does not work well for people with low vision or color blindness.",
  "section": "Best practices",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": "design-system/_images/color/006-dont-use-color-as-the-only-indicator-this-do.png"
 },
 {
  "type": "do",
  "text": "Be intentional when using color, as they can convey meanings. The semantic colors are used for example to show an error or a success.",
  "section": "Best practices",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": "design-system/_images/color/007-do-be-intentional-when-using-color-as-they.png"
 },
 {
  "type": "dont",
  "text": "Use color without taking their meaning into account.",
  "section": "Best practices",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": "design-system/_images/color/008-dont-use-color-without-taking-their-meaning-i.png"
 },
 {
  "type": "do",
  "text": "Use the components only with their intended color.",
  "section": "Best practices",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": "design-system/_images/color/009-do-use-the-components-only-with-their-inten.png"
 },
 {
  "type": "dont",
  "text": "Use different colors for components.",
  "section": "Best practices",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": "design-system/_images/color/010-dont-use-different-colors-for-components.png"
 },
 {
  "type": "do",
  "text": "Use colors to differentiate between components, for example by using different colors for the primary or secondary variant.",
  "section": "Best practices",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": "design-system/_images/color/011-do-use-colors-to-differentiate-between-comp.png"
 },
 {
  "type": "dont",
  "text": "Use the same color for components with a different hierarchy.",
  "section": "Best practices",
  "page": "Color",
  "file": "design-system/foundations/color.md",
  "image": "design-system/_images/color/012-dont-use-the-same-color-for-components-with-a.png"
 },
 {
  "type": "do",
  "text": "Use semantic design tokens for live.",
  "section": "Best practices",
  "page": "Design tokens",
  "file": "design-system/foundations/design-tokens.md",
  "image": "design-system/_images/design-tokens/007-do-use-semantic-design-tokens-for-live.png"
 },
 {
  "type": "dont",
  "text": "Use hardcoded values or base tokens for live.",
  "section": "Best practices",
  "page": "Design tokens",
  "file": "design-system/foundations/design-tokens.md",
  "image": "design-system/_images/design-tokens/008-dont-use-hardcoded-values-or-base-tokens-for.png"
 },
 {
  "type": "do",
  "text": "Use components with component tokens as intended.",
  "section": "Best practices",
  "page": "Design tokens",
  "file": "design-system/foundations/design-tokens.md",
  "image": "design-system/_images/design-tokens/009-do-use-components-with-component-tokens-as.png"
 },
 {
  "type": "dont",
  "text": "Overwrite the component tokens.",
  "section": "Best practices",
  "page": "Design tokens",
  "file": "design-system/foundations/design-tokens.md",
  "image": "design-system/_images/design-tokens/010-dont-overwrite-the-component-tokens.png"
 },
 {
  "type": "do",
  "text": "Use the default style.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/005-do-use-the-default-style.png"
 },
 {
  "type": "dont",
  "text": "Change the elevation style.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/006-dont-change-the-elevation-style.png"
 },
 {
  "type": "do",
  "text": "Use the default shadow style.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/007-do-use-the-default-shadow-style.png"
 },
 {
  "type": "dont",
  "text": "Use custom shadows.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/008-dont-use-custom-shadows.png"
 },
 {
  "type": "do",
  "text": "Only use gray for the frame.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/009-do-only-use-gray-for-the-frame.png"
 },
 {
  "type": "dont",
  "text": "Change the color of the frame.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/010-dont-change-the-color-of-the-frame.png"
 },
 {
  "type": "do",
  "text": "Only place cards or block inside a frame.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/011-do-only-place-cards-or-block-inside-a-frame.png"
 },
 {
  "type": "caution",
  "text": "Place content inside a frame.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/012-caution-place-content-inside-a-frame.png"
 },
 {
  "type": "do",
  "text": "Only use white for the canvas.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/013-do-only-use-white-for-the-canvas.png"
 },
 {
  "type": "caution",
  "text": "Use colors other than white for the canvas.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/014-caution-use-colors-other-than-white-for-the-canv.png"
 },
 {
  "type": "caution",
  "text": "To elevate  a cut out image use the overlay stack token.",
  "section": "Best practices",
  "page": "Elevation",
  "file": "design-system/foundations/elevation.md",
  "image": "design-system/_images/elevation/015-caution-to-elevate-a-cut-out-image-use-the-over.png"
 },
 {
  "type": "do",
  "text": "The same icon should be used for the same functionality in different views to avoid confusion and make it easier to learn",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/009-do-the-same-icon-should-be-used-for-the-sam.png"
 },
 {
  "type": "dont",
  "text": "Use new icons for functions that already have a suitable icon.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/010-dont-use-new-icons-for-functions-that-already.png"
 },
 {
  "type": "do",
  "text": "If the icon should be interactive, use an icon button for accessibility purposes: states, extended hitboxes, etc.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/011-do-if-the-icon-should-be-interactive-use-a.png"
 },
 {
  "type": "dont",
  "text": "Use only the icon for interactive purposes.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/012-dont-use-only-the-icon-for-interactive-purpos.png"
 },
 {
  "type": "do",
  "text": "Scale icons proportionally in 8px steps.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/013-do-scale-icons-proportionally-in-8px-steps.png"
 },
 {
  "type": "dont",
  "text": "Distort icons by only scaling the height or width.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/014-dont-distort-icons-by-only-scaling-the-height.png"
 },
 {
  "type": "do",
  "text": "If multiple icons are placed side by side, they should have the same size.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/015-do-if-multiple-icons-are-placed-side-by-sid.png"
 },
 {
  "type": "dont",
  "text": "Mix different icon sizes when placed side by side.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/016-dont-mix-different-icon-sizes-when-placed-sid.png"
 },
 {
  "type": "do",
  "text": "Use icons purposefully and only where necessary.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/017-do-use-icons-purposefully-and-only-where-ne.png"
 },
 {
  "type": "dont",
  "text": "Overuse icons.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/018-dont-overuse-icons.png"
 },
 {
  "type": "do",
  "text": "Use icons with a label and within the right context.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/019-do-use-icons-with-a-label-and-within-the-ri.png"
 },
 {
  "type": "caution",
  "text": "Use unlabeled icons only if it's meaning is very clear from context or if the icons itself is intuitive enough.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/020-caution-use-unlabeled-icons-only-if-it-s-meaning.png"
 },
 {
  "type": "do",
  "text": "Use identical color for icon and label.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/021-do-use-identical-color-for-icon-and-label.png"
 },
 {
  "type": "dont",
  "text": "Use different colors for icon and label.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/022-dont-use-different-colors-for-icon-and-label.png"
 },
 {
  "type": "do",
  "text": "Use decorative and affordance icons as intended. The decorative icon is usually on the left and the affordance icon is on the right.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/023-do-use-decorative-and-affordance-icons-as-i.png"
 },
 {
  "type": "caution",
  "text": "Some components may have the affordance icon placed on the left.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/024-caution-some-components-may-have-the-affordance.png"
 },
 {
  "type": "do",
  "text": "Use the intended icon if it is not meant to be changable.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/025-do-use-the-intended-icon-if-it-is-not-meant.png"
 },
 {
  "type": "dont",
  "text": "Change the intended icon if it is not meant to be changable.",
  "section": "Best practices",
  "page": "Guidelines",
  "file": "design-system/foundations/icons/guidelines.md",
  "image": "design-system/_images/icons-guidelines/026-dont-change-the-intended-icon-if-it-is-not-me.png"
 },
 {
  "type": "do",
  "text": "",
  "section": "Design",
  "page": "Guidelines",
  "file": "design-system/foundations/illustration/guidelines.md",
  "image": "design-system/_images/illustration-guidelines/011-do.png"
 },
 {
  "type": "dont",
  "text": "",
  "section": "Design",
  "page": "Guidelines",
  "file": "design-system/foundations/illustration/guidelines.md",
  "image": "design-system/_images/illustration-guidelines/012-dont.png"
 },
 {
  "type": "do",
  "text": "Integrate illustrations via the image server path.",
  "section": "Best Practices",
  "page": "Guidelines",
  "file": "design-system/foundations/illustration/guidelines.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Hard-code or host illustration locally in your code.",
  "section": "Best Practices",
  "page": "Guidelines",
  "file": "design-system/foundations/illustration/guidelines.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Work with the team to create a new illustration, following the intended process.",
  "section": "Best Practices",
  "page": "Guidelines",
  "file": "design-system/foundations/illustration/guidelines.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Create your own illustrations without seeking permission.",
  "section": "Best Practices",
  "page": "Guidelines",
  "file": "design-system/foundations/illustration/guidelines.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Only use the dialog siteframe with a focused dialog within.",
  "section": "Best practices",
  "page": "Dialog siteframe",
  "file": "design-system/foundations/layout/dialog-siteframe.md",
  "image": "design-system/_images/layout-dialog-siteframe/005-do-only-use-the-dialog-siteframe-with-a-foc.png"
 },
 {
  "type": "dont",
  "text": "Use the dialog siteframe without a focused dialog within.",
  "section": "Best practices",
  "page": "Dialog siteframe",
  "file": "design-system/foundations/layout/dialog-siteframe.md",
  "image": "design-system/_images/layout-dialog-siteframe/006-dont-use-the-dialog-siteframe-without-a-focus.png"
 },
 {
  "type": "do",
  "text": "Show the close and back buttons of the focused dialog if you hide the native bars.",
  "section": "Best practices",
  "page": "Dialog siteframe",
  "file": "design-system/foundations/layout/dialog-siteframe.md",
  "image": "design-system/_images/layout-dialog-siteframe/007-do-show-the-close-and-back-buttons-of-the-f.png"
 },
 {
  "type": "dont",
  "text": "Hide the close and back buttons of the focused dialog if you hide the native bars.",
  "section": "Best practices",
  "page": "Dialog siteframe",
  "file": "design-system/foundations/layout/dialog-siteframe.md",
  "image": "design-system/_images/layout-dialog-siteframe/008-dont-hide-the-close-and-back-buttons-of-the-f.png"
 },
 {
  "type": "do",
  "text": "Use logos on backgrounds with sufficient contrast.",
  "section": "Best practices",
  "page": "Logo",
  "file": "design-system/foundations/logo.md",
  "image": "design-system/_images/logo/009-do-use-logos-on-backgrounds-with-sufficient.png"
 },
 {
  "type": "do",
  "text": "Use the white logos on darker backgrounds.",
  "section": "Best practices",
  "page": "Logo",
  "file": "design-system/foundations/logo.md",
  "image": "design-system/_images/logo/010-do-use-the-white-logos-on-darker-background.png"
 },
 {
  "type": "dont",
  "text": "Logos should not be placed on backgrounds with low contrast.",
  "section": "Best practices",
  "page": "Logo",
  "file": "design-system/foundations/logo.md",
  "image": "design-system/_images/logo/011-dont-logos-should-not-be-placed-on-background.png"
 },
 {
  "type": "dont",
  "text": "Logos should not be placed within the bleed area.",
  "section": "Best practices",
  "page": "Logo",
  "file": "design-system/foundations/logo.md",
  "image": "design-system/_images/logo/012-dont-logos-should-not-be-placed-within-the-bl.png"
 },
 {
  "type": "dont",
  "text": "Logo should not be distorted or bent.",
  "section": "Best practices",
  "page": "Logo",
  "file": "design-system/foundations/logo.md",
  "image": "design-system/_images/logo/013-dont-logo-should-not-be-distorted-or-bent.png"
 },
 {
  "type": "caution",
  "text": "Logos should not be integrated in headlines or continuous text.",
  "section": "Best practices",
  "page": "Logo",
  "file": "design-system/foundations/logo.md",
  "image": "design-system/_images/logo/014-caution-logos-should-not-be-integrated-in-headli.png"
 },
 {
  "type": "do",
  "text": "Name variants semantically such as primary or secondary.",
  "section": "Best practices",
  "page": "Naming",
  "file": "design-system/foundations/naming.md",
  "image": "design-system/_images/naming/003-do-name-variants-semantically-such-as-prima.png"
 },
 {
  "type": "dont",
  "text": "Name variants descriptive such as shiny, big or red.",
  "section": "Best practices",
  "page": "Naming",
  "file": "design-system/foundations/naming.md",
  "image": "design-system/_images/naming/004-dont-name-variants-descriptive-such-as-shiny.png"
 },
 {
  "type": "do",
  "text": "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.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/005-do-use-copy100-or-headline100-for-most-use.png"
 },
 {
  "type": "dont",
  "text": "Don't use styles below copy100 or headline50 for body text and components, unless the text is short and secondary.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/006-dont-don-t-use-styles-below-copy100-or-headli.png"
 },
 {
  "type": "do",
  "text": "Use headline in the correct order to provide structure and support the user.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/007-do-use-headline-in-the-correct-order-to-pro.png"
 },
 {
  "type": "dont",
  "text": "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.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/008-dont-don-t-use-headlines-in-an-incorrect-orde.png"
 },
 {
  "type": "do",
  "text": "Adhere to our design tokens and ensure color combinations maintain a 4.5:1 contrast ratio between text and background.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/009-do-adhere-to-our-design-tokens-and-ensure-c.png"
 },
 {
  "type": "dont",
  "text": "Don't create text that fails to meet the 4.5:1 contrast ratio when tested with Figma accessibility plugins.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/010-dont-don-t-create-text-that-fails-to-meet-the.png"
 },
 {
  "type": "do",
  "text": "Left align typography.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/011-do-left-align-typography.png"
 },
 {
  "type": "caution",
  "text": "Center or right align typography only after careful consideration because it is not as readable and as structured as aligning to the left.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/012-caution-center-or-right-align-typography-only-af.png"
 },
 {
  "type": "caution",
  "text": "If necessary, the line height for short texts can be overridden with other line height tokens.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/013-caution-if-necessary-the-line-height-for-short.png"
 },
 {
  "type": "do",
  "text": "Use the intended text styles especially for continuous text.",
  "section": "Best practices",
  "page": "Typography",
  "file": "design-system/foundations/typography.md",
  "image": "design-system/_images/typography/014-do-use-the-intended-text-styles-especially.png"
 },
 {
  "type": "do",
  "text": "State the problem clearly and precisely.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use irony or humor.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Keep the tone calm and serious.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use emotional or dramatic language.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Do focus on how the user can resolve the issue.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Blame the user.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Guide the user to the next step.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Leave users without a clear way forward.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Clearly state the risk.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Exaggerate or dramatize the risk.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Explain the possible consequences.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Downplay potential consequences.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Keep the tone objective and matter-of-fact",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use vague or ambiguous wording.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Help user understand the situation.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Create unnecessary urgency.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Confirm what was successfully completed.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Over-celebrate or sound euphoric.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Keep the message short and clear.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Add unnecessary details.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use a positive and appreciative tone.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use overly emotional language.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Provide orientation on what happens next (if relevant).",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Leave users without clarity on the outcome.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Support, optimize, and help in the current context.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Make the hint feel required or blocking.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Keep the tone friendly, light, and approachable.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Sound instructive or commanding.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Make it clear that the hint is optional.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Interrupt or distract from the main flow.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use an inviting, slightly conversational tone.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Overload with information.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Provide clear and neutral information.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Add unnecessary evaluation or opinion.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Keep the tone factual and unbiased.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Sound instructive or commanding.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use intended variants of components and color for functional communication.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": "design-system/_images/functional-communication/015-do-use-intended-variants-of-components-and.png"
 },
 {
  "type": "dont",
  "text": "Design own functional communication with custom colors.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": "design-system/_images/functional-communication/016-dont-design-own-functional-communication-with.png"
 },
 {
  "type": "do",
  "text": "Place functional messages close to their context.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": "design-system/_images/functional-communication/017-do-place-functional-messages-close-to-their.png"
 },
 {
  "type": "dont",
  "text": "Separate functional messages from their context.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": "design-system/_images/functional-communication/018-dont-separate-functional-messages-from-their.png"
 },
 {
  "type": "do",
  "text": "Show only relevant functional messages.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": "design-system/_images/functional-communication/019-do-show-only-relevant-functional-messages.png"
 },
 {
  "type": "dont",
  "text": "Overload users with unnecessary or low-value functional messages.",
  "section": "Best practices",
  "page": "Functional communication",
  "file": "design-system/foundations/functional-communication.md",
  "image": "design-system/_images/functional-communication/020-dont-overload-users-with-unnecessary-or-low-v.png"
 },
 {
  "type": "do",
  "text": "Use a short title to describe the content.",
  "section": "Best practices",
  "page": "Accordion",
  "file": "design-system/components/accordion.md",
  "image": "design-system/_images/accordion/008-do-use-a-short-title-to-describe-the-conten.png"
 },
 {
  "type": "dont",
  "text": "Use a long and overdescriptive title to describe the content.",
  "section": "Best practices",
  "page": "Accordion",
  "file": "design-system/components/accordion.md",
  "image": "design-system/_images/accordion/009-dont-use-a-long-and-overdescriptive-title-to.png"
 },
 {
  "type": "do",
  "text": "Use the Accordion to provide additional Content like FAQs.",
  "section": "Best practices",
  "page": "Accordion",
  "file": "design-system/components/accordion.md",
  "image": "design-system/_images/accordion/010-do-use-the-accordion-to-provide-additional.png"
 },
 {
  "type": "dont",
  "text": "Use the Accordion for relevant content which for example includes primary Buttons.",
  "section": "Best practices",
  "page": "Accordion",
  "file": "design-system/components/accordion.md",
  "image": "design-system/_images/accordion/011-dont-use-the-accordion-for-relevant-content-w.png"
 },
 {
  "type": "dont",
  "text": "Interlock expanded states of different accordions to each other. This imposes paternalism on users.",
  "section": "Best practices",
  "page": "Accordion",
  "file": "design-system/components/accordion.md",
  "image": "design-system/_images/accordion/012-dont-interlock-expanded-states-of-different-a.png"
 },
 {
  "type": "do",
  "text": "Place the action signifier inside an interactive component.",
  "section": "Best practices",
  "page": "Action signifier",
  "file": "design-system/components/action-signifier.md",
  "image": "design-system/_images/action-signifier/006-do-place-the-action-signifier-inside-an-int.png"
 },
 {
  "type": "dont",
  "text": "Place the action signifier alone.",
  "section": "Best practices",
  "page": "Action signifier",
  "file": "design-system/components/action-signifier.md",
  "image": "design-system/_images/action-signifier/007-dont-place-the-action-signifier-alone.png"
 },
 {
  "type": "do",
  "text": "Use a short label to describe the action.",
  "section": "Content guidelines",
  "page": "Action signifier",
  "file": "design-system/components/action-signifier.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use a long and overdescriptive label to describe the action.",
  "section": "Content guidelines",
  "page": "Action signifier",
  "file": "design-system/components/action-signifier.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use banners sparingly as they are very prominent and may disrupt the users journey.",
  "section": "Best practice",
  "page": "Banner",
  "file": "design-system/components/banner.md",
  "image": "design-system/_images/banner/005-do-use-banners-sparingly-as-they-are-very-p.png"
 },
 {
  "type": "dont",
  "text": "Use banners multiple times on one page for uncritical information.",
  "section": "Best practice",
  "page": "Banner",
  "file": "design-system/components/banner.md",
  "image": "design-system/_images/banner/006-dont-use-banners-multiple-times-on-one-page-f.png"
 },
 {
  "type": "do",
  "text": "Use closable banners for uncritical information.",
  "section": "Best practice",
  "page": "Banner",
  "file": "design-system/components/banner.md",
  "image": "design-system/_images/banner/007-do-use-closable-banners-for-uncritical-info.png"
 },
 {
  "type": "dont",
  "text": "Use closable banners for critical, important information.",
  "section": "Best practice",
  "page": "Banner",
  "file": "design-system/components/banner.md",
  "image": "design-system/_images/banner/008-dont-use-closable-banners-for-critical-impor.png"
 },
 {
  "type": "do",
  "text": "1. Use concise, scannable language that communicates the problem.\n\n2. Indicate the problem directly and offer solutions to fix it (esp. for error or warning)\n\n3. Action links should be clear and specific, indicating what will happen next.\n\n4. Write in sentence case and use appropriate punctuation.\n\n5. Avoid repeating in the headline in the text.",
  "section": "Content guidelines",
  "page": "Banner",
  "file": "design-system/components/banner.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use static block.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/007-do-use-static-block.png"
 },
 {
  "type": "dont",
  "text": "Make block interactive.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/008-dont-make-block-interactive.png"
 },
 {
  "type": "do",
  "text": "Use blocks with default background color.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/009-do-use-blocks-with-default-background-color.png"
 },
 {
  "type": "caution",
  "text": "Overuse blocks with other background colors than canvas or frame.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/010-caution-overuse-blocks-with-other-background-col.png"
 },
 {
  "type": "do",
  "text": "Place static content inside a block.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/011-do-place-static-content-inside-a-block.png"
 },
 {
  "type": "dont",
  "text": "Place static content outside of blocks.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/012-dont-place-static-content-outside-of-blocks.png"
 },
 {
  "type": "do",
  "text": "Use stacked block inside a block.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/013-do-use-stacked-block-inside-a-block.png"
 },
 {
  "type": "dont",
  "text": "Use stacked block outside of a block.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/014-dont-use-stacked-block-outside-of-a-block.png"
 },
 {
  "type": "do",
  "text": "Use dividers within or spacing between stacked blocks to structure content, if needed.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/015-do-use-dividers-within-or-spacing-between-s.png"
 },
 {
  "type": "dont",
  "text": "Place stacked blocks directly adjacent to other stacked blocks.",
  "section": "Best practices",
  "page": "Block",
  "file": "design-system/components/block.md",
  "image": "design-system/_images/block/016-dont-place-stacked-blocks-directly-adjacent-t.png"
 },
 {
  "type": "do",
  "text": "Place one primary button per view.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/012-do-place-one-primary-button-per-view.png"
 },
 {
  "type": "dont",
  "text": "Place more than one primary button per view.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/013-dont-place-more-than-one-primary-button-per-v.png"
 },
 {
  "type": "do",
  "text": "Show the full text on buttons. If necessary, they should be stacked when they cannot be placed side by side.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/014-do-show-the-full-text-on-buttons-if-necess.png"
 },
 {
  "type": "dont",
  "text": "Truncate the button text.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/015-dont-truncate-the-button-text.png"
 },
 {
  "type": "do",
  "text": "Use few buttons for only the relevant actions.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/016-do-use-few-buttons-for-only-the-relevant-ac.png"
 },
 {
  "type": "dont",
  "text": "Don't clutter your UI with too many buttons.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/017-dont-don-t-clutter-your-ui-with-too-many-butt.png"
 },
 {
  "type": "do",
  "text": "Use the colors assigned by the design system.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/018-do-use-the-colors-assigned-by-the-design-sy.png"
 },
 {
  "type": "dont",
  "text": "Don't use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/019-dont-don-t-use-custom-colors-for-buttons-the.png"
 },
 {
  "type": "do",
  "text": "Place buttons inside a block.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/020-do-place-buttons-inside-a-block.png"
 },
 {
  "type": "caution",
  "text": "Buttons can be used as sticky elements with a shadow300.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/021-caution-buttons-can-be-used-as-sticky-elements-w.png"
 },
 {
  "type": "do",
  "text": "Only use the secondary-over-color variant on frame, stacked or colored background.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/022-do-only-use-the-secondary-over-color-varian.png"
 },
 {
  "type": "dont",
  "text": "Use the secondary-over-color button on a white or canvas background.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/023-dont-use-the-secondary-over-color-button-on-a.png"
 },
 {
  "type": "do",
  "text": "Change the label to a positive outcome when using the success button.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/024-do-change-the-label-to-a-positive-outcome-w.png"
 },
 {
  "type": "dont",
  "text": "Use the same label for both the positive action and the positive outcome.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/025-dont-use-the-same-label-for-both-the-positive.png"
 },
 {
  "type": "caution",
  "text": "Make sure to use the success button sparingly and only to display specific positive outcomes, such as \"Marke folgen\".",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/026-caution-make-sure-to-use-the-success-button-spar.png"
 },
 {
  "type": "do",
  "text": "Use decorative icons for the left icon and affordance icons for the right icon.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/027-do-use-decorative-icons-for-the-left-icon-a.png"
 },
 {
  "type": "dont",
  "text": "Use decorative icons for the right icon and affordance icons for the left icon.",
  "section": "Best practices",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": "design-system/_images/button/028-dont-use-decorative-icons-for-the-right-icon.png"
 },
 {
  "type": "do",
  "text": "1. Use simple, clear language.\n\n2. Keep the label concise, under 4 words and fewer than 20 characters, including spaces.\n\n3. Capitalize the first letter of the first word and proper nouns in \nthe button label text.\n\n4. Use a verb that describes the action, such as \"Zum Warenkorb hinzufügen\".\n\n5. Contextualize the action the user is taking.\n\n6. Maintain consistent wording for the same button across different views.\n\n7. Avoid punctuation marks such as periods or exclamation points.",
  "section": "Content guidelines",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "1. Use ambiguous wording or overly creative content, as they may not be accessible.\n\n2. Include polite expressions like \"please\" and \"thank you.\"\n\n3. Use non-specific phrases like \"learn more\" or \"click here.\"\n\n4. Use emojis or exclamation points, as they aren’t appropriate for the functional nature of buttons.\n\n5. Write labels as nouns or adjectives, which can be unclear and disorienting.",
  "section": "Content guidelines",
  "page": "Button",
  "file": "design-system/components/button.md",
  "image": null
 },
 {
  "type": "do",
  "text": "If you are using a card 100 with a padding of 4px your image should have a border radius of 12 px.\n\n16px (card border radius) - 4 px (card padding) = 12px (content border radius)",
  "section": "Border radiuses",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/010-do-if-you-are-using-a-card-100-with-a-paddi.png"
 },
 {
  "type": "do",
  "text": "If you are using a card 100 with a padding of 8px your image should have a border radius of 8 px.\n\n16px (card border radius) - 8 px (card padding) = 8px (content border radius)",
  "section": "Border radiuses",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/011-do-if-you-are-using-a-card-100-with-a-paddi.png"
 },
 {
  "type": "dont",
  "text": "Use border radiuses that are too sharp or too blunt for content.",
  "section": "Border radiuses",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/012-dont-use-border-radiuses-that-are-too-sharp-o.png"
 },
 {
  "type": "caution",
  "text": "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.\n\n16px (card border radius) - 16 px (card padding) = 0px (content border radius)",
  "section": "Border radiuses",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/013-caution-if-you-use-a-card-100-with-padding-set-t.png"
 },
 {
  "type": "do",
  "text": "Use an interactive card with or without action siginifier.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/014-do-use-an-interactive-card-with-or-without.png"
 },
 {
  "type": "dont",
  "text": "Use a static card without interactive components.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/015-dont-use-a-static-card-without-interactive-co.png"
 },
 {
  "type": "do",
  "text": "Only use cards with a filled background.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/016-do-only-use-cards-with-a-filled-background.png"
 },
 {
  "type": "dont",
  "text": "Use cards with an Outline.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/017-dont-use-cards-with-an-outline.png"
 },
 {
  "type": "do",
  "text": "Use same card size inside a feature.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/018-do-use-same-card-size-inside-a-feature.png"
 },
 {
  "type": "dont",
  "text": "Mix different card dimensions inside a feature.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/019-dont-mix-different-card-dimensions-inside-a-f.png"
 },
 {
  "type": "do",
  "text": "Use the provided semantic tokens \"color/background-card\" when using the over-color variant.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/020-do-use-the-provided-semantic-tokens-color.png"
 },
 {
  "type": "dont",
  "text": "Use custom colors.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/021-dont-use-custom-colors.png"
 },
 {
  "type": "caution",
  "text": "Avoid placing over-color cards on colored blocks or colored backgrounds.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/022-caution-avoid-placing-over-color-cards-on-colore.png"
 },
 {
  "type": "caution",
  "text": "Avoid placing content which belongs to the card outside of the card.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/023-caution-avoid-placing-content-which-belongs-to-t.png"
 },
 {
  "type": "do",
  "text": "Use cards with a single link target.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/024-do-use-cards-with-a-single-link-target.png"
 },
 {
  "type": "caution",
  "text": "Use cards with overlapping link targets very cautious, expecially if the targets are rather small.",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/025-caution-use-cards-with-overlapping-link-targets.png"
 },
 {
  "type": "caution",
  "text": "When using a card as a interactive cluster, try to clearly separate link targets",
  "section": "Best Practices",
  "page": "Card",
  "file": "design-system/components/card.md",
  "image": "design-system/_images/card/026-caution-when-using-a-card-as-a-interactive-clust.png"
 },
 {
  "type": "do",
  "text": "Place within a layout with full-bleed.",
  "section": "Best practices",
  "page": "Carousel",
  "file": "design-system/components/carousel.md",
  "image": "design-system/_images/carousel/011-do-place-within-a-layout-with-full-bleed.png"
 },
 {
  "type": "dont",
  "text": "Place with additional outer spacing.",
  "section": "Best practices",
  "page": "Carousel",
  "file": "design-system/components/carousel.md",
  "image": "design-system/_images/carousel/012-dont-place-with-additional-outer-spacing.png"
 },
 {
  "type": "do",
  "text": "Use with at least one indicator, like the scroll buttons or pagination dots.",
  "section": "Best practices",
  "page": "Carousel",
  "file": "design-system/components/carousel.md",
  "image": "design-system/_images/carousel/013-do-use-with-at-least-one-indicator-like-th.png"
 },
 {
  "type": "dont",
  "text": "Use no indicator.",
  "section": "Best practices",
  "page": "Carousel",
  "file": "design-system/components/carousel.md",
  "image": "design-system/_images/carousel/014-dont-use-no-indicator.png"
 },
 {
  "type": "caution",
  "text": "Change the background and text colors according to our accessibility guidelines.",
  "section": "Best practices",
  "page": "Chat bubble",
  "file": "design-system/components/chat-bubble.md",
  "image": "design-system/_images/chat-bubble/006-caution-change-the-background-and-text-colors-ac.png"
 },
 {
  "type": "do",
  "text": "Use in groups of more than 3.",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/011-do-use-in-groups-of-more-than-3.png"
 },
 {
  "type": "dont",
  "text": "Use only one chip.",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/012-dont-use-only-one-chip.png"
 },
 {
  "type": "do",
  "text": "Only use the same chip size in the same feature.",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/013-do-only-use-the-same-chip-size-in-the-same.png"
 },
 {
  "type": "dont",
  "text": "Mix chips sizes in the same feature.",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/014-dont-mix-chips-sizes-in-the-same-feature.png"
 },
 {
  "type": "do",
  "text": "Make the width of the chip fit its content (fit-content).",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/015-do-make-the-width-of-the-chip-fit-its-conte.png"
 },
 {
  "type": "caution",
  "text": "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.",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/016-caution-make-the-width-of-the-chip-larger-than-i.png"
 },
 {
  "type": "do",
  "text": "Only use removable or non removable chips within the same feature.",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/017-do-only-use-removable-or-non-removable-chip.png"
 },
 {
  "type": "dont",
  "text": "Mix removable chip with non removable chips.",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/018-dont-mix-removable-chip-with-non-removable-ch.png"
 },
 {
  "type": "do",
  "text": "Use Tabs for navigation.",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/019-do-use-tabs-for-navigation.png"
 },
 {
  "type": "caution",
  "text": "Use Chips for navigating.",
  "section": "Best practices",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": "design-system/_images/chip/020-caution-use-chips-for-navigating.png"
 },
 {
  "type": "do",
  "text": "1. Keep the label of the chip shorter than 3 words.\n\n2. Use adjectives or nouns for the label.",
  "section": "Content guidelines",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "1. Use long sentences with 3 or more words, including puncuation.\n\n2. Use verbs for the label.",
  "section": "Content guidelines",
  "page": "Chip",
  "file": "design-system/components/chip.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Place within a layout with full-bleed.",
  "section": "Best practices",
  "page": "Cinema",
  "file": "design-system/components/cinema.md",
  "image": "design-system/_images/cinema/009-do-place-within-a-layout-with-full-bleed.png"
 },
 {
  "type": "dont",
  "text": "Place with additional outer spacing.",
  "section": "Best practices",
  "page": "Cinema",
  "file": "design-system/components/cinema.md",
  "image": "design-system/_images/cinema/010-dont-place-with-additional-outer-spacing.png"
 },
 {
  "type": "do",
  "text": "Use default left and right spacings.",
  "section": "Best practices",
  "page": "Cinema",
  "file": "design-system/components/cinema.md",
  "image": "design-system/_images/cinema/011-do-use-default-left-and-right-spacings.png"
 },
 {
  "type": "dont",
  "text": "Use custom left and right spacings.",
  "section": "Best practices",
  "page": "Cinema",
  "file": "design-system/components/cinema.md",
  "image": "design-system/_images/cinema/012-dont-use-custom-left-and-right-spacings.png"
 },
 {
  "type": "do",
  "text": "Place a cinema on canvas or frame.",
  "section": "Best practices",
  "page": "Cinema",
  "file": "design-system/components/cinema.md",
  "image": "design-system/_images/cinema/013-do-place-a-cinema-on-canvas-or-frame.png"
 },
 {
  "type": "dont",
  "text": "Place cinemas within other cinemas - doubled horizontal scrolling does not work.",
  "section": "Best practices",
  "page": "Cinema",
  "file": "design-system/components/cinema.md",
  "image": "design-system/_images/cinema/014-dont-place-cinemas-within-other-cinemas-dou.png"
 },
 {
  "type": "do",
  "text": "Use the divider to separate content.",
  "section": "Best practices",
  "page": "Divider",
  "file": "design-system/components/divider.md",
  "image": "design-system/_images/divider/005-do-use-the-divider-to-separate-content.png"
 },
 {
  "type": "dont",
  "text": "Use the divider to highlight content, such as text.",
  "section": "Best practices",
  "page": "Divider",
  "file": "design-system/components/divider.md",
  "image": "design-system/_images/divider/006-dont-use-the-divider-to-highlight-content-su.png"
 },
 {
  "type": "do",
  "text": "Leave out the first and last divider in a list.",
  "section": "Best practices",
  "page": "Divider",
  "file": "design-system/components/divider.md",
  "image": "design-system/_images/divider/007-do-leave-out-the-first-and-last-divider-in.png"
 },
 {
  "type": "dont",
  "text": "Use the divider at the start and end of a list.",
  "section": "Best practices",
  "page": "Divider",
  "file": "design-system/components/divider.md",
  "image": "design-system/_images/divider/008-dont-use-the-divider-at-the-start-and-end-of.png"
 },
 {
  "type": "caution",
  "text": "Use full-width dividers sparingly to maintain enclosure.",
  "section": "Best practices",
  "page": "Divider",
  "file": "design-system/components/divider.md",
  "image": "design-system/_images/divider/009-caution-use-full-width-dividers-sparingly-to-mai.png"
 },
 {
  "type": "do",
  "text": "Use the expander to provide additional content like more product details.",
  "section": "Best practices",
  "page": "Expander",
  "file": "design-system/components/expander.md",
  "image": "design-system/_images/expander/009-do-use-the-expander-to-provide-additional-c.png"
 },
 {
  "type": "dont",
  "text": "Use the expander to truncate relevant content, for example primary buttons.",
  "section": "Best practices",
  "page": "Expander",
  "file": "design-system/components/expander.md",
  "image": "design-system/_images/expander/010-dont-use-the-expander-to-truncate-relevant-co.png"
 },
 {
  "type": "do",
  "text": "Show the beginning of the truncated content.",
  "section": "Best practices",
  "page": "Expander",
  "file": "design-system/components/expander.md",
  "image": "design-system/_images/expander/011-do-show-the-beginning-of-the-truncated-cont.png"
 },
 {
  "type": "dont",
  "text": "Hide the truncated content completely or place it before the truncated content.",
  "section": "Best practices",
  "page": "Expander",
  "file": "design-system/components/expander.md",
  "image": "design-system/_images/expander/012-dont-hide-the-truncated-content-completely-or.png"
 },
 {
  "type": "do",
  "text": "Use on canvas background.",
  "section": "Best practices",
  "page": "Expander",
  "file": "design-system/components/expander.md",
  "image": "design-system/_images/expander/013-do-use-on-canvas-background.png"
 },
 {
  "type": "dont",
  "text": "Use on a background other than canvas, as the fade uses the canvas color to hide content.",
  "section": "Best practices",
  "page": "Expander",
  "file": "design-system/components/expander.md",
  "image": "design-system/_images/expander/014-dont-use-on-a-background-other-than-canvas-a.png"
 },
 {
  "type": "caution",
  "text": "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.",
  "section": "Best practices",
  "page": "Expander",
  "file": "design-system/components/expander.md",
  "image": "design-system/_images/expander/015-caution-be-cautious-when-using-use-text-expander.png"
 },
 {
  "type": "dont",
  "text": "Use row expander for text content. The affordance icon may easily be overseen.",
  "section": "Best practices",
  "page": "Expander",
  "file": "design-system/components/expander.md",
  "image": "design-system/_images/expander/016-dont-use-row-expander-for-text-content-the-a.png"
 },
 {
  "type": "dont",
  "text": "Use expander without outer spacing. The usual grid spacing of 16px shall be applied.",
  "section": "Best practices",
  "page": "Expander",
  "file": "design-system/components/expander.md",
  "image": "design-system/_images/expander/017-dont-use-expander-without-outer-spacing-the.png"
 },
 {
  "type": "do",
  "text": "Use back buttons for consecutive focused dialogs.",
  "section": "Best practices",
  "page": "Focused dialog",
  "file": "design-system/components/focused-dialog.md",
  "image": "design-system/_images/focused-dialog/010-do-use-back-buttons-for-consecutive-focused.png"
 },
 {
  "type": "caution",
  "text": "Back buttons are not necessary on the first focused dialog in a process.",
  "section": "Best practices",
  "page": "Focused dialog",
  "file": "design-system/components/focused-dialog.md",
  "image": "design-system/_images/focused-dialog/011-caution-back-buttons-are-not-necessary-on-the-fi.png"
 },
 {
  "type": "do",
  "text": "Always show the close button.",
  "section": "Best practices",
  "page": "Focused dialog",
  "file": "design-system/components/focused-dialog.md",
  "image": "design-system/_images/focused-dialog/012-do-always-show-the-close-button.png"
 },
 {
  "type": "dont",
  "text": "Hide the close button.",
  "section": "Best practices",
  "page": "Focused dialog",
  "file": "design-system/components/focused-dialog.md",
  "image": "design-system/_images/focused-dialog/013-dont-hide-the-close-button.png"
 },
 {
  "type": "dont",
  "text": "Call it focussed dialogue 🇬🇧",
  "section": "Best practices",
  "page": "Focused dialog",
  "file": "design-system/components/focused-dialog.md",
  "image": "design-system/_images/focused-dialog/014-dont-call-it-focussed-dialogue.png"
 },
 {
  "type": "do",
  "text": "Only place related auth fields and text fields horizontally next to each other.",
  "section": "Best practices",
  "page": "Auth field",
  "file": "design-system/components/form/auth-field.md",
  "image": "design-system/_images/form-auth-field/010-do-only-place-related-auth-fields-and-text.png"
 },
 {
  "type": "dont",
  "text": "Place unrelated auth fields and text Fields horizontally next to each other.",
  "section": "Best practices",
  "page": "Auth field",
  "file": "design-system/components/form/auth-field.md",
  "image": "design-system/_images/form-auth-field/011-dont-place-unrelated-auth-fields-and-text-fie.png"
 },
 {
  "type": "do",
  "text": "Use short, precise labels to describe the required input.",
  "section": "Content guidelines",
  "page": "Auth field",
  "file": "design-system/components/form/auth-field.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use overly descriptive labels to describe the required input.",
  "section": "Content guidelines",
  "page": "Auth field",
  "file": "design-system/components/form/auth-field.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Provide clear an useful error to help the user fix the issue.",
  "section": "Content guidelines",
  "page": "Auth field",
  "file": "design-system/components/form/auth-field.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use generic errors, such as \"Die Eingabe ist fehlerhaft\".",
  "section": "Content guidelines",
  "page": "Auth field",
  "file": "design-system/components/form/auth-field.md",
  "image": null
 },
 {
  "type": "do",
  "text": "",
  "section": "Checkbox vs. switch",
  "page": "Checkbox",
  "file": "design-system/components/form/checkbox.md",
  "image": "design-system/_images/form-checkbox/009-do.png"
 },
 {
  "type": "dont",
  "text": "",
  "section": "Checkbox vs. switch",
  "page": "Checkbox",
  "file": "design-system/components/form/checkbox.md",
  "image": "design-system/_images/form-checkbox/010-dont.png"
 },
 {
  "type": "caution",
  "text": "Avoid using horizontal Checkbox lists.\nEven 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.",
  "section": "Best Practices",
  "page": "Checkbox",
  "file": "design-system/components/form/checkbox.md",
  "image": "design-system/_images/form-checkbox/011-caution-avoid-using-horizontal-checkbox-lists-e.png"
 },
 {
  "type": "caution",
  "text": "Only nest checkboxes if you are using the indeterminate state.",
  "section": "Best Practices",
  "page": "Checkbox",
  "file": "design-system/components/form/checkbox.md",
  "image": "design-system/_images/form-checkbox/012-caution-only-nest-checkboxes-if-you-are-using-th.png"
 },
 {
  "type": "do",
  "text": "Use the actual label of the checkbox.\nThis is the only way to ensure consistent behavior and layout.",
  "section": "Best Practices",
  "page": "Checkbox",
  "file": "design-system/components/form/checkbox.md",
  "image": "design-system/_images/form-checkbox/013-do-use-the-actual-label-of-the-checkbox-th.png"
 },
 {
  "type": "dont",
  "text": "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.",
  "section": "Best Practices",
  "page": "Checkbox",
  "file": "design-system/components/form/checkbox.md",
  "image": "design-system/_images/form-checkbox/014-dont-use-custom-text-as-a-label-the-spacing.png"
 },
 {
  "type": "do",
  "text": "Use short, precise labels to describe the options.",
  "section": "Content Guidelines",
  "page": "Checkbox",
  "file": "design-system/components/form/checkbox.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use overly descriptive labels to describe the options.",
  "section": "Content Guidelines",
  "page": "Checkbox",
  "file": "design-system/components/form/checkbox.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use dropdowns when there are five or more options.",
  "section": "Best practices",
  "page": "Dropdown",
  "file": "design-system/components/form/dropdown.md",
  "image": "design-system/_images/form-dropdown/010-do-use-dropdowns-when-there-are-five-or-mor.png"
 },
 {
  "type": "caution",
  "text": "If there are less options consider using radio buttons instead of a dropdown.",
  "section": "Best practices",
  "page": "Dropdown",
  "file": "design-system/components/form/dropdown.md",
  "image": "design-system/_images/form-dropdown/011-caution-if-there-are-less-options-consider-using.png"
 },
 {
  "type": "do",
  "text": "Use short, precise labels to describe the selections.",
  "section": "Content guidelines",
  "page": "Dropdown",
  "file": "design-system/components/form/dropdown.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use overly descriptive labels to describe the selections.",
  "section": "Content guidelines",
  "page": "Dropdown",
  "file": "design-system/components/form/dropdown.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Combine related components within the form ground. You can also combine different but related components within the form group.",
  "section": "Best practices",
  "page": "Form group",
  "file": "design-system/components/form/form-group.md",
  "image": "design-system/_images/form-form-group/006-do-combine-related-components-within-the-fo.png"
 },
 {
  "type": "dont",
  "text": "Use related components individually which should be combined in a form group.",
  "section": "Best practices",
  "page": "Form group",
  "file": "design-system/components/form/form-group.md",
  "image": "design-system/_images/form-form-group/007-dont-use-related-components-individually-whic.png"
 },
 {
  "type": "do",
  "text": "Divide a form into different form groups or components depending on their content.",
  "section": "Best practices",
  "page": "Form group",
  "file": "design-system/components/form/form-group.md",
  "image": "design-system/_images/form-form-group/008-do-divide-a-form-into-different-form-groups.png"
 },
 {
  "type": "dont",
  "text": "Combine components of a complete form into one form group.",
  "section": "Best practices",
  "page": "Form group",
  "file": "design-system/components/form/form-group.md",
  "image": "design-system/_images/form-form-group/009-dont-combine-components-of-a-complete-form-in.png"
 },
 {
  "type": "do",
  "text": "Only use components that belong to the form cluster and are intended for use within the form group.",
  "section": "Best practices",
  "page": "Form group",
  "file": "design-system/components/form/form-group.md",
  "image": "design-system/_images/form-form-group/010-do-only-use-components-that-belong-to-the-f.png"
 },
 {
  "type": "dont",
  "text": "Use components which are not of the form cluster and not intended for use within the form group.",
  "section": "Best practices",
  "page": "Form group",
  "file": "design-system/components/form/form-group.md",
  "image": "design-system/_images/form-form-group/011-dont-use-components-which-are-not-of-the-form.png"
 },
 {
  "type": "caution",
  "text": "Avoid using horizontal Radio Button lists",
  "section": "Best Practices",
  "page": "Radio button",
  "file": "design-system/components/form/radio-button.md",
  "image": "design-system/_images/form-radio-button/008-caution-avoid-using-horizontal-radio-button-list.png"
 },
 {
  "type": "dont",
  "text": "Nest Radio Buttons",
  "section": "Best Practices",
  "page": "Radio button",
  "file": "design-system/components/form/radio-button.md",
  "image": "design-system/_images/form-radio-button/009-dont-nest-radio-buttons.png"
 },
 {
  "type": "do",
  "text": "Use Radio Buttons when there are five or fewer options.",
  "section": "Best Practices",
  "page": "Radio button",
  "file": "design-system/components/form/radio-button.md",
  "image": "design-system/_images/form-radio-button/010-do-use-radio-buttons-when-there-are-five-or.png"
 },
 {
  "type": "caution",
  "text": "If there a more than 5 options consider using a drop-down menu instead of radio buttons.",
  "section": "Best Practices",
  "page": "Radio button",
  "file": "design-system/components/form/radio-button.md",
  "image": "design-system/_images/form-radio-button/011-caution-if-there-a-more-than-5-options-consider.png"
 },
 {
  "type": "do",
  "text": "Use the actual label of the radio button.\nThis is the only way to ensure consistent behavior and layout.",
  "section": "Best Practices",
  "page": "Radio button",
  "file": "design-system/components/form/radio-button.md",
  "image": "design-system/_images/form-radio-button/012-do-use-the-actual-label-of-the-radio-button.png"
 },
 {
  "type": "dont",
  "text": "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.",
  "section": "Best Practices",
  "page": "Radio button",
  "file": "design-system/components/form/radio-button.md",
  "image": "design-system/_images/form-radio-button/013-dont-use-text-as-a-label-the-spacing-may-be.png"
 },
 {
  "type": "do",
  "text": "Use short, precise labels to describe the options.",
  "section": "Content Guidelines",
  "page": "Radio button",
  "file": "design-system/components/form/radio-button.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use overly descriptive labels to describe the options.",
  "section": "Content Guidelines",
  "page": "Radio button",
  "file": "design-system/components/form/radio-button.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use a text field for short input e.g. Name or Mail.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/011-do-use-a-text-field-for-short-input-e-g-na.png"
 },
 {
  "type": "dont",
  "text": "Use a text field for longer inputs like review or comments. Instead, use a text area.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/012-dont-use-a-text-field-for-longer-inputs-like.png"
 },
 {
  "type": "do",
  "text": "Use a text field for custom inputs.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/013-do-use-a-text-field-for-custom-inputs.png"
 },
 {
  "type": "dont",
  "text": "Use a text field for predictable information. Instead, use a dropdown with suggestions.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/014-dont-use-a-text-field-for-predictable-informa.png"
 },
 {
  "type": "do",
  "text": "Only place related text field on the same line.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/015-do-only-place-related-text-field-on-the-sam.png"
 },
 {
  "type": "dont",
  "text": "Place an unrelated text field on the same line.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/016-dont-place-an-unrelated-text-field-on-the-sam.png"
 },
 {
  "type": "do",
  "text": "Always ensure the text field has a visible label to provide context and help the user filling in information.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/017-do-always-ensure-the-text-field-has-a-visib.png"
 },
 {
  "type": "caution",
  "text": "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.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/018-caution-when-using-a-text-field-without-a-label.png"
 },
 {
  "type": "do",
  "text": "Use a search bar for search requests.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/019-do-use-a-search-bar-for-search-requests.png"
 },
 {
  "type": "dont",
  "text": "Use a text field for search requests.",
  "section": "Best practices",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/020-dont-use-a-text-field-for-search-requests.png"
 },
 {
  "type": "do",
  "text": "Only use short and precise wordings for the label.",
  "section": "Content Guidelines",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/021-do-only-use-short-and-precise-wordings-for.png"
 },
 {
  "type": "dont",
  "text": "Use long descriptions or sentences for the label.",
  "section": "Content Guidelines",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/022-dont-use-long-descriptions-or-sentences-for-t.png"
 },
 {
  "type": "do",
  "text": "Put further, longer information which help the user filling out the text field inside the hint.",
  "section": "Content Guidelines",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/023-do-put-further-longer-information-which-he.png"
 },
 {
  "type": "dont",
  "text": "Put short information like a title inside the hint. It should only be placed inside the label.",
  "section": "Content Guidelines",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/024-dont-put-short-information-like-a-title-insid.png"
 },
 {
  "type": "do",
  "text": "Provide clear and useful error that help the user fix the issue.",
  "section": "Content Guidelines",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/025-do-provide-clear-and-useful-error-that-help.png"
 },
 {
  "type": "dont",
  "text": "Use generic errors, such as \"There is an error\".",
  "section": "Content Guidelines",
  "page": "Text field / text area",
  "file": "design-system/components/form/text-field-text-area.md",
  "image": "design-system/_images/form-text-field-text-area/026-dont-use-generic-errors-such-as-there-is-an.png"
 },
 {
  "type": "do",
  "text": "Only use the same icon button sizes in the same feature.",
  "section": "Best practices",
  "page": "Icon button",
  "file": "design-system/components/icon-button.md",
  "image": "design-system/_images/icon-button/009-do-only-use-the-same-icon-button-sizes-in-t.png"
 },
 {
  "type": "dont",
  "text": "Mix icon button sizes inside the same feature.",
  "section": "Best practices",
  "page": "Icon button",
  "file": "design-system/components/icon-button.md",
  "image": "design-system/_images/icon-button/010-dont-mix-icon-button-sizes-inside-the-same-fe.png"
 },
 {
  "type": "do",
  "text": "Leave at least 8px between icon buttons to avoid overlapping hitboxes.",
  "section": "Best practices",
  "page": "Icon button",
  "file": "design-system/components/icon-button.md",
  "image": "design-system/_images/icon-button/011-do-leave-at-least-8px-between-icon-buttons.png"
 },
 {
  "type": "caution",
  "text": "Remember that the hitbox of the Icon Button 25 and 50 is larger than the Icon Button itself.",
  "section": "Best practices",
  "page": "Icon button",
  "file": "design-system/components/icon-button.md",
  "image": "design-system/_images/icon-button/012-caution-remember-that-the-hitbox-of-the-icon-but.png"
 },
 {
  "type": "do",
  "text": "Use icons that clearly represent the action.",
  "section": "Best practices",
  "page": "Icon button",
  "file": "design-system/components/icon-button.md",
  "image": "design-system/_images/icon-button/013-do-use-icons-that-clearly-represent-the-act.png"
 },
 {
  "type": "dont",
  "text": "Use icons which do not represent the action.",
  "section": "Best practices",
  "page": "Icon button",
  "file": "design-system/components/icon-button.md",
  "image": "design-system/_images/icon-button/014-dont-use-icons-which-do-not-represent-the-act.png"
 },
 {
  "type": "do",
  "text": "Use the interactive overlay to add states to interactive elements that do not have their own states, for example header icons.",
  "section": "Best practices",
  "page": "Interactive overlay",
  "file": "design-system/components/interactive-overlay.md",
  "image": "design-system/_images/interactive-overlay/005-do-use-the-interactive-overlay-to-add-state.png"
 },
 {
  "type": "dont",
  "text": "Use the interactive overlay for static elements or elements that already have states.",
  "section": "Best practices",
  "page": "Interactive overlay",
  "file": "design-system/components/interactive-overlay.md",
  "image": "design-system/_images/interactive-overlay/006-dont-use-the-interactive-overlay-for-static-e.png"
 },
 {
  "type": "do",
  "text": "Use links thoughtfully and as few as possible.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/010-do-use-links-thoughtfully-and-as-few-as-pos.png"
 },
 {
  "type": "dont",
  "text": "Overwhelm users with too many distracting links, that might interrupt their journey.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/011-dont-overwhelm-users-with-too-many-distractin.png"
 },
 {
  "type": "do",
  "text": "Use inline Link when surrounded by continuous text.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/012-do-use-inline-link-when-surrounded-by-conti.png"
 },
 {
  "type": "caution",
  "text": "Avoid using the secondary inline Link when surrounded by continuous text because it is less visible.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/013-caution-avoid-using-the-secondary-inline-link-wh.png"
 },
 {
  "type": "do",
  "text": "Use underlined link on color.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/014-do-use-underlined-link-on-color.png"
 },
 {
  "type": "dont",
  "text": "Use primary or secondary link on color.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/015-dont-use-primary-or-secondary-link-on-color.png"
 },
 {
  "type": "do",
  "text": "Use links with one line.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/016-do-use-links-with-one-line.png"
 },
 {
  "type": "caution",
  "text": "Avoid line breaks within the same link. Otherwise it can be perceived as two separate links.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/017-caution-avoid-line-breaks-within-the-same-link.png"
 },
 {
  "type": "do",
  "text": "Use bold text to highlight information.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/018-do-use-bold-text-to-highlight-information.png"
 },
 {
  "type": "dont",
  "text": "Underline text that is not a link to highlight information.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/019-dont-underline-text-that-is-not-a-link-to-hig.png"
 },
 {
  "type": "do",
  "text": "Use the same size for link and text.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/020-do-use-the-same-size-for-link-and-text.png"
 },
 {
  "type": "dont",
  "text": "Use different size for link and text.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/021-dont-use-different-size-for-link-and-text.png"
 },
 {
  "type": "do",
  "text": "Use same link styles in the same context.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/022-do-use-same-link-styles-in-the-same-context.png"
 },
 {
  "type": "dont",
  "text": "Mix different link styles in the same context.",
  "section": "Best practices",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/023-dont-mix-different-link-styles-in-the-same-co.png"
 },
 {
  "type": "do",
  "text": "Use specific labels that clearly convey the link's function or destination.",
  "section": "Content guidelines",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use generic or vague labels, such as \"Hier klicken\", \"Jetzt entdecken\" or \"Mehr erfahren\".",
  "section": "Content guidelines",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Keep link labels short concise.",
  "section": "Content guidelines",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use lengthy sentences with punctuation marks for the label.",
  "section": "Content guidelines",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": null
 },
 {
  "type": "caution",
  "text": "Use enough spacing spacing for link 50 and 75 to maintain the a dead space of 24×24px.",
  "section": "Accessibility",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/024-caution-use-enough-spacing-spacing-for-link-50-a.png"
 },
 {
  "type": "dont",
  "text": "Use links within other interactive elements like cards.",
  "section": "Accessibility",
  "page": "Link",
  "file": "design-system/components/link.md",
  "image": "design-system/_images/link/025-dont-use-links-within-other-interactive-eleme.png"
 },
 {
  "type": "do",
  "text": "Use the default colors or the provided semantic tokens \"color/background-card\" when using the inverted variant of the media object card.",
  "section": "Best practices",
  "page": "Media object card",
  "file": "design-system/components/media-object-card.md",
  "image": "design-system/_images/media-object-card/013-do-use-the-default-colors-or-the-provided-s.png"
 },
 {
  "type": "dont",
  "text": "Use a custom colored background for the media object card.",
  "section": "Best practices",
  "page": "Media object card",
  "file": "design-system/components/media-object-card.md",
  "image": "design-system/_images/media-object-card/014-dont-use-a-custom-colored-background-for-the.png"
 },
 {
  "type": "do",
  "text": "Only use the same sizes of the media object card within a feature.",
  "section": "Best practices",
  "page": "Media object card",
  "file": "design-system/components/media-object-card.md",
  "image": "design-system/_images/media-object-card/015-do-only-use-the-same-sizes-of-the-media-obj.png"
 },
 {
  "type": "dont",
  "text": "Mix different sizes of the media object card with a feature.",
  "section": "Best practices",
  "page": "Media object card",
  "file": "design-system/components/media-object-card.md",
  "image": "design-system/_images/media-object-card/016-dont-mix-different-sizes-of-the-media-object.png"
 },
 {
  "type": "caution",
  "text": "Avoid placing inverted media object cards on colored blocks or colored backgrounds.",
  "section": "Best practices",
  "page": "Media object card",
  "file": "design-system/components/media-object-card.md",
  "image": "design-system/_images/media-object-card/017-caution-avoid-placing-inverted-media-object-card.png"
 },
 {
  "type": "do",
  "text": "Add your content to the body and place the main actions within the footer.",
  "section": "Best practices",
  "page": "Paper card",
  "file": "design-system/components/paper-card.md",
  "image": "design-system/_images/paper-card/010-do-add-your-content-to-the-body-and-place-t.png"
 },
 {
  "type": "dont",
  "text": "Place the main actions within the body and use content inside the footer.",
  "section": "Best practices",
  "page": "Paper card",
  "file": "design-system/components/paper-card.md",
  "image": "design-system/_images/paper-card/011-dont-place-the-main-actions-within-the-body-a.png"
 },
 {
  "type": "do",
  "text": "Use popover for context menus.",
  "section": "Best practices",
  "page": "Popover",
  "file": "design-system/components/popover.md",
  "image": "design-system/_images/popover/007-do-use-popover-for-context-menus.png"
 },
 {
  "type": "dont",
  "text": "Use popover for complex multi-step flows.",
  "section": "Best practices",
  "page": "Popover",
  "file": "design-system/components/popover.md",
  "image": "design-system/_images/popover/008-dont-use-popover-for-complex-multi-step-flows.png"
 },
 {
  "type": "do",
  "text": "Place the progress bar with context.",
  "section": "Best Practices",
  "page": "Progress bar",
  "file": "design-system/components/progress-bar.md",
  "image": "design-system/_images/progress-bar/008-do-place-the-progress-bar-with-context.png"
 },
 {
  "type": "dont",
  "text": "Place the progress bar without context.",
  "section": "Best Practices",
  "page": "Progress bar",
  "file": "design-system/components/progress-bar.md",
  "image": "design-system/_images/progress-bar/009-dont-place-the-progress-bar-without-context.png"
 },
 {
  "type": "do",
  "text": "Use the progress bar for tasks.",
  "section": "Best Practices",
  "page": "Progress bar",
  "file": "design-system/components/progress-bar.md",
  "image": "design-system/_images/progress-bar/010-do-use-the-progress-bar-for-tasks.png"
 },
 {
  "type": "dont",
  "text": "Use the progress bar for loading states, use the skeleton or spinner instead.",
  "section": "Best Practices",
  "page": "Progress bar",
  "file": "design-system/components/progress-bar.md",
  "image": "design-system/_images/progress-bar/011-dont-use-the-progress-bar-for-loading-states.png"
 },
 {
  "type": "do",
  "text": "Use the functional variants according to their semantic meaning.",
  "section": "Best Practices",
  "page": "Progress bar",
  "file": "design-system/components/progress-bar.md",
  "image": "design-system/_images/progress-bar/012-do-use-the-functional-variants-according-to.png"
 },
 {
  "type": "dont",
  "text": "Use the functional variants for decorative purposes or against their intended semantic meaning.",
  "section": "Best Practices",
  "page": "Progress bar",
  "file": "design-system/components/progress-bar.md",
  "image": "design-system/_images/progress-bar/013-dont-use-the-functional-variants-for-decorati.png"
 },
 {
  "type": "caution",
  "text": "Avoid adding too many steps to the stepped progress bar.",
  "section": "Best Practices",
  "page": "Progress bar",
  "file": "design-system/components/progress-bar.md",
  "image": "design-system/_images/progress-bar/014-caution-avoid-adding-too-many-steps-to-the-stepp.png"
 },
 {
  "type": "do",
  "text": "Use promo card either with header or footer.",
  "section": "Best Practices",
  "page": "Promo card",
  "file": "design-system/components/promo-card.md",
  "image": "design-system/_images/promo-card/015-do-use-promo-card-either-with-header-or-foo.png"
 },
 {
  "type": "dont",
  "text": "Use both header and footer.",
  "section": "Best Practices",
  "page": "Promo card",
  "file": "design-system/components/promo-card.md",
  "image": "design-system/_images/promo-card/016-dont-use-both-header-and-footer.png"
 },
 {
  "type": "do",
  "text": "Use promo card which is fully interactive.",
  "section": "Best Practices",
  "page": "Promo card",
  "file": "design-system/components/promo-card.md",
  "image": "design-system/_images/promo-card/017-do-use-promo-card-which-is-fully-interactiv.png"
 },
 {
  "type": "dont",
  "text": "Use promo card which is only partially interactive.",
  "section": "Best Practices",
  "page": "Promo card",
  "file": "design-system/components/promo-card.md",
  "image": "design-system/_images/promo-card/018-dont-use-promo-card-which-is-only-partially-i.png"
 },
 {
  "type": "do",
  "text": "Use promo card only with one target.",
  "section": "Best Practices",
  "page": "Promo card",
  "file": "design-system/components/promo-card.md",
  "image": "design-system/_images/promo-card/019-do-use-promo-card-only-with-one-target.png"
 },
 {
  "type": "dont",
  "text": "Use multiple targets for promo card.",
  "section": "Best Practices",
  "page": "Promo card",
  "file": "design-system/components/promo-card.md",
  "image": "design-system/_images/promo-card/020-dont-use-multiple-targets-for-promo-card.png"
 },
 {
  "type": "do",
  "text": "Use the provided semantic tokens \"color/background-strong\" when using the inverted variant.",
  "section": "Best Practices",
  "page": "Promo card",
  "file": "design-system/components/promo-card.md",
  "image": "design-system/_images/promo-card/021-do-use-the-provided-semantic-tokens-color.png"
 },
 {
  "type": "dont",
  "text": "Use custom color.",
  "section": "Best Practices",
  "page": "Promo card",
  "file": "design-system/components/promo-card.md",
  "image": "design-system/_images/promo-card/022-dont-use-custom-color.png"
 },
 {
  "type": "caution",
  "text": "Avoid placing inverted promo cards on colored Blocks. or colored backgrounds",
  "section": "Best Practices",
  "page": "Promo card",
  "file": "design-system/components/promo-card.md",
  "image": "design-system/_images/promo-card/023-caution-avoid-placing-inverted-promo-cards-on-co.png"
 },
 {
  "type": "do",
  "text": "Use the same configuration for each row when placing them in a list of rows.",
  "section": "Best practices",
  "page": "Row",
  "file": "design-system/components/row.md",
  "image": "design-system/_images/row/008-do-use-the-same-configuration-for-each-row.png"
 },
 {
  "type": "dont",
  "text": "Mix the configurations for each Row when placing them in a list of rows.",
  "section": "Best practices",
  "page": "Row",
  "file": "design-system/components/row.md",
  "image": "design-system/_images/row/009-dont-mix-the-configurations-for-each-row-when.png"
 },
 {
  "type": "do",
  "text": "Leave sufficient spacing above the first row and below the last. Hide the divider for the first row.",
  "section": "Best practices",
  "page": "Row",
  "file": "design-system/components/row.md",
  "image": "design-system/_images/row/010-do-leave-sufficient-spacing-above-the-first.png"
 },
 {
  "type": "dont",
  "text": "Use no spacing below the last row. Show the divider for the first row.",
  "section": "Best practices",
  "page": "Row",
  "file": "design-system/components/row.md",
  "image": "design-system/_images/row/011-dont-use-no-spacing-below-the-last-row-show.png"
 },
 {
  "type": "do",
  "text": "Only use related content within a row.",
  "section": "Content guidelines",
  "page": "Row",
  "file": "design-system/components/row.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Combine content from different topics within a single row.",
  "section": "Content guidelines",
  "page": "Row",
  "file": "design-system/components/row.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use the search field only for searches. Use a text field for other types of input.",
  "section": "Best Practices",
  "page": "Search field",
  "file": "design-system/components/search-field.md",
  "image": "design-system/_images/search-field/010-do-use-the-search-field-only-for-searches.png"
 },
 {
  "type": "dont",
  "text": "Use a text field for searches.",
  "section": "Best Practices",
  "page": "Search field",
  "file": "design-system/components/search-field.md",
  "image": "design-system/_images/search-field/011-dont-use-a-text-field-for-searches.png"
 },
 {
  "type": "do",
  "text": "Use selection signifier to emphasize the interactivity and variant of selection tiles. They represent the selection tile's state.",
  "section": "Best practices",
  "page": "Selection tile",
  "file": "design-system/components/selection-tile.md",
  "image": "design-system/_images/selection-tile/010-do-use-selection-signifier-to-emphasize-the.png"
 },
 {
  "type": "dont",
  "text": "Use checkboxes or radio buttons within selection tiles. This creates confusion about the actual state and leads to errors.",
  "section": "Best practices",
  "page": "Selection tile",
  "file": "design-system/components/selection-tile.md",
  "image": "design-system/_images/selection-tile/011-dont-use-checkboxes-or-radio-buttons-within-s.png"
 },
 {
  "type": "caution",
  "text": "You can use other interactive components, such as links, inside selection tiles, but be careful of the overlaying touch areas.",
  "section": "Best practices",
  "page": "Selection tile",
  "file": "design-system/components/selection-tile.md",
  "image": "design-system/_images/selection-tile/012-caution-you-can-use-other-interactive-components.png"
 },
 {
  "type": "do",
  "text": "Use left or right sheet, if it is practical for the user to still see the context he came from.",
  "section": "Best practices",
  "page": "Sheet",
  "file": "design-system/components/sheet.md",
  "image": "design-system/_images/sheet/012-do-use-left-or-right-sheet-if-it-is-practi.png"
 },
 {
  "type": "do",
  "text": "Use the center sheet if you explicitly need horizontal space.",
  "section": "Best practices",
  "page": "Sheet",
  "file": "design-system/components/sheet.md",
  "image": "design-system/_images/sheet/013-do-use-the-center-sheet-if-you-explicitly-n.png"
 },
 {
  "type": "dont",
  "text": "Adjust the sheets width.",
  "section": "Best practices",
  "page": "Sheet",
  "file": "design-system/components/sheet.md",
  "image": "design-system/_images/sheet/014-dont-adjust-the-sheets-width.png"
 },
 {
  "type": "do",
  "text": "Use \"Zurück\" and a primary action if processes are represented using multiple sheets.",
  "section": "Best practices",
  "page": "Sheet",
  "file": "design-system/components/sheet.md",
  "image": "design-system/_images/sheet/015-do-use-zur-ck-and-a-primary-action-if-pro.png"
 },
 {
  "type": "dont",
  "text": "Stack Sheets on top of each other.",
  "section": "Best practices",
  "page": "Sheet",
  "file": "design-system/components/sheet.md",
  "image": "design-system/_images/sheet/016-dont-stack-sheets-on-top-of-each-other.png"
 },
 {
  "type": "do",
  "text": "If primary actions are offered for users to fulfill a task, a secondary action may also be offered to revert from the task.",
  "section": "Best practices",
  "page": "Sheet",
  "file": "design-system/components/sheet.md",
  "image": "design-system/_images/sheet/017-do-if-primary-actions-are-offered-for-users.png"
 },
 {
  "type": "dont",
  "text": "Use closing actions like \"Schließen\" in the action bar by itself. Rely on the different close interactions provided by the sheet instead.",
  "section": "Best practices",
  "page": "Sheet",
  "file": "design-system/components/sheet.md",
  "image": "design-system/_images/sheet/018-dont-use-closing-actions-like-schlie-en-in.png"
 },
 {
  "type": "caution",
  "text": "Hide the close button. It is still possible to close the sheet using other methods like browser-back or tapping the scrim.",
  "section": "Best practices",
  "page": "Sheet",
  "file": "design-system/components/sheet.md",
  "image": "design-system/_images/sheet/019-caution-hide-the-close-button-it-is-still-possi.png"
 },
 {
  "type": "dont",
  "text": "Use icons, that could be mistaken as a function.",
  "section": "Best practices",
  "page": "Sheet",
  "file": "design-system/components/sheet.md",
  "image": "design-system/_images/sheet/020-dont-use-icons-that-could-be-mistaken-as-a-f.png"
 },
 {
  "type": "do",
  "text": "Use the possible configuration of the skeleton.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/008-do-use-the-possible-configuration-of-the-sk.png"
 },
 {
  "type": "dont",
  "text": "Turn other elements like icons into skeletons or make your own skeletons.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/009-dont-turn-other-elements-like-icons-into-skel.png"
 },
 {
  "type": "do",
  "text": "Use simplified skeleton layouts.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/010-do-use-simplified-skeleton-layouts.png"
 },
 {
  "type": "dont",
  "text": "Display content detail 1:1 with a skeleton.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/011-dont-display-content-detail-1-1-with-a-skelet.png"
 },
 {
  "type": "do",
  "text": "Use skeletons for common content like images, text, buttons etc.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/012-do-use-skeletons-for-common-content-like-im.png"
 },
 {
  "type": "dont",
  "text": "Use skeletons for tooltips, snackbars or navigation etc.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/013-dont-use-skeletons-for-tooltips-snackbars-or.png"
 },
 {
  "type": "do",
  "text": "Use skeletons by itself.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/014-do-use-skeletons-by-itself.png"
 },
 {
  "type": "dont",
  "text": "Combine skeleton with a spinner.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/015-dont-combine-skeleton-with-a-spinner.png"
 },
 {
  "type": "do",
  "text": "Use the same shapes, dimensions, and border radiuses as those used in the content.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/016-do-use-the-same-shapes-dimensions-and-bor.png"
 },
 {
  "type": "dont",
  "text": "Do not use shapes, dimensions or border radiuses that differ from those used in the content.",
  "section": "Best practices",
  "page": "Skeleton",
  "file": "design-system/components/skeleton.md",
  "image": "design-system/_images/skeleton/017-dont-do-not-use-shapes-dimensions-or-border.png"
 },
 {
  "type": "do",
  "text": "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“.",
  "section": "Best practices",
  "page": "Skip link",
  "file": "design-system/components/skip-link.md",
  "image": "design-system/_images/skip-link/006-do-provide-a-header-skip-link-for-every-pag.png"
 },
 {
  "type": "dont",
  "text": "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.",
  "section": "Best practices",
  "page": "Skip link",
  "file": "design-system/components/skip-link.md",
  "image": "design-system/_images/skip-link/007-dont-don-t-provide-header-skip-links-on-pages.png"
 },
 {
  "type": "dont",
  "text": "Don’t place multiple skip‑link containers after each other.\nA skip link should never directly lead to another skip link.",
  "section": "Best practices",
  "page": "Skip link",
  "file": "design-system/components/skip-link.md",
  "image": "design-system/_images/skip-link/008-dont-don-t-place-multiple-skip-link-container.png"
 },
 {
  "type": "do",
  "text": "Place several header skip links inside one shared skip‑link container.\nUsers should encounter all consecutive skip link options in a single focus stop, not scattered across separate containers.",
  "section": "Best practices",
  "page": "Skip link",
  "file": "design-system/components/skip-link.md",
  "image": "design-system/_images/skip-link/009-do-place-several-header-skip-links-inside-o.png"
 },
 {
  "type": "do",
  "text": "Use in‑page skip links where they are practically helpful.\nApply them in sections that are long or repetitive.",
  "section": "Best practices",
  "page": "Skip link",
  "file": "design-system/components/skip-link.md",
  "image": "design-system/_images/skip-link/010-do-use-in-page-skip-links-where-they-are-pr.png"
 },
 {
  "type": "dont",
  "text": "Don’t overuse in‑page skip links.\nOnly insert them where they add real value; too many skip options create noise rather than accessibility.",
  "section": "Best practices",
  "page": "Skip link",
  "file": "design-system/components/skip-link.md",
  "image": "design-system/_images/skip-link/011-dont-don-t-overuse-in-page-skip-links-only-i.png"
 },
 {
  "type": "do",
  "text": "Show only one snackbar at a time. Replace the current snackbar when a new one appears.",
  "section": "Best practices",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": "design-system/_images/snackbar/010-do-show-only-one-snackbar-at-a-time-replac.png"
 },
 {
  "type": "dont",
  "text": "Allow multiple snackbars to appear at once or stack snackbars above each other.",
  "section": "Best practices",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": "design-system/_images/snackbar/011-dont-allow-multiple-snackbars-to-appear-at-on.png"
 },
 {
  "type": "do",
  "text": "If a \"Rückgänig\" or \"Wiederholen\" action is triggered another snackbar should follow to confirm the action.",
  "section": "Best practices",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": "design-system/_images/snackbar/012-do-if-a-r-ckg-nig-or-wiederholen-action.png"
 },
 {
  "type": "caution",
  "text": "If you already use a sticky component in your view be aware that the snackbar might overlap with it.",
  "section": "Best practices",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": "design-system/_images/snackbar/013-caution-if-you-already-use-a-sticky-component-in.png"
 },
 {
  "type": "do",
  "text": "Keep the label to one line, if possible.",
  "section": "Content guidelines",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use stylized text or inline links.",
  "section": "Content guidelines",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use a label that provides feedback on a user's action.",
  "section": "Content guidelines",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use a label that has advertising purposes e.g. sale or discounts.",
  "section": "Content guidelines",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use an action with the label \"Verwerfen\" or \"Schließen\", as the snackbar features it own close affordance.",
  "section": "Content guidelines",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use a label that contains critical system messages.",
  "section": "Content guidelines",
  "page": "Snackbar",
  "file": "design-system/components/snackbar.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use only one standalone spinner at a time.",
  "section": "Best practices",
  "page": "Spinner",
  "file": "design-system/components/spinner.md",
  "image": "design-system/_images/spinner/007-do-use-only-one-standalone-spinner-at-a-tim.png"
 },
 {
  "type": "dont",
  "text": "Use multiple standalone spinners at the same time.",
  "section": "Best practices",
  "page": "Spinner",
  "file": "design-system/components/spinner.md",
  "image": "design-system/_images/spinner/008-dont-use-multiple-standalone-spinners-at-the.png"
 },
 {
  "type": "do",
  "text": "",
  "section": "Switch vs. checkbox",
  "page": "Switch",
  "file": "design-system/components/switch.md",
  "image": "design-system/_images/switch/011-do.png"
 },
 {
  "type": "dont",
  "text": "",
  "section": "Switch vs. checkbox",
  "page": "Switch",
  "file": "design-system/components/switch.md",
  "image": "design-system/_images/switch/012-dont.png"
 },
 {
  "type": "do",
  "text": "Use Switches for on / off actions.",
  "section": "Best practices",
  "page": "Switch",
  "file": "design-system/components/switch.md",
  "image": "design-system/_images/switch/013-do-use-switches-for-on-off-actions.png"
 },
 {
  "type": "dont",
  "text": "Use Switches for toggling between opposite options.",
  "section": "Best practices",
  "page": "Switch",
  "file": "design-system/components/switch.md",
  "image": "design-system/_images/switch/014-dont-use-switches-for-toggling-between-opposi.png"
 },
 {
  "type": "dont",
  "text": "Nest switches.",
  "section": "Best practices",
  "page": "Switch",
  "file": "design-system/components/switch.md",
  "image": "design-system/_images/switch/015-dont-nest-switches.png"
 },
 {
  "type": "do",
  "text": "Use short, precise labels to describe the options.",
  "section": "Content guidelines",
  "page": "Switch",
  "file": "design-system/components/switch.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use overly descriptive labels.",
  "section": "Content guidelines",
  "page": "Switch",
  "file": "design-system/components/switch.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use on or off for the label.",
  "section": "Content guidelines",
  "page": "Switch",
  "file": "design-system/components/switch.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use Sentence case (Großschreibung) for labels.",
  "section": "Content guidelines",
  "page": "Switch",
  "file": "design-system/components/switch.md",
  "image": null
 },
 {
  "type": "do",
  "text": "",
  "section": "Tab bar vs. chips",
  "page": "Tab bar",
  "file": "design-system/components/tab-bar.md",
  "image": "design-system/_images/tab-bar/009-do.png"
 },
 {
  "type": "do",
  "text": "",
  "section": "Tab bar vs. chips",
  "page": "Tab bar",
  "file": "design-system/components/tab-bar.md",
  "image": "design-system/_images/tab-bar/010-do.png"
 },
 {
  "type": "do",
  "text": "Keep the labels short so they do not get abbreviated on mobile.",
  "section": "Content guidelines",
  "page": "Tab bar",
  "file": "design-system/components/tab-bar.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use the same type of words for all tab items (e.g. all nouns).",
  "section": "Content guidelines",
  "page": "Tab bar",
  "file": "design-system/components/tab-bar.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use static tags by default. Only use interactive tags when adding an info icon for legal reasons.",
  "section": "Best practices",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": "design-system/_images/tag/011-do-use-static-tags-by-default-only-use-int.png"
 },
 {
  "type": "dont",
  "text": "Make all tags interactive.",
  "section": "Best practices",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": "design-system/_images/tag/012-dont-make-all-tags-interactive.png"
 },
 {
  "type": "do",
  "text": "Use the colors according to the tag variants.",
  "section": "Best practices",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": "design-system/_images/tag/013-do-use-the-colors-according-to-the-tag-vari.png"
 },
 {
  "type": "dont",
  "text": "Use different colors than those in the tag variants.",
  "section": "Best practices",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": "design-system/_images/tag/014-dont-use-different-colors-than-those-in-the-t.png"
 },
 {
  "type": "do",
  "text": "Use tags to highlight content. Use them sparingly.",
  "section": "Best practices",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": "design-system/_images/tag/015-do-use-tags-to-highlight-content-use-them.png"
 },
 {
  "type": "dont",
  "text": "Clutter your layout with tags.",
  "section": "Best practices",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": "design-system/_images/tag/016-dont-clutter-your-layout-with-tags.png"
 },
 {
  "type": "do",
  "text": "",
  "section": "Content guidelines",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "",
  "section": "Content guidelines",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Do use concise labels on a tag, ideally 2 words or less.",
  "section": "Content guidelines",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": null
 },
 {
  "type": "dont",
  "text": "Use overly verbose labels.",
  "section": "Content guidelines",
  "page": "Tag",
  "file": "design-system/components/tag.md",
  "image": null
 },
 {
  "type": "do",
  "text": "Use short information describing the parent element.",
  "section": "Best practices",
  "page": "Toggletip",
  "file": "design-system/components/toggletip.md",
  "image": "design-system/_images/toggletip/010-do-use-short-information-describing-the-par.png"
 },
 {
  "type": "dont",
  "text": "Describe other elements or provide unnecessary information.",
  "section": "Best practices",
  "page": "Toggletip",
  "file": "design-system/components/toggletip.md",
  "image": "design-system/_images/toggletip/011-dont-describe-other-elements-or-provide-unnec.png"
 },
 {
  "type": "do",
  "text": "Use short information describing the parent element.",
  "section": "Content Guidelines",
  "page": "Tooltip",
  "file": "design-system/components/tooltip.md",
  "image": "design-system/_images/tooltip/007-do-use-short-information-describing-the-par.png"
 },
 {
  "type": "dont",
  "text": "Describe other elements or provide unnecessary information.",
  "section": "Content Guidelines",
  "page": "Tooltip",
  "file": "design-system/components/tooltip.md",
  "image": "design-system/_images/tooltip/008-dont-describe-other-elements-or-provide-unnec.png"
 }
]