/* ============================================================ THE SIGN GROUP™ — DESIGN TOKENS ------------------------------------------------------------ Single source of truth for the TSG visual system. Every colour, font, size, space, radius, border and motion value used in a TSG dashboard, visualisation or document resolves to a variable defined here. Never inline an arbitrary value in component CSS — if a value is missing, add a token here first, then reference it. Architecture mirrors the Bluegrey system (tokens + DESIGN.md) so the structure pulls straight through to a BG rebrand: keep the semantic layer (--color-*), swap the raw palette. Brand source: KNOWLEDGE/sign-group/brand-identity.md Palette: Black + Lime lead, five brights as a supporting set. Type: Inter (primary working face) for display & body; Graphik retained as brand/logo face (--font-brand-display); JetBrains Mono for labels & spec callouts. ============================================================ */ /* ------------------------------------------------------------ LAST REVIEWED (kept as a comment so the file still ends on its closing brace; the human-readable changelog also lives in DESIGN.md's "## Last reviewed"). 2026-09-24 — Grey's picks: --font-label = Inter (mono retired from text), --color-down = magenta, --color-text-muted #5A5A57, added --color-table-head and --color-row-shade. 2026-06-26 — REPAIRED: a sync race had left this file cut off mid-value inside the dark @media block. Rebuilt in full via the shell from the pre-amendment archive + the v2 amendments below. No brand colour changed. 2026-06-25 — v2 craft pass (reconciled with the UX/UI Slickness Playbook): Inter adopted as PRIMARY face (Graphik → the new --font-brand-display); added --btn-primary-* interaction-state tokens in the light, dark and auto blocks. 2026-06-24 — v1 created from the reference dashboard + brand-identity.md. ------------------------------------------------------------ */ :root { /* 0.1 COLOUR — raw palette (TSG Brand Basics) */ --tsg-black: #000000; --tsg-ink: #111111; /* near-black for text/surfaces, softer than pure */ --tsg-white: #FFFFFF; --tsg-lime: #CDE453; /* SIGNATURE accent — the icon colour */ --tsg-lime-deep: #B6CF3A; /* lime, darkened for text/edges on white */ --tsg-lime-soft: #EEF5C4; /* lime tint — panel fills, light mode */ --tsg-lime-tintDk: #2A2E14; /* lime tint — panel fills, dark mode */ --tsg-pink: #FF95BB; /* supporting */ --tsg-magenta: #E81E64; /* supporting — best contrast on white: links/highlights */ --tsg-yellow: #FADD3E; /* supporting */ --tsg-cyan: #6BD4EC; /* supporting */ --tsg-orange: #FB4B00; /* supporting */ /* soft tints of the brights for chart fills / pill backgrounds */ --tsg-pink-soft: #FFE2EC; --tsg-magenta-soft: #FBD4E1; --tsg-yellow-soft: #FEF4C2; --tsg-cyan-soft: #D6F2F9; --tsg-orange-soft: #FFD9C7; /* 0.15 BRAND COLOURS — other businesses keep their OWN colour on a TSG report */ --brand-tsg: #CDE453; /* The Sign Group™ — lime (signature) */ --brand-wll: #1C2135; /* WeLoveLEDs™ — primary navy ink */ --brand-np: #5E20FF; /* Neonplus® — NP01 purple (primary) */ --brand-nv: #E50079; /* Neon Vibes® — NV Pink (2026 guidelines, updated 2026-09-25; was #FF0077) */ --brand-av: #6E6E6E; /* Ad-View — TBC, neutral placeholder until set */ --brand-wll-2: #0076DE; /* WLL Blue accent (2026-09-24: green is not a WLL colour) */ --brand-np-2: #FA6007; /* NP03 orange */ --brand-nv-2: #5218FA; /* NV electric purple */ /* 1.0 TYPE — families Inter is the PRIMARY working face (body + headings) for everything the system generates — docs, web, dashboards (licence-free + embeds anywhere). Graphik is retained as the brand display/logo face only (--font-brand-display), used where Graphik is licensed; the wordmark lockup is custom Graphik. JetBrains Mono for labels & spec callouts. */ --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-brand-display: "Graphik", "Inter", ui-sans-serif, system-ui, sans-serif; /* optional, where Graphik is licensed */ --font-label: "Inter", ui-sans-serif, system-ui, sans-serif; /* 2026-09-24: small text is Inter, sentence case. Mono retired from text. */ --font-mono: "JetBrains Mono", ui-monospace, "Roboto Mono", monospace; /* 1.1 weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* 1.2 scale */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.5rem; /* 24px */ --text-xl: 2rem; /* 32px */ --text-2xl: 3rem; /* 48px */ --text-3xl: 4.5rem; /* 72px */ --text-4xl: 6rem; /* 96px */ /* 1.3 line height */ --leading-tight: 1.05; --leading-snug: 1.15; --leading-normal: 1.6; /* 1.4 tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-spec: 0.16em; /* 2.0 SPACE — 8pt scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 12rem; /* 2.1 layout measures */ --maxw-content: 60rem; --maxw-wide: 75rem; --maxw-prose: 42rem; --gutter: var(--space-5); --gutter-lg: var(--space-8); /* 3.0 RADII */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; /* 4.0 MOTION */ --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-fast: 150ms; --dur-hover: 180ms; --dur-base: 300ms; --dur-reveal: 600ms; /* 5.0 CHART RAMP */ --chart-1: var(--tsg-lime); --chart-2: var(--tsg-pink); --chart-3: var(--tsg-cyan); --chart-4: var(--tsg-orange); --chart-5: var(--tsg-magenta); --chart-6: var(--tsg-yellow); --chart-1-soft: var(--tsg-lime-soft); --chart-2-soft: var(--tsg-pink-soft); --chart-3-soft: var(--tsg-cyan-soft); --chart-4-soft: var(--tsg-orange-soft); --chart-5-soft: var(--tsg-magenta-soft); --chart-6-soft: var(--tsg-yellow-soft); /* status accents — functional, may sit outside the brand five (signals, not brand) */ --color-up: #2FA84F; --color-down: var(--tsg-magenta); /* 2026-09-24: down / late = magenta */ --color-table-head: #111111; /* 2026-09-24: dark table header */ --color-row-shade: #F5F5F2; /* 2026-09-24: shaded alternate rows */ } /* ============================================================ LIGHT MODE (default) ============================================================ */ :root, [data-theme="light"] { color-scheme: light; --color-page: var(--tsg-white); --color-surface: var(--tsg-white); --color-surface-raised: #FAFAF8; --color-surface-sunken: #F5F5F2; --color-text: var(--tsg-ink); --color-text-secondary: #5A5A57; --color-text-muted: #5A5A57; /* 2026-09-24: was #8A8A86, failed contrast */ --color-accent: var(--tsg-lime-deep); --color-accent-fill: var(--tsg-lime); --color-on-accent: var(--tsg-black); --color-link: var(--tsg-magenta); --color-panel-tint: var(--tsg-lime-soft); --color-on-panel: var(--tsg-ink); --color-pill-active-bg: var(--tsg-black); --color-pill-active-text: var(--tsg-white); --color-pill-bg: var(--tsg-white); --color-pill-text: var(--tsg-ink); --color-border: rgba(17, 17, 17, .12); --color-border-strong: rgba(17, 17, 17, .22); --color-border-bright: rgba(17, 17, 17, .40); --color-tag-bg: #F2F2EF; --color-tag-text: #4A4A47; --shadow-card: 0 1px 2px rgba(17,17,17,.04); --shadow-card-hover: 0 8px 30px -16px rgba(17,17,17,.22); --shadow-focus: 0 0 0 2px var(--color-page), 0 0 0 4px var(--tsg-lime-deep); /* button interaction states — explicit values (filter:brightness is a no-op on pure black, so the primary uses a near-black that can press to true black) */ --btn-primary-bg: #1A1A1A; --btn-primary-bg-hover: #383838; --btn-primary-bg-press: #000000; } /* ============================================================ DARK MODE ============================================================ */ [data-theme="dark"] { color-scheme: dark; /* button interaction states (dark) — subtle lime steps */ --btn-primary-bg: var(--tsg-lime); --btn-primary-bg-hover: #DCEE76; --btn-primary-bg-press: #C6DD4D; --color-page: #0C0C0D; --color-surface: #161618; --color-surface-raised: #1F1F22; --color-surface-sunken: #0A0A0B; --color-text: #F4F3EE; --color-text-secondary: #A6A6A1; --color-text-muted: #74746F; --color-accent: var(--tsg-lime); --color-accent-fill: var(--tsg-lime); --color-on-accent: var(--tsg-black); --color-link: var(--tsg-pink); --color-panel-tint: var(--tsg-lime-tintDk); --color-on-panel: var(--tsg-lime); --color-pill-active-bg: var(--tsg-lime); --color-pill-active-text: var(--tsg-black); --color-pill-bg: #1F1F22; --color-pill-text: #F4F3EE; --color-border: rgba(244, 243, 238, .12); --color-border-strong: rgba(244, 243, 238, .20); --color-border-bright: rgba(205, 228, 83, .45); --color-tag-bg: #222226; --color-tag-text: #C9C9C4; --shadow-card: none; --shadow-card-hover: 0 10px 34px -18px rgba(0,0,0,.7); --shadow-focus: 0 0 0 2px var(--color-page), 0 0 0 4px var(--tsg-lime); } /* Optional: follow the OS when no explicit data-theme is set. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --btn-primary-bg: var(--tsg-lime); --btn-primary-bg-hover: #DCEE76; --btn-primary-bg-press: #C6DD4D; --color-page: #0C0C0D; --color-surface: #161618; --color-surface-raised: #1F1F22; --color-surface-sunken: #0A0A0B; --color-text: #F4F3EE; --color-text-secondary: #A6A6A1; --color-text-muted: #74746F; --color-accent: var(--tsg-lime); --color-accent-fill: var(--tsg-lime); --color-on-accent: var(--tsg-black); --color-link: var(--tsg-pink); --color-panel-tint: var(--tsg-lime-tintDk); --color-on-panel: var(--tsg-lime); --color-pill-active-bg: var(--tsg-lime); --color-pill-active-text: var(--tsg-black); --color-pill-bg: #1F1F22; --color-pill-text: #F4F3EE; --color-border: rgba(244, 243, 238, .12); --color-border-strong: rgba(244, 243, 238, .20); --color-border-bright: rgba(205, 228, 83, .45); --color-tag-bg: #222226; --color-tag-text: #C9C9C4; --shadow-card: none; --shadow-card-hover: 0 10px 34px -18px rgba(0,0,0,.7); --shadow-focus: 0 0 0 2px var(--color-page), 0 0 0 4px var(--tsg-lime); } }