Border Radius & Width
A consistent corner-radius scale with three switchable theme modes — Square, Rounded and Pills — plus a matching stroke-width scale, that together define the border treatment of every component.
Radius Tokens
Eight semantic radius steps, mapped one-to-one to the LUSTER Figma Semantic Radius scale (border/radius). Each token resolves to a primitive px value in the Option Radius layer.
| Token | Value | Figma Variable | Use Case |
|---|---|---|---|
| --borderRadiusNone | 0px | border/radius/none | Flat surfaces, Square theme |
| --borderRadiusXs | 4px | border/radius/xs | Toggles, tabs |
| --borderRadiusSm | 8px | border/radius/sm | Cards, inputs, alerts, avatars |
| --borderRadiusLg | 12px | border/radius/lg | Buttons, logos, pagination |
| --borderRadiusXl | 16px | border/radius/xl | Sections, containers |
| --borderRadius2xl | 20px | border/radius/2xl | Meeting cards |
| --borderRadius3xl | 24px | border/radius/3xl | Extra-large containers |
| --borderRadius4xl | 40px | border/radius/4xl | Pills, fully-rounded avatars |
Radius Scale
The same swatch rendered at each radius step.
Theme Modes
Switching the radius theme re-skins every component for a different visual personality.
Border Width
Stroke widths from the LUSTER Figma Semantic Global border scale (border/width), sharing the same t-shirt naming as the radius scale.
| Token | Value | Figma Variable | Use Case |
|---|---|---|---|
| --borderWidthNone | 0px | border/width/none | No stroke |
| --borderWidthSm | 1px | border/width/sm | Default borders, dividers |
| --borderWidthLg | 2px | border/width/lg | Focus rings, emphasis |
| --borderWidthXl | 3px | border/width/xl | Active / selected states |
| --borderWidth2xl | 4px | border/width/2xl | Heavy emphasis, accents |
Component Applications
How each component's radius token resolves under the three theme modes, plus its default stroke width.
| Component | Square Token | Round Token | Pills Token | Border Width |
|---|---|---|---|---|
| Button | --borderRadiusNone 0px | --borderRadiusLg 12px | --borderRadius4xl 40px | — |
| Toggle | --borderRadiusNone 0px | --borderRadiusXs 4px | --borderRadius4xl 40px | --borderWidthLg 2px |
| Input Field | --borderRadiusNone 0px | --borderRadiusSm 8px | --borderRadius4xl 40px | --borderWidthLg 2px |
| Avatar | --borderRadiusNone 0px | --borderRadiusSm 8px | --borderRadius4xl 40px | --borderWidthLg 2px |
| Logo | --borderRadiusNone 0px | --borderRadiusLg 12px | --borderRadius4xl 40px | — |
| Palettes Color | --borderRadiusNone 0px | --borderRadiusSm 8px | --borderRadius4xl 40px | — |
| Alert | --borderRadiusNone 0px | --borderRadiusSm 8px | --borderRadiusLg 12px | --borderWidthLg 2px |
| Menu Item | --borderRadiusNone 0px | --borderRadiusSm 8px | --borderRadius4xl 40px | --borderWidthLg 2px |
| Image | --borderRadiusNone 0px | --borderRadiusLg 12px | --borderRadius4xl 40px | — |
| Meeting Card | --borderRadiusNone 0px | --borderRadiusSm 8px | --borderRadius2xl 20px | — |
| Card | --borderRadiusNone 0px | --borderRadiusSm 8px | --borderRadiusXl 16px | — |
| Tabs | --borderRadiusNone 0px | --borderRadiusXs 4px | --borderRadius4xl 40px | — |
| Pagination | --borderRadiusNone 0px | --borderRadiusLg 12px | --borderRadius4xl 40px | — |
Usage Guidelines
Apply radius tokens consistently across the product.
Switch all components to one theme mode for a cohesive look.
Don't use arbitrary radius values outside the scale.
Don't mix theme modes within the same interface.