Level 1, and the only component whose drawing is not made of system ink. The mark, an
8px gap, the wordmark. 221 placements on 105 painted screens, one face: a
<button> in the header and a <span> in the footer of every
screen, plus eleven signatures on the two plates that exist to name the brand. Written 2026-08-11 with the rename to Yonder, out of the two copies that were already
standing in header.css and footer.css.
The level and the reason for it stay on the atoms page. This page holds what the shelf has no room for, and for this component that is the state it was found in: one shape written down twice, in two files, in two ways, and only one of the two could follow a theme.
This is what the two component files declared until 2026-08-11, side by side. Both drew a mark before a wordmark; only one of them read a role.
header.css | footer.css | |
|---|---|---|
| the mark | background:url("...stroke='%23c99e3f'...") | background:var(--mark-logo) |
| in Vault, dark | #c99e3f | #c99e3f |
| in Daylight, light | #c99e3f, unchanged | #684f18 |
| the face | 7 declarations | the same 7, plus 5 undoing a button |
::first-letter | the colour it already had | the colour it already had |
A colour written inside a data URI is a value the theme cannot reach.
The shape is delivered as an image, the image carries its own ink, and no custom property is
consulted at paint time. That is why tokens.css carries the mark twice on purpose,
once per theme, and it is the one place in this system where a shape is deliberately written
down two times. The header's copy skipped that arrangement entirely and typed the dark theme's
brass into the rule, so on 105 screens in daylight the header wore a mark one step brighter
than the footer wore, and both were correct at night.
Nothing looked broken, and that is the point. The two marks are the full height of a page apart, so nobody compares them; a mark that renders is a mark nobody re-reads. This is the same shape of defect this folder has already paid for twice, a value written into the place that uses it rather than into the file that owns it, and both earlier ones were also found by asking where a thing is declared rather than by looking at it.
the header, 105 placements, a button that goes to the Events home
the footer, 105 placements, a span that goes nowhere and signs the block it opens
the plate signature, 11 placements, the same face as the footer
The third slot is the one that was here all along and was not wearing this
component. The brand tile (2 placements) and the SEO plate (9) each spelled "Yonder" by hand
in the body face at 13px with no mark at all, which made them the only two things in the product
that name the brand and the only two naming it wrong. They carry
class="logo bt-by" and class="logo seo-by" since 2026-08-14, and the
placement files kept only the rules that say where the lockup stands.
Three slots and TWO faces, and the line between them is what the lockup is
DOING. In the header it is a control in a 44px row, so it stays at the default 16px and
measures 86.1. Everywhere it SIGNS a block it runs at 20 and measures 95.6, FIXED at all
thirteen widths: the footer of every screen and the eleven plate signatures, 116 placements.
The size is a RATIO and not a second face - a slot writes
--logo-size:var(--text-20) and the mark box follows at 1.125 of the type, 18 to
22.5, with the gap and the tracking. At 16px the lockup measures 78.1, which is worth reading
against the header's published 86.1: 86.1 is that same lockup plus 4px of press padding on
each side, so the number had been carrying the slot all along without saying so.
The mark's ink is 17.08 per cent of its box in from each side, and that is
why this slot pulls left. The drawing is a 24x24 SVG that does not reach its own edges;
painted at 480px on a canvas and read for the leftmost pixel above 8 alpha, the ink runs 82 to
397 of 480. Centred in a row of its own, which is the header and the footer, that is correct.
Aligned against a COLUMN OF TYPE it is not, because the reader sees ink and the layout sees the
box: at the 22.5px box the mark started 3.84px to the right of the headline above it.
logo.css states the distance as --logo-bleed and spends none of it;
the three slots that align against type write margin-left:var(--logo-bleed).
Measured after, on both plates, at 390 and 1280, in Chromium and WebKit: the mark's ink lands
0.01px from the headline's left edge, eight readings out of eight. In the footer it lands
on the tagline's left edge exactly - 14.0 at 390, 40.0 at 900, 260.0 at 1280, against a tagline
at 14.0, 40.0 and 260.0.
The footer had the same defect in the other direction, and its own
stylesheet had promised the opposite in prose. .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, and thirty lines further down
footer.css 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. Measured over the whole footer at 390
and 1280, the lockup was the only text-bearing thing in it that was centred. A centring
with no majority is a leftover, from a phone footer that centred everything and has not for two
stages.
The two elements do not start from the same place, so the reset is part of
the face. A button arrives carrying the User Agent's ground, border, padding, font and
centring; a span arrives with none of them. If the reset stood in header.css the
two would be one face only for as long as nobody put them beside each other, which is what the
row above is for. It stands in logo.css and both elements start from nothing.
A press is the header's, not the logo's.
.logo-btn:active takes the quiet ground square-cornered, and it stays in
header.css along with the padding that carries the touch target, because the band
is where a finger lands. The footer's copy has no press, because a span is not pressable and
saying so twice would be the system inventing a state for an element that cannot have one.
A line rises, splits, and one branch is lit while the branch not taken stays at 30 per cent: the event, the two outcomes and the choice, in two strokes. Butt caps and a mitred shoulder, so it reads as something cast rather than something drawn, which is the whole argument of the visual system. With the name Yonder the same shape is also the Y, so the mark is a monogram and a fork at once and has to be explained as neither.
| value | what it is | why |
|---|---|---|
| 24 x 24 | the viewBox | the ink is 15.8 x 17 inside it, centred, so the drawing has its own margin and contain has something to fit |
| 18px | the box in the rule | the ink paints at about 12, which is the display face's ascender at 16px |
| 4.6 | the stroke | a band rather than a line: it holds its mass at 16px, where a 2.6 stroke starts to read as a hairline |
| .3 | the second branch | a stroke opacity inside the drawing, which is the one place in this system where quiet is allowed to be an opacity, because there is no text under it and no sweep reading its colour |
A mark taller than the letters beside it is an icon that has been put next to a word. And a mark shorter than them is a bullet. The box is sized to the ascender rather than to the line, which is why 18 and not 16 or 22.
the face, logo.css | the place, header.css and footer.css |
|---|---|
| the mark, the gap, the display face, the size, the tracking, the ink | the padding that carries the touch target in the band |
| the reset that makes a button and a span render identically | the press ground on the button |
white-space:nowrap, because a wordmark that wraps is two words | justify-content:center, because the footer brand block centres on a phone |
This is the same division the five marks took when they left
footer.css for iconbtn.css on 2026-08-06: a row describes where a
control sits and a component describes what it is. And the 44px touch floor is neither: it
is one rule in base.css keyed to the family, and it names .logo-btn,
which is why the button keeps that class rather than being renamed.
The brand mark keeps its own drawing and takes no system ink. It is not an icon, no glyph from the set may stand in for it, and it is the one component here that a shape census will file as a duplicate of something else every single time.
The colour lives in a token, not inside the drawing. A data URI cannot
read a custom property, so a themed mark is two files' worth of the same shape, declared beside
each other in tokens.css and edited together.
Never write the lockup in the file that places it. It stood in two files for as long as this system has existed, and the copy that had its colour typed in is the copy that stopped following the theme. A face in two places is a face that is right in one of them.
Never give the mark a size variant it does not wear, and on 2026-08-14 something asked. The rule was never "one size", it was "no size with no placement", and the stand already knows what a face with no placement looks like: four of the toggle's five. What the signature got is a RATIO and not a second face, so there is still one drawing and one proportion, and changing the proportion changes all 221 places at once.
Never restate an inherited value as a state. Both old copies
carried a ::first-letter rule setting the ink to exactly what the element already
had. It rendered nothing and read as a decision, which is worse than either.
The level and its reason: the atoms page. The
stylesheet: components/logo.css, two rules and the account of the two it replaced.
The mark itself: components/tokens.css, --logo-y and
--logo-y-dark. The places: header and
footer. The name and why it is Yonder:
../docs/decisions.md, 2026-08-11.