Utopia SCSS library

By Trys Mudford

To assist developers using SCSS & Utopia, we’ve published utopia-core-scss. This library includes functions & mixins to calculate and generate Utopian type & space scales directly in SCSS.


  1. Install the package through npm
npm install utopia-core-scss
  1. Next, import the package into your SCSS file. The plugin won’t generate any code unless called. Use @use to namespace the functions and mixins.
@use 'node_modules/utopia-core-scss/src/utopia' as utopia;
  1. Finally, call the functions and mixins with the same values you know and love from utopia.fyi.
:root {
  @include utopia.generateTypeScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minFontSize": 18,
    "maxFontSize": 20,
    "minTypeScale": 1.2,
    "maxTypeScale": 1.25,
    "positiveSteps": 5,
    "negativeSteps": 2,

  $customClampValue: utopia.calculateClamp((
    "minWidth": 320,
    "maxWidth": 1240,
    "minSize": 16,
    "maxSize": 20,


There are four mixins:

The prefix for the custom properties can be altered, but defaults to step- for typography, and space- for space units. Space mixins can also supply usePx: true if you wish to disconnect space from browser text zoom preferences.

All mixins can be relativeTo:

  • container (cqi)
  • viewport-width (vw)
  • viewport (vi) ← this is the default.

Full documentation can be viewed on GitHub.


The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

Full documentation can be viewed on GitHub.

First published on 19 January 2024