Lines and seams

Structure on these pages comes from 1px hairlines, and the design canon's line law says every line is drawn exactly once. The hairlines are translucent, so a line drawn twice composites darker than its neighbours and reads as another colour. Most doubles come from two elements that each draw a correct line on the same edge, and a full-page screenshot hides them. This page gives the arithmetic for reading a seam, the cases that stack strokes without an obvious second border, and what the line auditor counts. The design canon states the law in its sections 2 and 3.

Reading a seam by its greyCopy Anchor Link

A seam's grey says how many strokes drew it. A stroke of alpha a and colour L over a ground G composites to a*L + (1 - a)*G, and two stacked strokes composite at alpha 1 - (1 - a)^2. With the shell's hairline token the expected readings are fixed numbers.

A reading near the two-stroke value means a double line or one stroke over a brighter backing such as a shader glow. Check the neighbouring pixels to tell them apart: a glow raises them too, and a double leaves them at the ground. On 2026-10-05 a scan across the toolbar's bottom rule read 59 in Chromium and 58 in WebKit, which is one stroke.

An opaque hairline keeps its grey when it is doubled. The GT landing's main hairline --tc-hair is opaque, so there a double shows as a run twice as wide: 4 device pixels at 2x for two 1px rules. Read every seam at a device scale factor of 2.

The probe in the gt-verify skill reads seams this way. node skills/gt-verify/scripts/probe.mjs <url> --scan x,y,down,24 --dsf 2 groups the device pixels along a 24px segment into runs of one grey, prints each run's width in device pixels and marks the runs that are lines. The coordinates are CSS pixels in the viewport.

Self-stacks and stacked groundsCopy Anchor Link

A background paints to the border box by default, so a translucent border over the element's own translucent fill paints darker than every other hairline on the page. This is the self-stack, one of the line law's four defect classes. Two stacked translucent grounds do the same: two grounds at 0.26 alpha composite to about 0.45.

Every button face on the GT landing carries background-clip: padding-box, because a hair border over a hair fill composited darker than the page's other hairlines. The line auditor gates a self-stack only when the fill alpha is 0.12 to 0.95 and the edge is 120px or longer, so chips and small controls are reported without failing.

Rails drawn as bordersCopy Anchor Link

Draw a page's column lines as a border. A border rounds to whole device pixels at any zoom, and a background-filled box does not. The column wrapper draws its two lines once with border-inline, and a band inside the wrapper draws no side lines of its own. A full-bleed band outside the wrapper draws its own pair once, at the column edges, from its inner column.

The GT landing's rail token is 1104px because its original pages ran max-w-[1120px] px-2, which put their side lines 1104px apart. A first rail of 1100px doubled every hairline against the old sections by 2px a side. The retired second pair of lines at plus or minus 10px came from a ::before inset -10px from the padding box, and the padding box sits 1px inside the border, so its real offset was 9px. Any band pseudo-element that did not use the shared token jogged 1px at the junctions.

The practices lint (scripts/lint/practices.mjs) fails a pseudo-element that pushes an inline border pair outside its box, the retired token and prose that still recommends the retired pair.

Rules that run the full widthCopy Anchor Link

A structural rule can run across the whole stage while its element keeps the column's layout. The element keeps its 1px border for layout and paints it as a border image outset 100vmax past both ends. The outset never scrolls, and the scroll region clips it at the stage's edges. Kevin asked for full-width rules on 2026-10-07.

The practices lint's border-image-none check fails the shorthand in any stylesheet under src/.

Stacking contexts over seamsCopy Anchor Link

A stacking context paints over neighbouring 1px seams. A standing will-change or a leftover transform of 0px creates one. On the GT landing, reveal tweens left transforms on framed cards, and the cards then painted over the top rule of the hatch band below them.

The gt-motion skill lists this trap with the GSAP ones, and SVG lines in motion covers the rest of them.

Registration crosses and horizontal clippingCopy Anchor Link

A registration cross marks the point where a section seam meets the rail. The GT landing draws it with 9px arms, 1px thick, hanging 5px past the rail, in ink at 0.38 in light and white at 0.34 in dark. One pseudo-element per seam is enough, because the next section's top corners are the same points. A full-bleed band clips its own pseudo-elements, so the section after it paints its own top pair.

The arms reach 5px past the rail, so the page root needs horizontal clipping. overflow: hidden makes the root a scroll container, and every position: sticky figure further down the page stops sticking. The root takes overflow-x: clip, which clips without creating a scroll container.

The line auditor's thresholdsCopy Anchor Link

scripts/lint/lines.mjs renders pages in Chrome for Testing and rebuilds lines from computed CSS. Each element is first clamped to its nearest clipping ancestor, so the audit reads the geometry the page shows. Construction lines drawn at plus or minus 100vh once produced phantom doubles, and the clamp removed them.

It skips SVG and canvas subtrees, elements under a matrix3d transform or a mask image, hidden elements and anything at opacity 0.05 or less. SVG junctions are read by eye at 2x crops.

Three incidents set its exit codes, because each one made a broken page pass. The shell mode adds a fourth exit 2, for a state such as the open search that did not open.

After those fixes the first full battery, 25 pages in two themes at two widths, was 100 audits with zero findings. The gt-lints skill holds the auditor's reference, and the gates page shows where it runs.