Skip to content
Triargos Design

Shape

Radius follows the role: a control by its height, then popups, cards, dialogs and the page panel. Nested corners stay concentric: inner = outer − inset.

Roles

Write the role, not the step. Tune each in Customize; every component follows.

rounded-control-xs4px · Controls 16–20px: checkbox
rounded-control-sm8px · Controls 24–28px
rounded-control10px · Controls 32–36px
rounded-control-lg12px · Controls and fields 40–44px
rounded-popup16px · Menus, popovers, selects, tooltips
rounded-card20px · Card shell, Alert
rounded-dialog20px · Dialogs, sheets
rounded-panel20px · The page panel

Concentric

The outer surface sets --outer-radius and --outer-inset; what sits inside takes rounded-inner.

Cardrounded-card · p-1 → rounded-inner

Header action, aligned with row actions

Content, 4px in
Alertrounded-card · action 6px in
The trial ends on March 31.

Control heights

Controls that sit in one row share a height and a radius.

40 · 44pxrounded-control-lg · Button, Input
32 · 36pxrounded-control · Button sm, xs
20 · 24pxrounded-control-sm · Badge
smdefault

Steps

The fixed scale the roles pick from. 2px apart up to 12, then 4.

rounded-xs2px
rounded-sm4px
rounded-md6px
rounded-lg8px
rounded-xl10px
rounded-2xl12px
rounded-3xl16px
rounded-4xl20px
rounded-5xl24px