Machine Surface Footer

Updated 2 weeks ago

Style

Token references resolve from the active theme. The component never hardcodes a colour, font, or spacing value.

Token mapping

ElementToken
Footer background{semantic.surface-default}
Column/base-bar divider{semantic.border-subtle}
Body link text{semantic.ink-secondary}
Base-bar canonical-URL text{semantic.ink-tertiary}
Link hover / active state{semantic.interactive-primary}

Typography

Three distinct sizes carry the "this row is for machines" signal, from the recipe's own description: small monospace section headings (11px, uppercase), body links at 14px, and a muted monospace canonical-URL base bar at 12px. The monospace treatment is deliberate — it's the same visual cue a code block gives, applied to a whole footer band rather than an inline snippet.

Structure

Three columns (brand identity, machine surface, substrate provenance), each with an h2 heading and a plain link list, sitting above a single-line base bar carrying the canonical URL. No card, shadow, or border treatment on the columns themselves — the divider is the only visual separation from the rest of the page.

Not yet specified at this stub stage: recipe.json carries no spacing, border-radius, or motion tokens, and no explicit hover/pressed color table beyond the single interactive-primary link-state token above. A future non-stub revision should add these before the recipe is promoted out of status: "stub".

Live production reference

design.pointsav.com's own footer (app-privategit-design/templates/footer.html + static/tokens.css) implements the same three-part idea today, but with its own local naming: .ds-footer__col--mono / .ds-footer__col-title classes and --cds-footer-bg, --cds-footer-ink, --cds-footer-ink-muted, --cds-footer-link, --cds-footer-heading-size (0.6875rem = 11px, matching this recipe's heading size) custom properties — rather than this recipe's ps-machine-footer classes and {semantic.*} token references. It is evidence the pattern works in production; it is not itself an instance of this recipe. Reconciling the two — retrofitting the live footer onto this recipe, or vice versa — is open work.

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.