/* ============================================ CREATIVE MK — Design System Variables ============================================ */ /* --------------------------------------------------------------------------- THE CLOSED SET — paper ground, machined furniture. Decided 2026-08-10, see docs/direction.md §5.3. This block is the single source of truth from here on. The legacy block below it is what the site still renders against; the repaint that swaps one for the other is a single atomic pass, because there are 57 unique hex values in css/ and only 18 of them live here. Half a repaint reads worse than either ground, so nothing is rewired until all of it moves at once. Every ratio below was computed, not estimated. The two that decide the rules: raw gold on paper is 1.36:1, which is why it can never be text or a focus ring on the light ground; and the same hue aged to #7A5C12 is 5.15:1, which is why it can. --------------------------------------------------------------------------- */ :root { /* ---- Ground: paper ---- */ --paper: #EDE9E1; /* the page. Warm cotton, not white. */ --paper-raised: #F4F1EB; /* fields and cards sitting on the page */ --paper-sunk: #E3DED4; /* wells, tracks, the inside of a press */ /* ---- Ink on paper ---- */ --ink: #14120E; /* body and headings 15.45:1 AAA */ --ink-muted: #4E4840; /* secondary text 7.46:1 AAA */ --ink-faint: #6E675B; /* labels, captions 4.62:1 AA */ /* --ink-faint is AA, not AAA: it is for */ /* labels and metadata, never for body copy. */ /* ---- Rules ---- */ --rule: #CFC7B8; /* hairlines. Decorative: 1.39:1, never text */ --rule-strong: #8A8275; /* control borders 3.14:1 WCAG 1.4.11 */ /* ---- Plate: the inverted field the case studies sit on ---- */ --plate: #191712; --plate-raised: #232019; --plate-ink: #EDE9E1; /* on plate 14.79:1 AAA */ --plate-muted: #B6AD9C; /* on plate 8.06:1 AAA */ --plate-rule: #3A342A; --plate-rule-strong:#6B6355; /* on plate 3.02:1 WCAG 1.4.11 */ /* ---- Brand ---- The gold stops being an interface colour. No buttons, no underlines, no borders, no icons. It is the specular in the relief, and it is the focus ring — but only on the plate, where it measures 10.89:1. On paper the ring has to be --gold-aged, because raw gold there is 1.36:1 and would fail the one accessibility criterion this direction is built to win. */ --gold: #E8C840; /* on plate 10.89:1 AAA */ --gold-aged: #7A5C12; /* on paper 5.15:1 AA */ /* ---- State: one red, one use ---- */ --alert: #A3341F; /* on paper 5.65:1 AA */ /* ---- Motion: two curves, and nothing else ---- Entering is slow and deliberate, leaving is short and dry — the ratio is 3.15:1. The scale is deliberately shorter than the 1600ms the reference studios use: this direction is about parts seating against a shoulder, and a part that takes a second and a half to land reads as a feather, not a fit. Nothing overshoots. A piece that bounces is a piece that was made wrong, so the site never bounces. */ --ease-seat: cubic-bezier(0.19, 0.86, 0.15, 1); --ease-release: cubic-bezier(0.76, 0, 0.90, 0.28); --dur-seat: 820ms; --dur-release: 260ms; /* ---- Type roles ---- Fit (David Jonathan Ross, Mini licence, 50 USD) for display. It is not chosen for looks: its width axis is the mechanism that makes the Spanish and English headline end on the same right edge, which is the thesis demonstrated in three seconds. Lowercase and small caps were added to the family in 2024, so it sets sentences, not only capitals. Its axis range is NOT published, so no code may assume one — the fitter probes for the usable bounds and then binary-searches rendered width. Two earlier drafts assumed 82–108 and 100–800; both were invented. Licence ceiling to watch: 15,000 monthly unique web visitors. Winning is the event that breaks it. */ --font-display: 'Fit', 'Inter', system-ui, sans-serif; --font-text: 'Inter', system-ui, -apple-system, sans-serif; /* ---- Furniture: machined, so almost nothing is round ---- Rules, plates, fields and controls are cut square. The only curve in the set is the pill, and it is spelled exactly once — the old set spelled it four ways (--radius-full, 999px, 9999px, 100px) across 21 distinct radii. */ --radius-pill: 9999px; /* ---- Shadow: paper does not float ---- Two, and both are ink-tinted rather than black: a shadow on warm paper that is neutral grey reads as a screenshot pasted onto the page. The old set had 24 distinct shadows. */ --shadow-lift: 0 1px 2px rgba(20, 18, 14, 0.06); --shadow-overlay: 0 24px 60px rgba(20, 18, 14, 0.18); } /* --------------------------------------------------------------------------- COMPATIBILITY LAYER — the old names, pointing at the closed set above. Repaint stage A, 2026-08-17 (awards-build-plan.md §2.2). The repaint had to be atomic — half a repaint reads worse than either ground — but rewriting ~180 token references across 6,300 lines in one commit is where layout regressions come from. So the seam is here instead: every legacy name now RESOLVES to a closed-set value, which repaints the whole site in one edit with zero risk to layout, and leaves only the hardcoded hexes that bypass tokens as real work. These names are deprecated the moment they are written. Stage B renames the call sites (a visual no-op, because both spellings already resolve to the same value), then deletes this block and turns the token guard to error. Ambiguity was checked, not assumed: --color-white is a background 7 times and a text colour 10 times, and both roles land on #EDE9E1 (--paper and --plate-ink are the same value), so the alias is exact. --color-black is text 26 times and a field 9 times; it aliases to --ink and the nine field uses are promoted to --plate by hand. Every --color-gray-* call site was read: all sit on paper, none on plate. --------------------------------------------------------------------------- */ :root { /* ---- Brand ---- Gold stops being an interface colour here rather than at every call site: raw gold is 1.36:1 on paper, so the alias points at the aged cut (5.15:1) and every gold *fill* is promoted by hand. */ --color-primary: var(--gold-aged); --color-primary-dark: var(--gold-aged); --color-primary-light: var(--gold); --color-navy: var(--plate); --color-navy-light: var(--plate-raised); /* ---- Neutrals ---- */ --color-black: var(--ink); --color-black-pure: var(--ink); --color-white: var(--paper); --color-gray-50: var(--paper); --color-gray-100: var(--paper-sunk); --color-gray-200: var(--rule); --color-gray-300: var(--rule); --color-gray-400: var(--ink-faint); /* was #a3a3a3, 2.61:1 — now 4.62:1 */ --color-gray-500: var(--ink-faint); --color-gray-600: var(--ink-muted); --color-gray-700: var(--ink-muted); --color-gray-800: var(--ink); --color-gray-900: var(--ink); --color-text-muted: var(--ink-muted); /* ---- Typography ---- --font-display is NOT redefined here. It used to be, and because this legacy block comes second at equal specificity, the redefinition silently beat the 'Fit' declaration above — the display face would not have rendered even once it was bought. Removed 2026-08-17 (awards-build-plan.md §1). Until Fit lands, --font-display falls through its own stack to Inter, so this removal changes no pixels today and changes everything the day the licence lands. */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ --text-8xl: 6rem; /* 96px */ --text-9xl: 8rem; /* 128px */ --text-hero: clamp(2.5rem, 5.5vw, 5.5rem); --text-cta: clamp(3rem, 10vw, 10rem); /* Font Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Line Heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter Spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ---- Spacing ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-section: clamp(4rem, 8vw, 8rem); /* ---- Layout ---- */ --container-max: 1440px; --container-wide: 1200px; --container-narrow: 960px; --container-padding: clamp(1.25rem, 4vw, 3rem); --header-height: 72px; /* ---- Borders — the middle class of radii is gone ---- 4/8/12/16/24px all collapse to a square edge: the furniture is machined, and a machined part does not have a soft corner. Only the pill survives. */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-2xl: 0; --radius-full: var(--radius-pill); --border-color: var(--rule); /* ---- Shadows ---- */ --shadow-sm: var(--shadow-lift); --shadow-md: var(--shadow-lift); --shadow-lg: var(--shadow-overlay); --shadow-xl: var(--shadow-overlay); /* ---- Transitions ---- Nine curves become two. --ease-spring is the important casualty: it overshoots, and a piece that bounces is a piece that was made wrong, so it resolves to the seat curve like everything else. */ --ease-out: var(--ease-seat); --ease-in-out: var(--ease-seat); --ease-spring: var(--ease-seat); --duration-fast: var(--dur-release); --duration-normal: var(--dur-release); --duration-slow: var(--dur-seat); --duration-slower: var(--dur-seat); /* ---- Z-Index Scale ---- */ --z-header: 1000; --z-dropdown: 1100; --z-overlay: 1200; --z-modal: 1300; } /* --------------------------------------------------------------------------- THE PLATE SCOPE — the ground tells the ink which cut it is. A token that resolves to one value everywhere cannot survive a site with two grounds: --ink-faint is 4.62:1 on paper and 3.34:1 on the plate, and raw gold inverts even harder — 1.36:1 on paper, 10.89:1 on the plate. The same declaration is therefore a contrast failure in one act and the brightest legal mark in the other, and no amount of care at the call site fixes that, because the call site does not know which act it will be rendered in. So the compatibility aliases resolve to their PAPER cut by default — the safe side, since paper is most of the site — and this block re-cuts them inside the dark acts. Everything that lands in a plate inherits the right values without knowing it did. Only marks are re-cut here. Field tokens are deliberately absent: a background that flipped with its context would invert the act itself. */ .hero, .showreel, .news, .faq, .footer, .ai-automation__card, .header:not(.scrolled), .sec--navy, .sec--negro { /* gold becomes legal here, and only here */ --color-primary: var(--gold); --color-primary-dark: var(--gold); --oro: var(--gold); /* muted marks re-cut for the dark ground: --plate-muted is 8.06:1 where --ink-faint would have been 3.34:1. Verified as text-only tokens — none of these is ever a field (checked across every call site in css/). */ --color-gray-400: var(--plate-muted); --color-gray-600: var(--plate-muted); --color-gray-700: var(--plate-muted); --color-text-muted: var(--plate-muted); --border-color: var(--plate-rule); } /* --------------------------------------------------------------------------- ...and back to paper, for the light surfaces that float inside a dark act. The scope above re-cuts by ancestry, which is right until a paper panel is nested in a plate scope: the header dropdown is a paper menu hanging off a header that sits on the dark hero, so it inherited the plate cuts and put --plate-muted on paper — 1.84:1, invisible. A scope that only ever darkens is half a system; this is the other half, and any future light panel opened from a dark act belongs in this list. --------------------------------------------------------------------------- */ .header__dropdown-menu, .header .lang-switch__btn.active, .modal, .modal-case, .modal-news { --color-primary: var(--gold-aged); --color-primary-dark: var(--gold-aged); --oro: var(--gold-aged); --color-gray-400: var(--ink-faint); --color-gray-600: var(--ink-muted); --color-gray-700: var(--ink-muted); --color-text-muted: var(--ink-muted); --border-color: var(--rule); }