Maturity
Beta
FYQ2 target
Beta
Overview
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.
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.
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:
Quality checklist
This element passes the following requirements described in our Component lifecycle.
Maturity
Beta
α · 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.