- AccessibilityIn our design system, we develop our components in alignment with the Web Content Accessibility Guidelines(WCAG) 2.1 level AA.2 pages
- App experienceIn today's digital landscape, apps are omnipresent and shape how we communicate, shop and organise our everyday lives.5 pages
- ColorThe base color system is divided into the following clusters at the base level:
- Design tokensDesign tokens are a set of standardized, reusable variables that store design decisions about colors, typography, spacing, and more.
- ElevationYou can use elevation to create depth and hierarchy in the user interface.
- Functional communicationFunctional communication describes the meaning carried by signals, states, colors and messages in the interface.
- IconsIcons are used for decorative purposes and to support affordance.2 pages
- IllustrationAll new illustrations are generated using Google Cloud Vertex AI Nano Banana Pro.2 pages
- InteractionInteractivity refers to the functional link between user input and system response.2 pages
- LayoutThe layout defines how elements are arranged on a frame.4 pages
- LogoA logo is a visual representation of a brand or app.
- MotionBy applying motion, we enhance usability, provide clear feedback, and enrich the overall interaction, making interfaces more intuitive and engaging for the user.
- NamingThere are two different ways of naming:
- ResponsivenessWe ensure that our views always react and optimize to the available space through adaptive and responsive behavior.
- TypographyThe typography is divided into headline, copy and display.
OTTO Design System
Foundations
Describe the basic principles and rules of the OTTO design system.
