Footer
The orange band that ends every page: headline, status, and the three contact buttons. Included by BaseLayout.
- Content comes from
src/data/site.ts(headline, status, location, colophon, links). The Contact page shows the same content on the Home hero photo, so it turns the footer off (BaseLayout footer={false}). - Headline: always two forced lines, never wrapping inside a line.
- Layout: stacked on mobile with the buttons in one row; from 744 the text fills the width and the buttons stack on the right. The colophon (with the link to this design system) shows from 744.
| Token | Base | ≥ 390 | ≥ 640 | ≥ 744 | ≥ 1024 | ≥ 1920 | Note |
|---|---|---|---|---|---|---|---|
--footer-py | var(--grid-margin) | var(--spacing-3xl) | var(--spacing-edge) | ||||
--footer-main-gap | var(--spacing-xl) | var(--spacing-2xl) | headline → status | ||||
--footer-top-direction | column | row | mobile: text, then buttons | ||||
--footer-top-gap | var(--spacing-lg) | var(--spacing-sm) | |||||
--footer-links-direction | row | column | mobile: one row … | ||||
--footer-links-justify | space-between | start | … spread edge to edge | ||||
--footer-links-align | start | end | |||||
--footer-colophon-display | none | block | mobile: © only | ||||
--type-footer-heading-size | 56px | 64px | 96px | 128px | 160px |