Colours, fonts and menus

Colours live in Colour schemes, fonts and type size in Theme, menus in Menus. These three change the whole site’s look without touching code.

Change the colours

Open Colour schemes and the scheme to change. Each has eight colours:

content/schemes/base.json

{
  "name": "base",
  "background": "#ffffff",
  "surface": "#f5f4f8",
  "text": "#18161f",
  "textMuted": "#5a5766",
  "accent": "#4f2db8",
  "buttonBg": "#4f2db8",
  "buttonText": "#ffffff",
  "border": "#e2dfe9"
}

After editing, run pnpm contrast to be sure text stays readable: it checks text on backgrounds, text on buttons and the input edges of every scheme.

Warning

The base, soft and inverse schemes must always exist; don’t delete them. A section with no scheme uses base.

One section’s colours

To give one section other colours, pick another scheme in its Colour scheme field.

Change fonts and type size

Open Theme. Heading font and Body font: type the name of a font on fonts.google.com that supports Vietnamese, spelled exactly (for example Lora, Be Vietnam Pro); the field’s description lists the fonts already tried.

Extra weights and Width (wdth axis), under each font field: load more weights (400, 600 and 700 always load) or a width, for fonts that have that axis.
Base text size from 12 to 24 px, Type scale ratio from 1.05 to 1.6 (try 1.125, 1.2, 1.25 or 1.333).
Button style “Outline” turns every button into an outline.
Favicon: upload a square image to replace the tab icon made from the brand’s first letter.

Danger

Only pick weights and widths the font has on fonts.google.com. Ask for one it lacks and the whole font is lost: the text falls back to the default font.

Change the brand name

Open Theme → Brand → Business name. The name shows in the header, the footer and the tab title; a name written inside a page’s text is edited on that page, in both languages.

Edit menus

Open Menus → vi/main or vi/footer (then the en copy). Each item has a Label, a Liên kết (Link) and at most one level of Children. The header and the footer’s link columns pick a menu by its file name (main, footer) in their Menu field.

Link to a page of the site as /gioi-thieu; the site adds /en for the English copy and the final / itself.