Skip to main content

Design tokens

Tip

Refer to our design tokens list for an overview of the available tokens.

Design tokens are a way to store variables with self-explanatory and purpose-driven names. They host design attributes such as a color hex code, a font style, pixel amounts, or even Bezier coordinates for animations.

Design tokens: Anatomy

Each design token consists of 2 parts:

  • A distinctive label, such as Color.Text.Primary.Default
  • A corresponding value, such as #464DD2, 32px, or cubic-bezier(0.5,0,1,1)

Design tokens are essential for constructing and maintaining the layouts and components of our design system. They also provide building blocks for creating apps that match the look and feel of the Dynatrace platform.

Design tokens: Anatomy

The correct usage of our design tokens comes with the following benefits:

  • Efficiency: Design tokens expose pre-defined styles, eliminating the need to manually input values when building apps, such as color codes or pixel units. This speeds up the development process, minimizes errors, and reduces the need for back-and-forth communication to validate designs.

  • Consistency​: Design tokens align apps with the look and feel of the Dynatrace platform, resulting in a consistent, cohesive, and unified user interface.

  • Accessibility: Design tokens enhance inclusivity by addressing principles that enable apps to be used by a broader range of individuals.

  • Maintainability: Design tokens minimize duplication and redundancy, creating a codebase that's easier to maintain over time.

  • Theming: Design tokens support both light and dark themes. Learn more about themes.

Usage

To use design tokens in your app, you need to install the following package:

npm install @dynatrace/strato-design-tokens

Then import the design tokens depending on the needs of your custom styles as follows:

import Colors from '@dynatrace/strato-design-tokens/colors';

In the following example, you have a component styled using design tokens:

import React from 'react';

import Borders from '@dynatrace/strato-design-tokens/borders';
import Colors from '@dynatrace/strato-design-tokens/colors';
import Spacings from '@dynatrace/strato-design-tokens/spacings';
import Typography from '@dynatrace/strato-design-tokens/typography';

export const CustomComponent = () => {
return (
<div
style={{
display: 'grid',
gap: Spacings.Size32,
}}
>
<div style={{ display: 'grid' }}>
<h1
style={{
fontSize: Typography.Heading.Level1.Size,
fontFamily: Typography.Heading.Level1.Family,
fontWeight: Typography.Heading.Level1.Weight,
lineHeight: Typography.Heading.Level1.LineHeight,
margin: 0,
}}
>
Monitoring
</h1>
<p
style={{
fontSize: Typography.Subtitle.Heading.Level1.Size,
fontFamily: Typography.Subtitle.Heading.Level1.Family,
fontWeight: Typography.Subtitle.Heading.Level1.Weight,
lineHeight: Typography.Subtitle.Heading.Level1.LineHeight,
margin: 0,
}}
>
Monitored technologies
</p>
</div>
<div
style={{
padding: Spacings.Size16,
border: `${Borders.Width.Emphasized} ${Borders.Style.Default} ${Colors.Border.Success.Default}`,
borderRadius: Borders.Radius.Container.Default,
backgroundColor: Colors.Background.Container.Success.Default,
color: Colors.Text.Success.Default,
}}
>
Looking for container technology support? You can find them under the container monitoring page.
</div>
</div>
);
};

Naming convention

Design tokens: Naming

Our design tokens are established upon a consistent and descriptive naming convention that bridges the gap between name and purpose, creating a clear and memorable pattern for findability and ease of understanding when to apply a given token. It sets the way for finding options for a given use case, reducing the chance of errors or inconsistencies.

It's important to note that the naming convention is consistent for all tokens, but the categorization may vary depending on the token type.

Still have questions?
Find answers in the Dynatrace Community