COMPONENTS / FOOTER

Footer

Page close: one hairline, one mono row. Identity on the left, colophon on the right. It states facts — typefaces, tracking policy, copyright — and offers at most one or two quiet links. No link farms, no newsletter box.

VERSION1.0.0

TOKENS6 CONSUMED

CONTRASTUI LABEL

DEPENDENCIESNONE

01 / LIVE INSTANCES — ALL STATES

THE PAGE FOOTER BELOW IS THE LIVE INSTANCE

DEFAULT

CASEWORK — COMPONENT LIBRARY SET IN IBM PLEX SANS & JETBRAINS MONO
STATIC HTML · NO TRACKING · © 2026

WITH LINK — HOVER FORCED

COMPONENT — FOOTER TOKEN CONTRACT →

HOVER APPLIES TO LINKS ONLY. ALL OTHER STATES: N/A — A FOOTER HAS NO FAILURE MODE.

02 / ANATOMY — EXPLODED VIEW

01 RULE
--hair TOP — CLOSES THE PAGE

CASEWORK — COMPONENT LIBRARY

02 IDENTITY
--font-mono · --t1 · --fg-faint · INLINE-START

03 COLOPHON
FACTS ONLY · RIGHT-ALIGNED · LINE-HEIGHT 1.8

SET IN PLEX SANS & JB MONO
NO TRACKING · © 2026

FIG. F-01 — PADDING --s6 ALL ROUND. SPACE-BETWEEN; WRAPS TO A COLUMN ON NARROW VIEWPORTS.

03 / TOKENS CONSUMED

PROPERTYTOKENVALUE

FONT--font-mono / --t112PX

TEXT--fg-faint#908E87

RULE--hair1PX TOP

PADDING--s624PX

LINK / HOVER--accent#EF4E0B

LINE HEIGHT1.8COLOPHON STACK

04 / CODE — COPY-READY

<footer class="site-footer">
  <div class="site-footer__row">
    <span>CASEWORK — COMPONENT LIBRARY</span>
    <span style="text-align:right">
      SET IN IBM PLEX SANS &amp; JETBRAINS MONO<br>
      STATIC HTML · NO TRACKING · © 2026
    </span>
  </div>
</footer>

/* CSS — components.css / FOOTER */

05 / RESPONSIVE BEHAVIOUR

≥1024ONE ROW, SPACE-BETWEEN.

640–1023UNCHANGED.

<640WRAPS TO A COLUMN; COLOPHON STAYS RIGHT-ALIGNED OR DROPS TO LEFT — EITHER, CONSISTENTLY.

06 / ACCESSIBILITY

ELEMENT<FOOTER> LANDMARK (CONTENTINFO).

ARIANONE NEEDED.

FOCUSONLY LINKS TAKE FOCUS.

CONTRAST3.2:1 — 12PX MONO METADATA AT PAGE CLOSE; ANY LOAD-BEARING FACT ALSO LIVES IN PAGE CONTENT.