Branding

The design goal: one value in docs.json rebrands the whole site. Add refinements only where you want them.

Colors

{
  "theme": {
    "colors": {
      "primary": "#0033A9",
      "accents": ["#00AFCC", "#E4E729"]
    }
  }
}

primary drives links, focus states, and brand moments across every component. Two optional companions tune dark mode: light (dark-mode emphasis) and dark (buttons and hover) — both fall back to primary, so most brands never set them.

Status colors restyle the callout components:

{ "theme": { "colors": { "status": { "info": "#2563EB", "warning": "#B45309" } } } }

Accents (up to four) exist for your own flourishes — section cards, gradients, product color-coding. Each accent n becomes three CSS variables available to any page or custom component: --color-accent-n, --color-accent-n-soft (a tinted fill), and --color-accent-n-grad-to (a gradient endpoint); the tinted -soft and -grad-to variants adjust automatically for dark mode.

Logo

{ "logo": { "light": "/logo/wordmark.svg", "dark": "/logo/wordmark-dark.svg" } }

The wordmark replaces the text site name in the header at a fixed height. Prefer an SVG with the full wordmark (icon-only marks read poorly at header scale). dark falls back to light when omitted.

Favicons — convention over configuration

Drop any of these into public/ and the right tags appear automatically — there is nothing to configure:

Fonts

The engine ships Figtree (a variable font) as part of its stylesheet — no font configuration, no layout shift, no external requests at runtime.

Social share images

Set a site-wide card with ogImage (an absolute path under public/). Individual pages also get generated OG images automatically — title and description composited at 1200×630 — so links to any page unfurl properly even without custom artwork.