Brand system

Platform mapping

The tokens are the one source for every surface. Each platform gets a copy of them; nothing loads from this site at run time. Copy the file, keep the --hs-* names, and record the brand version you copied.

Where the tokens and components go
Platform	Tokens	Components	Fonts
Drupal 7, hs_theme	Verbatim copy of `tokens.css` as `css/tokens.css`, first stylesheet in `hs_theme.info`	Copy the component CSS into the theme or a module; copy the HTML into templates and `hs_html_page` bodies	Theme hosts Mukta and Didot in `fonts/`
Laravel	Same `tokens.css`, loaded before the app CSS	Blade partials that copy the snippets	App hosts its own files
Sulu (Twig, later)	Same `tokens.css`	Twig includes that copy the snippets	App hosts its own files
Shopify theme	A `:root` block in an override CSS asset; Customizer colours set to the same hex values	Liquid snippets that copy the HTML	Upload as theme assets; Didot only if its licence covers the store
Zendesk Guide	A `:root` block at the top of `style.css`	Handlebars templates and article-body classes	Load from `document_head.hbs`; same Didot licence question

Drupal: hs_theme

sites/all/themes/hs_theme/css/tokens.css is a verbatim copy of /tokens.css. Change the brand repo first, then copy the file. Its first line says so.
The names are the same --hs-* properties, so component CSS copies over unchanged.
Theme CSS and module CSS use var(--hs-*), never a raw hex. #162351 is not a brand colour.
hs_html_page bodies (drafted by hs_mcp) use classes only: no <script>, no inline style. Start from a recipe. The page head is printed by the template, so the body starts at h2.
full_html turns a newline between inline elements into <br>. Keep each paragraph, card and link row on one line.
Article bodies use filtered_html without classes; .hs-prose on the template wrapper styles them.

Laravel and Sulu

Load the same tokens.css first, then the component CSS the app uses. /brand.css is the whole set in load order.
A component becomes a partial (Blade) or an include (Twig). Keep the markup and the classes; pass text, URLs and the PostHog cta values in.
Load a component script (/js/dialog.js and the others) only on a view that renders that component.

Shopify theme

The store runs a legacy, non-Online-Store-2.0 theme. It has no CSS custom properties: settings compile into hard-coded SCSS.
Theme settings (Customizer) carry colours only. Set them to the token values: navy #1f2f6e, deep navy #172456, action gold #faf053, honor gold #c9a227.
Everything else needs code: add one override CSS asset with the :root token block, then rules that use the tokens (pill buttons, gold and navy fills, cream sections).
Copy component HTML into Liquid snippets. Work on a duplicate of the live theme.
Mukta can ship (OFL). Didot needs a licence that covers the store domain.

Zendesk Guide

The help center runs a custom legacy theme, not Copenhagen. It has no brand variables: colours are hard-coded in style.css.
Put the :root token block at the top of style.css, then replace the hard-coded colours with var(--hs-*).
Load the fonts from document_head.hbs. The fonts the theme names today never load.
Article bodies need class-based callouts and tables instead of pasted inline styles. Inline styles beat theme CSS.
The Web Widget colour comes from Admin Center brand settings, not from the theme.
The theme settings panel and manifest.json were not visible in the audit; check them in the admin before you plan settings-only changes.

Fonts

Mukta (body) is under the SIL Open Font License. This site ships it with its licence file.
Didot LT Std (headings) is commercial. Each platform hosts it only where its licence covers that domain. Without it, --hs-font-display falls back to Hoefler Text, Garamond, Times New Roman, serif.
/brand.css holds no @font-face rules: each platform declares its own font files.