Introducing your own variables

While Bulma uses a single font family, the new design uses two. You need to create a new variable to store this second family.

After importing the fonts but before importing Bulma, add:

// New variables
$family-heading: "Rubik", BlinkMacSystemFont, -apple-system, "Helvetica", "Arial", sans-serif;

Until further notice, you will have to add the new Sass snippets just before the @import "node_modules/bulma/bulma"; line.

Rubik will be used as font for headings mainly. The other font families act as a fallback in case Rubik doesn’t load.

The design will also heavily use a new type of shadow. Since it’s going to be re-used a lot, it’s better to store it as a variable too:

$large-shadow: 0 10px 20px rgba(#000, 0.05);