Overview
Applying shape
Tokens
- Corner shapes range from fully rounded to square
- You can customize shape for each top, bottom, start, or end corner of a container
- Circular and pill shapes should be have a radius of 100% rounded
- Every component uses variables from the dimensions defined in the Figma Library
Shapes & corner radius
Atmosphere uses a size-based scale with seven styles. Styles are assigned to components based on the desired amount of roundedness. Corner radius for square-cornered shapes are set to “none”, slightly rounded shapes are “extra-small,” while entirely rounded shapes are “full.”
By default, all elements and components use the rounded shape family. Most values are expressed in absolute measurements, except for the full style which is expressed in percentage.
