Tile

The following page documents visual specifications such as color, typography, structure, and AI presence.

Element	Property	Color token
Container	background-color	`$layer` *
Text	text color	`$text-primary`

Base tile color

Clickable tiles have an available feature flag.

Element	Property	Color token
Container	background-color	`$layer` *
Text	text color	`$text-primary`
Border (feature flag)	border	`$border-tile` *
Icon	svg	`$icon-interactive`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Clickable tile color with the feature flag enabled

State	Element	Property	Color token
Hover	Container	background-color	`$layer-hover` *
Focus	Container	border	`$focus`
Disabled	Container	border	`$border-disabled`
	Text	text color	`$text-disabled`
	Icon	svg	`$icon-disabled`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Clickable tile interactive color with the feature flag enabled

Selectable tiles have available feature flags.

Element	Property	Color token
Container	background-color	`$layer` *
Text	text color	`$text-primary`
Border	border	`$border-tile` *
Icon	svg	`$icon-primary`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Selectable tile color with the feature flag enabled

State	Element	Property	Color token
Hover	Container	background-color	`$layer-hover` *
Hover selected	Container	background-color	`$layer-hover` *
		border	`$border-inverse`
Selected	Container	border	`$border-inverse`
Focus	Container	border	`$focus`
Disabled	Container	border	`$border-disabled`
	Text	text color	`$text-disabled`
	Icon	svg	`$icon-disabled`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Selectable tile interactive color with the feature flag enabled

Expandable tiles have an available feature flag.

Element	Property	Color token
Container	background-color	`$layer` *
	text color	`$text-primary`
	border	`$border-tile` *
Icon	svg	`$icon-primary`

Expandable tile color with the feature flag enabled

State	Element	Property	Color token
Hover	Container	background-color	`$layer-hover` *
Focus	Container	border	`$focus`
Disabled	Container	border	`$border-disabled`
	Text	text color	`$text-disabled`
	Icon	svg	`$icon-disabled`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Expandable tile interactive color without interactive elements and the feature flag enabled

Expandable tile interactive color with interactive elements and feature flag enabled

The default token for tile titles is $body-compact-01, although it can be customized as needed by product teams.

Element	Font-size (px/rem)	Font-weight	Type token
Title	14 / 0.875	Regular / 400	`$body-compact-01`

Element	Property	px / rem	Spacing token
Container	min-height	64 / 4	–
	min-width	128 / 8	–
Content	padding-top, padding-bottom	16 / 1	`$spacing-05`
	padding-left, padding-right	16 / 1	`$spacing-05`

Structure and spacing measurements for base tile | px / rem

Element	Property	px / rem	Spacing token
Container	min-height	64 / 4	–
	min-width	128 / 8	–
Content	padding-top, padding-bottom	16 / 1	`$spacing-05`
	padding-left, padding-right	16 / 1	`$spacing-05`
Icon	padding-top, padding-bottom	12 / 0.75	`$spacing-04`
	padding-left, padding-right	12 / 0.75	`$spacing-04`
	size	20px	–

Structure and spacing measurements for clickable tile with eth feature flag enabled | px / rem

Structure and spacing measurements for clickable tile with the feature flag enabled | px / rem

Element	Property	px / rem	Spacing token
Container	min-height	64 / 4	–
	min-width	128 / 8	–
Content	padding-top, padding-bottom	16 / 1	`$spacing-05`
	padding-left, padding-right	16 / 1	`$spacing-05`
Icon	padding-top, padding-bottom	16 / 1	`$spacing-05`
	padding-left, padding-right	16 / 1	`$spacing-05`
	size	16px	–

Structure and spacing measurements for selectable tile with feature flags | px / rem

Structure and spacing measurements for selectable tile with the feature flags enabled | px / rem

Element	Property	px / rem	Spacing token
Container	min-height	64 / 4	–
	min-width	128 / 8	–
Content	padding-top, padding-bottom	16 / 1	`$spacing-05`
	padding-left, padding-right	16 / 1	`$spacing-05`
Icon	padding-top, padding-bottom	16 / 1	`$spacing-05`
	padding-left, padding-right	16 / 1	`$spacing-05`
	size	16px	–
Link	padding-bottom	16 / 1	`$spacing-05`
	padding-left, padding-right	16 / 1	`$spacing-05`

Structure and spacing measurements for expandable tile with the feature flag enabled | px / rem

Percentage	XL 1600-1200	L 1200-992	M 992-768	S 768-576	XS 576-0
100%
1/2
2/3
1/3
1/4
1/6

The following are the unique styles applied to the components when the AI label is present. Unless specified, all other tokens in the components remain the same as the non-AI variants.

For more information on the AI style elements, see the Carbon for AI guidelines.

Element	Property	Token / Size
Tile:background	background-color	`$layer` *
	box-shadow	`$ai-drop-shadow`
	inner-shadow	`$ai-inner-shadow`
Linear-gradient:background	start	`$ai-aura-start`
	top	`$ai-aura-stop`
Linear-gradient:border	start	`$ai-border-start`
	stop	`$ai-border-stop`
AI label	size	mini

* Denotes a contextual color token that will change values based on the layer it is placed on.

Structure and spacing measurements for tile with AI presence

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Overview

Color

Base tile color

Clickable tile color

Clickable tile interactive state color

Selectable tile color

Selectable tile interactive state color

Expandable tile color

Expandable tile interactive state color

Typography

Structure

Base tile structure

Clickable tile structure

Selectable tile structure

Expandable tile structure

Proportions for grid

AI presence

Feedback