Lab

01 Color

The palette doesn't change in any workstream. It was measured in OKLCH, passes the four gates and is the part already solved. It's here for checking.

The four pillars, 90° apart from each other in OKLCH, with constant L and C. Fixing lightness and chroma and varying only the hue is what ensures that none of the four weighs more than the others.

02 Typography P31

Use the "Typography" and "Scale" bars above. The first switches the family of this whole page; the second switches the size and the floor.

Switching only the family didn't solve it, and the measurement says why. The number the eye reads isn't the font-size: it's the x-height in pixels, which combines family and size into a single value. And there's a second number, which is the most serious: the fraction of the page's text below 16 px.

It was me repeating the defect. I built this workbench with the same scale you complained about: 136 of the 237 text blocks were at 14 px - the labels, the measurements, the table cells. The paragraph was never the problem; the problem is everything around it. That's why the "Scale" bar opens on Comfortable, and not on Current.

Measured on 09/09/2026: of the seven references, six use sans-serif in the body, and the two you pointed out as good - linear.app/now and razaoinadequada.com - use Inter and Rubik. The site is the only one with serif in the body and display serif in the title.

The x-height divided by the cap height tells the apparent size of the lower-case letters. Newsreader has 0.654, the smallest in the set: at 17 px it draws lower-case letters 14% smaller than Inter at the same nominal size. It's the measurement behind "everything too small".

The circumflex clearance is how far the accent rises above the e, divided by the x-height. This was the criterion that failed EB Garamond, Cormorant Garamond and Bodoni Moda in this house - and Newsreader has 0.517, the worst number in the table. The defect that barred three families is in the one that stayed.

The scale exists and is fluid. What P31 fixes is the step: today the cards' h3 measures 16 px against a 16 px body, and a subheading the same size as the text isn't a subheading.

Decided and applied - P31, 09/09/2026 (A-58). None of the candidates made it in: the prose stayed in Newsreader, and what changed was the scale and the division of the voices. Body with a floor of 19 px at 390 and 20.2 px at 1440, a step of 4 px between label and body; Space Mono for the interface (date, tag, button) and Instrument Serif only in the display.

Later, on 13/09/2026. The posts' reading column had been calibrated for Literata at 17 px (36 rem, 68 characters) and nobody redid the math when the prose became Newsreader at 20 px: it was 552 px and 63 characters, with title and dek under their own ceilings of 469 and 462 px - the owner: "why is everything so squeezed?". Today the column is 39 rem (624 px, 71 characters) and the whole composition, table of contents included, is centered on the screen. See section 16. The eight family candidates remain on this workbench as a record; none made it in, and the site is still the only serif in the body among the references, by decision.

03 Box versus rule P32 · P37

The strongest finding of the sweep, and the one that took two measurements. A fence is its own background or a border on three sides: the card. A rule is a border on one or two sides: the line that separates, and doesn't count. The first measurement lumped the two together, and that's why it flagged clean pages.

Counting only fences, per 100 elements: /about/ has 29.4 and /projects/ has 9.1, against 1.4 on linear.app/now, 2.3 on joshwcomeau and zero on overreacted.io. The home page measures 0.7 and is cleaner than the two references. The proposal swaps the card for a row on the rule - a notation the project already has.

Decided and applied - P32 and P37, 09/09/2026 (A-59, A-61). The card became a row on the ruled page. Fences per 100 elements: /projects/ from 9.3 to 0.2, /links/ from 9.1 to 0.0, /about from 2.8 to 0.9. The seven measured routes ended up below 1.0, and /about/ lost 124 pills and the four progress bars.

Later, on 13/09/2026. The featured card on /projects/ still had a hidden defect: it asked for sm:flex in the markup and display: block in the scoped style, and the scoped one won - the thumbnail stacked above the text at any width and the page measured 6 378 px for eight projects. It became a ruled row with the plate on the right: 5 406 px. And the pillar filter stopped being a chip with a dot: it's the four alchemical symbols with the hero's selection ring, and "all" is the complete K₄ - see section 16.

04 Fading versus lighting up P33

Move the pointer over the four. Today the site takes presence away from what doesn't matter: 59 texts on the home page use partial opacity, and fading takes the contrast down with it. In The Starry Night luminance represents kinetic energy - what has energy shines. The proposal inverts the operation: nothing dims, the active one lights up.

