Skip to main content

About Strato Design System

  • Concept
  • 1 minute

Get started with Strato​

Strato is the design system for creating powerful, scalable apps in Dynatrace. Strato helps you build consistent, high-quality user experiences with design tokens, reusable React components, icons, and best practices.

Strato is the successor to Barista and powers the latest Dynatrace applications with a range of basic to advanced components tailor-made for observability, analytics, and data visualization experiences.

The Strato documentation is organized into focused sections to help you find what you need quickly:

Foundations​

Go to Foundations to learn about the core design principles and building blocks underpinning Strato's design language. Learn how layouts, navigation, interaction states, content, guided interactions, and other key elements work in Dynatrace UIs.

  • Essential for: Understanding Strato's design philosophy

Design Tokens​

Go to Design tokens to look up default values for Strato's colors, typography, spacing, borders, box shadows, elevations, breakpoints, and animations. Our design tokens ensure consistency and make scaling your apps efficient.

  • Essential for: Implementing consistent visual styling

Components​

Go to Components for rigorously-tested, flexible React UI components from buttons, overlays, and typography, to forms, tables, and much more. Code examples, properties, and usage guidelines are provided.

  • Essential for: Building powerful UIs efficiently

Data visualizations​

Go to Data visualizations for a comprehensive library of charts and geospatial maps. Visualize data with accuracy, elegance, and powerful functionality designed for observability and analytics use cases.

  • Essential for: Visualizing data effectively

Icons​

Go to Icons for icon libraries to represent actions, objects, and concepts throughout your app, and to learn about Dynatrace App icons.

  • Essential for: Visual communication in apps

Patterns​

Go to Patterns for best practices for composing user interfaces and experiences. Topics include how to indicate AI presence, app naming, app structure, filtering, and status indicators, among others.

  • Essential for: Creating consistent, cohesive user experiences

Versioning and releases​

Strato follows the semantic versioning framework and provides regular releases with new features, improvements, and fixes. Go to Strato versioning to learn more about our release cadence, lifecycle states, and support policy.

Stay informed​

Install Strato​

Install Strato packages with npm:

npm install @dynatrace/strato-components
npm install @dynatrace/strato-design-tokens
npm install @dynatrace/strato-geo
npm install @dynatrace/strato-icons

Maintenance​

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