# How to use the scaling system in your project? 1. Input your artboard width: Start by entering the ideal size used in your design file. If your Figma frame size is 1440px, that's what you add on line 6 below. 2. Define a min and max breakpoint size at which the site should stop scaling. For example, if you want your site to keep scaling up infinitely, just set a very large number on line 8 below. 3. Define breakpoint scaling: Per common breakpoint (tablet, mobile landscape, and mobile portrait) we give you control over the ideal size, and again a min and max size. Notice how the container-max size is always 1px smaller than the previous breakpoint's container-min size. 5. Make sure your body has its font-size set to var(--size-font). Now you can use EM units on everything you'd like to scale. Join the waitlist → https://osmo.supply/

scaling,  system,  css,  designsystem,  typography,  osmo,  supply,  responsive,  starterkit