Radius
Brand picks from a catalog. Boxes, controls, and chips are three jobs.
--radius-scale-* is the catalog. Components do not use it, except chips, which pin
--radius-scale-md so they do not inherit pill controls or ICS box radius.
Brand picks two: --brand-radius for boxes (rounded, rounded-md, rounded-lg)
and --brand-radius-control for buttons (rounded-control). rounded-lg is
brand-radius + 4px. rounded-full stays a circle.
Dry and Washi pick --radius-scale-md (8px) for box and control. ICS picks --radius-scale-full
on control (pills) and --radius-scale-xl on boxes. Switch them in the sidebar.
Consume
roundedrounded-lgrounded-controlrounded-full<div className="rounded-md" />
<button className="rounded-control" />
<span className="rounded-[var(--radius-scale-md)]" />Catalog
Off-limits to components. Brand points --brand-radius* at one of these.
--radius-scale-2xs--radius-scale-xs--radius-scale-sm--radius-scale-md--radius-scale-lg--radius-scale-xl--radius-scale-full| Token | Size |
|---|---|
--radius-scale-2xs | 0.125rem (2) |
--radius-scale-xs | 0.25rem (4) |
--radius-scale-sm | 0.375rem (6) |
--radius-scale-md | 0.5rem (8) |
--radius-scale-lg | 0.75rem (12) |
--radius-scale-xl | 1rem (16) |
--radius-scale-full | 9999px |
Stroke
Line weight derives from UI type weight. Set --brand-font-weight-ui only.
border-stroke is 1px at 400 and 2px at 600. ICS is 2px. Washi is 1px. Pair it
with border-border. Do not mix border (1px) with border-2.
border-stroke border-borderICS is 2px. Washi is 1px. Weight follows font-ui.
<div className="border-stroke border-border" />font-ui is the same weight, used on chrome, not a type-scale step. See
Tokens for how a look retunes the picks.