[Feature Request]: Design Standards and Design Tokens for Border Radius #3485
Description
Is your feature request related to a problem? Please describe
Different containers or UI need to have different radius border depending on the height
Eg: A shorter UI with the same radius would look like a circle compared and a taller UI would look like it’s less rounded
Describe the solution you'd like
Proposed Design Token + Standard Recommendations:
Design Token
• Radius / XS = 4px
• Radius / S = 8px
• Radius / M = 12px
• Radius / L = 16px
• Radius / XL = 24px
• Radius / Full = 9999px
Recommendations
S: < 40px height
M: 40–64px height
L: 64–120px containers
XL: Large surfaces
XS (4px) — Controlled Precision Tier
Usage intent: micro-structure, not primary interaction.
Allowed for:
- Dense UI (tables, compact tags)
- Inline status indicators
- Small data pills inside analytics views
- Tight system UI (admin tools, dashboards)
Not allowed for:
- Primary buttons
- Cards
- Major surfaces
Design note:
XS introduces sharpness. Overuse makes the interface feel rigid or dated.
Full (9999px) — Shape Modifier Tier This is not “extra rounded.” It changes the geometry category.
Use for:
- Pills
- Toggle tracks
- Circular avatars
- Progress indicators
- Badge capsules
Never use Full for:
- Cards
- Modals
- Content containers
Design note:
Full radius converts a rectangle into a capsule or circle. It is not part of the progressive rounding hierarchy.
Provide evidence this is a needed component
https://www.figma.com/design/UALWTZcD9jUN25BypgzAJr/DS-Share?node-id=23-171832&t=cu7bjTAAaJ1gBSa2-1
Describe alternatives you've considered
use the same border for everything and in development just use a % for all the UI containers
Do you have anything already created for this that we can use?
None
Are you currently using this proposal inside your own service
yes
Are you able to assist to bring the feature to reality?
None
Additional context
No response