Before diving into layout and typography tokens, it's crucial to grasp the basic scaling concepts in Once UI.

Picture this: you design an attractive desktop landing page with large headlines, tall images, and a spacious layout. Next, you want to adapt this design for smaller screens.

The typical approach involves duplicating the design and modifying styles to optimize proportions for smaller devices. While this method is common in design, it leads to excessive code in development, negatively impacting performance and maintainability.

We can avoid this by defining smart patterns that automatically adjust for responsive design. A key step is to use flexible units instead of fixed pixels.