Design

• Concept
• 1 minute

Create app UIs for Dynatrace with the Strato Design System. This section presents our comprehensive UI toolkit of Strato design tokens and React components, along with the essential design language foundations and proven UX patterns so you can efficiently build apps that deliver great user experiences.

About Strato Design System

Get started designing and developing with Strato, the Dynatrace design system.

Strato versioning and releases

Learn about Strato versioning, the release cadence, and maintaining Strato in your development environment.

Foundations

App icon helper

Tools and guidance to create and upload app icons.

App naming

Guidelines and patterns for naming apps.

Support dark and light themes

Guide to support dark and light themes in your Dynatrace App

Data visualization

Information about the data formats and data types supported in the Strato Design System

Design token basics

Working with design tokens to create better Dynatrace Apps efficiently.

Functional icons

Functional icons for use in Dynatrace Apps.

Guided interaction

Onboard users to your app and provide a better user experience with in-product help based on sound guided interaction principles.

Interaction states

Information about exclusive and additive interaction states

Layout

Guidelines to establish consistent and user-friendly layouts for Dynatrace Apps

Navigation

Guidelines for establishing consistent navigation patterns in Dynatrace Apps

Components and tokens

Components

The Strato design system offers a collection of reusable React components. Each

Components preview

The Strato design system offers a collection of reusable React components. Each

Design tokens

Tokens reference tables can be used to look up Strato's default values of our

Geo

The Strato Geo Package provides a main component that renders a map with various

Icons

The Strato Design System is also providing an Icon library, which can be used

Patterns

App structure

Patterns to build consistent base structures for Dynatrace Apps.

Filtering

An overview of Strato Design System filter components, patterns, and best practices to create effective filtering experiences for datasets of all sizes and complexities.

Forms and validation

Guidelines to create forms in Dynatrace Apps.

Loading and saving

Guidelines to show loading or saving states in a system.

Status and health

Guidelines to show health states visually in a Dynatrace App.