Shape is the foundation for corner radius and border width across controls and surfaces. Company products use subtle rounding aligned with desktop UI conventions.
Three corner treatments are used across products. Each preview shows the same radius at narrow, medium, and wide widths.
| Preview | Name | Value | Usage |
|---|---|---|---|
|
|
Square | 0 | Sharp corners |
|
|
Default | 3px | Buttons, inputs, panels |
|
|
Pill | 9999px | Badges, tags |
Standard width is 1px for controls and dividers; 2px is reserved for focus, selection, and primary emphasis. Each preview shows the same border at narrow, medium, and wide sizes.
| Preview | Name | Value | Usage |
|---|---|---|---|
|
|
Divider | 1px | Section dividers, low-contrast separation |
|
|
Control | 1px | Inputs, buttons, control boundaries |
|
|
Focus | 2px | Focus ring, primary action, selection |
|
|
Active | 2px | Active control border, selected state |