/* ============================================================================ Trengh Technologies — Design Tokens ---------------------------------------------------------------------------- Direction: Refraction (see docs/decisions/0005-brand-direction.md) Version: 2.0.0 — revised 2026-07-29 to the reference system Updated: 2026-07-29 THE RULE: this file is the only place a raw colour value may appear. Anywhere else in the codebase, a literal hex, rgb(), or hsl() is a bug. Everything consumes semantic tokens — var(--color-ink), never #000000. Two layers: --ref-* Reference tokens. Raw palette. Never consumed by components. everything else Semantic tokens. Roles. What components actually use. Contrast ratios in comments are measured against the theme's own --color-bg and are WCAG 2.1 relative-luminance figures. AA body text needs 4.5:1, AA large text (>=24px, or >=18.66px bold) needs 3:1, AA non-text needs 3:1. v2 note: the neutrals here are TRUE NEUTRALS, not warm-shifted. The warmth in the system comes entirely from the accent spectrum sitting against pure black and near-white. Warming the greys muddies that contrast. ========================================================================== */ /* --------------------------------------------------------------------------- 1. REFERENCE PALETTE — the six brand colours, plus the neutral ramp ------------------------------------------------------------------------ */ :root { /* The six. These are the brand. Nothing outside this list is a brand colour. */ --ref-smoke: #F4F4F5; /* 01 White Smoke */ --ref-peach: #FFB657; /* 02 Peach Orange */ --ref-coral: #FF8E40; /* 03 Coral */ --ref-red-orange: #FF5933; /* 04 Red Orange — v2.1 2026-08-17: logo revised to a SINGLE dot in this colour (supersedes the three-dot column). One-digit shift per channel from #FF5832; every contrast figure quoted in this file still holds to two decimals. */ --ref-firebrick: #B31D00; /* 05 Firebrick */ --ref-black: #000000; /* 06 Pure Black */ /* ------------------------------------------------------------------------ SCENE COLOURS. NOT BRAND COLOURS. Never text, never UI, never a surface a control sits on. They exist for one thing: the habitable valley behind the industries section, which is the brand line drawn rather than written. "We make hard ground habitable" ends somewhere green, and the six above have no green in them. They live here because this file is the only place a raw colour may appear, not because they were promoted to the palette. Nothing in the identity, the logo, the type or any component may use them. If a contrast figure is ever quoted against one of these, something has gone wrong. Warm-leaning greens on purpose: the valley is lit by the same low sun that lights the footer's ridges, and a cool green under a coral sky reads as two pictures rather than one. --------------------------------------------------------------------- */ --ref-valley: #357A4E; /* slopes */ --ref-canopy: #17402C; /* trees, near floor */ /* Neutral ramp. Extends the two ends of the six so interfaces are buildable. True neutral — no hue. */ --ref-white: #FFFFFF; --ref-n-100: #E9E9EB; --ref-n-200: #D2D2D7; --ref-n-300: #C9C9CE; --ref-n-400: #A1A1A6; --ref-n-500: #86868B; --ref-n-600: #6E6E73; --ref-n-700: #48484D; --ref-n-800: #2C2C2E; --ref-n-900: #1C1C1E; --ref-n-950: #111113; /* Status. Rationed hard — a consultancy site is not a dashboard. Form validation and system messages only. */ --ref-valid: #1F6F43; --ref-valid-dark: #4ADE80; --ref-invalid: #A32316; --ref-invalid-dark: #FF7B6B; } /* --------------------------------------------------------------------------- 2. SEMANTIC TOKENS — LIGHT ------------------------------------------------------------------------ */ :root, [data-theme="light"] { color-scheme: light; --color-bg: var(--ref-smoke); --color-surface: var(--ref-white); --color-surface-sunk: var(--ref-n-100); --color-inverse-bg: var(--ref-black); --color-ink: var(--ref-black); /* 19.11:1 AAA */ --color-ink-muted: var(--ref-n-700); /* 8.27:1 AA body */ --color-ink-faint: var(--ref-n-600); /* 4.61:1 AA body, just */ --color-ink-disabled: var(--ref-n-500); /* 3.30:1 non-text only */ --color-ink-inverse: var(--ref-smoke); /* Accent. Two tokens, because on a near-white ground only Firebrick clears AA: --color-accent Red Orange. The brand colour. Graphics, large display. 2.85:1 on smoke — NEVER body text, never small labels. --color-accent-text Firebrick. 6.18:1. Links, inline emphasis, small type. Getting these two the wrong way round is the single easiest way to fail the brief's accessibility requirement. */ --color-accent: var(--ref-red-orange); /* 2.85:1 graphic only */ --color-accent-text: var(--ref-firebrick); /* 6.18:1 AA body */ --color-accent-hover: #8E1700; --color-accent-tint: #FFE9E2; --color-on-accent: var(--ref-white); /* 6.79:1 on firebrick */ --color-line: var(--ref-n-200); --color-line-strong: var(--ref-n-300); --color-focus: var(--ref-firebrick); --color-valid: var(--ref-valid); --color-invalid: var(--ref-invalid); --color-selection-bg: var(--ref-peach); --color-selection-ink: var(--ref-black); } /* --------------------------------------------------------------------------- 3. SEMANTIC TOKENS — DARK On pure black the accent moves UP the spectrum: Red Orange clears AA body at 6.69:1 and Coral at 9.20:1, while Firebrick drops to 3.09:1 and becomes large-text-only. Same roles, opposite ends. Never inherit these. ------------------------------------------------------------------------ */ [data-theme="dark"] { color-scheme: dark; --color-bg: var(--ref-black); --color-surface: var(--ref-n-900); --color-surface-sunk: var(--ref-n-950); --color-inverse-bg: var(--ref-smoke); --color-ink: var(--ref-smoke); /* 19.11:1 AAA */ --color-ink-muted: var(--ref-n-400); /* 8.16:1 AA body */ --color-ink-faint: var(--ref-n-500); /* 5.80:1 AA body */ --color-ink-disabled: var(--ref-n-600); /* 4.14:1 */ --color-ink-inverse: var(--ref-black); --color-accent: var(--ref-red-orange); /* 6.69:1 AA body */ --color-accent-text: var(--ref-coral); /* 9.20:1 AA body */ --color-accent-hover: var(--ref-peach); --color-accent-tint: #2A0F06; --color-on-accent: var(--ref-black); /* 6.69:1 on red orange */ --color-line: var(--ref-n-800); --color-line-strong: #3A3A3D; --color-focus: var(--ref-coral); --color-valid: var(--ref-valid-dark); --color-invalid: var(--ref-invalid-dark); --color-selection-bg: var(--ref-firebrick); --color-selection-ink: var(--ref-smoke); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: var(--ref-black); --color-surface: var(--ref-n-900); --color-surface-sunk: var(--ref-n-950); --color-inverse-bg: var(--ref-smoke); --color-ink: var(--ref-smoke); --color-ink-muted: var(--ref-n-400); --color-ink-faint: var(--ref-n-500); --color-ink-disabled: var(--ref-n-600); --color-ink-inverse: var(--ref-black); --color-accent: var(--ref-red-orange); --color-accent-text: var(--ref-coral); --color-accent-hover: var(--ref-peach); --color-accent-tint: #2A0F06; --color-on-accent: var(--ref-black); --color-line: var(--ref-n-800); --color-line-strong: #3A3A3D; --color-focus: var(--ref-coral); --color-valid: var(--ref-valid-dark); --color-invalid: var(--ref-invalid-dark); --color-selection-bg: var(--ref-firebrick); --color-selection-ink: var(--ref-smoke); } } /* --------------------------------------------------------------------------- 4. THE REFRACTION SYSTEM Three devices, in order of how often they appear. All three are pure CSS — no images, no grain, no canvas. docs/07-motion-and-3d-research.md measured grain at 25x the byte cost; this whole visual language costs zero bytes. ------------------------------------------------------------------------ */ :root { /* --- 4a. THE MARK GRADIENT ------------------------------------------------ The one gradient that fills the dot device. Light at the top-left, dense at the bottom-right, as if lit from above. Never recolour it, never reverse it. */ --gradient-mark: linear-gradient(145deg, var(--ref-peach) 0%, var(--ref-coral) 38%, var(--ref-red-orange) 72%, var(--ref-firebrick) 100%); /* --- 4b. FACET PLANES ----------------------------------------------------- The dominant pattern. Hard-edged tonal planes, as if light has been split through a prism and the beams landed flat. No blur, no soft edges. Built from clip-path polygons over an accent ground; these are the tones used. Layer at most three planes over one ground — more reads as camouflage. */ --facet-ground: var(--ref-red-orange); --facet-01: color-mix(in srgb, var(--ref-peach) 92%, transparent); --facet-02: color-mix(in srgb, var(--ref-coral) 88%, transparent); --facet-03: color-mix(in srgb, var(--ref-firebrick) 42%, transparent); /* --- 4c. THE BEAM FIELD --------------------------------------------------- The soft counterpart. Vertical bands, heavily blurred, fading out at both ends — light before it resolves. Secondary to facets. Use where type has to sit on top, because facets fight text and beams do not. */ --gradient-beam: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ref-firebrick) 55%, transparent) 11%, var(--ref-red-orange) 33%, var(--ref-coral) 54%, var(--ref-peach) 75%, transparent 100%); --gradient-beam-v: linear-gradient(180deg, var(--ref-peach) 0%, var(--ref-coral) 34%, var(--ref-red-orange) 66%, var(--ref-firebrick) 100%); --beam-blur: 64px; /* --- 4d. DIAGONAL RAYS ---------------------------------------------------- For wide formats only — billboards, banners, anything over 3:1. Repeating hard-edged diagonal bands in two tones of the ground colour. */ --gradient-rays: repeating-linear-gradient(115deg, var(--ref-red-orange) 0 90px, color-mix(in srgb, var(--ref-firebrick) 30%, var(--ref-red-orange)) 90px 180px); /* Hairline that fades at both ends. Under section headings. */ --gradient-rule: linear-gradient(90deg, transparent, var(--color-line-strong) 16%, var(--color-line-strong) 84%, transparent); } /* --------------------------------------------------------------------------- 5. TYPE ONE family. Inter, self-hosted as a subsetted variable woff2 (73 KB) with both the weight and optical-size axes live. No CDN call — required by the CSP in docs/03-security-policy.md as much as by privacy. Inter carries display and text from a single file because of `opsz`: opsz 32 tighter spacing, finer joins -> display, headings ("Inter Display") opsz 14 open spacing, sturdier joins -> body, UI, captions Setting `font-optical-sizing: auto` makes the browser interpolate by size; the --opsz-* tokens below are for the cases where it must be forced. There is no second webfont. Code blocks in Insights use the system mono stack — a technical blog needs monospace, but it is not a brand voice and does not justify another download. ------------------------------------------------------------------------ */ :root { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* The logotype face. Wordmark only — never headings, never body. Georgia is the fallback because it is the one near-universal serif whose weight does not collapse next to Inter if the woff2 fails. */ --font-logo: "Alfa Slab One", Georgia, "Times New Roman", serif; --opsz-display: 32; --opsz-text: 14; /* Inter is used at three weights. Anything else is off-brand. */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* Fluid scale, 360px -> 1440px viewport. Tops out at 200px. */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --text-xl: clamp(1.375rem, 1.24rem + 0.60vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.52rem + 1.05vw, 2.5rem); --text-3xl: clamp(2.25rem, 1.85rem + 1.80vw, 3.5rem); --display-3: clamp(2.75rem, 2.10rem + 2.90vw, 5rem); --display-2: clamp(3.5rem, 2.40rem + 4.90vw, 8rem); --display-1: clamp(4rem, 1.60rem + 10.7vw, 12.5rem); /* -> 200px */ --leading-tight: 1.0; --leading-snug: 1.14; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Inter needs less negative tracking than a geometric sans — it is already tightly fitted. Over-tracking display Inter closes the counters. */ --tracking-display: -0.028em; --tracking-tight: -0.015em; --tracking-normal: 0em; --tracking-label: 0.06em; --measure: 68ch; } /* --------------------------------------------------------------------------- 6. SPACE The scale is derived from the logo. In the artwork the dot diameter is 71.621 units and the vertical pitch is 116.604 — a ratio of 1.628, within 0.6% of the golden section. The steps below carry that rhythm so page composition and mark share one metric. ------------------------------------------------------------------------ */ :root { --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.625rem; /* 1rem x 1.628 */ --space-lg: 2.625rem; --space-xl: 4.25rem; --space-2xl: 6.9375rem; --space-3xl: 11.25rem; --section-y: clamp(4.25rem, 2.5rem + 7vw, 11.25rem); --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem); --container: 75rem; --container-narrow: 44rem; --container-wide: 90rem; /* Generous radii. The reference system rounds almost everything; sharp corners appear only on full-bleed panels. */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-full: 999px; /* Neutral shadows — the neutrals are neutral, so the shadows are too. */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.05); --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.12), 0 6px 12px rgb(0 0 0 / 0.07); } /* --------------------------------------------------------------------------- 7. MOTION Principle: refraction, not decoration. Things resolve into focus. Nothing bounces, nothing overshoots, nothing loops forever in the viewport. ------------------------------------------------------------------------ */ :root { --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 380ms; --dur-reveal: 620ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1); /* The house curve — a long, confident settle with no overshoot. */ --ease-refract: cubic-bezier(0.16, 1, 0.30, 1); --stagger: 60ms; --lift-distance: 14px; } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; --stagger: 0ms; --lift-distance: 0px; --beam-blur: 64px; /* static blur is fine; it is not animated */ } } /* --------------------------------------------------------------------------- 8. FOCUS One visible style, everywhere, never removed. ------------------------------------------------------------------------ */ :root { --focus-width: 2px; --focus-offset: 3px; --focus-ring: 0 0 0 var(--focus-offset) var(--color-bg), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--color-focus); }