Closes every page: the logo and the promise, the full site map, the legal links, the two calls to action, this site's DESIGN.md and its system, and the type licences.
Organism · stable · v1.0.0 · owner: Site system lead · contract 19 of 20 points (open: figma)
Do and don't
Do: English
Rendered by footer.ts
Shown live at the top and the foot of this page.
The map and the legal links.
Do: Japanese
Rendered by footer.ts
Shown live at the top and the foot of this page.
Japanese tagline and the English-only note.
Don't: Marketing in the footer
Rendered by footer.ts
Shown live at the top and the foot of this page.
The footer is a map, not a pitch.
Don't: An ink footer
Rendered by footer.ts
Shown live at the top and the foot of this page.
Under the saffron call to action it would make two fields touch (D-SITE-002).
Rules
Rule
Why
Check
The footer stands on cotton.
The saffron call to action is a field; an ink footer under it made two fields touch. On cotton, the join gets the woven edge like every other (D-SITE-002, D-SITE-009).
Not applicable: The footer does not mark the current page; the header does.
visited
Not applicable: Footer links keep one colour.
expanded
Not applicable: Does not open.
Tokens
Part
Token
root.background
--cotton
text.color
--ink; secondary --ink-2
rule.top
--rule-hair --line
--footer-field-bg-cotton
var(--cotton)
--footer-field-fg-ink
var(--ink)
--footer-field-fg-2-ink-2
var(--ink-2)
--footer-padding-space-12
var(--space-12)
--footer-padding-space-10
var(--space-10)
--footer-gap-space-10
var(--space-10)
--footer-grid-template-columns-columns
var(--columns)
--footer-gap-grid-gap
var(--grid-gap)
--footer-margin-top-space-5
var(--space-5)
--footer-gap-space-9
var(--space-9)
--footer-gap-space-8
var(--space-8)
--footer-font-type-small-strong
var(--type-small-strong)
--footer-margin-bottom-space-5
var(--space-5)
--footer-gap-space-2
var(--space-2)
--footer-padding-space-2
var(--space-2)
--footer-font-type-small
var(--type-small)
--footer-margin-top-space-11
var(--space-11)
--footer-gap-space-4
var(--space-4)
--footer-margin-top-space-6
var(--space-6)
--footer-padding-top-space-7
var(--space-7)
--footer-border-top-rule-hair
var(--rule-hair)
--footer-padding-top-space-9
var(--space-9)
--footer-background-field-bg
var(--field-bg)
--footer-color-field-fg
var(--field-fg)
--footer-color-field-fg-2
var(--field-fg-2)
--footer-border-top-field-fg
var(--field-fg)
Layout
Aspect
Value
breakpoints
Required review at 390, 768, 1024 and 1440 px; execution is not implied by this declaration; columns stack under 768 px; the wrap keeps a 16 px gutter on phones.
wrapping
The map is a grid of five columns at 1440, three at 1024, two at 768, one at 390.
textExpansion
Japanese runs 20 to 40% longer; headings break between phrases (jaBreaks) and blocks grow downwards.
Spacing and rhythm
Aspect
Value
internal
One padding: --space-section-sm (D-SITE-005).
external
Last on the page.
rhythm
On cotton after the saffron call to action; the composer puts the woven edge at the join (D-SITE-009).
Motion
Aspect
Value
None
No intrinsic element animation. The optional claude-entrance consumer profile may translate below-fold structure once (20px, --dur-weave, --ease-enter, --stagger); reduced motion disables it. This preserved baseline entrance is separate from element playback.
Runtime and reuse
Render-only element; mount any registered child enhancements separately. Preserve required Site CSS, fonts, responsive and locale rules from nativeElement.
Accessibility passport
Aspect
Value
role
a landmark or list, as stated in its parts
name
Its visible text
keyboard
Links and buttons inside, in reading order.
focus
The --focus ring on every link and button inside.
screenReader
Read in source order; decorative weaving is aria-hidden.
contrast
Ink on cotton 14:1; text on every dye field 4.5:1 or better (checked by check-brand).