Colours, fonts and CSS

Everything shared between pages lives in one place, so a change lands on all of them at once. The colours and fonts are the theme; the stylesheet and scripts are in Settings.

The theme

Theme is a row of its own in the rail, just above Settings. It holds two lists — Colors and Fonts — and every site starts with each entry named for the role it plays rather than for what it looks like:

Colours	Fonts
color-background, color-surface, color-text, color-muted, color-border, color-primary, color-primary-contrast, color-accent	font-body, font-heading

So a name says where it belongs — color-primary is the colour of the main button, whatever colour that happens to be this year — and changing its value changes everything that uses it.

A colour is picked with a colour picker, or typed in any form CSS accepts. A font is a typeface, from the system’s own or a web font, with the weights the site uses — and only those weights are downloaded.

How a stylesheet reads them

Every entry is also a CSS variable: --mb- and then exactly its name.

body {
  background: var(--mb-color-background);
  color: var(--mb-color-text);
  font-family: var(--mb-font-body);
}
.button {
  background: var(--mb-color-primary);
  color: var(--mb-color-primary-contrast);
}

That is the whole mechanism. Nothing applies a font by itself: a font is in use where the stylesheet names it, which is why a new site’s stylesheet already reads font-body and font-heading.

Adding a colour

Need a colour the theme does not have — a darker shade of the primary for text on a light background, say? Add an entry for that role rather than typing a hex value into a stylesheet:

Add a darker shade of our primary colour for headings, and use it.

A value typed straight into the CSS is one nobody finds the day the brand changes.

Settings: CSS and JS

Settings → CSS is the site-wide stylesheet — the rules every page gets.

Settings → JS is site-wide JavaScript, for the rare page that needs it.

There is no hidden stylesheet

Every rule your pages get is one you can read. There is no platform CSS underneath doing things you cannot see or override.

That matters when you ask for a change. “Make the headings smaller” works because the heading rule is in your stylesheet, in front of both of you — rather than buried in something neither of you can edit.

A new site starts with a short stylesheet written for it, which reads the theme’s fonts. It is yours: edit it, replace it, delete it.

Asking for changes

This is the usual way to change any of it:

Make the body text a bit larger and give the buttons more breathing room.

The AI edits the site CSS, which lands on every page. Ask for something on one page only and it writes that page’s own CSS instead. Ask for a new colour scheme and it changes the theme’s colours.

Renaming an entry

A stylesheet refers to an entry by its name, so renaming one means changing the stylesheet too — ask the AI and it does both in one go. Changing an entry’s value is always safe; that is what it is for.