Skip to main content

About Strato Design System

  • Concept
  • 1 minute

Get started with Strato​

Dynatrace Apps are built with Strato, our design system of robust and reusable design tokens, components, icons, and patterns. Strato is the successor to Barista, the design system behind earlier generations of Dynatrace.

Strato helps you design and build powerful, user-friendly apps that perform and scale. In addition to the common building blocks you know from other world-class design systems, Strato provides advanced components and patterns that are tailor-made to deliver powerful and elegant observability, analytics, and visualization experiences in Dynatrace.

The Strato documentation is organized into different sections according to use. Below are some hints to help you navigate and use Strato effectively.

Foundations​

The pages in this section describe the design concepts, guiding principles, and characteristics that underpin the Strato design language.

Components and tokens​

Our reusable design tokens and components in React are rigorously tested and maintained. Use them in line with Strato Foundations and Patterns to create consistent, high-quality user interfaces and experiences. See Components, Design tokens, Geo, and Icons for all the possibilities.

Components preview​

Strato preview components let you explore and work with the latest developments and features, before they're officially released. Feature updates and fixes can be expected on a regular basis, as often as every two weeks. Breaking changes are possible once per quarter.

Patterns​

Our patterns are best practices for composing user interfaces and interactions. They help you create consistent and cohesive observability, analytics, and visualization experiences in individual apps and user journeys that touch multiple apps.

Versioning and releases​

We're always working to improve Strato for app creators like you. Use the following pages to stay informed about what's new in recent releases and what's coming in future releases:

  • Learn about Strato versioning, release cadence, support, and other topics that help you plan ahead.
  • See Release notes to read about the latest changes and what we’re planning for upcoming versions.

Install and maintain Strato​

Install the Strato packages with npm:

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

We strongly recommend updating Strato packages every two weeks to ensure you have all the latest features and fixes. Simply run the dt-app update command in your terminal to update all Strato packages at once:

npx dt-app update
Still have questions?
Find answers in the Dynatrace Community