/* ============================================================================ CERAMICS-TOOLS. "Tools indexed by what they do, not by what they cost." Grey plaster, iron oxide, and ONE FAMILY at display and body. REWRITTEN 2026-09-08 against design/DIFFERENTIATION.md and the category research at design/research/categories.md §2.6. WHAT WAS WRONG. Two of the four visible layers were somebody else's. The ground was #F0F0EC, one of five in the house sitting between #F0F0EC and #FCFCFB, which is the specific thing the founder called clones. The body was Inter, like six of eight sites. And the display was Archivo Condensed, which 3d-printing-services was also running, so the two most industrial pages in the set shared a headline face as well as a register. 1. ONE FAMILY, ARCHIVO, AT DISPLAY AND BODY. §2.6 of the category research ends on this and does not hedge: "Consider the Niwaki discipline outright: one family, one weight, everywhere. It is the single most confident thing in the reference set." So the body face is not a companion to the display face, it IS the display face. The only thing separating a headline from a paragraph here is the WIDTH AXIS and the weight: headings run Archivo at wdth 62.5% and 600, running text runs Archivo at wdth 100% and 400. Nothing else in the house does this. Every sibling pairs two families, which is the safe move and also the reason they all read the same; a single-family page has a tightness that a pairing cannot fake, and it is exactly right for a catalogue whose argument is that the tools are a system rather than a collection. It also settles the collision. 3d-printing-services has moved to Saira Condensed, so Archivo Condensed is now this brand's alone, and this brand is the only one entitled to it because it is the only one running the family underneath it as well. 2. THE GROUND DROPS TO #E6E6E1 GREY PLASTER, from #F0F0EC. Two full steps darker and still cool-neutral. #F0F0EC was inside a half step of plant-pots (#F2EFE6) and lights (#F1EFE8) and the three were not tellable apart. #E6E6E1 is unmistakably a grey, not an off-white: it is the colour of a dry bat, or of plaster before it takes water. Against its neighbours as they now stand: 3dp #DCE1E7 L* 89.3 cool BLUE-grey, machined ceramics #E6E6E1 L* 91.2 neutral-warm GREY, plaster lights #F7F4ED L* 96.2 warm PAPER, bright Three grounds, three temperatures, seven lightness points across the spread, where the old three sat inside 1.7 points of each other (#F4F4F5 96.2, #F0F0EC 94.7, #F1EFE8 94.9). 3. THE BANDING IS DEEPENED, BECAUSE IT IS THE SIGNATURE MOVE. Sections here alternate tone where plant-pots alternates whitespace, and that is this brand's separator. At #F0F0EC over #E4E4DF the band was a 1.10:1 whisper that a viewer could easily read as a rendering artefact. 3d-printing-services bands too, and its band is a 1.10:1 machine-panel step under a hairline; a catalogue band is a different instrument and it has to be the deepest in the house. The pair is now #E6E6E1 over #D5D5CF, 1.18:1, and the raised card sits above both at #FAFAF8, 1.20:1 over the page. Three tones, each step visible at a glance, which is what a catalogue's banding is for: you should be able to count the sections from across the room. 4. THE ACCENT MOVES ONE STEP DEEPER, #B4472A -> #A03B22. Same iron oxide, same potter's pigment, and it had to move because the ground moved. #B4472A was 4.92:1 on #F0F0EC and is only 4.33:1 on #E6E6E1, and 3.68:1 on the new band, so it stopped being usable for the hover state on an index code or a dimension callout. #A03B22 clears 4.5 on all three surfaces, so this brand keeps ONE accent value that works everywhere rather than splitting into a text cut and a graphic cut the way lights and 3dp have to. Budget unchanged: <=3 instances per viewport. The five flex-index colours are NOT accents and are not part of this budget. They are product colour, they are locked to the grade, they are printed on the physical tool, and per §2.6 they appear only in the grade key and the spec table. They are never page furniture. CONTRAST, computed 2026-09-08. Floors: body 7.0, secondary 4.5, tertiary 4.5. on --surface on --surface-band on --surface-2 #E6E6E1 #D5D5CF #FAFAF8 ink #191919 14.04 11.93 16.82 ink-2 #414141 8.15 6.93 9.77 ink-3 #5B5B55 5.46 4.64 6.54 accent #A03B22 5.34 4.53 6.39 rule #C6C6C0 1.37 1.16 1.64 (exempt) ink-4 #8E8E88 2.63 non-text marks only, never running text accent-h #7F2E1A 7.27, and 8.71:1 under a --surface-2 label surface-2 on accent 6.39, the primary button label on --surface-inv #191919: ink-inv #EDEDE8 14.97, ink-2-inv #C9C9C3 10.57 Never #000 for text. Never #fff for text. ink-3 was #65655F and had to darken with the ground: it was 4.68 on the page but only 3.98 on the new band, and every micro-label in this brand is set in it. §2.6 is explicit that micro-labels need MORE contrast, not less. MEASURE. --max-text drops from 760px to 480px, and this is a consequence of the typeface and of how this page is actually set, not a grid change. The research quoted 760px / 68ch from Hida, but that figure assumes reading-size body copy and almost all the prose in this catalogue is at --t-caption, 12px, where 760px runs to about 127 characters a line. §2.12 fails anything over 90. 480px of Archivo is roughly 80 characters at 12px and 57 at the 17px default, which is inside the intro band. --grid-cols, --gutter, --margin and --max-content are untouched. RADIUS: System A (sharp). 0 everywhere, pills for badges only. Per §4.6 and the Niwaki, HAY and KINTO reference set. A trimming rib has no fillet on it. Overridden in this file: palette, the typeface (singular), the display width and weight, the text measure, the 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 The hue is the one a kiln actually is at the moment the cone bends, and this brand has the strongest claim to it in the house, which is why the parent gave up its orange rather than sit ten degrees of hue away. Three values of one hue, because two hues per brand across eight brands is sixteen colours and that is the rainbow the reference photographs warned about. --safe is the vivid value pulled just far enough back to clear 4.5:1 on white, which it does at 4.53:1, with nothing to spare. That number is the reason every surface on this site is now white: there is no tone step left underneath the accent text that keeps it legal. CONTRAST, RE-MEASURED 2026-09-14. Every surface on this site is #FFFFFF, so for the first time there is one column instead of three, and the table further up this file, which names #E6E6E1 and #D5D5CF, is superseded. Floors: body 7.0, secondary 4.5, tertiary 4.5. on #FFFFFF ink #191919 17.58 ink-2 #414141 10.21 ink-3 #5B5B55 6.83 ink-4 #8E8E88 3.29 non-text marks only, never running text rule #C6C6C0 1.72 hairlines, exempt, and now load bearing --safe #D7401C 4.53 the floor, with 0.03 to spare --primary#E8451F 3.96 FAILS as text. Fills and the mark only. --deep #A23015 7.07 --on-fill on --deep 6.44, on --ink 15.55 ------------------------------------------------------------------------ */ @layer tokens { :root { --logo: #E8451F; --primary: #E8451F; --deep: #A23015; --safe: #D7401C; /* 4.53:1 on white. On anything darker 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. THIS BRAND'S BUTTON IS THE ONE EXCEPTION IN THE HOUSE. Nothing legal sits on --primary: a near-white label measures 3.96:1 on it and an ink label 4.44:1, and both are under the floor, so the fill is --deep (6.44:1 with the label below) and --primary keeps its job in the mark, in the active states and in the drawing marks. Hover goes to ink rather than darker still, because --deep is already the resting state. */ --fill: var(--deep); --fill-h: var(--ink); --on-fill: #EDEDE8; /* the same near-white as --ink-inv. 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 cone%22%3E %3Cg fill=%22%23000%22%3E %3Cpolygon points=%2212,21 24,21 18,7%22/%3E %3C/g%3E %3C/svg%3E"); } } @layer tokens { :root { /* --- surfaces: three tones and you can see all three ------------------ */ --surface: #FFFFFF; /* white. The ground decision in design/COLOUR.md, and on this brand it is forced twice over: --safe clears 4.5:1 on white by 0.03 and on nothing darker. */ --surface-band:#FFFFFF; /* THE BAND IS NOW A PAIR OF HAIRLINES, NOT A TONE, and that is a real loss worth naming. Banding was this brand's separator and the whole point was that you could count the sections from across the room. It cannot survive: the tone step it needs would put the 10px dimension labels and the index hover under the contrast floor. Sections are separated by rules instead. */ --surface-2: #FFFFFF; /* raised card, plan view, drawing, chip. Same reason: the drawing wells carry 10px dimension labels in the accent, so they cannot be tinted. All four of them already draw a 1px --rule border, which is now what makes them visible. */ --surface-inv: #191919; /* the footer plate and the copy toast */ --rule: #C6C6C0; /* 1px hairlines only, 1.37:1 */ /* --- ink: one hue, neutral-warm, low chroma --------------------------- */ --ink: #191919; /* Niwaki's exact value. Never #000. 14.04:1 */ --ink-2: #414141; /* Niwaki's exact value. Explicitly NOT the category leader's light grey body copy. */ --ink-3: #5B5B55; /* micro-labels, spec keys, metadata. 5.46:1 */ --ink-4: #8E8E88; /* non-text marks only. 2.63:1 */ --ink-inv: #EDEDE8; /* on --surface-inv. Never pure white. */ --ink-2-inv: #C9C9C3; /* secondary on --surface-inv */ /* --- accent: ONE, iron oxide, max 3 instances per viewport ------------ */ --accent: var(--safe); /* the text cut, and every surface on this site is white so there is still only one accent value to hold in your head. */ --accent-h: var(--deep); --focus: var(--safe); /* --- flex index: PRODUCT COLOUR ONLY. Never UI, never page furniture. Five grades, colour locked, printed on the tool, carried in the variant name so the grade survives into the cart and the invoice. --- */ --flex-ultrasoft:#E8C24F; --flex-soft:#D2694A; --flex-medium:#5C8A63; --flex-firm:#2E5E8C; --flex-hard:#26262A; /* --- the one family, at two widths ------------------------------------ */ --font-display: Archivo, system-ui, sans-serif; --font-body: Archivo, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; /* The width axis is what separates a heading from a paragraph here, so it is a brand token and not a magic number in a component file. */ --wdth-display: 62.5%; --w-display: 600; /* the display cut, permitted as the third */ --max-text: 480px; /* see the MEASURE note above */ /* --- radius: System A (sharp) ----------------------------------------- */ --r-0: 0; --r-pill: 999px; } } @layer components { /* The masthead lockup: the cone, 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 the condensed caps beside it. */ .wordmark { display: inline-flex; align-items: center; gap: 0.42em } .wordmark .wm-mark { width: 1.3em; height: 1.3em; 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. Archivo stops colliding at 1.08, 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.12 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.12); --lh-h2: calc(var(--t-h2) * 1.12); --lh-display: calc(var(--t-display) * 1.12); }