/* ============================================================================ PLANT-POTS. Warm cream, living leaf green, a soft serif. REWRITTEN 2026-09-08 against design/DIFFERENTIATION.md. WHAT CHANGED AND WHY. 1. THE GROUND IS NOW CREAM, NOT GREY. It was #F5F3ED, which is a warm-ish neutral in a set where five of eight grounds sat between #F0F0EC and #FCFCFB. Read next to ceramics (#F0F0EC) and lights (#F1EFE8) it was a third indistinguishable pale grey, and the founder was right that the pages looked like clones. It is now #F2EFE6: same lightness band, but the blue channel drops 7 points against the red, so it reads as unbleached paper stock rather than as plaster. This is the domestic brand. Cream is the cheapest and most honest way to say so. 2. DISPLAY: Fraunces, replacing Instrument Sans. Instrument Sans is a competent neutral grotesque and that is exactly the problem: it said nothing that Inter next to it was not already saying. Fraunces is a soft serif with an optical-size axis, a SOFT axis that rounds the terminals and a WONK axis that swaps in the cocked, slightly irregular alternates. Set at SOFT 40 and WONK 1 it has genuine warmth and a little humour without tipping into a children's face, which is the line this brand has to walk. It also makes this the only soft serif in the house: lights runs Petrona (an editorial serif on warm paper), aquatics runs Newsreader (a sharp specimen-plate serif), the hub runs Noto Serif Armenian (an institutional reference serif). Four serifs, four different jobs, and only this one is round. 3. BODY: Karla, replacing Inter. Karla is a grotesque with things wrong with it in the useful sense: a squared-off bowl, a low-slung ear on the g, an unusually wide e and a slightly compressed rhythm. At paragraph length it reads friendly where Inter reads administrative. It is also metrically unlike Inter, so a 200px thumbnail of a paragraph is visibly a different page rather than the same page in another colour. 4. LEADING STAYS GENEROUS, and it is a typeface decision rather than a spacing-scale one, so it is legitimately a brand override. --lh-body is held at 1.7rem against the house 1.5625rem. The category research (§3.5) records Kinto running 2.16 and nothing mass-market above 1.6, and calls the leading the thing that reads premium before a word is read. Karla has a large x-height and short descenders, so it can take the air without the lines coming apart. The SPACING SCALE, THE GRID and THE MOTION TIMING are untouched, as required. 5. SECTION SEPARATION IS STILL WHITESPACE ONLY. No tonal bands, no rules between sections. Ceramics is the sibling that bands; this one breathes. That is this brand's signature move and it is unchanged. CONTRAST, computed 2026-09-08. Floors: body 7.0, secondary and tertiary 4.5. on --surface #F2EFE6 on --surface-2 #FAF8F1 ink 13.29 ink 14.38 ink-2 7.62 ink-2 8.24 ink-3 4.74 ink-3 5.13 accent 5.39 accent 5.83 accent-h 7.60 rule 1.22 (hairline, exempt) surface-2 on accent 5.83, used for the primary button label. surface on surface-inv 13.00, used by the toast. ink-4 is 2.44 and is a non-text mark only. Never #000, never #fff. RADIUS: System B (soft), unchanged. 2 / 8 / 16 / 28 / pill. Inner radius = outer minus padding. Overridden here: palette, typefaces, radius tier, and the body leading that belongs to the typeface. Nothing else. ========================================================================= */ /* --------------------------------------------------------------------------- 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 Worth knowing about this particular hue: green is 0.2 per cent of the saturated pixels in the ten reference feeds the palette was measured against. This brand's colour is a decision, not an observation, and it is the deliberate one, because the subject is plants. --safe is the vivid green pulled back until it clears 4.5:1 on white, which it does at 4.55:1. --primary is 2.63:1 and cannot carry text at all. CONTRAST, RE-MEASURED 2026-09-14. Both surfaces are #FFFFFF now, so the table further up this file, which names #F2EFE6, is superseded. Floors: body 7.0, secondary 4.5, tertiary 4.5. on #FFFFFF ink #22271B 15.28 ink-2 #474D3D 8.76 ink-3 #666C59 5.45 ink-4 #9A9C8A 2.59 non-text marks only rule #E0D9C8 1.41 hairlines, exempt, and now load bearing --safe #12883E 4.55 --primary#16A34A 3.30 FAILS as text. Fills and the mark only. --deep #0D662E 7.10 --on-fill is --ink, 4.64 on --primary. --on-fill-h 8.05 on --deep. ------------------------------------------------------------------------ */ @layer tokens { :root { --logo: #16A34A; --primary: #16A34A; --deep: #0D662E; --safe: #12883E; /* 4.55:1 on white */ /* 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. The house rule, applied the same way on all eight sites: take the vivid --primary as the fill if any legal label sits on it, and drop to --deep only if none does. Here the near-white fails at 3.30:1 but this brand's own green-black ink clears it at 4.64:1, so the button keeps the vivid green and takes a dark label. The hover ground is --deep, which is the other way round, so the label flips with the ground and both cuts are named. */ --fill: var(--primary); --fill-h: var(--deep); --on-fill: var(--ink); /* 4.64:1 on --primary */ --on-fill-h: #FAF8F1; /* the old page cream, now the reversed ink. 8.05:1 on --deep. Never #fff. */ /* 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 leaf%22%3E %3Cg fill=%22%23000%22%3E %3Cpath d=%22M12 21C12 13 16 8 23 8c0 8-4 13-11 13z%22/%3E %3C/g%3E %3C/svg%3E"); } } @layer tokens { :root { /* --- surfaces -------------------------------------------------------- */ --surface: #FFFFFF; /* white. design/COLOUR.md: the colour on this site should arrive in photographs of real printed pots, and a cream ground costs a vivid palette 0.7 of a contrast point. */ --surface-2: #FFFFFF; /* raised card, enquiry block, footer plate. White as well, and that is forced: the footer link hover is --safe, which has 0.05 of a point of headroom on white and none at all on a tint. The card and the enquiry block used to be visible because the page was cream, so they now draw a 1px --rule border instead. The cream itself is not lost: it became --on-fill-h, the ink on a reversed ground. */ --surface-inv: #23291C; /* green-black. The toast, and nothing else. */ --rule: #E0D9C8; /* warm hairline, 1.22:1. Earned, not drawn. */ /* --- ink: warm green-black, one hue, low chroma ----------------------- */ --ink: #22271B; /* body. Green-black, never #000. 13.29:1 */ --ink-2: #474D3D; /* secondary and running prose. 7.62:1 */ --ink-3: #666C59; /* tertiary, labels, spec keys. 4.74:1 */ --ink-4: #9A9C8A; /* non-text marks only. 2.44:1 */ /* --- accent: ONE, max 3 instances per viewport ------------------------ */ --accent: var(--safe); /* the text cut. 4.55:1 on white. */ --accent-h: var(--deep); /* hover, and the reversed ground */ --focus: var(--safe); /* Illustration warm neutrals. Graphics only, never UI, never text. */ --leaf-light: #6B9B5A; --terracotta: #C9B49C; /* --- typefaces -------------------------------------------------------- */ --font-display: Fraunces, "Source Serif 4", Georgia, serif; --font-body: Karla, "Segoe UI", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; /* Three weights, permitted because one of them is the display cut. Fraunces at 400 with a raised optical size is already substantial; taking it to 500 would make the page shout, which this brand does not. */ --w-display: 400; /* SOFT rounds the terminals, WONK swaps the cocked alternates in. Both are what make this face warm rather than merely serif. */ --vf-display: "SOFT" 40, "WONK" 1; /* Leading belongs to the face, not to the spacing scale. See note 4. */ --lh-body: 1.7rem; /* --- radius: System B (soft) ------------------------------------------ */ --r-1: 2px; --r-2: 8px; --r-3: 16px; --r-4: 28px; --r-pill: 999px; } } /* ============================================================================ Site chrome: masthead, footer, button. Added 2026-09-10. These rules used to live in an inline