Decided and applied - P33, 09/09/2026 (A-62). Texts with partial opacity on the home page: from 59 to 0, and zero on the other routes. The displacement in response to a gesture follows a single ratio, --k4-cascata = 0.45, in four steps from 14 to 1.3 px; /posts/ went from 27 to 66 transitions, and no animation runs on its own outside the hero.

Later, on 13/09/2026. The "the active one lights up" rule got the most literal example on the site: the header wordmark, when pointed at, performs the hero's encounter in miniature - the four nodes light up in the pillars' colors, the edges draw themselves again in accent, and a glow crosses the word in the reading direction. At rest it stays monochrome. And the "nothing runs on its own outside the hero" rule got a caveat measured in the hero itself: it sleeps when nobody is looking - see section 09.

05 The list item P36

Each item on /posts/ carries eight text blocks. overreacted.io carries three, joshwcomeau four, danluu two. The four tags are already stated in the filter, a few pixels above - repeating the filter inside each row is saying it twice.

Decided and applied - P36, 10/09/2026 (A-67). The item dropped from 7 or 8 leaves to 4: index and category merged into a mark above the title, the tags and the thumbnail left, and the item got a 47.5 rem column. The sample above shows the proposed order; the applied one put the mark before the title, because in two columns the merged text spilled over it.

Later, on 13/09/2026. The mark gained one more piece of data, and not a leaf: the reading time ("philosophy · 12 Apr, 2026 · 13 min read"), by the same count as the article - only the prose words, at 265 per minute (`utils/leitura.ts`). It stays at four leaves.

06 Reading apparatus P34

Nine of the thirteen essay references have a live figure inside the text, and four have a sidenote. The site's article has the progress bar, and nothing else. The sidenote lives in the margin that is already empty - the reading column does not narrow to make room for it.

Decided and applied - P34, 10/09/2026 (A-66). The article got a table of contents generated from its own headings, without JavaScript, and the sidenote became markdown syntax, > [!aside]. The cypress is the thin continuous rule (section 08). The live figure inside the text was not delivered, and remains declared as pending.

Later, on 13/09/2026. The table of contents got an active section (aria-current="location" on the last section whose heading has passed the top third of the screen, with a stroke on the left - the same device as the cypress), the article's opening became kicker, title, dek and meta, the body went from full white to tone 1, and the drop cap stopped leaking into the quotes. See section 16.

07 The Starry Night, as structure P33 · P35

Until this section, the reference to the painting appeared on this workbench 21 times in text and none in drawing. It was the same flaw you pointed out on the site: "I'm not really feeling the reference". A palette isn't a reference to the painting.

The turbulence field

These aren't drawn spirals. It's a vector field - the technique the research found in every Van Gogh work on the front end -, and the spiral is what appears when the flow happens. The potential is a sum of Gaussians and the velocity is its curl, which makes the flow incompressible by identity: no visible source or sink.

The field is generated at build time, so this is static SVG: zero JavaScript at runtime, and the sem-js gate still stands. In the hero, P35 swaps the orbit of the 160 particles that already exist for this same field - no WebGL and not one extra particle.

POC: the field as the section background

This is the POC of what you asked for. The field fills the background of the whole section - 1440 × 989, the real proportion -, and the hero composition stays on top, intact: the ellipse with the engravings, the K₄ figure, the four glyphs, the labels and the text.

The four large vortices sit exactly over the four pillars, converted from the K₄ box to the section box. The sky isn't a texture behind the figure: it's organized by it.

The hero in this style

Same technique, tied to the hero's real geometry - viewBox -430 -226 860 452, the four nodes at the measured coordinates, the six edges. What changes isn't the figure: it's what is behind it.

The brushstroke has the painting's length. The Starry Night is 92 cm wide and the brushstrokes in the sky run from 3 to 8 cm - between 3.3% and 8.7% of the canvas. The first version of this used strokes of 27.9%, three to eight times too long: that wasn't a brushstroke, it was a streamline, and it read as aggressive. Now the median is 7.4%, and the density forms by overlap, as in impasto.

