Shared chrome demo
A new page inherits the entire design system for free.
This page defines no header, no footer, and no colors of its own. It renders the one shared BaseLayout, the one Header, the one Footer, and reads the same central tokens as the homepage. Change a single token or the shared Header, and this page updates with the rest of the site.
One header, one footer
Rendered from the shared Header.astro and Footer.astro through the single BaseLayout — never copied into the page.
Token-driven colours
Every colour, radius, button, and spacing value here comes from the same three-layer tokens the homepage uses.
Dark by default + toggle
The pre-paint theme boot and theme toggle live in the shared layout, so this page is dark by default and switches themes identically.
Buttons come from the shared component too.
This primary button is the exact same token-driven .btn--primary used across the site.