Radius

Les radius Sirdata structurent les surfaces et indiquent leur niveau d’interaction. Ils doivent rendre les interfaces plus lisibles sans donner un aspect excessivement arrondi ou decoratif.

La forme suit le role : petits rayons pour les controles compacts, rayons moyens pour les surfaces produit, grands rayons pour les panneaux importants, et pill uniquement pour les elements dont la forme capsule porte un sens clair.

Principes

• Utiliser les tokens semantiques xxs, xs, sm, md, lg, xl et pill dans les composants.
• Garder les rayons plus petits dans les interfaces denses et les structures imbriquees.
• Reserver les grands rayons aux surfaces autonomes comme Card, Modal ou Filter panel.
• Utiliser pill pour Tag, pas pour toutes les cartes ou tous les controles.
• Eviter les valeurs arbitraires qui ne correspondent pas a l’echelle Figma.

Primitive scale

Les primitives expriment une valeur brute. Elles sont la source des tokens semantiques et ne doivent pas etre choisies directement dans une implementation produit quand un role existe deja.

Radius 2 --radius-2

2px var(--radius-2)

Details fins, indicateurs et petites surfaces techniques.

Radius 4 --radius-4

4px var(--radius-4)

Tooltip, items compacts et petites zones interactives.

Radius 6 --radius-6

6px var(--radius-6)

Valeur intermediaire issue de Figma, a utiliser seulement via un token composant.

Radius 8 --radius-8

8px var(--radius-8)

Inputs, tabs, filtres, tables et navigation.

Radius 12 --radius-12

12px var(--radius-12)

Surface moyenne ou carte compacte.

Radius 18 --radius-18

18px var(--radius-18)

Surface produit importante et detail de panneau.

Radius 20 --radius-20

20px var(--radius-20)

Valeur intermediaire pour compositions specifiques.

Radius 22 --radius-22

22px var(--radius-22)

Valeur intermediaire exportee depuis Figma.

Radius 24 --radius-24

24px var(--radius-24)

Cards, modals et panneaux larges.

Radius 30 --radius-30

30px var(--radius-30)

Grandes surfaces editoriales ou marketing.

Radius full --radius-full

999px var(--radius-full)

Capsules, boutons pill et tags.

Semantic radius

Les tokens semantiques reduisent le nombre de choix au moment de concevoir ou d’implementer un composant.

Token	Primitive	Usage recommande
--radius-xxs	--radius-2	Details fins et micro-surfaces
--radius-xs	--radius-4	Indicateurs et petites surfaces techniques
--radius-sm	--radius-6	Tooltip, petits boutons et sous-elements
--radius-md	--radius-8	Inputs, tabs, filtres, tables, navigation
--radius-lg	--radius-18	Surfaces produit importantes
--radius-xl	--radius-24	Cards, modals et panneaux principaux
--radius-pill	--radius-full	Buttons, tags et capsules

Component mapping

Les composants doivent consommer leurs propres tokens. Le mapping ci-dessous constitue la reference actuelle issue de la collection Components.

Composant	Token composant	Radius semantic
Button Small	--button-small-radius	--radius-sm
Button Medium / Large	--button-medium-radius, --button-large-radius	--radius-md
Card	--card-radius	--radius-xl
Input	--input-radius	--radius-md
Modal	--modal-radius	--radius-xl
Filter chip	--filter-chip-radius	--radius-md
Filter item	--filter-item-radius	--radius-sm
Sidebar item	--sidebar-item-radius	--radius-md
Table	--table-radius	--radius-md
Tag	--tag-radius	--radius-pill
Tooltip	--tooltip-radius	--radius-sm

Hierarchie des surfaces

Une surface enfant doit generalement avoir un rayon inferieur ou egal a celui de son parent. Cette progression rend l’imbrication plus naturelle et evite l’effet de cartes empilees sans hierarchie.

Exemple : une Modal en radius-xl peut contenir un Input en radius-md et un Tooltip en radius-sm. Une Card en radius-xl ne devrait pas contenir une autre Card visuellement identique sans raison fonctionnelle.

Les rayons ne remplacent pas l’espacement, la bordure ou l’elevation. Une surface doit rester identifiable meme lorsque son radius est discret.

Product vs Marketing

Product : privilegier sm, md et xl selon la densite. Les controles doivent rester previsibles et ne pas changer de forme selon la couleur produit.

Marketing : les grandes surfaces peuvent utiliser des rayons plus ouverts, mais la composition doit rester sobre. Ne pas transformer chaque section en carte flottante.

La couleur Audience, ABConsent ou ServerSide ne modifie pas le rayon. L’identite produit passe par les tokens de couleur, pas par une nouvelle geometrie.

Tokens CSS

:root {
  /* Primitives */
  --radius-2: 0.125rem;
  --radius-4: 0.25rem;
  --radius-6: 0.375rem;
  --radius-8: 0.5rem;
  --radius-18: 1.125rem;
  --radius-24: 1.5rem;
  --radius-full: 62.4375rem;

  /* Semantics */
  --radius-xxs: var(--radius-2);
  --radius-xs: var(--radius-4);
  --radius-sm: var(--radius-6);
  --radius-md: var(--radius-8);
  --radius-lg: var(--radius-18);
  --radius-xl: var(--radius-24);
  --radius-pill: var(--radius-full);

  /* Components */
  --button-small-radius: var(--radius-sm);
  --button-medium-radius: var(--radius-md);
  --button-large-radius: var(--radius-md);
  --input-radius: var(--radius-md);
  --card-radius: var(--radius-xl);
  --modal-radius: var(--radius-xl);
  --tooltip-radius: var(--radius-sm);
}

Do / Don’t

Do	Don’t
Utiliser les tokens semantiques ou composants.	Coder un radius arbitraire dans chaque composant.
Garder une progression claire entre parent et enfant.	Imbriquer plusieurs grandes surfaces avec le meme rayon.
Utiliser pill pour les elements capsules.	Utiliser pill pour toutes les cards et modals.
Garder les controles coherents entre produits.	Changer de geometrie selon Audience, ABConsent ou ServerSide.
Associer radius, bordure, spacing et elevation.	Compter uniquement sur les angles pour definir une surface.

Accessibilite

Focus visible : un rayon important ne doit pas couper ou masquer le focus ring. Utiliser un outline externe ou un shadow de focus coherent avec la forme du composant.

Cibles interactives : le radius ne determine pas la taille de la cible. Un bouton pill ou un icon button doit conserver une hauteur et une largeur suffisantes.

Contenu et clipping : eviter overflow: hidden uniquement pour suivre le radius si cela coupe un menu, un tooltip, un focus ring ou du contenu zoome.

Zoom et reflow : verifier les surfaces arrondies a 200 % de zoom. Le contenu doit pouvoir passer sur plusieurs lignes sans sortir du composant ni modifier sa hierarchie.

Contraste : une surface arrondie doit rester visible par sa bordure ou son contraste de fond. Le radius seul ne suffit jamais a distinguer deux zones.