The vibration

Two colours only, Sunset Red granite against Barton Springs teal, matched to the same lightness so every edge between them hums, set on a strict Swiss label-column grid; the dates are the only statement, in Climate Crisis, and they erode along the font's YEAR axis as you scroll them away. Where the mind answers, the vibration stills: its sections are set on limestone, the one place the eye can rest.

The story

Victor Moscoso's trick was never the swirl. It was Albers: complementary colours matched in value so that the boundary between them cannot settle, and the poster buzzes on the wall. Strip the Fillmore lettering away and the technique survives in an executive suit. The page is that technique and nothing else: no photograph with tone, no gradient, no noise, no glass. The surface is type and colour; the energy of the page is optical, which is a fair thing for an energy summit about freeing minds to be.

The grid is Grilli's, which is Müller-Brockmann's: a label column on the left that carries the whole navigation (Read, Theme, Lineup, Agenda, Tickets, Place, and Ask) and a content column that is free to be enormous. Rules are visible. Nothing is centred. The facts the brief demands sit on the top edge, corner to corner: ETS27, Free Your Mind, Austin, Texas, May 3–6, 2027, Tickets.

The first screen is the dates set as a poster: MAY, 3-6 and 2027 on three lines, each fitted to the column, in Climate Crisis, a face whose single axis is named YEAR and runs from 1979 (the Arctic ice intact) to 2050 (gone). At rest the dates are fat and whole. Scroll, and as they leave the viewport they erode toward 2050; scroll back and they recover. A readout on the baseline of 2027 prints the axis value live: the mechanism is exposed, not hidden. It is the summit's subject, performed once, by the summit's own dates.

People are printed, not photographed. The keynote is a two-ink print across the whole content column, a face cropped from hairline to chin like a billboard; the two Thought Leaders of the Year follow at half width; the other seventy-four names run on as a three-column programme list, name in bold and role after it. One, then two, then three: the lineup changes tempo as it goes down. All three portraits are ETS26 stand-ins and are labelled so.

The agenda opens on its own poster: the four day names stacked at display size in the ink, each a link to its day, with the date and the session count set as a right-hand column like page numbers in a contents list. Below it, four days of hairline rows in which the session format sets the width and weight of its title (keynotes wide and heavy, breakouts narrow, meals light and condensed), so a day's shape reads before a single title does. The day travels in the sticky label column.

Typography

