Overriding Bulma’s initial variables

The new design comes with new brand colors, a second font Karla, and a bigger border radius. Using this new branding is straightforward: update their respective variables with their new values, and the changes will be reflected throughout the website.

In custom.scss, write the following:

// Initial variables
$turquoise: #5dd52a;
$red: #D30012;
$yellow: #FFF200;
$green: #24D17D;
$blue: #525adc;

$family-sans-serif: "Karla", BlinkMacSystemFont, -apple-system, "Helvetica", "Arial", sans-serif;

$radius: 5px;

Remember to add this before importing Bulma.

The colors have been updated, and the body font is now Karla.

All Bulma variables use the !default flag. It’s a Sass feature that means a variable’s value will be assigned a default value unless it has been assigned one before.

That’s why importing Bulma after having set the new variables still works, and the new brand colors are preserved.

...