/* ================================================================== WP3 · DESIGN TOKENS — EXTRACTED FROM 17 LOCKED HTML FILES ------------------------------------------------------------------ Source: HQ_Craftworks_DESIGN_SWEEP_2026-09-18_v2.zip Extraction date: 19 Sep 2026 Method: frequency analysis across all 17 locked + 3 review HTML files. Values appearing in 12–13/13 locked files are canonical. Minor per-file drift (±2 hex digits) is collapsed to the mode. RULES: 1. Nothing in the new-UI CSS may hardcode a value that has a token. 2. Every rule reads from these tokens via var(--nu-...). 3. Scoped under [data-new-ui] — cannot leak into v1.44 UI. 4. Changes to this file require a design-lock-amendments.md entry. ================================================================== */ [data-new-ui] { /* ================================================================ COLOUR · core palette (from :root vars in locked HTML files) ================================================================ */ /* ---- Navy (sidebar, dark surfaces, primary text) --------------- */ --nu-c-navy: #071d2d; /* --navy 13/13 files */ --nu-c-navy-2: #0e2b42; /* --navy2 12/13 files */ --nu-c-navy-3: #153e5c; /* --navy3 12/13 files */ /* ---- Semantic colours ----------------------------------------- */ --nu-c-green: #0cab78; /* --green 13/13 · operational actions, success */ --nu-c-blue: #1b70e5; /* --blue 12/13 · links, info */ --nu-c-purple: #6f31cf; /* --purple 12/13 · accents */ --nu-c-amber: #e09a10; /* --amber 12/13 · quoting/field-record context */ --nu-c-red: #e34444; /* --red 13/13 · destructive, urgent */ --nu-c-yellow: #f6c21a; /* --yellow 13/13 · brand accent, house icon */ /* ---- Surfaces ------------------------------------------------- */ --nu-c-surface-page: #edf4fa; /* --page 13/13 · off-white work surface */ --nu-c-surface-card: #fff; /* --card 13/13 · white cards */ --nu-c-surface-sidebar: #071d2d; /* same as --nu-c-navy */ --nu-c-surface-header: #fff; --nu-c-surface-modal: #fff; /* ---- Text ----------------------------------------------------- */ --nu-c-text-primary: #0b1d37; /* --text 13/13 */ --nu-c-text-muted: #4b6179; /* 4j: was #5c738b, darkened for readability */ /* --muted 12/13 */ --nu-c-text-inverse: #fff; /* on dark sidebar */ --nu-c-text-link: #1b70e5; /* same as --nu-c-blue */ /* ---- Borders / dividers --------------------------------------- */ --nu-c-border-default: #d7e3ec; /* --line 13/13 */ --nu-c-border-strong: #cbd9e7; /* heavier dividers — 25 occurrences */ /* ---- Sidebar-specific overlays -------------------------------- */ --nu-c-sidebar-hover: rgba(255,255,255,.14); /* 40 occurrences */ --nu-c-sidebar-active: rgba(255,255,255,.12); /* 19 occurrences */ --nu-c-sidebar-subtle: rgba(255,255,255,.07); /* 17 occurrences */ --nu-c-sidebar-faint: rgba(255,255,255,.03); /* 19 occurrences */ --nu-c-sidebar-text: rgba(255,255,255,.72); /* 14 occurrences */ /* ---- Status colours ------------------------------------------- */ --nu-c-status-urgent: #e34444; /* same as --nu-c-red */ --nu-c-status-warning: #ef5b3a; /* orange-red, 12 occurrences */ --nu-c-status-ok: #0cab78; /* same as --nu-c-green */ --nu-c-status-info: #1b70e5; /* same as --nu-c-blue */ --nu-c-status-neutral: #5c738b; /* same as --nu-c-text-muted */ /* ---- Soft tints (from file 08, Tasks) ------------------------- */ --nu-c-tint-amber: #fff4df; /* --amber-soft */ --nu-c-tint-blue: #eaf2ff; /* --blue-soft */ --nu-c-tint-green: #e6f7f2; /* --teal-soft */ --nu-c-tint-purple: #f0eeff; /* --violet-soft */ --nu-c-tint-red: #ffe0de; /* urgent badge background */ /* ================================================================ TYPOGRAPHY ================================================================ */ --nu-t-family: Inter, "Segoe UI", Arial, sans-serif; --nu-t-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- Size scale (frequency-ranked from 17 files) -------------- */ --nu-t-size-2xs: 11px; /* 4j: was 9px */ /* fine print, badges */ --nu-t-size-xs: 12px; /* 4j: was 10px */ /* sidebar labels, metadata */ --nu-t-size-sm: 13px; /* 4j: was 11px */ /* compact operational UI */ --nu-t-size-base: 12px; /* most-used size (172 hits) */ --nu-t-size-md: 13px; /* secondary content */ --nu-t-size-lg: 14px; /* body copy */ --nu-t-size-xl: 15px; /* section labels, card headers */ --nu-t-size-2xl: 18px; /* sub-headings */ --nu-t-size-3xl: 21px; /* secondary page titles */ --nu-t-size-4xl: 31px; /* page titles (README: 31px) */ /* ---- Weight scale --------------------------------------------- */ /* Locked files use heavy weights (700–900). The HTML files are static renders — in a live app with Inter loaded, these map to the available Inter weights. We normalise to standard slots. */ --nu-t-weight-regular: 400; --nu-t-weight-medium: 500; --nu-t-weight-semibold: 600; --nu-t-weight-bold: 700; --nu-t-weight-heavy: 800; /* KPI values, emphasis */ --nu-t-weight-black: 900; /* page titles */ /* ---- Line height ---------------------------------------------- */ --nu-t-lh-tight: 1.2; /* headings, KPI values */ --nu-t-lh-normal: 1.4; /* body, lists */ --nu-t-lh-loose: 1.6; /* long-form, notes */ /* ---- Letter spacing ------------------------------------------- */ --nu-t-ls-tight: -0.02em; /* headings */ --nu-t-ls-normal: 0; --nu-t-ls-caps: 0.11em; /* sidebar section labels, badges */ /* ================================================================ SPACING ================================================================ */ --nu-s-0: 0; --nu-s-1: 2px; --nu-s-2: 4px; --nu-s-3: 6px; --nu-s-4: 8px; /* high frequency */ --nu-s-5: 10px; /* highest frequency spacing value */ --nu-s-6: 12px; --nu-s-7: 14px; --nu-s-8: 16px; --nu-s-9: 18px; --nu-s-10: 20px; --nu-s-12: 24px; --nu-s-14: 28px; --nu-s-16: 32px; /* ================================================================ RADIUS ================================================================ */ --nu-r-none: 0; --nu-r-xs: 3px; /* small elements */ --nu-r-sm: 4px; /* inputs, small cards */ --nu-r-md: 5px; /* secondary cards */ --nu-r-base: 6px; /* --r in locked files, 120 hits — THE default */ --nu-r-lg: 7px; /* feature cards */ --nu-r-xl: 8px; /* modals, larger cards */ --nu-r-pill: 999px; /* pills, badges, avatars */ /* ================================================================ SHADOW ================================================================ */ --nu-sh-none: none; --nu-sh-card: 0 7px 18px rgba(8,32,51,.055); /* --shadow 13/13 */ --nu-sh-elevated: 0 8px 24px rgba(8,32,51,.06); /* heavier variant */ --nu-sh-dropdown: 0 6px 14px rgba(8,32,51,.07); /* dropdowns, popovers */ --nu-sh-focus: 0 0 0 2px rgba(255,255,255,.72), 0 1px 2px rgba(8,32,51,.18); /* sidebar focus ring */ /* ================================================================ LAYOUT ================================================================ */ --nu-l-sidebar-width: 215px; /* confirmed: 2 hits per file */ --nu-l-sidebar-item-h: 36px; /* nav item height */ --nu-l-page-max: 1440px; --nu-l-content-gutter: 20px; /* page-level padding */ } /* ------------------------------------------------------------------ Amendment 4j (24 Sep 2026, Phil): fine print bumped one step and muted grey darkened across the new UI. SIDEBAR UNTOUCHED — the original sizes are pinned back on the sidebar here. ------------------------------------------------------------------ */ [data-new-ui] .nu-sidebar { --nu-t-size-2xs: 9px; --nu-t-size-xs: 10px; --nu-t-size-sm: 11px; }