/* ══════════════════════════════════════════════════════════════════════════ figma-skin.css: SPEC COMPLIANCE against the design, not a vibe match. Source of truth: Stormbit App file XS142d80ol4l3feNSSz56M, frame 405:17, "Moneyness, Today (native redraw)", read via get_design_context on 2026-09-23. Every value below is quoted from that response, not sampled from a screenshot. WHY THIS FILE EXISTS. codex-skin.css already matched the design's PALETTE (#ffffff, #0d0d0d, #e5e5e5, #8f8f8f), which is why a pixel diff looked like a pass. It did not match the TYPE SYSTEM. Measured side by side: property design live before this file mono family JetBrains Mono ui-monospace hero weight 400 500 hero tracking -2.28px -3.42px window value JetBrains Mono #b42318 Inter #0d0d0d SHARE size/weight 9px / 400 10px / 600 SHARE colour #5d5d5d #0d0d0d SHARE tracking 0.36px 0.9px SHARE radius 6px 4px card radius 10px 0px It edits no existing stylesheet and instrument.css is untouched. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. the mono family. The single most visible miss. Every figure on the design is JetBrains Mono; the live page was falling through to whatever ui-monospace resolves to on the machine. ──────────────────────────── */ /* THE RIGHT FIX, and the first draft got this wrong. instrument.css carries `font-family: var(--mono) !important` on `body :not(svg):not(svg *)`, a near-universal selector, so re-pointing ONE token moves every figure on the site. My first attempt listed selectors by hand and reached 5 nodes out of 14,381. Re-pointing the token reaches all of them in one declaration. */ :root, :root:root { --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --sans: Inter, "Inter Display", system-ui, -apple-system, sans-serif; --mn-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } :root:root body .td-n, :root:root body .td-p-v, :root:root body .mono, :root:root body [class*="-fig"], :root:root body .tw-c.c-prem, :root:root body .tw-c.c-size { font-family: var(--mn-mono) !important; font-variant-numeric: tabular-nums; } /* ── 2. the hero figure. 76px is already right; the weight and the tracking are not. Design: JetBrains Mono Regular 76px, tracking -2.28px. ───── */ :root:root:root body .td-n { font-weight: 400 !important; letter-spacing: -2.28px !important; } /* ── 3. the qualifier strip values. Design draws all four in JetBrains Mono Regular 15px, and draws the WINDOW value alone in #b42318, which is a true red rather than the salmon the live page inherited. ──────────── */ :root:root:root body .td-p-v { font-weight: 400 !important; letter-spacing: normal !important; } :root:root:root body .td-p--bad .td-p-v, :root:root:root body .td-p.is-bad .td-p-v { color: #b42318 !important; } /* ── 4. the SHARE control. Five properties were wrong at once, which is why it read as heavier than the design. ───────────────────────────────── */ :root:root:root body .tc-share { font-size: 9px !important; font-weight: 400 !important; color: #5d5d5d !important; letter-spacing: 0.36px !important; border-radius: 6px !important; border-color: #d9d9d9 !important; background: #ffffff !important; } /* ── 5. the card. The design puts the whole view in a 10px rounded panel with a #e5e5e5 hairline. The live panel had square corners. ───────── */ :root:root:root body section.panel { border-radius: 10px !important; border: 1px solid #e5e5e5 !important; } /* ── 6. micro labels. Design: Inter Medium 11px, #8f8f8f, tracking 0.66px. This is the one tracking value the design uses repeatedly, on WINDOW, VENUES READ, FILLS, AS OF, WHICH ASSETS and WHICH VENUES. ─────────── */ :root:root:root body .td-p-k, :root:root:root body .td-sec-k, :root:root:root body .sec-k { font-family: Inter, system-ui, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; color: #8f8f8f !important; letter-spacing: 0.66px !important; } /* ── 7. the active tab underline. Design: #0d0d0d, 3px tall. ──────────── */ :root:root:root body nav.rail .rl-item[aria-current], :root:root:root body nav.rail .rl-item.is-on { box-shadow: inset 0 -3px 0 #0d0d0d !important; } /* ── 8. the WINDOW value, and why it needed its own block ──────────────── today.css: html body .td-prov .td-p:first-child .td-p-v { font-family: inherit !important } That is specificity (0,4,2) and it deliberately forces the first cell of the qualifier strip to the sans face, which is why "24 hours" rendered in Inter while the other three cells rendered in JetBrains Mono under the same class. Enumerated live from the CSSOM, not guessed. Frame 405:17 draws node 409:23 as JetBrains Mono Regular 15px in #b42318. Matching the offending selector and adding :root repeats takes this to (0,7,2), which is the smallest thing that wins without touching today.css. */ /* NOTE: the first draft of this selector was `:root:root:root html body ...` and matched NOTHING, because :root IS the html element, so that asks for an html inside an html. Confirmed by enumerating the CSSOM: the rule served but never appeared in the match list. Dropping `html` gives (0,7,1), which beats today.css's (0,4,2) on the class column. */ :root:root:root body .td-prov .td-p:first-child .td-p-v, :root:root:root body .td-p:first-child .td-p-v { font-family: var(--mn-mono) !important; font-weight: 400 !important; color: #b42318 !important; letter-spacing: normal !important; } /* ══════════════════════════════════════════════════════════════════════════ PASS 2: the rest of frame 405:17, measured element by element against the live page rather than eyeballed. Each line states design vs live. ══════════════════════════════════════════════════════════════════════════ */ /* claim, node 409:18. design Inter Regular 26px tracking -0.52px. live was 26px but weight 500 and tracking -0.39px. */ :root:root:root body .td-say { font-weight: 400 !important; letter-spacing: -0.52px !important; } /* tagline, node 405:20. design Inter Regular 11px #8f8f8f tracking 0.66px. live had the size and colour right and tracking `normal`. That 0.66px is the design's one repeated label tracking and it appears on six nodes. */ :root:root:root body .cb-eyebrow { letter-spacing: 0.66px !important; } /* qualifier strip, node 409:21. design h 76px, radius 8px, 1px #e5e5e5. live was h 71px with square corners. The strip is drawn as a bordered container, not as four loose cells, so the radius belongs on the wrapper. */ :root:root:root body .td-prov { border-radius: 8px !important; border: 1px solid #e5e5e5 !important; min-height: 76px !important; background: #ffffff !important; overflow: hidden; } /* the three internal dividers, design #e5e5e5 1px full cell height */ :root:root:root body .td-prov .td-p + .td-p { border-left: 1px solid #e5e5e5 !important; } /* qualifier label, nodes 409:22/25/29/32. design Inter Medium 11px #8f8f8f tracking 0.66px. */ :root:root:root body .td-p-k, :root:root:root body .td-p > :first-child:not(.td-p-v) { font-size: 11px !important; font-weight: 500 !important; color: #8f8f8f !important; letter-spacing: 0.66px !important; } /* row name, node 411:21. design Inter Medium 14px. live was 15px. */ :root:root:root body .td-r b, :root:root:root body .td-r .td-a-n { font-size: 14px !important; font-weight: 500 !important; } /* row pitch, derived from the design's separator positions: 634, 680, 726, 772, 818, 864, 910. That is a 46px step, every time. */ :root:root:root body .td-rows .td-r { min-height: 46px !important; border-bottom: 1px solid #e5e5e5 !important; } :root:root:root body .td-rows .td-r:last-child { border-bottom: 0 !important; } /* the bar, nodes 411:22 and 411:23. design: a #d9d9d9 track 180px wide and 2px tall, with a #0d0d0d fill of the same height drawn over it. */ :root:root:root body .td-r .track, :root:root:root body .td-r [class*="bar"] { height: 2px !important; background: #d9d9d9 !important; } :root:root:root body .td-r .track > *, :root:root:root body .td-r [class*="bar"] > * { height: 2px !important; background: #0d0d0d !important; } /* inactive tab, nodes 405:26 to 405:43. design #8f8f8f, active #0d0d0d. */ :root:root:root body nav.rail .rl-item:not([aria-current]):not(.is-on) .rl-l { color: #8f8f8f !important; } /* the [n] prefix, design Inter 11px #8f8f8f at 45% opacity */ :root:root:root body nav.rail .rl-item .rl-k, :root:root:root body nav.rail .rl-item .rl-n { font-size: 11px !important; color: #8f8f8f !important; opacity: .45 !important; }