Organism
Rail
The marking on a record that leaves the building. 5 instances across 5 screens, at the top of frame, and nowhere else.
The marking is a frame, not a banner, and this is the sticky half of it. A banner scrolls away, and somebody who arrives at a framed record by permalink and reads the middle of it must still know what they are reading. So the rail sticks and the border never leaves.
Inverted, and it is the loudest surface in the product. That is what a record leaving the building looks like: --bg-invert under --text-on-invert at 14.92 in dark, uppercase mono at .09em. Nothing else in Harrier is inverted across a full width. The .09em is one hundredth off its neighbour, one of the eight tracking values the typography page carries unresolved, and it is the only rule in the product using it.
Anatomy
What the bench is standing in. A 260px scrolling box, which is z4 on the entry route, holding a frame. Scroll it: the record moves and the marking does not. A bench with no overflow would have shown a bar sitting at the top of a box and proved nothing about the one property this component exists for.
.railthe marking. position:sticky; top:0, z-index:2, a wrapping flex row aligned on the baseline, inverted, uppercase mono at --size-xs with .09em of tracking- the marking itselfa bare text node and a
b: what this is, and the instant it was true. Three zones, and the count is the whole argument for why the closing line is a different component
.softthe qualifier, in the sentence’s own voice. Weight 400, sentence case, no tracking, and 72 per cent opacity. It says what the marking applies to, and it steps out of the uppercase register to do it.rail-outthe way out of the record. Pushed right, never wrapping, bordered in the rail’s own ink through currentColor rather than through a line token
Variants
| Axis | Value | Uses | The rule |
|---|
| none | no values | 5 | All five are the same marking. What changes between them is the sentence, and a sentence is content |
| position | no values | – | Prohibited, and it is the definition of the component. A static rail is rail-foot, which is a different component because it has zero zones rather than three. The splitting rule is the count of zones, not the drawing |
| emphasis | no values | – | Prohibited. There is nothing above inverted. This is already the loudest surface in the product, and a second level would mean one record leaves the building harder than another |
| tone | no values | – | Prohibited. A record that is partial, changed or beyond retention says so in the sentence, on four of the five screens. The marking does not change colour to grade how trustworthy the record is |
When to use it
At the top of a frame, once, on anything that will be read by somebody who was not in the room and does not have the console: a client summary, an exported log entry, a snapshot addressed with ?as-of. Never on a working surface.
Where she meets it. Rarely, and it is not really for her. The compliance requirement behind this product is that every Clerk action and every human override writes to an append-only log carrying the evidence snapshot as it stood at decision time, and this rail is what makes a printed or forwarded copy of that snapshot say so on its own. Months later somebody reads it without her, and the marking is the only thing that stops it being mistaken for the live case.
Rule and anti-rule
Do
AS IT STOOD
2026-08-22T04:14:05ZA record of what was known then. This is not the live case.Open the logWhat it is, when it was true, what it is not, and the way back to the live thing. Four readings in one line, and the line never leaves the top of the record.
Do not
Not at the bottom. That is rail-foot, and it is a different component rather than a variant: zero zones against three. It has no qualifier and no way out, because there is nothing below a record to leave to, and a second inverted bar would open the frame twice.
States
The rail has none. The way out is a link and carries the link’s. Point at Open the log, and tab into it: the ring is the global one and it lands on the rail’s own ink.
dark, shipped
AS IT STOOD 2026-08-22T04:14:05ZA record of what was known then. This is not the live case.Open the log
PARTIAL RECORD 2 of 9 signalsTwo sources are beyond retention. What is missing is named below.Open the log
light, the pair
AS IT STOOD 2026-08-22T04:14:05ZA record of what was known then. This is not the live case.Open the log
PARTIAL RECORD 2 of 9 signalsTwo sources are beyond retention. What is missing is named below.Open the log
The two above are the same component with two sentences, and they are laid out static so both can stand in one bench. In the product only one is ever on a page, and it is sticky.
The way out borrows no line token. border: 1px solid currentColor, so it is drawn in whatever ink the rail is wearing and inverts with it automatically. That is also why it needs no hover of its own: the ink it borrows is already at 14.92 against its own plate.
At 360 the rail wraps rather than clipping, and --width-frame gives way to the screen. The marking, the qualifier and the way out each take a line, in that order, and the way out keeps white-space:nowrap so Open the log never breaks across two.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|
--bg-invert | fill | the whole bar. The one full width inversion in the product | | |
--text-on-invert | ink 4.5:1 | everything on it, measured against its own plate rather than against the page: 14.92 in dark, 14.18 in light | | |
--line-record | line 3:1 | not read here, and read by frame around it. The rail’s own border is currentColor | | |
--radius-ui | geometry | the corners of the way out | | |
--size-xs | geometry | the type size, mono, weight 600, at .09em | | |
Copy this
<article class="frame">
<p class="rail">AS IT STOOD <b>2026-08-22T04:14:05Z</b>
<span class="soft">A record of what was known then. This is not the live case.</span>
<a class="rail-out" href="log.html">Open the log</a></p>
<div class="doc">…</div>
<p class="rail-foot">End of the record…</p>
</article>
Where it stands