About Strato design system
- Concept
- 1 minute
Get started with Strato
Dynatrace Apps are built with Strato, our design system of reusable design tokens, React components, icons, and patterns.
Strato helps you design and build powerful, user-friendly apps that perform and scale. The content in these sections will help you get the full benefit of Strato and use it as intended.
Foundations
These are core design concepts, guiding principles, and characteristics that underpin the Strato design system and shape design choices for Dynatrace products.
Design tokens
These code packages contain the visual properties or DNA of Strato, including its colors, fonts, spacing, motion, and other design characteristics. Design tokens support scaling and efficient updates, while ensuring consistent design.
Components and icons
These reusable React components and icons are the building blocks for Dynatrace products. Use them in combination with Foundations and Patterns to create consistent, high-quality Dynatrace experiences.
Patterns
Our patterns are best practices for composing user interfaces and interactions. They help us efficiently create consistent, cohesive Dynatrace experiences, within single apps and across multiple apps.
Install Strato
Install these Strato packages to access all the possibilities in your project.
npm install @dynatrace/strato-components
npm install @dynatrace/strato-components-preview
npm install @dynatrace/strato-design-tokens
npm install @dynatrace/strato-geo
npm install @dynatrace/strato-icons
Strato releases
Strato is continuously tested and improved. Stay informed about what's new and what's coming in Strato.