Size

Documentation Index

Fetch the complete documentation index at: https://docs.cognite.com/llms.txt

Use this file to discover all available pages before exploring further.

​

Spacing

Spacing is the negative area between elements and components both horizontally and vertically. It is commonly controlled in code with gap, margin or padding. Every part of a UI should be intentional including the empty space between elements. The amount of space between items creates relationships and hierarchy.

​

Guidelines

​

Creating relationships

• Elements in a design that are near each other are seen as being meaningfully related. As more space is added between elements, their perceived relationship weakens.
• Space can also be used to denote groups of associated information. This creates content sections on a page without having to use lines or other graphical elements as a divider.

​

Creating hierarchy

• Elements that have more spacing around them tend to be perceived as higher in importance than elements that have less space around them.
• Elements that are set close to each other can be easily overlooked. Users may see the grouping but not process each individual item. Therefore, if you have an element or content of high importance on the page, consider giving it extra surrounding space to help it attract focus.

​

White space

• Empty space - also known as white space - is important in design. It can be used to break up sections on a page or to help create focus on certain element(s).
• White space helps with information processing; too much dense information can be disorienting or overwhelming for a user. Sections of a UI are allowed to be dense, but the whole page should not be crowded; there should always be enough white space to let the user’s eyes rest.

The Utility classes variable collection in Figma groups sizing utilities by name prefix (padding/…, margin/…, and so on). Each utility aliases a spacing, radius, or border-width primitive and resolves to a pixel value in the default mode. The tables below list those groupings.

​

Tokens

​

Padding

Applied as top, right, bottom, left padding within a component or UI element.

​

Margin

Applied as top, right, bottom, left margin outside of a component or UI element.

​

Size

Size is the vertical height of components and are used to create visual consistency across the system. Use size tokens to setup component’s height or as a reference to calculate the final size of the component. Each size has a prefixed height and name for easy reference. For example, our Button component is available in three sizes: small (28px), default - or medium - (36px), and large (40px).

​

Guidelines

​

Consistency across components

• Use the same size components consistently across similar components to maintain alignment, rhythm, and predictable behavior throughout the interface.
• This helps prevent visual noise and ensures that mixed components (like inputs and buttons) align cleanly in layouts.

​

Touch target best practices

• Always aim for a minimum touch target of 40-44px for tappable elements on mobile to meet accessibility guidelines and user comfort.
• If this is not feasible in height, ensure the width is wide enough to be easily accessible.

​

Variable height

• Some components don’t have a fixed height, so they can grow vertically and adapt to the amount of content they hold. In these components, padding is important to align on.

​

Corresponding radius

• Each size corresponds with a preferred radius value. This is because the size and corner radius are often proportional to one another and should scale accordingly, with the exception of rounded fully corner radii.
• For example, default Buttons and Inputs (36px h) always use an 8px corner radius. However, small Butons and Inputs (28px h) use a 6px corner radius.

​

Tokens

​

Width

Applied as a fixed width to a component, e.g., Button.

​

Min-width

Applied when a min width is set to a component or container, e.g., Dialog.

​

Max-width

Applied when a max width is set to a component or container, e.g., Dialog.

​

Height

Applied as a fixed height to a component, e.g., Button.

​

Min-height

Applied when a min height is set to a component or container, e.g., Textarea.

​

Max-height

Applied when a max height is set to a component or container, e.g., Textarea.

​

Radius

Corner radius (or radii) are the rounded corners in components.

​

Guidelines

• Radius size is dependent on the size, or height, of the component, with the exception of full rounded radii.
• When applying a radius to non-Aura components, consider the size and scale. Use a larger radius for larger components and a smaller radius for smaller components.
• Don’t mix radius styles (e.g., rounded and sharp within the same component or UI element) as it can create inconsistency and visual clutter.

​

Tokens

​

Stroke width

Stroke thickness (or border weight) is used sparingly across the system to maintain a clean, minimal visual style. When applied, stroke weight should reinforce hierarchy, clarity, and accessibility without introducing visual noise.

​

Guidelines

• Avoid strokes unless necessary for clarity, separation, or emphasis.
• When a stroke is required, use 1px for subtle borders or visual definition.
• Ensure the appropriate border token color is used when a stroke is applied to an element. This ensures enough color contrast.
• Use elevation and spacing first to define hierarchy—stroke should be a secondary tool.

​

Tokens