The proposal, and it isn't decorative: the four large vortices sit exactly on the four pillars. The sky isn't a texture behind the figure - it's organized by the figure. The four subjects are what stir the field, and the ten smaller vortices are the cascade descending from them. Four large plus ten small are the painting's 14.

Here the field is static SVG because the workbench is a workbench. In the real hero P35 doesn't do it this way: there the field becomes a pure function that the 160 particles that already exist in orbe.mjs query every frame - they stop traveling an elliptical orbit and start to flow. Same particle ceiling, no WebGL, and the cost is arithmetic instead of bytes.

The sky churns, the village doesn't

The painting has three stacked regimes, and the contrast between them is what makes the sky look alive. This resolves the contradiction the measurement had left open: no good reading site has continuous motion, and this site's hero has 36 infinite animations. All sky would be noise; all village would be dead.

Juxtapose, don't blend

The painting's blues and yellows weren't fused on the palette: they were placed side by side, and the eye does the mixing. The site's plates use mix-blend-mode, which does the opposite - and that's where the grayish smudge that E-21 recorded comes from.

What happened to this section - P35, still open (A-65). The field entered the hero as a law of motion, and not as a drawing: the dust started flowing through the fourteen centers, with a correlation of 0.995 between brightness and speed. The painted background of the POCs above was never approved, and the hero took another path - the dust gained mass, sky and shape, and the plates came to cover the hero. That's what section 09 tells.

09 The hero after the workbench P40 · P41

Between 11 and 12/09/2026 the hero changed more than in all the workstreams above combined, and almost all of it is motion in canvas - which a workbench without JavaScript can't show. That's why only what changed, the measured number and where the evidence is come in here. The real hero is on the home page.

Still open: P41 remains open - the ink of the patches still has to form the hemispheres, technology has to move to Wernicke's area and the lit pillars have to spin like electrons (the tremor that came along was removed on 12/09/2026, at the owner's request: it was imperceptible and cost frames) -, and so does P35. Evidence in docs/evidencia/hero-inteiro/, newton/, ceu/, p40/, p41/ and vazio/.

What changed between 12 and 13/09

10 What this workbench measures about itself

A page that demands numbers from others declares its own. Measured with the same script, at 1440×1000: 32 fences and 36 rules in 476 elements, or 6.7 fences per 100.

Remeasured on 12/09/2026, after this update, with the collection from caixa.test.mjs - the same one that closes out the site's routes: 30 fences and 99 rules in 3 177 elements, or 0.9 per 100. The element count doesn't match the one from 09/09, and it wasn't reconciled: this collection counts every element in the document, including the fields' strokes, and the one from 09/09 wasn't saved, so there's no knowing what it counted. The fences, which don't depend on the base, are almost the same: 32 before, 30 now.

It's high for a reading page and right for this one: 10 of the 32 are color samples, which are rectangles of color; 6 are the home page's proportion diagram; and 6 are the card and the tags in the "today" column - that is, the defect on display. Two fences were a habit of mine and came out: the bordered pill around the workstream label, which is the same vocabulary that P32 orders removed from /about/, and the gap trick over a colored background, which draws a rule but counts as a fence.

What it costs, and what isn't measured. The six typography candidates add up to 341 KB of font that the site doesn't load. And orcamento.test.mjs measures only the home page: this route doesn't go through the weight gate. That's acceptable on a working noindex workbench and would be unacceptable on a public route - when a family is chosen, it comes in through astro.config.ts, with a declared subset, and the other five come out of here.

And the two fields cost HTML: about a thousand short strokes put the page at 471 KB of markup on 09/09, and on 12/09 dist/laboratorio/index.html measures 669 KB - it went up from 300 KB when the brushstroke shrank to the painting's scale, because a short stroke means more strokes. Here it's the right price, and generating at build time is what keeps the sem-js gate standing. In the hero, P35 does not do it this way: there the field is a pure function evaluated at runtime over the 160 particles that already exist, and the cost is arithmetic, not bytes.

What it reads now, in this browser

From here down nothing is a recorded number: it's read at runtime from the CSS, the fonts and the modules - and that's why it changes with the theme, the window and the browser of whoever is looking. Without JavaScript the tables keep the dash.

