Level 3, a shell, and the biggest single block in the product: 1,432px tall on a phone, which is nearly four screens of a 390x900 window. 105 footers, 420 columns and 1,785 links on 105 painted screens. Measured 2026-08-08 in a browser, at 390 and 1280, in both pointer branches.
Every part of it, both themes, the markup the 105 screens ship. 17 elements against the product's 161 until 2026-08-09: the trust strip, the brand block, the social marks, the language menu, Popular right now and the legal line were all missing, and the measurements below were taken on a footer none of them was in.
A footer is almost entirely links, so 33 of them are on this page and every
one is the screen's own, re-rooted to ../ui-visual/. Verbatim, 31 resolved to
nothing and two, Cookie preferences, resolved 200 to
ui-kit/cookie-consent.html, this stand's page ABOUT the banner rather than the
screen the product's footer means. The name is the product's and the prefix is the stand's, which
is the only thing that can differ when the same markup stands in a different folder.
The level and its reason stay on
the organisms page. What needs the room here is the one
structural fact about this component that reaches into three other files: the footer stands
OUTSIDE .app-case, and every rule the system scoped to that wrapper stopped at
its edge. There are no such rules any more. 415 selectors carried the wrapper until
2026-08-08 and one file carries it now, because a region of the product that the system's own
rules cannot reach is not a fact about the region.
The language picker in this footer is a disclosure, exactly like the sort menu
in the feed. Its press used to be written HERE rather than in the filters file, and the
comment said why in one line: the footer stands outside .app-case, and both shared
rules were scoped to that wrapper, so the footer's copy of the control was reached by
neither. That line left this file on 2026-08-08 with the rule it explained. A private
copy buys back the one state somebody noticed and leaves the rest missing: this control kept its
press and never got a hover, and stood at 90x27 against its twin's 152x35.
That is the whole of backlog 58, discovered here for one control and never generalised. Measured across 106 screens: 105 of 193 filter menus stand outside the wrapper and every one of them is this footer's. This file answered its own copy's hover and press by hand; the padding, the transition and the 8/20 box were never answered at all, so the footer's chooser renders 90x27 against 152x35 everywhere else.
A workaround written for one control is a defect nobody has counted. It is in the file, it works, and it hid the fact that 105 placements needed the same thing.
| at 390 | at 1280 | |
|---|---|---|
| the whole footer | 379x1432 | 1049x595 |
| the columns | 351 wide, stacked, 103 to 206 tall each | four at 120x206 |
| a popular link | 80x16, and 16 tall with a finger | |
| a legal link | 31 to 86 wide, 15 tall | |
| a social mark | 28x28, and 28x28 with a finger | |
The inset is the same one every band in the product uses, so the first footer column starts on the same x as the wordmark above it and the first card between them. That is the only thing this file says about horizontal placement.
Every link here is a nav row, and the footer is read on a phone as often as on a desktop, where the hover never fires. The ground alone is not enough in this block and the measurement is why: the system's pressed ground is 1.04:1 against the footer on graphite and 1.05:1 on chalk, which reads across a chip and disappears behind one line of small text. So the press carries the underline the hover brightens.
It is the same number and the same answer as the system links on 404 and 500. Two components, one measurement, one conclusion, and neither of them guessed.
The social marks were filed as navigation because they GO somewhere. Measured in a browser they are an icon button in every value a face has: the control ground, a hairline, a 10px corner, a centred flex box at 28 and an 18px mark, which is the atom's tile face exactly. They left on 2026-08-06.
A role is what a control means and a face is what it is, and this was the case that forced the distinction. The same correction settles load more: an action by role, a chip by atom.
What this file may still say about them is one line: the row is a flex line with an 8 gap.
Its own width query: 640 DESK. The whole footer turns at DESK: the top block goes from a column to a row with the brand pinned at 240px, and the link groups go from stacked to side by side. It is the largest single reflow in the system and it is one query, because the footer is a shell rather than a control.
A shell owns the band, the inset and the rows. It owns no control.
Where the ground cannot say "pressed", something else must. 1.04:1 is a state that exists in the stylesheet and nowhere on the screen.
Everything this footer links to has to exist on the map. That is not a
CSS rule and it is the biggest open thing about this component: 16 destinations are promised here
that the sitemap does not carry, on all 105 screens. docs/backlog.md 27 and 28.
This file promised in prose what one declaration was breaking, and both
lines had stood since the file was written. Thirty lines under the brand block it says "the
same inset as every other band, so the first footer column starts on the same x as the logo
above it". It did not: .footer-logo read justify-content:center, so
the lockup sat in the middle of a 240px brand column while the tagline and the language menu
under it were flush left, at 14 on a phone and 260 at 1280. Measured over the whole footer at
390 and 1280, the lockup was the only text-bearing thing in it that was centred;
.footer-trust is the other centred box and it is a row of three tiles, a different
kind of centring. A centring with no majority is a leftover, from a phone footer that
centred everything and has not for two stages. Gone 2026-08-14, along with the stretch that only
existed to give the centring something to centre inside: the lockup shrink-wraps now and stops
FILLING a column it was never using. ui-kit/docs/inventory.md, behaviour on
width.
And it is flush by its INK, not by its box. The mark's drawing stands
17.08 per cent of its own box in from each side, so a lockup aligned by its box is aligned about
4px wrong against a column of type. logo.css states that distance as
--logo-bleed; this file spends it. Measured after: the mark's ink lands on 14.0 at
390, 40.0 at 900 and 260.0 at 1280, against a tagline at 14.0, 40.0 and 260.0. The lockup also
runs at 20px here rather than the header's 16, which is the line between the two faces: a
control in a bar against a signature on a block. logo.
Never fix a scope for one control and stop. This file worked
around standing outside .app-case for its own language picker, and 105 placements of
the same control went on losing their rules for two more days. The workaround is gone and so is
the wrapper.
Never file a control by what it does. Five marks were navigation by role and an icon button in every measurable value.
Never promise a destination the map does not have. Sixteen labels, 105 screens, and eight of them are on no map at all.
The level and its reason: the organisms
page. The stylesheet: components/footer.css. The marks:
icon button. The chooser and the scope it misses:
filters. The trust plate above it:
trust bar. The destinations:
ia/docs/sitemap.md, and docs/backlog.md 27 and 28.