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. It has no link farm and 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.