/* ========================================================================= Hominix — Design tokens Every scale in this file is derived from Φ = 1.6180339887498948. Rounded values carry their exact source in a trailing comment. Rev A · 2026-08-06 SOURCE OF TRUTH: design-system/tokens/hominix.tokens.css Every other copy of this file is written by design-system/sync.mjs. Edit this one, then run `node design-system/sync.mjs`. An edit made to a copy is reverted the next time anyone syncs, and `sync.mjs --check` fails on it. ========================================================================= */ :root { /* ---- Φ constants ---------------------------------------------------- */ --hx-phi: 1.6180339887; --hx-phi-inv: 0.6180339887; /* 1/Φ */ --hx-phi-2: 2.6180339887; /* Φ² */ --hx-phi-5: 11.0901699437; /* Φ⁵ */ /* ---- Core ground ---------------------------------------------------- */ --hx-void: #0B0D10; /* primary ink & dark ground; blue-shifted, never #000 */ --hx-ink: #14171C; /* elevated surface on dark */ --hx-vellum: #ECEDEF; /* primary paper ground; cool neutral, never warm cream */ --hx-white: #FFFFFF; /* reversed mark only */ /* ---- Neutral ramp (hue-biased 215°, never pure grey) ---------------- */ --hx-graphite: #383D45; /* body copy on paper — 9.33:1 on vellum */ --hx-steel: #5F6570; /* secondary copy, annotation — 5.00:1 on vellum */ --hx-ash: #A8AEB7; /* body copy on VOID — 8.71:1. Never body on vellum. */ --hx-mist: #D9DDE1; /* hairlines, grid, dividers. Non-text only. */ /* ---- Signal — calibration red. Functional only. Max 5% of a surface. -- */ --hx-signal: #C6371F; /* 4.52:1 on vellum */ --hx-signal-lift: #E4573C; /* the same red re-tuned for void — 5.31:1 */ --hx-signal-deep: #8E2413; --hx-signal-tint: #F5DCD6; /* ---- Ratio — reserved. The constant Φ, seals, certification. Max 2%. -- */ --hx-ratio: #9A7F45; --hx-ratio-lift: #C9A961; /* dark-ground tuning */ --hx-ratio-deep: #6B562C; --hx-ratio-tint: #EDE5D3; /* Metallic sheen. One of only two sanctioned gradients — the other is the product tile ground below. Permitted solely where Φ itself is the readout, and never on the mark (see misuse 04). Every stop clears 5.5:1 on Void, so type stays legible across the sweep. */ --hx-ratio-sheen: linear-gradient(100deg, #A2854A 0%, #C9A961 26%, #F2E3B8 46%, #C9A961 66%, #A2854A 100%); /* ---- Product family ---------------------------------------------------- A second layer, not part of the masterbrand. These four appear ONLY to identify a product — app icons, product UI accents — and never in Hominix-level communication. Care, Data and Safety share one lightness (OKLCH L 0.545-0.551) and sit near their gamut edge, so they read as siblings rather than four colours picked separately. Safety is Signal itself: the semantics are identical and a second near-identical red would only confuse the system. Living is deliberately lighter — amber cannot hold white type at family lightness (it turns olive and collides with Ratio), so it carries a Void mark instead. That exception is what gives the set of four its rhythm. */ --hx-p-care: #24835D; /* white mark, 4.69:1 · OKLCH 0.545 0.106 162 */ --hx-p-data: #1E6BD6; /* white mark, 5.09:1 · OKLCH 0.544 0.180 258 */ --hx-p-safety: var(--hx-signal); /* white mark, 5.29:1 · = Signal */ --hx-p-living: #D99A2B; /* VOID mark, 7.98:1 · OKLCH 0.730 0.140 76 */ /* Tile grounds. Each gradient stays inside its own hue — two lightness stops 0.15 apart with a ~10 degree drift, which reads as light falling on one colour rather than as two colours meeting. Both ends of every ramp clear 4.5:1 against their mark, so the symbol never dims as the ground deepens. Flat tokens above remain the value for UI accents. */ --hx-p-core-grad: linear-gradient(145deg, #14171C 0%, #0B0D10 100%); --hx-p-care-grad: linear-gradient(145deg, #288557 0%, #165440 100%); --hx-p-data-grad: linear-gradient(145deg, #2677CC 0%, #0C3EB0 100%); --hx-p-safety-grad: linear-gradient(145deg, #DE3230 0%, #8B3115 100%); --hx-p-living-grad: linear-gradient(145deg, #DE9838 0%, #9B7426 100%); /* ---- Type families --------------------------------------------------- Licensed tier ships with the brand. Open tier is the sanctioned substitute for partners without a licence — never mix the two tiers inside one artefact. */ --hx-font-display: "ABC Diatype", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --hx-font-mono: "ABC Diatype Mono", ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "Roboto Mono", monospace; --hx-font-open: "IBM Plex Sans", system-ui, sans-serif; --hx-font-open-mono: "IBM Plex Mono", ui-monospace, monospace; /* ---- Type scale — √Φ (1.272) steps from 16px. Every second step is exactly ×Φ: 16 → 25.9 → 41.9 → 67.8 → 109.7 -- */ --hx-text--2: 10px; /* 9.89 */ --hx-text--1: 13px; /* 12.58 */ --hx-text-0: 16px; /* base */ --hx-text-1: 20px; /* 20.35 */ --hx-text-2: 26px; /* 25.89 — 16·Φ */ --hx-text-3: 33px; /* 32.93 */ --hx-text-4: 42px; /* 41.89 — 16·Φ² */ --hx-text-5: 53px; /* 53.28 */ --hx-text-6: 68px; /* 67.78 — 16·Φ³ */ --hx-text-7: 86px; /* 86.22 */ --hx-text-8: 110px; /* 109.68 — 16·Φ⁴ */ /* ---- Leading ---------------------------------------------------------- */ --hx-leading-tight: 1.06; /* display */ --hx-leading-snug: 1.24; /* headings */ --hx-leading-body: 1.618; /* Φ — running copy */ --hx-leading-data: 1.4; /* tables, code */ /* ---- Tracking --------------------------------------------------------- */ --hx-track-display: -0.022em; --hx-track-head: -0.012em; --hx-track-body: 0em; --hx-track-label: 0.14em; /* uppercase mono labels */ /* ---- Space — additive sequence seeded at 4, 6. Each step is the sum of the two before it, so the step ratio converges on Φ (1.6182 by step 9). Every value is an integer; nothing here is rounded. */ --hx-space-1: 4px; --hx-space-2: 6px; /* ratio 1.5000 */ --hx-space-3: 10px; /* ratio 1.6667 */ --hx-space-4: 16px; /* ratio 1.6000 */ --hx-space-5: 26px; /* ratio 1.6250 */ --hx-space-6: 42px; /* ratio 1.6154 */ --hx-space-7: 68px; /* ratio 1.6190 */ --hx-space-8: 110px; /* ratio 1.6176 */ --hx-space-9: 178px; /* ratio 1.6182 */ /* ---- Layout ------------------------------------------------------------ 16 columns. The canonical split is 10 : 6 = 0.625 — it misses 1/Φ by 1.13%, but 16 divides by 2, 4 and 8, so the 2-up and 4-up layouts the system actually uses land on column boundaries. 13 tracks 1/Φ closer (8:5 = 0.6154, −0.43%) and is discarded anyway: 13 is prime, so it yields no even split at all. A grid that cannot build a layout is a number, not a grid. */ --hx-cols: 16; --hx-col-gutter: var(--hx-space-5); --hx-measure: 66ch; /* running copy */ --hx-split-major: 62.5%; /* 10 of 16 */ --hx-split-minor: 37.5%; /* 6 of 16 */ /* ---- Geometry — the mark --------------------------------------------- */ --hx-mark-ratio-h: 1.618; /* height ÷ outer diameter */ --hx-mark-stroke: 0.09; /* stroke ÷ outer diameter, = 1/Φ⁵ */ --hx-mark-clearspace: 0.309; /* clear space ÷ outer diameter */ --hx-mark-min-px: 24px; /* below this, switch to the micro variant */ --hx-mark-micro-px: 32px; /* micro variant threshold */ /* ---- Radius — the system is orthogonal. Radius is an exception, not a default. Permitted only on physical-object surrogates. */ --hx-radius-0: 0; --hx-radius-1: 2px; --hx-radius-tile: 22.37%; /* app-icon superellipse approximation */ /* ---- Motion — Φ-timed. Nothing eases in and out; the system arrives. */ --hx-dur-1: 100ms; --hx-dur-2: 162ms; /* 100 · Φ */ --hx-dur-3: 262ms; /* 100 · Φ² */ --hx-dur-4: 424ms; /* 100 · Φ³ */ --hx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --hx-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ---- Semantic aliases — light ground (default) ----------------------- */ --hx-bg: var(--hx-vellum); --hx-bg-raised: #F5F6F7; --hx-fg: var(--hx-void); --hx-fg-muted: var(--hx-graphite); --hx-fg-subtle: var(--hx-steel); --hx-rule: var(--hx-mist); --hx-rule-strong: var(--hx-ash); --hx-accent: var(--hx-signal); --hx-reserve: var(--hx-ratio); } /* ---- Semantic aliases — dark ground ----------------------------------- The palette does not invert. Signal and Ratio are re-tuned so that both clear 4.5:1 against Void; the neutral ramp is re-anchored, not mirrored. */ @media (prefers-color-scheme: dark) { :root { --hx-bg: var(--hx-void); --hx-bg-raised: var(--hx-ink); --hx-fg: var(--hx-vellum); --hx-fg-muted: var(--hx-ash); --hx-fg-subtle: var(--hx-steel); --hx-rule: #262A31; --hx-rule-strong: var(--hx-graphite); --hx-accent: var(--hx-signal-lift); --hx-reserve: var(--hx-ratio-lift); } } :root[data-theme="dark"] { --hx-bg: var(--hx-void); --hx-bg-raised: var(--hx-ink); --hx-fg: var(--hx-vellum); --hx-fg-muted: var(--hx-ash); --hx-fg-subtle: var(--hx-steel); --hx-rule: #262A31; --hx-rule-strong: var(--hx-graphite); --hx-accent: var(--hx-signal-lift); --hx-reserve: var(--hx-ratio-lift); } :root[data-theme="light"] { --hx-bg: var(--hx-vellum); --hx-bg-raised: #F5F6F7; --hx-fg: var(--hx-void); --hx-fg-muted: var(--hx-graphite); --hx-fg-subtle: var(--hx-steel); --hx-rule: var(--hx-mist); --hx-rule-strong: var(--hx-ash); --hx-accent: var(--hx-signal); --hx-reserve: var(--hx-ratio); }