Design tokens in use

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.

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.

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.

  • Color tokens for text and icons have a contrast ratio of at least 4.5:1 to their underlying background.
  • Color tokens for backgrounds and borders achieve at least a 3:1 color contrast ratio, ensuring enough visibility and distinction between elements.

• 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

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.

Related topics

• Tutorial