Design tokens

Tokens reference tables can be used to look up Strato's default values of our design tokens. The tables map the relationship between the reference token and the stored default value.

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.