If you design twenty pages before you lock the header, you will design the header twenty times. Forma makes that mistake expensive: each page is a real document. Shared chrome belongs in snippets.
Three files are enough for almost every site.
1. site-head — tokens and type
This snippet is <link> tags and a :root block. Not a framework. Not Tailwind unless you already live there.
:root {
--gold: #fcbe34;
--bg: #0a0a0b;
--text: #f5f5f7;
--muted: rgba(245, 245, 247, .62);
--stroke: rgba(255, 255, 255, .1);
--font-brand: "Chakra Petch", system-ui, sans-serif;
--font: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--nav-h: 3.6rem;
}Pick values from the mockup, not from habit. If the brand is navy and cream, those are the tokens. Every page that includes [[site-head]] inherits them.
2. site-header — the thing that repeats
Logo, nav, mobile toggle, the one CTA. Keep page-specific junk out. A blog link can be active when the path starts with /blog; that is a tiny script, not a new header per section.
Put the mark in the header as inline SVG if you want it to take currentColor. That is how this site’s gold logo stays gold on a dark bar.
3. site-footer — close the page
Legal line, feeds, admin, GitHub — whatever the site always ends with. Designers forget footers; clients notice.
Then the pages get simple
A new page is:
[[site-head]]
[[site-header]]
<main class="wrap">…this page only…</main>
[[site-footer]]Change the gold once. Rebuild HTML cache if it is on. Every derived file updates because a snippet save republishes the site.
That is a design system without a design-system product. HTML for structure, snippets for reuse, Twig only when a block needs data — recent posts, a loop, a condition. Not before.