/* ============================================================================ TOYS. "Built by a child. Chosen by an adult." REVISED 2026-09-08 against design/DIFFERENTIATION.md, with the lightest hand of the three sites in that pass. The founder has approved the display face and the palette, so the indigo, the four product vivids and the four tint partners are untouched, and the display face is untouched. Two things move. 1. BODY FACE: Work Sans, replacing Inter. This is the whole reason the differentiation pass exists. Six of eight house sites ran Inter for body text, and body text is most of what a reader looks at, so the pages read as clones no matter what the headings did. Work Sans is the right replacement here specifically because it changes as little as possible while still being a real change: it is a grotesque cut for screen at reading sizes, its lowercase is slightly rounder and its apertures are slightly more open than Inter's, and it sits under Outfit without argument because both are drawn on generous, near-circular bowls. Read side by side with Inter the difference is quiet; read side by side with Karla on plant-pots or IBM Plex Sans on aquatics it is unmistakable, and that is the axis the founder was complaining about. 2. GROUND: #FBFAF5, up from #F9F8F3. Brightness is a category requirement (categories.md §5.5: Lovevery's ground is the brightest thing in the reference set and the toy category expects it), and the previous value sat in the middle of the pack rather than at the top of it. The lift is small on purpose. It is a brightening, not a new colour. NOT CHANGED, and not to be changed without the founder: - the institutional indigo #1B2452, which carries logo, headings, nav and buttons, and which is the single strongest idea in this brand: an adult, near-academic colour doing the job a toy brand would give to red. - the four product vivids. Four is the discipline. They appear ONLY inside photographs and inside configurator chips. Never a section ground, never a heading colour, never a badge. - the four tint partners. Section backgrounds use the tint; a vivid is permitted as a 2px rule or a 24px chip and nothing larger. - Outfit as the display face, and the 3rem display cap, which is never exceeded. - the banned display faces listed below, which remain banned. CONTRAST, recomputed 2026-09-08 on the new ground. Floors: body 7.0, secondary and tertiary 4.5. on --surface #FBFAF5 on --surface-2 #FDFCF9 on --surface-alt #F7F5EA ink 14.14 ink 14.41 ink 13.60 ink-2 7.79 ink-2 7.94 ink-2 7.50 ink-3 5.31 ink-3 5.41 ink-3 5.11 on the tint partners, which are the only chroma on the page: tint-vermilion #FAEFEC ink-2 7.22 ink-3 4.92 tint-ochre #FBF4E7 ink-2 7.45 ink-3 5.07 tint-petrol #EDF4F5 ink-2 7.31 ink-3 4.98 tint-moss #F0F4EB ink-2 7.31 ink-3 4.98 surface-2 on ink 14.41, used for the primary button label. rule 1.33:1, hairline, exempt. --ink-4 is 2.93:1 and is now a NON-TEXT token. It was carrying the spec keys, the at-a-glance keys and the zone counters, all of which are small uppercase text and all of which were failing. They moved to --ink-3. categories.md §6.2 made exactly this correction once already, lifting the muted value from #7C7A78 at 4.02 to #6A6866 at 5.22. Small text needs more contrast than body, not less. Never #000. Never #fff. RADIUS: System B (soft), unchanged. 2 / 8 / 16 / 28 / pill. Overridden here: palette, typefaces, radius tier, and the display cap that belongs to this category. Nothing else. The spacing scale, the grid and the motion timing come from the house file unchanged. ========================================================================= */ /* --------------------------------------------------------------------------- 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 --safe and --primary are the same value on this brand, because the magenta clears 4.5:1 on white by 0.04 of a point and does not need pulling back. That tiny margin is also a warning: the accent may only ever sit on the white page, never on a tinted panel, which is where it is used and where it stays. CONTRAST, RE-MEASURED 2026-09-14 on the repainted grounds. These numbers supersede the table further up this file, which still names #FBFAF5. Floors: body 7.0, secondary 4.5, tertiary 4.5. on #FFFFFF panel #F7F6F1 band #F3F0E4 ink #1B2452 14.78 13.66 12.95 ink-2 #514F4E 8.14 7.53 7.13 ink-3 #6A6866 5.55 5.13 4.86 ink-4 #96938E 3.00 2.77 2.63 marks only rule #DEDBD0 1.39 1.28 1.21 exempt --safe #E5007D 4.54 4.19 3.98 --deep #AE005F 7.08 6.55 6.20 --on-fill on --deep 6.95, on --ink 14.40 READ THE --safe ROW BEFORE PUTTING A LINK IN A PANEL. The magenta clears the floor on white by 0.04 of a point and fails on both tints. That is a property of the hue, not of the panels: no tint pale enough to keep it legal is pale enough to see. So accent-coloured text belongs on the page ground, and inside a panel a link is ink. It is worth saying out loud that this is the tightest colour in the eight and the first thing to look at if the palette moves again. ------------------------------------------------------------------------ */ @layer tokens { :root { --logo: #E5007D; --primary: #E5007D; --deep: #AE005F; --safe: #E5007D; /* 4.54:1 on white. On a tint it fails. */ /* 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 none does, and the arithmetic is worth keeping because it is close. Pure white on the magenta is 4.54:1, which would pass, but this theme has forbidden #fff for text since it was written and the near-white it uses instead lands at 4.45:1, under the floor. The brand's own indigo ink is 3.26:1 and nowhere near. So the fill is --deep at 6.95:1 and the magenta keeps its job in the mark, in the active states and in the bullets. Hover goes to the indigo ink, which is where this button has always gone, because there is no magenta darker than --deep to go to. */ --fill: var(--deep); --fill-h: var(--ink); --on-fill: #FDFCF9; /* the old raised-card white, now the reversed 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 small tower of three courses%22%3E %3Cg fill=%22%23000%22%3E %3Crect x=%2211.5%22 y=%2217%22 width=%2212%22 height=%224%22 rx=%221.2%22/%3E %3Crect x=%2213.2%22 y=%2212.5%22 width=%229%22 height=%224%22 rx=%221.2%22/%3E %3Crect x=%2215%22 y=%228%22 width=%226.4%22 height=%224%22 rx=%221.2%22/%3E %3C/g%3E %3C/svg%3E"); } } @layer tokens { :root { --surface: #FFFFFF; /* white. The category requires brightness and this is the brightest there is; design /COLOUR.md also measures a vivid palette a full 0.7 of a contrast point better on it. */ --surface-2: #F7F6F1; /* raised card, chip, panel. DARKENED, not lightened: at #FDFCF9 it was three quarters of one per cent off the old cream and it would have been invisible against a white page. It is a tint below the page now, which is the only direction left, and the panels that had no border still read. */ --surface-alt: #F3F0E4; /* alternating warm section, Grimm's cream. A clear step below --surface-2 so a band inside a panel is still tellable apart. */ --surface-inv: #1B2452; --rule: #DEDBD0; --ink: #1B2452; /* institutional indigo: logo, headings, nav, buttons */ --ink-2: #514F4E; /* body. Never #000. 7.79:1 */ --ink-3: #6A6866; /* tertiary AND every micro-label. 5.31:1 */ --ink-4: #96938E; /* 2.93:1. Non-text marks only. Never a label. */ /* The accent used to be the same indigo as the ink, which is another way of saying this site had no accent. It has one now. The indigo stays exactly where it was, as the ink: 13.59:1 on white, and still the colour of the headings and the nav. */ --accent: var(--safe); /* the text cut. Page ground only. */ --accent-h: var(--deep); --focus: var(--safe); /* Product vivids. Four only. ONLY inside photographs and configurator chips. Never a section ground, never a heading, never a badge. */ --vivid-vermilion:#D9482F; --vivid-ochre:#E8A22B; --vivid-petrol:#2F7F8C; --vivid-moss:#5E8C3F; /* Tint partners. The only place chroma touches the page. */ --tint-vermilion:#FAEFEC; --tint-ochre:#FBF4E7; --tint-petrol:#EDF4F5; --tint-moss:#F0F4EB; /* Banned display faces: VAG Rounded, Nunito, Quicksand, Baloo, Gotham Rounded, anything handwritten, any rounded terminal. Still banned. */ --font-display: Outfit, "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --font-accent: Newsreader, Georgia, serif; /* ONE italic word in a CTA. Nowhere else. */ --t-display: 3rem; /* capped, per Lovevery. Never exceeded. */ --r-1: 2px; --r-2: 8px; --r-3: 16px; --r-4: 28px; --r-pill: 999px; } } @layer components { /* The masthead lockup: the three-course tower, then the name, on one line. Inline SVG rather than an so it takes --logo and --deep straight off this file and there is no second asset for a reversed ground. Sized in em so it tracks whatever the masthead sets the wordmark at. */ .wordmark { display: inline-flex; align-items: center; gap: 0.4em } .wordmark .wm-mark { width: 1.35em; height: 1.35em; flex: none } .wordmark .wm-name { font: 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. Outfit stops colliding at 1.26, 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.30 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.3); --lh-h2: calc(var(--t-h2) * 1.3); --lh-display: calc(var(--t-display) * 1.3); }