/* * truckerclock / Trucker Clock Hub theme tokens. * OKLCH is the source of truth (LVL color.md). This is the ONE tokens file for * the site; the golden template and the tool UI consume these values unchanged. * * Theme: "highway dusk / chrome" - a deep dusk-indigo cab-at-night canvas with * chrome-steel surfaces and an amber highway-light accent. High contrast for * readability in a moving cab; large tap targets (mobile-first EXTRA, R1e). */ /* * GENERATED by scripts/gen_tokens.py for Studio Run construct-portfolio-1789383900, direction B Signal * (operator pick 2026-09-14, corr-030eccd3f85a256a). DO NOT HAND-EDIT: edit * design/site-hues.json (this site's hue family, scheme, extras) or the Signal * register in scripts/gen_tokens.py, then run `python scripts/gen_tokens.py`. * `--check` fails CI on drift. * * Hue family: canvas 268, ink 260, accent 72, * link 75. Native scheme: dark. The light set is declared under * :root[data-scheme="light"] so a scheme toggle is one attribute on . * * Every ink-on-fill pair in both sets was measured before this file was written * (APCA body >= 60, large >= 45, non-text >= 30; WCAG text >= 4.5:1, non-text >= 3:1) * and the lvl-detect gate reported zero findings. A failing set is never emitted. * OKLCH is the source of truth (LVL color.md): no hex, no rgb or hsl functions, no colour keywords. */ :root { color-scheme: dark; --color-scheme: dark; /* canvas and fills (every surface the template paints) */ --color-bg: oklch(0.170 0.040 268); --color-surface: oklch(0.225 0.040 268); --color-surface-sunken: oklch(0.140 0.035 268); --color-field-bg: oklch(0.150 0.035 268); --color-callout-bg: oklch(0.230 0.045 268); --color-ok-bg: oklch(0.260 0.050 150); --color-warn-bg: oklch(0.270 0.055 75); --color-critical-bg: oklch(0.260 0.055 25); --color-hero-bg: oklch(0.220 0.060 72); --color-shadow: oklch(0.050 0.040 268); /* ink, solved against the weakest fill each one lands on (min rule) */ --color-text: oklch(0.930 0.015 260); --color-heading: oklch(0.980 0.010 260); --color-muted: oklch(0.800 0.030 260); --color-link: oklch(0.820 0.130 75); --color-link-hover: oklch(0.880 0.130 75); --color-on-accent: oklch(0.160 0.040 72); --color-error: oklch(0.840 0.170 25); --color-hero-text: oklch(0.975 0.010 72); --color-hero-muted: oklch(0.900 0.030 72); /* boundary and state. --color-rule is NOT declared: base.css derives the divider from the boundary. */ --color-border: oklch(0.610 0.040 260); --color-border-strong: oklch(0.680 0.050 260); --color-focus: oklch(0.840 0.130 72); --color-accent: oklch(0.820 0.150 72); --color-accent-hover: oklch(0.880 0.150 72); --color-ok: oklch(0.750 0.150 150); --color-warn: oklch(0.770 0.150 75); /* photo hero: flat scrim floor in the brand hue (LVL color.md Pass 5) */ --color-hero-scrim: oklch(0.220 0.060 72); --hero-scrim-alpha: 0.8; /* site-owned names the template consumes, mapped onto family roles so they follow the scheme */ --color-advisory-bg: oklch(0.270 0.055 75); --color-critical: oklch(0.840 0.170 25); /* type: Noto Sans is the portfolio pin; Signal sets weight, scale, leading, tracking */ --font-body: "Noto Sans Lattice", "Noto Sans Fallback", system-ui, sans-serif; --font-heading: "Noto Sans Lattice", "Noto Sans Fallback", system-ui, sans-serif; --font-size-base: 1.0625rem; --font-size-small: 0.875rem; --font-size-lead: 1.15rem; --font-size-display: 3.5rem; --font-size-h1-min: 1.875rem; --font-size-h1: 2.75rem; --font-size-h2: 1.75rem; --font-size-h3: 1.25rem; --font-size-h4: 1rem; --line-height-body: 1.55; --line-height-heading: 1.1; --line-height-display: 1.02; --font-weight-body: 350; --font-weight-label: 600; --font-weight-heading: 700; --font-weight-display: 700; --letter-spacing-display: -0.025em; --letter-spacing-heading: -0.015em; --letter-spacing-caps: 0.06em; /* spatial: the LVL 4-8-12 stem, then the direction's density choices */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px; --space-section: 48px; --space-card: 24px; --space-stack: 16px; --space-gutter: 24px; --content-width: 52rem; --tap-min: 48px; /* radius */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; /* elevation, tinted with the canvas hue (never a neutral grey) */ --shadow-sm: 0 1px 2px oklch(0.050 0.040 268 / 0.08); --shadow-md: 0 4px 12px oklch(0.050 0.040 268 / 0.12), 0 1px 3px oklch(0.050 0.040 268 / 0.08); --shadow-lg: 0 12px 32px oklch(0.050 0.040 268 / 0.18), 0 2px 6px oklch(0.050 0.040 268 / 0.1); /* motion: the three LVL foundation curves and the foundation duration band */ --motion-instant: 80ms; --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-decel: cubic-bezier(0, 0, 0.2, 1); --motion-ease-accel: cubic-bezier(0.4, 0, 1, 1); --motion-hover: 120ms; --motion-state: 200ms; --motion-lift: 200ms; /* site-owned extras outside the generated family, carried verbatim */ --color-chrome: oklch(0.82 0.012 250); --status-driving: oklch(0.72 0.15 150); --status-off: oklch(0.6 0.03 260); --status-on: oklch(0.78 0.13 72); --status-sb: oklch(0.66 0.13 285); } :root[data-scheme="light"] { color-scheme: light; --color-scheme: light; /* canvas and fills (every surface the template paints) */ --color-bg: oklch(0.970 0.015 268); --color-surface: oklch(0.990 0.008 268); --color-surface-sunken: oklch(0.940 0.020 268); --color-field-bg: oklch(0.995 0.004 268); --color-callout-bg: oklch(0.950 0.025 268); --color-ok-bg: oklch(0.940 0.040 150); --color-warn-bg: oklch(0.940 0.050 75); --color-critical-bg: oklch(0.940 0.040 25); --color-hero-bg: oklch(0.260 0.060 72); --color-shadow: oklch(0.250 0.040 268); /* ink, solved against the weakest fill each one lands on (min rule) */ --color-text: oklch(0.200 0.030 260); --color-heading: oklch(0.140 0.040 260); --color-muted: oklch(0.450 0.030 260); --color-link: oklch(0.440 0.140 75); --color-link-hover: oklch(0.360 0.140 75); --color-on-accent: oklch(0.985 0.010 72); --color-error: oklch(0.480 0.160 25); --color-hero-text: oklch(0.975 0.010 72); --color-hero-muted: oklch(0.900 0.030 72); /* boundary and state. --color-rule is NOT declared: base.css derives the divider from the boundary. */ --color-border: oklch(0.600 0.030 260); --color-border-strong: oklch(0.450 0.050 260); --color-focus: oklch(0.480 0.150 72); --color-accent: oklch(0.500 0.170 72); --color-accent-hover: oklch(0.420 0.170 72); --color-ok: oklch(0.500 0.130 150); --color-warn: oklch(0.550 0.120 75); /* photo hero: flat scrim floor in the brand hue (LVL color.md Pass 5) */ --color-hero-scrim: oklch(0.260 0.060 72); --hero-scrim-alpha: 0.8; /* site-owned names the template consumes, mapped onto family roles so they follow the scheme */ --color-advisory-bg: oklch(0.940 0.050 75); --color-critical: oklch(0.480 0.160 25); /* type: Noto Sans is the portfolio pin; Signal sets weight, scale, leading, tracking */ --font-body: "Noto Sans Lattice", "Noto Sans Fallback", system-ui, sans-serif; --font-heading: "Noto Sans Lattice", "Noto Sans Fallback", system-ui, sans-serif; --font-size-base: 1.0625rem; --font-size-small: 0.875rem; --font-size-lead: 1.15rem; --font-size-display: 3.5rem; --font-size-h1-min: 1.875rem; --font-size-h1: 2.75rem; --font-size-h2: 1.75rem; --font-size-h3: 1.25rem; --font-size-h4: 1rem; --line-height-body: 1.55; --line-height-heading: 1.1; --line-height-display: 1.02; --font-weight-body: 400; --font-weight-label: 600; --font-weight-heading: 700; --font-weight-display: 700; --letter-spacing-display: -0.025em; --letter-spacing-heading: -0.015em; --letter-spacing-caps: 0.06em; /* spatial: the LVL 4-8-12 stem, then the direction's density choices */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px; --space-section: 48px; --space-card: 24px; --space-stack: 16px; --space-gutter: 24px; --content-width: 52rem; --tap-min: 48px; /* radius */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; /* elevation, tinted with the canvas hue (never a neutral grey) */ --shadow-sm: 0 1px 2px oklch(0.250 0.040 268 / 0.08); --shadow-md: 0 4px 12px oklch(0.250 0.040 268 / 0.12), 0 1px 3px oklch(0.250 0.040 268 / 0.08); --shadow-lg: 0 12px 32px oklch(0.250 0.040 268 / 0.18), 0 2px 6px oklch(0.250 0.040 268 / 0.1); /* motion: the three LVL foundation curves and the foundation duration band */ --motion-instant: 80ms; --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-decel: cubic-bezier(0, 0, 0.2, 1); --motion-ease-accel: cubic-bezier(0.4, 0, 1, 1); --motion-hover: 120ms; --motion-state: 200ms; --motion-lift: 200ms; } /* * HISTORY (carried forward verbatim from the hand-authored tokens file when * the Signal generator first ran, 2026-09-14). The values quoted below describe * PREVIOUS states of this file and are not the tokens declared above. * * --- 2026-09-09 Designer gate: boundary contrast + scale tokens --- * --color-border was oklch(0.4 0.02 262). MEASURED against this site's own * surface ladder that is 2.01:1 on the canvas and 1.79:1 on a raised panel, * both below the WCAG 1.4.11 3:1 non-text floor. Every card, every input, * every panel on the site therefore had a boundary the eye could barely * resolve, which is the main reason the pages read as loose text rather than * as components. Raised to L 0.555: measured minimum 3.07:1 across all eight * surface tokens (canvas 3.66, surface 3.26). Portfolio-wide defect: all 38 * sites failed this floor before the pass. * --color-border-strong moved 0.62 -> 0.65 so the emphasis/hover step stays * visibly stronger than the new boundary (measured minimum 4.52:1). * --color-rule is NEW: intra-component dividers (table row rules, result * rows) are not component boundaries under 1.4.11, so they keep the old * hairline weight rather than being dragged up to boundary strength. * * Amber highway-light accent + chrome * * 2026-09-07 Designer gate: 0.62 measured 4.14:1 on --color-surface (below AA); 0.72 measures 6.16:1 card, 6.92:1 canvas * * Status colours for clocks + warnings * * Advisory notice surface (amber-tinted on the dark canvas) * * Timeline row colours (duty-status grid) * * Typography * * --- TYPE (2026-09-09 Designer gate) ------------------------------------- * Was `system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, * sans-serif` (or the `ui-sans-serif` variant of the same thing) in all 38 * sites. Two problems, both measured: * 1. `Roboto` is an LVL reflex-reject family (typography.md). It shipped * portfolio-wide. * 2. A pure system stack means the rendered x-height, line box and digit * advance change per platform, so every spatial and target-size number * this design system asserts was only true on the platform it was * measured on. * Now one self-hosted variable face, the owner-ratified brand type (the Big * Rig Math mark specifies "Type: Noto Sans"). ONE family for body and * headings: the hierarchy comes from weight and tracking, not from a second * typeface. @font-face lives in /fonts.css, source of truth * packages/brand/fonts/ (see BUILD.md). "Noto Sans Fallback" is a * metric-override face so the swap does not reflow the page. * ------------------------------------------------------------------------ * * LVL typography: near-white ink on a dark field reads heavier at the same * numeric weight, so body drops one notch on the eight dark-canvas sites. * 350 is the bottom of the variable axis in noto-sans-lattice.woff2. * * 2026-09-09: was 2.5rem = a HARD 40px CEILING on the hero h1. The hero uses * clamp(1.75rem, 5vw, var(--font-size-display)), so on a 2000px viewport 5vw * wants 100px and the clamp pinned it at 40 - a phone-sized ceiling applied at * desktop, which is why the headline read as small for a headline. * 2026-09-09, SAME DAY, CORRECTED 4.5rem -> 3rem. 4.5rem (72px) shipped and * was too big HERE, for a reason specific to this site: `.hero-copy` is caged * at `max-width: 42rem`, so the headline has 672px to work in no matter how * wide the viewport gets, unlike the full-bleed heroes that took 4.5rem * happily. MEASURED at 1440 and 1920: at 72px "Free hours-of-service tools * for truck drivers" wrapped from 2 lines to FOUR, hyphen-broke * "hours-of-service" across a line, filled the whole 396px band and CLIPPED * the subhead ("in the cab" was cut off at the band edge). Bisected 40->72 in * 4px steps: 48px is the largest value that holds the original 2 lines, and * 72px is the only value in that range that clips anything. * 3rem is the same value moving-utilities got, for the same structural * reason (a fixed-width hero column rather than a full-bleed one) -- so the * fleet's rule is "size to the available width", not "one number everywhere". * Still a 20% lift on the 40px it started at. * * Layout * * Spatial scale, LVL spatial.md stem (4-8-12-16-24-32-48-64-96). The * template reads each step as var(--space-*, ), so a site * that omits a step still lands on the scale. Declared here in full so the * whole family shares one rhythm. * * Minimum tap target (mobile-first EXTRA - used in cabs) * * --- Surface ladder (base.css SURFACE TOKEN CONTRACT, 2026-08-02) --- */