Change colours and fonts

Every colour, corner and shadow is a CSS variable. Override them in a file of your own.

Colours, corners, shadows and sizes are CSS variables in css/base/variables.css. Rather than editing that file, keep your changes in your own, so a template update doesn't overwrite them:

Create css/custom.css and set only the variables you want to change.
Link it on every page right after css/style.css, so its values win.

:root {
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-soft: rgba(79, 70, 229, .10);
  --primary-bg: #EEF2FF;
  --primary-text: #4338CA;
}

Change the brand colour variables together, so hover states, tints and text stay in tune. A few gradients use a fixed teal (#00B4D8, #0077B6); search for them to match your colour everywhere.

Fonts: the template uses Inter from Google Fonts. Swap the font link in the page head for another font and set it on body in custom.css.