Layout

Apps on the Dynatrace platform are diverse and complex. Nevertheless, they should share the same fundamental layout patterns to guarantee a consistent user experience and convey familiarity to the user. The following layout guidelines provide a set of tools and standards that you can use to structure your app and ensure a joyful, accessible, and responsive experience.

Responsive layouts

A responsive layout ensures that your app's content adjusts to fit the screen size of the device used to access it. This is especially important given the wide range of devices users may use to access the platform, including mobile phones, tablets, and desktops.

Our grid and flex components are valuable tools for establishing a responsive layout that adapts to the user's screen size.

Grid

The grid component divides your content into rows and columns, creating a grid-like structure without visual styling. You can use the grid component to create a basic layout and apply your visual styling to achieve the desired look and feel.

Flex

The flex component allows you to lay out content vertically or horizontally to create flexible layouts that adjust to available space. It comes without visual styling. You can use the flex component to create a basic layout and apply your visual styling to achieve the desired look and feel.

Breakpoints

Our breakpoint tokens for mobile, tablet, desktop and widescreen displays allow you to create layouts tailored to the specific needs and unique characteristics of each type of device:

• Mobile: 0 - 640px
• Tablet: 641px - 960px
• Desktop: 961px - 1920px
• Widescreen: 1921px - ∞

Minimum width

While most Dynatrace users view the product on desktop screens, your app also has to work on smaller screens, offering the same features and functionalities. The minimum viewport width we're targeting is 320px, which complies with WCAG 2.1 requirements. Depending on your app's target audience and complexity, consider optimizing your app for tablet and mobile users.

Centered versus full-width layouts

Both centered and full-width layouts can be effective in different situations. The right choice will depend on the specific needs of your app.

Centered layouts

Centered layouts restrict the width of the main content and center it on the page, allowing users to focus on the content. Use this type of layout when your app has a lot of content to read, such as text-heavy articles or documentation.

When going for a centered layout, we recommend restricting the main content to 960px, which corresponds with our breakpoint token for the maximum width of tablet screens.

Full-width layouts

Full-width layouts don't restrict the width of the main content, allowing users to see as much data as possible at a glance. Use this type of layout in data-heavy apps where the primary focus is displaying large amounts of data.

Establishing visual hierarchy

A clear visual hierarchy in your app helps users to understand the relationship between user interface elements and how content is logically structured. Additionally, it helps guide users' focus on what's essential and scan information.

Base

All content is placed on your app's background, the base.

Surfaces

Surfaces serve as the primary means to structure your content. To learn more, visit surface component documentation.

Visual characteristics

• Surfaces have rounded corners.
• Surfaces have a background color.

The design tokens reflect this with dedicated surface background colors and border radii.

Elevation

Surfaces are the only elements that can have an elevation level and thus overlay other content.

Each elevation level serves a different purpose:

1. Flat: By default, surfaces are flat and have no shadow.
2. Raised: Raising a surface means it will draw more attention than its surrounding elements and should only be used sparingly.
3. Floating: A floating surface overlaps other content.

All elevation levels are visualized with box shadows which are dedicated design tokens.

Composition

Surfaces have an inset spacing of 24px or 16px for dense layouts. In cases where space is minimal, such as menus and overlays, you can apply a minimum inset of 4px. Content within surfaces can't fill the entire parent's width; There will always be a minimum of 4px inset spacing. You need to use our spacing tokens when applying inset spacing.

Interactivity

You can use surfaces as interactive, clickable elements, which means the whole surface can trigger an action. Surfaces communicate a change in their interaction state (rest, hover, active, and drag) with a change in their elevation level.

There are dedicated box shadow design tokens for the rest, hover, active, and drag states of surfaces.

Containers

Containers highlight essential information that's supposed to stand out from other surrounding content and, if needed, can convey a semantic meaning to the user. To learn more, visit container component documentation.

Visual characteristics

• Containers have rounded corners.
• Containers have a background color.
• Containers have a surrounding border.

The design tokens reflect this with dedicated container background colors and border radii.

Semantics

You can style containers in five different colors; each color variant can communicate different levels of importance.

1. Neutral: The default container color is neutral, which may appear multiple times on a page.
2. Primary: The primary color can communicate important messages to the user. They should be used sparingly and only appear once per page at most.
3. Success: The success color informs the user that an action or operation was successful.
4. Warning: The warning color informs the user that something is about to go wrong and their attention is required.
5. Critical: The critical color informs the user that something went wrong and their immediate attention is required.

All background colors for the different container color variants exist as dedicated design tokens.

Emphasis

Each container color variant comes in three different levels of emphasis:

1. Default: The default emphasis level.
2. Emphasized: The emphasized emphasis level provides more contrast to the background and, thus, draws attention to an element.
3. Accent: The accent emphasis level contrasts the background most, bringing heightened attention to an element. Use the accent level sparingly throughout the user interface.

All background colors for the different container emphasis levels exist as dedicated design tokens.

Composition

