/* ============================================ 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; } /* --------------------------------------------------------------------------- LEGACY — what the site still renders against. Removed in the repaint pass. --------------------------------------------------------------------------- */ :root { /* ---- Brand Colors ---- */ --color-primary: #E8C840; --color-primary-dark: #D4B530; --color-primary-light: #F0D860; --color-navy: #1B2A4A; --color-navy-light: #2A3D66; /* ---- Neutrals ---- */ --color-black: #0a0a0a; --color-black-pure: #000000; --color-white: #ffffff; --color-gray-50: #ffffff; --color-gray-100: #f5f5f5; --color-gray-200: #e8e8e8; --color-gray-300: #d4d4d4; --color-gray-400: #a3a3a3; --color-gray-500: #737373; --color-gray-600: #525252; --color-gray-700: #404040; --color-gray-800: #262626; --color-gray-900: #171717; --color-text-muted: #4a5d80; /* ---- Typography ---- */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: '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 ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; --border-color: var(--color-gray-200); /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px rgba(0,0,0,0.1); /* ---- Transitions ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 700ms; /* ---- Z-Index Scale ---- */ --z-header: 1000; --z-dropdown: 1100; --z-overlay: 1200; --z-modal: 1300; }