Show a thumbnail that represents an entity.




FYQ2 target


Figma component


Figures are the visual representation of an entity, like a person, a team, a project/workspace, a category, a maze, or a question block.

An entity is a distinct and independent existence: Person, item, object, thing, etc.

They have a rounded shape and a decorative background color.

Related content

How to use



A Figure component encompasses three different types of thumbnails:

  1. Icon to communicate core parts of the product and improve recognition.
  2. Initials to identify an entity that the user hasn't defined a picture for.
  3. Pictures are typically defined by people as their avatars.



Figures come in three sizes:

  1. Small (SM24px) for Dense layouts.
  2. Medium (MD32px) as the default size.
  3. Large (LG48px) when the Figure is the focal point, like a detail page.

Crop border

Cropped borders

Crop borders prevent image blending in stacked figure groups. It's False by default.



Use Badges in Figures to communicate the entity’s status in one of the semantic sentiments. It's False by default.

⛔️ Avoid changing the Badge’s default Size, Crop border, or position.

⛔️ Avoid changing the Badge’s default Size, Crop border, or position.

Badges are applied to Figures proportionally according to their parent’s size.

✅ Keep the Badge's default values.

✅ Keep the Badge's default values.

To keep the visual proportions of the component and its predictability.


Background colors are decorative, have no semantics, and don’t follow any set pattern. Its only function is to help differentiate between entities and provide a touch of color.

⛔️ Avoid using colors from the Semantic or RAW palettes.

⛔️ Avoid using colors from the Semantic or RAW palettes.

Semantic colors carry meaning, and might get changed in the future. Using RAW colors might lead into accessibility or usability issues.

✅ Leverage the Background's default decoration colors.

✅ Leverage the Background's default decoration colors.

We made a selection of our 500 colors, which are accessible pairs with Neutral000, and have enough visual weight.


Each Figure size includes Icons in predefined sizes to give them enough room to breathe inside their bounding box.

⛔️ Avoid changing the Icon’s default Size.

⛔️ Avoid changing the Icon’s default Size.

Sticking icons too close to their container drowns them out and makes the interface look busier.

✅ Keep the Icon's default values.

✅ Keep the Icon's default values.

White space will make the icons shine and make them easier to understand.

Quality checklist

This component passes the following requirements described in our Component lifecycle.



α · Design tokens

It uses Ariane design tokens.

α · Official assets

It uses the official Ariane assets (e.g., icons and illustrations) in one of the official sizes.

α · Accessible use of color

Its color contrast ratio is at least 4.5:1 for text and interactive areas.

α · Naming agreement

Its name is agreed upon and shared between design and development.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.