The library uses CSS clamp() functions together with EM units to make the entire system scale fluidly and automatically across different screen sizes.
At the core of the system is a spacing variable called Fluid Base. This variable is the foundation for the entire scaling system, and all spacing, layout, and typography values uses it in some way.
clamp(0.9rem, 0.65rem + 0.85vw, 1.3rem)
This means:
- 0.9rem → the minimum size
- 0.65rem + 0.85vw → the preferred fluid value
- 1.3rem → the maximum size
Because this variable controls the global scale of the project, you should be careful when changing it, since even small adjustments will affect spacing, containers, typography, and component sizing throughout the entire library.
If you inspect the Section, Container or typography variables, you’ll notice that they all reference Fluid Base directly or indirectly.
The typography Base variable also uses Fluid Base as its foundation. Since most elements are sized using EM units, they automatically inherit this scaling behavior, making the entire interface responsive and proportionally scalable by default.
If you customize or create additional sections and elements, using EM for paddings, margins, gaps, text sizes etc is highly recommended.