Design tokens

Use the design token reference tables to look up the default values of Strato design tokens. Relationships between the different reference tokens and their stored default values are mapped in the tables.

Get started

npm install @dynatrace/strato-design-tokens

Explore

Colors

Colors are essential for creating a cohesive and visually appealing design system. They help establish visual hierarchy, improve usability and reinforce our brand's identity.

Typography

Typography establishes content hierarchy in your app, and is a key aspect of shaping its readability. It plays a crucial role in how your app looks, feels, and effectively communicates content to users.

Spacings

Spacings define the distances between elements. Use to style gaps, paddings, and margins. The scale follows a non-linear progression that starts with an increase of 2px, grows to 4px, and finally 8px.

Borders

Borders provide style, width, and radius to the edges of an element.

BoxShadows

Box shadows are used to create the impression of elements being elevated above the background.

Elevations

Elevations determine the stacking order of items, the z-index.

Breakpoints

Breakpoints are used to adjust the layout and appearance of elements in the interface based on different screen sizes.

Animations

Animations enhance user experience by assisting users in focusing their attention, conveying spatial relationships, and expressing our brand's tone.