Containers have an inset spacing of 16px. You need to use our spacing tokens when applying inset spacing.

You can split containers into different sections to create more complex layouts. To establish sections, separate them with a divider that spans the parent container's full width. Additionally, you may use a different emphasis level to establish a better visual separation.

Interactivity

While we don't encourage it, you can make containers interactive, clickable elements. Doing this means that the whole container will trigger an action. Containers communicate a change in their interaction state (rest, hover, active, and drag) with a change in their border color.

Fields

Fields allow you to highlight or group small amounts of content or data visually. They represent the most atomic parts of your user interface. If needed, they can convey a semantic meaning to the user.

Visual characteristics

• Fields have rounded corners.
• Fields have a background color.

The design tokens reflect this with dedicated field background colors and border radii.

Semantics

You can style fields in five different colors; each color variant communicates a different level of importance to the user.

1. Neutral: The default field color is neutral, which may appear multiple times on a page.
2. Primary: The primary color can communicate important messages to the user. They should be used sparingly and only appear once per page at most.
3. Success: The success color informs the user that an action or operation was successful.
4. Warning: The warning color informs the user that something is about to go wrong and their attention is required.
5. Critical: The critical color informs the user that something went wrong and their immediate attention is required.

Emphasis

Each field color variant comes in three different levels of emphasis:

1. Default: The default emphasis level has a transparent background.
2. Emphasized: The emphasized emphasis level provides more contrast to the background and, thus, draws attention to an element.
3. Accent: The accent emphasis level contrasts the background most, bringing heightened attention to an element. Use the accent level sparingly throughout the user interface.

Composition

Fields have an inset spacing of 12px or smaller, highly dependent on the use case. You need to use our spacing tokens when applying inset spacing.

Interactivity

Fields are the primary means for interactive, clickable elements. Fields communicate a change in their interaction state (rest, hover, active, and drag) with a change in their background color.

Background colors for the rest, hover, and active states are dedicated design tokens.

Dividers

Dividers allow you to visually separate your app's content without adding background color. They're essential if you want to avoid drawing the user's attention to any content specifically but still establish a clear separation between groups of content.

Be aware that dividers can introduce unnecessary visual clutter if used too often. This means that before you consider using a divider to separate your content, try to separate it by using (more) space between elements.

Nesting of surfaces, containers, fields, and dividers

The nesting of surfaces, containers, fields, and dividers allows you to create more complex layouts.

1. Base: All visual layout elements (surfaces, containers, fields, and dividers) can be placed on your app's background, the base.
2. Surfaces: can hold containers, fields, and dividers.
3. Containers: can hold fields and dividers.
4. Fields: can hold dividers.
5. Dividers: can't hold any elements.

Each of these elements can't contain instances of themselves, which means that a surface can't hold another surface, a container can't hold another container, and a field can't hold another field.

Spacing

Before considering using our visual layout components, be aware that spacing is essential in establishing your app's visual hierarchy and guiding users' attention. The proximity between elements communicates a relationship of elements. Users will subconsciously look for patterns and cues to form connections between related and unrelated content to create a mental model of how information is structured.

You can use the following spacing guidelines as a starting point for your designs on desktop screens. However, different apps, screen sizes, or scenarios might have other requirements, and we encourage you to find the optimal spacings for your use cases.

To ensure visual consistency, we provide spacing tokens for all paddings, margins, and gaps. Don't use the spacing tokens for elements' width or height properties.

Vertical spacing

• Vertical spacing between groups of user interface elements is 32px.
• The default vertical spacing between user interface elements is 16px.
• Vertical spacing between closely related user interface elements is 8px.
• Vertical spacing between closely related text is 4px.
• Vertical spacing between user interface elements in lists is 0px.

When a divider is present to separate groups of content, use half of the spacings’ values before and after the divider. You need to use our spacing tokens when applying vertical spacing.

Vertical spacing for typography

Vertical spacing between the following text styles is always 4px:

• Display and subtitle
• Heading and subtitle
• Heading and body text

For any other scenario, use the default spacings mentioned above. You need to use our spacing tokens when applying vertical spacing for typography.

Horizontal spacing

• Horizontal spacing between groups of user interface elements is 32px.
• The default horizontal spacing between user interface elements is 16px.
• Horizontal spacing between closely related user interface elements is 8px.
• Horizontal spacing between closely related user interface elements in dense layouts is 4px.

You need to use our spacing tokens when applying horizontal spacing.

Inset spacing

Inset spacing refers to paddings and margins that you apply to your elements.

• Inset spacings for the outermost layer in your layout are at least 48px or 16px in dense layouts.
• Inset spacings for surfaces are 24px or 16px for dense layouts.
• Inset spacings for containers are 16px.
• Inset spacings for fields are 12px or smaller, depending on the use case.

You need to use our spacing tokens when applying inset spacing.

Use at least one smaller spacing token for top or bottom insets when text borders an element's outer top or bottom bounds to ensure visual balance in layouts.