/* Source D'Amour design tokens v1, night register (revised 2026-08-05) Source of truth: brand/sda-design-legend-v1.md and its 2026-07-30 and 2026-08-05 addenda. Rule of use: components read tokens; nothing hardcodes a hex or a ms value. The register inverted on 2026-07-30. Night is the ground, cream is the mat around a photograph, and the photography is the light source. Every role name below still means exactly what it meant in v1: --sda-paper is "the page ground", --sda-ink is "text on the page ground". Only the temperature moved. Type scale, measure, spacing and motion are untouched by that decision. The sepia round (2026-08-05, Les via Logan) is the second temperature move and touches nothing else either. Photographs used as GROUNDS go true sepia so they stop competing with the work; the zones that host jewelry and stones go to the deepest ground on the site; and the bands between them alternate warm and cool so the scroll has a temperature to it. The sepia RETUNE (2026-08-05 evening, Logan on the shipped page) is the same system with the values corrected. The first pass shipped the ramp built out of the old near-black family: --sda-stage at #0e0906 carries a red-to-blue spread of 8, and 8 is invisible, so the collection "appears to have just gone for straight black". The two bands were 0.8 of a perceptual L* step apart, which is why "there is not a whole lot of difference in the section transitions". Both failures are arithmetic, and the arithmetic is this: Perceived brown-ness at low luminance is CHROMA, which on an opaque ground is the red-to-blue spread. Perceived difference between two grounds is L*, not luminance ratio. So the fix is to push spread up as luminance goes down, and to space the grounds in L* rather than by eye. The whole ground family moved up with it, because it had to: a stage dark enough to be black-looking is the only stage that can sit under the old #191410 page. A stage that is legibly brown is lighter than that page was, so the page, the punctuation band, the panels and the wells all rise to keep the one rule the round exists for, which is that the work sits on the darkest ground on the site. The register is still dark. It is a sepia photograph's shadow end (L* 11 to 27 out of 100) instead of a night. This file must stay BYTE-IDENTICAL to brand/sda-design-kit/tokens.css. */ :root { /* Color: grounds One ladder, spaced in L* (CIE lightness), which is the axis a person sees steps on. Every rung is r > g > b with a real red-to-blue spread, and the spread widens as the rung darkens, because chroma is the only thing that survives at the bottom of the range. token hex spread L* role --sda-vignette #1a1006 20 5.5 scrim and photo black point --sda-stage #2c1a08 36 11.2 under the work --sda-night #321e10 34 13.5 header, story band, footer --sda-paper #342514 32 16.0 the page --sda-panel #3b2b1d 30 19.0 cards, secondary ground --sda-band-cool #3c2f24 24 20.5 the quiet band --sda-well #3f3020 31 21.1 inputs --sda-band-warm #553918 61 26.5 the caramel band --sda-mat #f2ebdd 21 93.2 the one cream band The anchors are sepia-photography anchors, not invented: parchment highlights around #C6B29A, caramel midtones #A67C52 and #704214, deep shadows #4B3C2B and #3D230A. --sda-stage is #3D230A taken down to about three quarters; --sda-band-warm is the #704214 family pulled into shadow; --sda-band-cool is the #4B3C2B family, which is the grayer of the two canonical shadows and is what makes the pair read as two temperatures. */ --sda-paper: #342514; /* page ground (v1 --sda-night) */ --sda-panel: #3b2b1d; /* secondary ground, alternate band */ --sda-well: #3f3020; /* input and control wells on the page ground */ --sda-night: #321e10; /* punctuation ground: header, story band, footer */ --sda-night-ink: #efe7d8; /* text on night */ --sda-mat: #f2ebdd; /* the photo mat, and the one cream band (v1 --sda-panel) */ --sda-mat-ink: #241b12; /* text and dark buttons ON a mat (v1 --sda-ink) */ /* Color: the sepia ramp (2026-08-05, Les via Logan; retuned the same day) Three grounds out of the ladder above, so this reads as one world getting warmer rather than as a second palette. --sda-stage is the DEEPEST ground on the site and supersedes --sda-night in that role. It belongs to the zones that host jewelry and stones (the fresh-off-the-bench grid, the collection grid, the piece page's stage and its related strip, the archive grid) so the pieces are the lightest thing in their own band. It is not black on purpose: black is a hole, and a hole behind a photograph reads as a rendering error rather than as a room. A sepia print has no strong black in it at all; its shadows are a legible warm brown, and that is the whole difference between this and a night. --sda-band-warm and --sda-band-cool are the alternation, and they now differ on BOTH axes because one was not enough. Warm carries a 61-point red-to-blue spread against cool's 24 (chroma), and sits 6.0 L* above it (lightness). Adjacent zones therefore read as different temperatures at arm's length, which is the whole ask; the first pass separated them by 0.8 L* and 14 points of spread and nobody could see it. Both stay above --sda-stage, which is the "everything else sits slightly lighter around the work" half of the rule. */ --sda-stage: #2c1a08; /* deepest ground: the zones that host the work */ --sda-band-warm: #553918; /* warm sepia band (caramel umber) */ --sda-band-cool: #3c2f24; /* cool sepia band (ash umber, still brown) */ --sda-seam: clamp(2rem, 5vw, 3.5rem); /* the soft ground-to-ground transition */ /* Color: ink The ratios below are against --sda-paper, which moved, so they moved. Ink and ink-soft had headroom and kept their values; ink-faint did not and was lifted to hold its documented floor on the page AND on a card. */ --sda-ink: #efe7d8; /* text on the page ground, 12.0:1 */ --sda-ink-soft: #b3aca0; /* secondary text, 6.6:1 */ --sda-ink-faint: #a39b90; /* placeholders and legal micro-text, 5.4:1 (4.9:1 on a card) */ --sda-wood-line: rgba(239, 231, 216, 0.22); /* hairlines on night */ /* Color: accents (inlay colors; one accent per element, never both) Night lifts both hues. The v1 values survive as the -deep pair, which is what an accent uses when it sits on a cream mat, never on the page. */ --sda-verdigris: #7cc0b2; /* links, focus, eyebrows, "on hold", 7.1:1 */ --sda-verdigris-deep: #3e8f82; /* v1 verdigris: rules, and accents on a mat */ --sda-oxblood: #d0786a; /* "sold", errors, dropcap, 4.6:1 */ --sda-oxblood-deep: #7c3a2d; /* v1 oxblood: the same roles on a mat */ --sda-copper: #c07a4e; /* second warm accent, small touches only, 4.6:1 on night */ /* Type: faces STIX = the voice (anything read aloud as a sentence) Hanken = the fixtures (anything clicked or scanned as data) */ --sda-serif: "STIX Two Text", Georgia, "Times New Roman", serif; --sda-sans: "Hanken Grotesk", system-ui, sans-serif; /* Type: scale (minor third on 19px body) */ --sda-display: clamp(2.75rem, 1.4rem + 6vw, 4.5rem); --sda-h1: clamp(2.1rem, 1.4rem + 3vw, 3.05rem); --sda-h2: clamp(1.65rem, 1.25rem + 1.8vw, 2.15rem); --sda-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.5rem); --sda-body: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); --sda-small: 1rem; --sda-caption: 0.875rem; --sda-label: 0.75rem; /* Type: leading and tracking pairs (use with the matching size) */ --sda-lh-display: 1.02; --sda-ls-display: -0.015em; --sda-lh-h1: 1.08; --sda-ls-h1: -0.01em; --sda-lh-h2: 1.12; --sda-ls-h2: -0.005em; --sda-lh-h3: 1.2; --sda-lh-body: 1.62; --sda-lh-caption: 1.45; --sda-ls-label: 0.14em; /* Hanken uppercase labels only, never serif */ /* Measure */ --sda-measure: 68ch; /* body max */ --sda-measure-lead: 46ch; /* lead paragraphs */ /* Space (structural rhythm) */ --sda-space-1: 0.25rem; --sda-space-2: 0.5rem; --sda-space-3: 1rem; --sda-space-4: 1.5rem; --sda-space-5: 2.5rem; --sda-space-6: 4rem; --sda-space-band: clamp(3rem, 6vw, 4.5rem); /* section padding */ --sda-space-band-lg: clamp(3.5rem, 7vw, 5.5rem); /* feature band padding */ /* Edges and mats --sda-hairline is the mat's own inner line and is therefore DARK: it only ever draws on cream. Anything drawing an edge on the page ground wants --sda-edge, and anything dividing text wants --sda-rule. */ /* Controls soften, photographs stay square-cornered at their own corner radius. 2px read as an unmade decision rather than as a sharp one: at that size a corner is neither square nor round, it is just slightly wrong. (Logan, 2026-07-31.) */ --sda-radius: 4px; /* buttons, inputs, frames */ /* The letterbox fill. The house rule is still contain-never-crop, so a photograph shot at a shape other than the frame's leaves a margin; the question was only ever what colour that margin is. It was cream, which on a night page turns the leftover space into the brightest object on the screen: a 4:3 shot in a 4:5 frame spent 39% of the tile shouting about the 39%. Filling with the deepest ground instead makes the same margin disappear, so nothing is cropped and nothing is announced. (Logan, 2026-07-31: 4:5, fit inside, no cream at all.) The product frame itself is TRANSPARENT rather than reading this token, because a frame appears on the page ground, on the night band and inside a panelled card, and any single colour is a bar in two of those three. This is the fill for the fixed surfaces that are not a frame: the thumbnails and the lightbox, which have a ground of their own. */ --sda-frame-ground: #321e10; /* == --sda-night */ --sda-mat-pad: 10px; /* cream margin: the line sheet only, now */ --sda-mat-pad-small: 4px; /* thumbnails */ --sda-hairline: 1px solid rgba(36, 27, 18, 0.16); /* inside a mat, on cream */ --sda-edge: 1px solid rgba(239, 231, 216, 0.24); /* control edges on night */ --sda-rule: 1px solid rgba(239, 231, 216, 0.14); /* text section dividers */ --sda-rule-warm: 1px solid rgba(192, 122, 78, 0.30); /* the copper hairline */ /* The float shadow is brown, not black. It was rgba(0,0,0,...), which on a near-black page was indistinguishable from the page and is now the one remaining strong black on a site whose whole premise is that a sepia print has none. Same alphas, same geometry, one step under --sda-vignette. */ --sda-mat-shadow: 0 22px 50px -18px rgba(12, 7, 3, 0.75), 0 0 0 1px rgba(239, 231, 216, 0.06); /* matted-print float on the page */ --sda-mat-shadow-lift: 0 30px 60px -20px rgba(12, 7, 3, 0.85), 0 0 40px -14px rgba(192, 122, 78, 0.40); /* The vignette device (2026-08-05) A sepia photograph used as a ground sits under a scrim that is heavy at the edges and over the text and eases toward the middle, which is what the hero has always done; these stops make it a device the other zones can reuse rather than one band's hand-tuned gradient. The colour is one step below --sda-stage so an edge reads as the room falling away rather than as a black rectangle laid on top. Every stop names the colour, INCLUDING the zero-alpha one, rather than writing `transparent` (which is transparent BLACK). Modern engines interpolate gradients premultiplied and would get the same answer, but a stop that says which colour is fading is readable, and it is the one thing that stops a later edit reintroducing a gray midpoint by hand. Two families, and the split is the whole design. The VIGNETTE stops are light: they darken the corners and leave the middle of the frame alone, so the photograph is a photograph. The SCRIM stops are heavy: they are what carries type, and they are directional, so the picture is given away only where a sentence needs the ground. The scrim floor is arithmetic, not taste, and the arithmetic is redone from the retuned colour. --sda-vignette is now #1a1006, one step under --sda-stage, so over a worst-case white photograph a total alpha `a` composites the red channel to 255 - 229a (it was 255 - 244a against the old #0b0705). The tightest text on any of these bands is the verdigris eyebrow at label size; it needs the composite at or under a relative luminance of 0.0616 to clear 4.5:1, which is a >= 0.778. The floor is set at 0.83 and the vignette layer under it never gives back less than 0.09, which lands the worst point on the page at 0.845 and its luminance at 0.0374, a shade safer than the 0.0419 the first pass shipped. Every alpha above moved by roughly the same 1.12 factor, which is what it takes for a LIGHTER scrim colour to darken a photograph by the same amount: matching (P - a0*(P - 11)) with (P - a1*(P - 26)) at a mid-tone gives a1 = 1.12 a0. So the picture is exactly as visible as it was and the scrim under the type is a brown wash rather than a black one. The first pass at this round shipped a floor of 0.90 with a heavy vignette on top and the photographs were not visible at all, which is the other failure and is worse: a picture nobody can see is weight with no payload. tests/e2e/test_s50_sepia_round.py measures the shipped pixels. */ --sda-vignette: #1a1006; --sda-vignette-edge: rgba(26, 16, 6, 0.69); /* the frame's own corners */ --sda-vignette-mid: rgba(26, 16, 6, 0.34); --sda-vignette-core: rgba(26, 16, 6, 0.09); /* the middle: the photograph shows */ --sda-vignette-none: rgba(26, 16, 6, 0); /* never the `transparent` keyword */ --sda-scrim-text: rgba(26, 16, 6, 0.96); /* directly under a sentence */ --sda-scrim-hold: rgba(26, 16, 6, 0.83); /* the floor where copy runs full width */ /* Motion (settle, never bounce; notice it = too much) */ --sda-ease-settle: cubic-bezier(0.2, 0.65, 0.3, 0.9); /* reveals */ --sda-ease-lift: cubic-bezier(0.22, 0.61, 0.36, 1); /* hovers */ --sda-t-press: 180ms; /* buttons: color only */ --sda-t-link: 240ms; /* underline draw-in */ --sda-t-hover-in: 500ms; /* image lift in */ --sda-t-hover-out: 700ms; /* image release (slower out reads expensive) */ --sda-t-reveal: 600ms; /* scroll reveal, 12 to 16px translateY, fires once */ --sda-t-mark: 1000ms; /* the enso signature moment, once per session */ /* Focus */ --sda-focus: 2px solid var(--sda-verdigris); --sda-focus-offset: 3px; /* Component sizes */ --sda-btn-h: 48px; --sda-btn-h-small: 40px; --sda-mark-nav: 60px; /* header mark */ --sda-frame-ratio: 4 / 5; /* the house product frame */ }