• Climate Crisis (Google Fonts, variable, axis YEAR 1979–2050), used once: the statement MAY / 3-6 / 2027. Each line is fitted to the content column, then the three are scaled together so their ink sits 14 px under the facts bar and 20 px above the fold, with 10 px between lines measured ink to ink (from the font's own extents, so the rhythm holds without text-box support). The middle line uses the face's hyphen with 0.18 em either side: the en dash at this weight printed as a 260 px brick that read as a redaction bar. font-variation-settings: 'YEAR' 1979 at rest, animated to 2050 with animation-timeline: view() over the element's exit range; a JS fallback drives the same axis where scroll timelines are missing; reduced motion holds 1979. On the phone the statement turns on its side (vertical-rl, rotated 180°) as two columns, MAY 3-6 and 2027, reading upward, both starting at the bottom so the ragged edge sits at the top beside Read.
• Mozilla Headline (wdth 75–125, wght 200–700) for every word. It is chosen for one reason the page depends on: a single family whose width axis runs from a ticket-stub condensed to a Texas-billboard wide, so the format of a session can be set on the axes without a second face. Labels and the nav at 16 px wght 500–700; display words (Free Your Mind, the four day names, Austin, the mind's questions) at 160 px, wght 700 / wdth 125 for the page's own voice and wght 300 / wdth 100 for the mind's; session titles at 16 px with the format on the axes (keynote 700/125, panel 500/100, breakout 400/90, meal 200/75); format badges in 12 px caps at wght 600 / wdth 112 inside a 1 px box; the readout, the asked list and the state line in small caps.
• Martian Mono (wdth 75–112, wght 100–800) sets figures and nothing else: times, session hours, prices, dates in footnotes, counts in the state line, the hex codes in the colophon, the section numbers 01, 02. Words that were in mono in the first round (format badges, footnote prose, the state line, the readout's words) moved to Mozilla Headline. The two prices are the one display numeral: 160 px, wght 800 / wdth 112, figures in limestone, the dollar sign at wght 300 / wdth 75 in the ink.
• Three sizes: 12, 16 and 160 (10:1), plus the single statement at roughly 25:1. Hover relaxes a session title's width and nothing else moves.

Colour world (hex)

• Sunset Red granite #A6473B and Barton Springs teal #1D796D, the Capitol's stone and the springs' water, both brought to OKLCH lightness 0.52 (chroma 0.128 at hue 29° and 0.085 at hue 182°) so that the pair differs only in hue and chroma. Their WCAG contrast against each other is 1.12:1, which is the point: only display type is ever set one on the other.
• Limestone #EDE8DC is the third value: labels, rows, ledger text and the two prices in limestone on either colour (4.3:1 on teal, 4.8:1 on red); paragraphs and the mind's answers in colour on limestone. A figure a visitor has to act on is never set ink on ink.
• Sections alternate: teal (the poster), limestone (the mind), red, teal, red, teal, red, limestone (the colophon). Hairlines are limestone mixed 55 % into the ground (color-mix in OKLCH), never grey.
• No fourth colour, no gradient, no transparency, no texture. The two-ink prints map a per-portrait signal (luma plus a share of R minus B) through an SVG feComponentTransfer discrete step to granite below the threshold and teal above, after a slight blur that turns speckle into screenprint shapes. Each portrait has its own threshold: Nancy Bui-Thompson's grey studio ground sat on her skin's luma, so warmth carries her separation and all three now print the same way round, granite ground and teal figure. Hover prints the negative.
• Checked for colour-vision deficiency (Machado 2009 simulation of the first screen): protans see the dates dark olive on grey, deutans khaki on grey; both still read the dates, softer. prefers-contrast: more and forced colours print every ink-on-ink display word in limestone.

Layout grammar

• Page: 24 px gutters, a 216 px label column, a 24 px gutter, a content column of the remaining width. Every section is one grid row with a hairline above; the label column is sticky so the day, the section and the state stay in view while the content scrolls.
• First screen: facts on the top edge; Read ↓ with the five destinations as ruled rows top-left; the three-line statement filling the content column; Ask on the cap line of 2027; the YEAR readout on its baseline. Nothing a visitor needs sits in the bottom 96 px, where a consent strip would land. Nothing is centred and nothing is a button.
• Prose never runs past about 65 characters. Paper blocks span the whole content column as flat limestone with their paragraphs in two columns; the mind's say-line, a caption in the narrow light cut, stops at 29 em.
• Rows: time (mono) · format (caps in a 1 px box, Unsound's badge) · title (axes by format) · people, on hairlines. In an answer the mind re-weights the row: people in bold before the title, titles light.
• Tickets: one row per tier, the tier, its deadline and its phase-two price stacked on the left, the price as a readout on the right; then "Buy a pass on Eventbrite ↗" as its own ruled row across the column, the page's grammar for an action (the Read rows are the same).
• Phone (390): the facts bar is two balanced rows (ETS27 · Free Your Mind · Tickets ↓ over Austin, Texas · May 3–6, 2027); the statement turns on its side with Read and then Ask beside it, so the whole fork is on the first screen and the limestone answer shows beneath; rows put the time range and the badge on one line; the keynote print is 3:2 and the pair sits side by side; the ledger shows twelve names and "and 62 more ↓", a long answer five rows and "and 6 more on Tuesday ↓"; the agenda shows one day at a time under a sticky Mon · Tue · Wed · Thu bar in the ink, the chosen day in limestone. With JS off every row is shown.

Motion and life

• One scroll-bound animation: the dates erode along YEAR as they leave the viewport, and the readout counts 1979 → 2050 with them. Everything after the first screen is still print, by design; the life below the fold is optical (the pair hums) and in the hand (hover).
• The caret on the Ask rule blinks, visible three quarters of the time. Focusing the rule stills the vibration: the statement's red slides to limestone while you type, so the page visibly listens, and returns when you leave.
• An answer arrives as a numbered section in the thread under the first screen, through a same-document view transition, and the page scrolls to it; its question joins the numbered list under the rule. Thinking is shown by the material changing, never by dots or a shimmer.
• Hovering a two-ink print flips it to its negative; hovering a day name stills it to limestone; hovering a session title widens it. Nothing loops, nothing drifts, nothing fades up on entry.

The fork and the mind

• The fork is two verbs printed in the label column, weighing differently: "Read ↓" in the page's bold is the page in order (Theme, Lineup, Agenda, Tickets, Place as ruled rows), and "Ask", in the mind's light narrow cut, is a hairline you write on, with a caret and the ghost text "anything, in your own words" (on the phone "in your own words", whichever fits).
• Under the rule is the thread's table of contents: "01 who's speaking tuesday ↓" links to the answer below the fold, so the answer on the page reads as caused by the rule rather than as an answer to a question nobody asked; two suggestions follow ("what does a pass cost", "where is it") and each becomes the next numbered entry when used.
• An answer is a change in the material, then a section in the grid: limestone, the question as its heading in sentence case at display size in the mind's lighter axis state, a 45-word say-line in the narrow light cut, the page's own rows re-weighted toward what was asked, and the source as a numbered footnote with its snapshot date. The mockup ships with 01 "Who's speaking Tuesday" composed; the live page composes 02 onward from the baked snapshot (days, prices, place, theme, dates) and refuses to invent anything it does not hold.
• State is exposed in the label column of the footer: "snapshot 2026-10-13 · 77 speakers · 50 sessions · sample data", with the colophon naming the faces, the two hexes and the lightness they were matched at.

What to build next

• Wire the composer to the real mind (the mechanics brief's streaming say model): stream into the say-line, add rows as they arrive, keep the numbering, the asked list and the footnote.
• Bake the real ETS27 data when it exists; the page reads the same structure as prototype/data/ets.sample.json, so a lineup, agenda and venue drop in without touching the layout. Decide the print set editorially once the real lineup lands; each new portrait needs its threshold set by eye, or a reshoot brief (plain mid-grey ground, side light).
• Session, speaker and ticket detail pages in the same grid (one label column, one content column), with a cross-document view transition carrying the lockup.
• Measure the matched pair on real screens, on a phone in daylight, and with people who have red-green colour-vision deficiency; the simulation says the dates survive, a person should confirm it.
• Make the YEAR readout and the erosion respect the data: the axis could be driven by the day's net-load hour instead of scroll depth, as lens 06 first proposed.

Risks

• The matched pair is physiologically loud; a long session on the page could tire the eye. The answer is dose: only display type vibrates, the prices and every row read in limestone, and the mind's limestone sections are the rest. If it still tires, lower the chroma of both inks together rather than separating their lightness.
• Equal lightness is hard for red-green colour-vision deficiency; the simulation keeps the dates legible but softer. Nothing a visitor needs is set one ink on the other, the facts bar repeats the dates in limestone on every first screen, a tap on the rule stills the statement, and a high-contrast setting flips it to limestone outright.
• Climate Crisis is a fat display face and could drift toward a 1970s costume if a second instance ever appears; it is one statement, once, and the grid keeps it in a suit.
• Mozilla Headline is Mozilla's own 2025 face, and a type jury may read the house behind it the way it reads Vercel behind Geist. It stays because the width axis carries the agenda's whole system in one family; if that reading costs too much, the replacement must offer the same 75–125 width range.
• The two-ink portraits depend on the source photograph; a busy or mid-grey background prints as a blob unless its threshold is tuned.

Fix pass (2026-10-15)

The round-one jurors' fixes, applied where they sharpened the idea. Kept on purpose: the answer stays directly under the poster (the thread is where answers arrive, and the Ask list now shows what caused it), the two inks keep their chroma (the hum reads on screen and the concept's own risk is fatigue, not timidity), Mozilla Headline stays (reason above), and no second scroll animation was added below the fold. The version the jurors scored is preserved in v1/.