DOC NO-02/G · APPENDIX · REV A
How This Sheet
Was Built
Typography Is the Interface
SIGNAL treats the agency as an engineering document: a technical data sheet you could pin to a wall. No photography, no illustration, no gradients — the entire visual system is type, hairlines, and one violent orange. The references are Swiss international style (Müller-Brockmann grid discipline), DIN technical drawings (register marks, dimension arrows, “do not scale drawing”), and brutalist web design’s refusal to decorate. Restraint is the spectacle: when a page owns only three colors, every square of orange detonates.
Everything behaves mechanically. Nothing fades — elements are stamped on. Nothing glides — the marquee ticks. Hovering doesn’t tint a block, it inverts it. The site should feel less like a website and more like an instrument panel that happens to describe a design agency.
Three Colors, Two Voices
Obsessively Curious.
Obsessively Curious.
Obsessively Curious.
Obsessively Curious.
Y+004096 · SHEET 03/05 · TOLERANCE ±0PX · [BE] [NL] [ID] [VN]
How It Works
- TEC-01
Fit-to-width poster lines
Every headline is a single word or phrase scaled by JS so it spans the full column, edge to edge — the Swiss poster trick. Each line is measured at 100px, then font-size is multiplied by available-width / measured-width. Re-run after fonts load and on resize.
el.style.fontSize = '100px'; const w = el.getBoundingClientRect().width; el.style.fontSize = (100 * avail / w * 0.99) + 'px'; - TEC-02
steps() easing — no soft fades
Nothing on this sheet eases. Reveals snap opacity in a single step and settle position in three discrete jumps, like a machine indexing into place. The marquee is quantised into 480 steps so it ticks instead of glides.
animation: snapin .0001s steps(1, end) both, shunt .3s steps(3, end) both; /* marquee */ animation: tick 48s steps(480, end) infinite; - TEC-03
Exposed 12-column grid
A fixed, pointer-transparent layer draws 12 real hairlines behind the content. Every section row is a grid with the same 12 tracks over the same width, so text genuinely sits on the drawn lines — the grid is structural, not decorative.
.gridlines { position: fixed; inset: 0 0 0 var(--side); display: grid; grid-template-columns: repeat(12, 1fr); } .gridlines i { border-right: 1px solid var(--hair); } - TEC-04
Index sidebar with live readout
The signature. A fixed file-browser tracks the document: scroll position in px, progress percentage, active sheet, viewport and cursor coordinates — all updated inside one requestAnimationFrame per scroll event. The orange mark on the sidebar edge is the scroll position at 1:1 scale.
roY.textContent = 'Y+' + pad(scrollY, 6); roP.textContent = (pr * 100).toFixed(1) + '%'; rows.forEach(r => r.classList.toggle('on', r.dataset.nav === active)); - TEC-05
Instant block inversion
Hover states have no transition at all: background and color flip white-to-ink in a single frame, so each row behaves like a physical block being stamped. Orange never inverts — it stays the only stable signal.
.inv { transition: none; } .inv:hover { background: var(--ink); color: var(--paper); } - TEC-06
Drawing furniture
Ruler ticks are two layered repeating-linear-gradients with JS-placed mono labels every 100px. Dimension arrows are flex rows with CSS-triangle arrowheads. Register marks are one inline SVG repeated. The cursor is crosshair everywhere — you are reading a drawing.
background: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 10px) bottom / 100% 7px;
None. That’s the Point.
Zero raster assets, zero AI-generated imagery, zero icons beyond one inline SVG register mark, one arrow, and a favicon drawn in 6 SVG shapes. Even the country flags of the field records were replaced by mono ISO codes — an emoji is a picture, and this sheet doesn’t allow pictures. Total payload is fonts + markup + one small script.
What the Passes Changed
- PASS 01
First complete sheet reviewed at 5 scroll depths + mobile. Findings and fixes logged in _review/signal/PASSES.md.