Meaningfully direct attention differentiating entities from standard components.

App shape



FYQ2 target



The shape is one of the brand elements. However, too much emphasis can cause unnecessary distractions that could hinder people from completing their tasks efficiently. That’s why we removed circular shapes on standard components.

Maintaining proportions on smaller elements.

Maintaining proportions on smaller elements.

By default, the shapes in Ariane are rectangular with 8px rounded corners. This approach simplifies combining multiple elements in complex interfaces.

To ensure visual proportion when dealing with elements less than 24px in height, we use 4px rounded corners.

Related content

Purpose and meaning

We aim to use our visual resources purposefully rather than simply for aesthetics. This enables us to establish coherent guidelines that everyone can adhere to.

Have you ever pondered the reason behind the typical circular shape of avatars? Apple brought this into fashion when they launched AirDrop in 2011, aiming to distinguish individuals from other Finder elements.

Entities vs. non-entities inform our visual shape usage.

Entities vs. non-entities inform our visual shape usage.

To expand on that idea, we now use circular shapes to distinguish entities within the system from other components.

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

These components have a circular shape:

  1. Figures
  2. System Tags
  3. User Tags

Quality checklist

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



α · Design tokens

It uses Ariane design tokens.

α · 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.