/* LIGHTS (nochnik). Warm paper, filament amber, and a serif body face. REDONE 2026-09-08 against design/DIFFERENTIATION.md. The palette and the display face here were already right and are kept. What was wrong was the body: Inter, the same body face as five other sites in the house, which is why this page read as a sibling clone however good its amber was. THE ONE DECISION THAT DOES THE WORK: SPECTRAL IN THE BODY. This is now the only site in the house with a serif body face, and that is deliberate and exclusive. Body copy is most of the pixels a reader actually looks at, so it is the layer that decides what a page feels like. A serif running text turns this into an editorial magazine that happens to sell lamps, rather than a product site with nice headings. It also matches what the category actually is: section 4.6 of the category research puts the whole navigation and every micro-label in mono and sets headings in an old-style display serif, which is a magazine masthead grammar. The body was the missing third of that idea. Spectral specifically, over the other Google serifs: it was drawn for screen reading at small sizes, it has a large x-height and short extenders which survive the 12px caption sizes this brand runs everywhere, and it is a different colour on the page from Petrona. Petrona is a warm, slightly flared display serif with high stroke contrast; Spectral is low contrast and even. Set together they read as a magazine with a masthead face and a text face, which is the correct relationship, and not as one family stretched. WHY THE GROUND MOVED, #F1EFE8 -> #F7F4ED. The old value sat inside the same half-stop as four siblings. The new one is a full step brighter and slightly warmer, which does two things. It opens the gap to ceramics, which has just gone the other way to #E6E6E1 grey plaster, so the two now sit at either end of the paper range rather than next to each other. And a brighter paper is the correct ground for the one editorial site: a magazine is printed on bright stock, and it gives the amber more room before it turns muddy. THE .t-black SECTION SURVIVES UNCHANGED, and is used exactly once, on the lamp-ON hero. Section 4.5 of the research is unambiguous: white and warm paper are CATALOGUE MODE, black is EMISSION MODE for the single moment the light is the subject, and nobody in the category runs black as the site default. It is a section-level theme token here and it will stay one, and the founder has since parked dark themes across the house anyway, which changes nothing on this page: this was never a dark site, it is a paper site with one black plate in it, and that plate exists for a reason no palette decision can substitute for. It is the one place where you can see what a lit shade actually does to a wall, and a warm-paper crop of the same object cannot show it. CONTRAST, computed 2026-09-08 against --surface #F7F4ED unless noted. ink #201E1A 15.15:1 floor 7.0 (15.92 on surface-2) ink-2 #3E3B35 10.16:1 floor 4.5 ink-3 #6B6759 5.15:1 floor 4.5 (5.44 on the cutout ground) ink-4 #9A9488 2.74:1 non-text marks only, never running text accent #8A5A19 5.37:1 the moment the amber carries TEXT accent-g #C98A3C 2.66:1 rules, marks and the .t-black band only rule #DCD8CE 1.30:1 hairline, exempt, earned not drawn on .t-black #0A0A0A: ink 16.48, ink-2 12.99, ink-3 6.57, accent 6.77 Never #000 for text. Never #fff for text. TYPEFACES. display Petrona 300, unchanged. Set very large and Light it is the HAY and Publico register the research asked for. body Spectral 400 and 500. See above. This is the change. mono Geist Mono, unchanged, and it stays load-bearing: the entire navigation, every micro-label, the spec keys, the step numbers and the footer are mono at 11px / 0.06em. Mono nav plus serif body is this brand's signature pair and neither half works without the other. Three weights, permitted by §4.3 because one of them is the display cut. THREE TYPE TOKENS MOVE WITH THE FACE, AND ONLY THESE THREE. Changing a body face without changing its leading, its tracking and its measure is not changing the body face. --lh-body 1.5625rem -> 1.75rem. 28px, a whole pixel and a multiple of 4, per §4.3. Inter at 25px leading is correct; Spectral at 25px is cramped, because a serif needs the line to breathe for its extenders and its horizontal stress to work. 28px is also the editorial figure and it is most of why the page now reads slow and considered rather than dense. --tr-body -0.018em -> 0. Negative tracking is an Inter correction. A text serif is already fitted by its designer, and closing Spectral's counters makes it grey and mushy at 17px. Zero is also the Vitra restraint the research asks this brand for. --max-text 720px -> 640px. Spectral is narrower than Inter, so the same 720px column ran to about 85 characters, over the 75 ceiling in §2.12. 640px puts it back at roughly 72. This is the text MEASURE, which is a consequence of the typeface. The grid itself is untouched: --grid-cols, --gutter, --margin and --max-content all come from the house file unchanged. RADIUS: System A (sharp). 0 everywhere, pills for badges only. Overridden in this file: palette, the body typeface, the three type tokens listed above, radius tier. NOT overridden, and never to be: the spacing scale, the grid, the breakpoints, the motion durations and curves, the reduced-motion handling. ========================================================================= */ /* --------------------------------------------------------------------------- THE PALETTE. FOUR VALUES, AND IT IS NOT SETTLED. The founder is still choosing between four palettes, so all four live here and nowhere else on this site. A swap is an edit to these four lines; if it ever needs a second edit somewhere, that somewhere is the bug. --logo the mark, and only the mark --primary primary button fill, active states --deep secondary button, hover, and any reversed ground --safe links, and every piece of text under 24px THIS BRAND IS THE ONE GENUINE TWO-HUE BRAND IN THE HOUSE, AND ITS CONCEPT EARNS IT. Ink is the primary because the subject is the shadow. Amber is the deep value because amber is the light being thrown. That is why the pair does not read as two colours fighting: one of them is the object and the other is what the object does. AMBER IS A GROUND FOR INK ONLY. Measured: a near-white label on #FFC107 is 1.63:1 and unusable, ink on it is 10.21:1 and strong. So amber never carries text of its own and never sits behind white. It fills, it rules, and it lights up a button under the cursor. CONTRAST, RE-MEASURED 2026-09-14 on the repainted grounds. These numbers supersede the table further up this file, which still names #F7F4ED. Floors: body 7.0, secondary 4.5, tertiary 4.5. on #FFFFFF card #F8F6F1 tile #EAE6DB ink #201E1A 16.64 15.41 13.34 ink-2 #3E3B35 11.16 10.33 8.95 ink-3 #6B6759 5.66 5.24 4.54 rule #DCD8CE 1.42 1.32 1.14 exempt --safe #15161B 18.06 16.73 14.49 --deep #FFC107 1.63 1.51 1.31 THAT LAST ROW IS THE WHOLE POINT AND NOT A FAILURE. Amber is a GROUND, not a text colour and not a hairline. Ink on amber is 10.21:1. Everything drawn in amber on this site is a fill or a 2px mark, never a letter. The tile is an image well and carries no running text; --ink-3 is the only thing that lands near it, at 4.54. ------------------------------------------------------------------------ */ @layer tokens { :root { --logo: #15161B; /* the object */ --primary: #15161B; /* the object. 18.06:1 on white */ --deep: #FFC107; /* the light. A GROUND, never a text colour. */ --safe: #15161B; /* Derived from the four, in the same block so a swap stays one edit. A button label is text under 24px on a COLOURED ground, which is the one measurement the four cannot answer. Here it answers itself twice: the resting button is ink under warm paper at 16.4:1, and the hover is amber under ink at 10.21:1. The shadow turns into the light when you point at it, which is the whole brand in one state change. */ --fill: var(--primary); --fill-h: var(--deep); --on-fill: #F7F4ED; /* the old page paper, now the reversed ink. */ --on-fill-h: var(--ink); /* The mark as typographic furniture, for brandmark.css. Copied from design/logos/mark-masks.css, which is generated. */ --mark-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2211 6 14 16%22 role=%22img%22 aria-label=%22a square%22%3E %3Cg fill=%22%23000%22%3E %3Crect x=%2212%22 y=%229%22 width=%2212%22 height=%2212%22/%3E %3C/g%3E %3C/svg%3E"); } } @layer tokens { :root { --surface: #FFFFFF; /* white. design/COLOUR.md: the ground stays out of the way and the colour arrives in the photograph of the pattern on the wall. The paper is not lost, it moved to --on-fill, where a warm near-white is exactly right on an ink button. */ --surface-2: #F8F6F1; /* raised card and chip. Still a warm tint, and it is allowed to be one because this brand's --safe IS its ink: there is no accent-coloured small text anywhere on the site to be pushed under the floor by it. */ --surface-tile: #EAE6DB; /* recessed tile, the interior frame. Left alone: it is a picture of a room, not a page ground. */ --cutout-bg: #FFFFFF; /* fixed, and it has to move with the page. A cutout shot on paper and placed on white shows its own rectangle. Still pixel identical across every asset. */ --rule: #DCD8CE; /* 1px hairlines only */ --ink: #201E1A; /* warm near-black. Never #000. */ --ink-2: #3E3B35; /* secondary and running copy */ --ink-3: #6B6759; /* micro-labels, mono nav, captions */ --ink-4: #9A9488; /* marks only. Never running text. */ --accent: var(--safe); /* the accent as TEXT is ink here, because the primary IS ink. 18.06:1. */ --accent-graphic:var(--deep); /* amber. RULES AND MARKS ONLY, and they are drawn at 2px rather than 1px: at 1.63:1 against white a hairline of it disappears, and at two it reads as the yellow it is. */ --accent-h: var(--deep); /* the hover GROUND, under an ink label */ --focus: var(--safe); --font-display: Petrona, "Source Serif 4", Georgia, serif; --font-body: Spectral, "Source Serif 4", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, monospace; --w-display: 300; /* the display cut, permitted as the third */ /* The three type tokens that move with the body face. See the note above. */ --lh-body: 1.75rem; --tr-body: 0; --max-text: 640px; --r-0: 0; --r-pill: 999px; } /* The lamp-ON hero, and nothing else. Emission mode, per research §4.5. */ .t-black { --surface: #0A0A0A; --surface-2: #121212; --ink: #EDEAE3; --ink-2: #D5D1C8; --ink-3: #9A9488; /* Declare the colour, not just the token. Redefining --ink here does not re-run body's `color: var(--ink)`, so an element that only inherits kept the light-mode near-black: the h2 on this plate was 1.19:1 on black. Every

looked right only because the theme re-states their colour. */ color: var(--ink); /* Amber comes into its own on black: 14.63:1, where on white it was 1.63:1. The lamp-on zone is the one place it can carry a mark alone. */ --rule: #242220; --accent: var(--deep); } } @layer components { /* The masthead lockup: the square, then the name, on one line. Inline SVG rather than an so the object takes --logo and the cast shape takes --deep straight off this file. Sized in em so it tracks the mono caps beside it, which are small, so the mark is given a little more room than on the other seven. */ .wordmark { display: inline-flex; align-items: center; gap: 0.5em } .wordmark .wm-mark { width: 2.4em; height: 2.4em; flex: none } .wordmark .wm-name { font: inherit; letter-spacing: inherit } } /* ============================================================================ DISPLAY LINE-HEIGHT, MEASURED RATHER THAN CHOSEN. The shared tokens set --lh-h1 to 4.75rem against a 4.5rem --t-h1, a ratio of 1.056, and --lh-display to exactly the font size, a ratio of 1.00. That is tighter than these faces' own ascent plus descent, so the wrapped lines of a headline physically collided -- the founder photographed it. Petrona stops colliding at 1.12, measured by binary search on the ink rects of a real two-line heading with the font loaded, not guessed and not taken from the font's bounding box. It is set to 1.16 here for a little air. Across the eight sites the needed ratio runs from 1.00 to 1.58, which is why this belongs per site and cannot be one global number. h3 is left alone: it already sits at 1.23 and was never the problem. ========================================================================= */ :root { --lh-h1: calc(var(--t-h1) * 1.16); --lh-h2: calc(var(--t-h2) * 1.16); --lh-display: calc(var(--t-display) * 1.16); }