The contrast is calculated from the computed value, converted from OKLCH to linear sRGB by the space's own math (OKLab → LMS → RGB) - and not through canvas.fillStyle, which returns black for oklch() and gave two agents two rounds of false numbers today.

The home page's client modules, read from disk at build time: 74 files, 1341.5 KB in source (before bundling, minifying and compressing - the bundle is smaller, but the order of magnitude and the proportion between them are these).

11 The neighbor's television

In Amélie, she puts together a tape of loose scenes and leaves it at the door of the neighbor who never leaves home. This set does the same: it draws a scene from the list on each visit and only fetches the video when someone turns it on - until then, what's on the screen is the cover frame. The list lives in src/data/tv.ts, and adding a scene is adding a line.

Later, on 13/09/2026. The tape has eight scenes, the panel's two knobs really turn the tuning (they were decorative and aria-hidden), and the switch has tube static with the cut landing in the middle of the static. The owner's playlist was left out because it's private, and a private list= brings down the whole embed - measured with and without the parameter in the same session. The television also lives on /sobre, at the very end, without a caption. Still open: the owner wants to try GIFs playing on their own, one after the other, in place of the videos.

Turn the television on: Cute Lamb Needs Attention

12 The entrance curtain

The home page opens with a curtain, and it exists for three reasons that aren't ornament: sound is only born inside a gesture (the autoplay policy doesn't recognize pointermove; the click that opens the curtain is the gesture that unlocks the AudioContext); the figure takes time to assemble, and the curtain is its time; and motion is a system preference, but the site offers the local door.

What the curtain doesn't do. It isn't a gate: a click enters, Escape enters, and there's an emergency opener in the inline script for the interval when the module hasn't arrived yet - measured on 13/09/2026 with the network at 400 KB/s, the enter button stayed drawn for 13 s with no listener, and the report was "everything is white". It doesn't exist without JavaScript. And it doesn't decide anything on its own: sound starts off, motion starts as the system asked. The ?cortina address reopens it, and it leaves the bar via replaceState on entering.

13 The dust and the two constellations

Among the sky's 320 grains, 26 hide one of the owner's references. When clicked, a sheet opens; when it closes, the grain flies to the constellation on its side and becomes a star. Virgo on the left, Cancer on the right - the sun sign and the rising sign, and nobody needs to know that to play. The split is semantic, written into the catalog: Virgo is the mind that analyzes and orders, Cancer is home, memory and what one feels.

Test mode: /?ovos paints the eggs red and exposes each one's position in the canvas's data-ovos-xy; /?ovos=25 opens the visit with the first 25 finds already found, without saving anything.

14 The sound

Silence is the default, and nothing plays without a gesture. The rule applies to the pillars' chord, to the finds' chimes and to the soundtrack. Everything that sounds is in the same tuning: each pitch is a partial of the harmonic series over the same 55 Hz - interface sound out of tune with the rest reads as an effect pasted on top. There is a single room (SALA in afinacao.mjs: 2.8 s of tail, cutoff at 2 400 Hz).

A single AudioContext per page, closed on pagehide - measured on 13/09/2026, the curtain's one stayed running until the end, and voz.fechar() was born because of that.

15 The memory, and what you left here

Everything the site remembers stays in the person's browser - the site is static, there's no server, nothing leaves here. There are ten keys - eight in `localStorage` and two in the tab's session. The table below reads yours now, in this browser; without JavaScript it shows only what each key is.

Your reading stock, now

A text counts when it stays visible for twenty continuous seconds with the tab in the foreground - opening, scrolling and clicking don't count. The same text doesn't count twice, and a text from two subjects fills both. When all four nodes fill up, the footer signature starts pointing to how this site is organized.

No scoreboard, and not out of taste. The fifteen non-empty combinations of four pillars are the face structure of the K₄: four vertices, six edges, four triangles and the whole. The figure already draws that object - it is the notebook, and no medal needs to exist. The reading stock only counts what was visible for continuous seconds with the tab in the foreground: it doesn't count opening, scrolling or clicking, because a scoreboard that rises with clicks measures clicks.

16 Reading and the lists, afterwards

Sections 03, 05 and 06 describe what was decided between 09 and 10/09. On 13/09 the three surfaces were redone again, and what the measurement found this time wasn't the line or the leading: