You can use a global set of variables for typography, colors, borders, box-shadows, and spacings. This could be CSS variables, SASS, or Javascript variables in

You can use a global set of variables for typography, colors, borders, box-shadows, and spacings. This could be CSS variables, SASS, or Javascript variables in CSS-in-JS. Typography and colors are something almost everyone tries to keep within a bounded set, but spacings are often overlooked. If the designer has defined a clear set of spacings - like 8px for small, 24 for medium, and 48px for large, then we can build consistent interfaces by using that as a primitive. Button paddings will be $small-spacing, while sections can be separated by $large-spacing etc. The stylesheet at this point is just an application of all these base values to the HTML structure of the particular component, and that arrangement can be unique to each component depending on how its HTML is laid out. http://tachyons.io http://tachyons.io does this really well - @mrmrs_ has teased out a universal set of base values that can cover most designs, and has built out a complete UI kit out of it. There are many experience reports online, here's how DNSimple went about it - https://blog.dnsimple.com/2017/01/CSS-journey/ https://blog.dnsimple.com/2017/01/CSS-journey/.