Colours and fonts

Each demo's look is controlled by a short theme block in src/demos/<demo>/demo.json. Change a hex value and every button, link, badge and section of that demo follows.

The theme block#

src/demos/restaurant/demo.json

"theme": {
  "primary": "#1f3d2b",
  "accent": "#c8a45a",
  "dark": "#111111",
  "light": "#f5f1ea",
  "text": "#4b5563",
  "heading": "#111111",
  "headingFont": "Playfair Display",
  "bodyFont": "Jost",
  "headingWeight": 600,
  "radius": "8px",
  "buttonRadius": "99px"
}

Setting	What it colours or controls
`primary`	Buttons, links, icons, active menu items, badges, the logo mark and sections with `"tone": "primary"`.
`accent`	Highlights: star ratings, “Most popular” badges, the second colour in gradients and progress bars.
`dark`	Dark sections (`"tone": "dark"`), the footer, photo overlays.
`light`	Light grey sections (`"tone": "alt"`) and card backgrounds.
`text`, `heading`	Body text and heading colours on light backgrounds.
`bg`	Optional page background (default white).
`headingFont`, `bodyFont`	Any family from Google Fonts, written exactly as on the site.
`headingWeight`	Heading boldness: `400` regular to `800` extra bold.
`headingTransform`	`"uppercase"` to capitalise every heading.
`headingSpacing`	Letter spacing for headings, e.g. `"-0.02em"` (tighter) or `"0.02em"`.
`radius`	Corner rounding of cards and images, e.g. `"0px"` (square) to `"24px"`.
`buttonRadius`	Corner rounding of buttons and inputs; `"99px"` makes pill-shaped buttons.
`logoMark`	Colour of the built-in logo mark (defaults to `primary`).

Defaults shared by all demos are in src/config/site.json → theme; a demo only needs the values it changes.

Readable text is automatic#

Text on primary and accent colours is chosen for you: white, unless white would be hard to read on that colour (less than 3:1 contrast), in which case it switches to near-black. So a yellow or lime primary automatically gets dark button text. To force a colour, set "onPrimary": "#ffffff" or "onAccent": "#000000" in the theme.

Fonts#

Type the family name exactly as Google Fonts shows it: "headingFont": "DM Serif Display". The build requests weights 400, 500, 600 and 700. Some fonts only have one weight (for example Bebas Neue, Anton, Marcellus); for those, tell Google Fonts what exists, or the font won't load:

JSON

"headingFont": "Bebas Neue",
"headingFontSpec": "Bebas+Neue"

headingFontSpec / bodyFontSpec is the part after family= in a Google Fonts link, e.g. "Merriweather:wght@400;700". For full control, paste a complete Google Fonts stylesheet URL into "fontsUrl".

Using a font that isn't on Google Fonts#

Put the font files in src/img/fonts/, add an @font-face rule to a new file src/scss/modules/_my-fonts.scss, and set headingFont/bodyFont to the family name you declared. Set "fontsUrl": "data:text/css," to stop the Google Fonts request.

Colour switcher schemes#

The palette button on the right of every demo lets visitors try other colours. The schemes come from the demo's colors list (up to 9, plus the default):

src/demos/restaurant/demo.json

"colors": [
  { "name": "Burgundy", "primary": "#7f1d1d", "accent": "#d4a24c" },
  { "name": "Midnight", "primary": "#1e3a8a", "accent": "#fbbf24", "dark": "#0b1020" }
]

See Demo and colour switchers to remove it from your live site.

Changing colours in the HTML files#

Each page has a small style block near the top of its <head>:

HTML

&lt;style&gt;
  :root { --primary: #1f3d2b; --accent: #c8a45a; --dark: #111111; --light: #f5f1ea; … }
&lt;/style&gt;

Change the values there. Because the block is on every page, use Replace in Files in your editor to change it everywhere, or delete these blocks and put one :root { … } rule at the end of assets/css/omnira.css. The available variables are --primary, --accent, --dark, --light, --text-color, --heading-color, --body-bg, --radius, --btn-radius, --heading-weight, --font-heading, --font-body, --on-primary and --on-accent. If you change fonts in HTML, also change the Google Fonts <link> in the head.

Section backgrounds (tones)#

Every section takes a "tone": "light" (white), "alt" (the light colour), "dark" (the dark colour) or "primary" (the primary colour). Text inside adapts automatically. Alternating tones is what gives a page rhythm.