Osmo Scaling System (Starterkit)
# 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/