Radii are the rounded corners in components. Lens components have built-in corner radius. Radii ties closely to the size of the component — as size increases, the radius value should too. Please adhere to using the radius token values for defining the corner roundness of a design element, such as frames, groups, or shapes.
Sizes
Our system is built around a base unit of 8px. The 8px base unit also forms the basis of our token names. Every token is a multiple of the base unit with the number suffix representing the percentage of the base unit.
For example:
100 is 100% of the size of the base unit, therefore represents 8px.
200 is 200% of the size of the base unit, therefore represents 16px.
| size | corner radius (px) |
|---|---|
none | 0 |
50 | calc(0.5 * var(--lns-unit, 8px)) |
100 | calc(1 * var(--lns-unit, 8px)) |
150 | calc(1.5 * var(--lns-unit, 8px)) |
175 | calc(1.75 * var(--lns-unit, 8px)) |
200 | calc(2 * var(--lns-unit, 8px)) |
250 | calc(2.5 * var(--lns-unit, 8px)) |
300 | calc(3 * var(--lns-unit, 8px)) |
round | calc(999 * var(--lns-unit, 8px)) |