Space scale
←Teutonic uses modular scale for sizing things. Sizes grow exponential not linear: smaller sizes have smaller steps and larger sizes have larger steps in between. The beauty is that you basically only need two values to control everyting: The starting point (base) and the multiplier (ratio). See the “Modular scale calculation” below to understand how it works. You can also skip the calculation part completly or in parts by aligning your own values to the vars directly.
See this A-List-Apart article to dive deeper into modular scale and some historical background. Teutonic has two modular scale spaces: One for spacing, which defines all the margins and paddings (this here) and one for typography (below). They basically work in the same way. In the original SCSS file you will find a switch to define how the calculation is done: $css-calc:true. Wuth the default set, the browser will do the calculations (which is some heavy lifting but works well). Also by default way, you can control the modular scale output by modifying the values directly. With css-calc set to false, SCSS will do the calc for you, less lifting in the browser, but harder to adjust later on.
_vars-space-scale.scss
Space base
↑ This is the smallest starting point from where it grows bigger. Something between .1rem and .4rem looks good.
Space ratio
↑ This is the multiplier defining how fast the space base should grow. Something between 1.5 and 3 looks good.
Space scale calculation
↑ This is how the space sizes are getting calculated in the browser using the --space-base and --space-ratio. It starts with the smallest value and get's bigger, from small step to larger steps. Using the modular scale is optional, you can also assign your own values to the variables from --space-xs to --space-xxl directly.