Overview
Source: ./src/documentation/getting-started/introduction.mdx
Introduction
The OTTO Design System provides the building blocks and documentation to support both designers and developers building the otto.de frontend.
Info
For design documentation and UX guidelines, visit the onboarding guide for designers.
Skip to:
Core principles
The OTTO Design System is built on principles that ensure consistency, accessibility, and a great developer experience:
- Framework-agnostic: Web Components ensure broad compatibility with any JavaScript library or framework. Built with Svelte, TypeScript, and Vite for modern tooling and up-to-date frontend practices.
- Minimal breaking changes: Better encapsulation of implementation details reduces the effort required when components are updated. Components are user-friendly and customizable with easy integration into any project.
- Accessibility: All components comply with WCAG Level AA, including keyboard navigation, screen reader support, and reduced motion preferences. Components use semantic HTML, ARIA attributes, and proper focus management. Refer to the Accessibility documentation for detailed guidelines.
Design foundations
The design system provides foundational elements that ensure visual consistency and scalable styling across otto.de.
Design tokens
Design tokens are standardized, reusable variables that store design decisions about colors, typography, spacing, shadows, and more. They serve as the single source of truth for visual properties and support theming, including dark mode.
Refer to the Use design tokens documentation for usage examples and the Design tokens overview for all available tokens and their values.
Theming
Light and dark themes are supported through design tokens that automatically adapt to the active theme. Switch between themes to provide users with their preferred visual experience.
Refer to the Theming documentation for more details.
Fragments
Fragments are utility classes for common styling patterns. Explore the available fragments: Border radius, Color, Gap, Grid, List, Shadow, Spacing, Typography, and Visually Hidden.
Semantic weights
The design system uses a consistent numbering scheme for all size and intensity variants.
The number represents the size or intensity variant, where 100 is always the default semantic size.
Higher numbers indicate larger or stronger variants, while lower numbers indicate smaller or weaker variants.
Developer experience
The design system includes features that enhance the development workflow:
- IDE support: Autocompletion for component names, attributes, and enum values is available in VSCode and JetBrains IDEs. Refer to the IDE support for setup instructions.
- SEO optimization: Components support SEO best practices with light DOM href attributes and link masking. Refer to the SEO optimization techniques for implementation details.
- Visibility tracking: Built-in visibility tracking allows you to track when components become visible in the viewport. Refer to the Visibility tracking documentation.
Demo page
Explore all components on one page in the OTTO Components demo page.
This demo page is primarily used for snapshot testing, ensuring that the components render correctly and that no visual regressions occur. Use the demo page to:
- Get a quick overview of all components
- Test cross-browser compatibility
- Verify that changes to the Components library work as expected
- Test components in combination with other components