/* =========================================================================== GROWTH SYSTEM โ€” design tokens ยท v4, the workshop in colour Yellow stays the brand ground. White frames the page as chrome. Blue is gone: sunset orange carries every graphic accent and canopy green carries emphasised words. Pink and green join as section bands. Every text pair below is computed against the band it sits on. =========================================================================== */ :root{ /* --- Palette ------------------------------------------------------------ */ --yellow: #FAD24B; /* Vivid Vargas: the brand ground */ --yellow-2: #F5C93A; --yellow-3: #FFF4CF; /* a pale wash for hovers on white */ --white: #FFFFFF; --paper: #F7F5F2; /* Coconut: form fields */ --orange: #FA551E; /* Sunset: the graphic accent that replaces blue */ --orange-2: #E2440F; --green: #0F503C; /* Canopy: emphasis text, deep bands */ --green-2: #16614A; --pink: #FFAFA5; /* a soft band */ --pink-2: #FFC2BA; --graphite: #1E1919; /* never remapped: button fills, fixed ink */ --grey-fill:#C7C1BB; /* --- Ink, remapped per band -------------------------------------------- On yellow: ink 11.9:1, ink-2 5.0:1. On white: 17.4:1 / 7.3:1. Bands override these so every component that says var(--ink) reads. */ --ink: var(--graphite); --ink-2: #5B5650; --ink-3: #736C64; /* --- Roles -------------------------------------------------------------- */ --ground: var(--yellow); /* kept for older selectors */ --ground-2: var(--yellow-2); --chrome: var(--white); /* header, rail, footer, menu */ --accent: var(--orange); /* shadows, marks, underlines, the rail block */ --em: var(--green); /* emphasised words: 6.4:1 on yellow, 9.4:1 on white */ --hover: var(--yellow-2); --ui: var(--orange); /* legacy alias: anything still asking for the old blue */ --warm: var(--orange); --leaf: var(--green); /* --- Grid and rules ----------------------------------------------------- */ --grid-line: rgba(30, 25, 25, 0.07); --grid-cell: clamp(4rem, 3rem + 4vw, 8rem); --rule: rgba(30, 25, 25, 0.22); --rule-strong: rgba(30, 25, 25, 0.5); /* --- Type system -------------------------------------------------------- */ --font-display: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --t-display-xl: clamp(3rem, 1.5rem + 7vw, 9rem); --t-display-l: clamp(2.25rem, 1.4rem + 3.6vw, 5rem); --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 3rem); --t-h3: clamp(1.25rem, 1.12rem + .56vw, 1.625rem); --t-lede: clamp(1.125rem, 1.06rem + .28vw, 1.375rem); --t-body: clamp(1rem, .98rem + .09vw, 1.0625rem); --t-small: .9375rem; --t-label: clamp(.6875rem, .666rem + .09vw, .75rem); --t-mono: clamp(.75rem, .728rem + .09vw, .8125rem); --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --band-y: clamp(4.5rem, 3.09rem + 6.02vw, 9rem); --band-y-l: clamp(6rem, 3.89rem + 9.02vw, 12.75rem); --gutter: clamp(1.25rem, .545rem + 3.01vw, 3.5rem); --rail: 3.75rem; --max: 88rem; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-1: 180ms; --dur-2: 340ms; --dur-3: 620ms; --dur-4: 1000ms; --z-nav: 100; --z-menu: 200; --z-skip: 300; color-scheme: light; } /* =========================================================================== BANDS โ€” a section picks its colour; everything inside re-reads its ink. Backgrounds are set as background-color so the drafting grid, drawn as a background-image on .band, survives on every colour. =========================================================================== */ .band--ground, .band--yellow{ --bg: var(--yellow); --hover: var(--yellow-2); background-color: var(--yellow); color: var(--ink); } .band--white{ --bg: var(--white); --hover: var(--yellow-3); --ink-3: #6A635B; /* 5.8:1 on white */ background-color: var(--white); color: var(--ink); } /* pink: ink-2 darkened to hold 5.4:1 for small text. v5.2: --ink-3 was #5B5650 = 4.12:1, below AA. Latent (no pink band currently carries muted text) but it would have failed the moment one did. */ .band--pink{ --bg: var(--pink); --hover: var(--pink-2); --ink-2: #4A4540; --ink-3: #544F49; /* 5.38:1 / 4.60:1 */ --rule: rgba(30, 25, 25, .26); --rule-strong: rgba(30, 25, 25, .55); background-color: var(--pink); color: var(--ink); } /* canopy green: the ink turns light, emphasis turns yellow (6.4:1) */ .band--green{ --bg: var(--green); --hover: var(--green-2); --ink: #F7F5F2; --ink-2: #CFE3D8; --ink-3: #9DC2AE; --em: var(--yellow); --accent: var(--yellow); --rule: rgba(247, 245, 242, .22); --rule-strong: rgba(247, 245, 242, .5); --grid-line: rgba(247, 245, 242, .06); background-color: var(--green); color: var(--ink); } /* sunset orange: ink stays graphite (5.28:1), ink-2 is 4.77:1. v5.2: the old comment claimed ink-2 held 5.0:1 and implied ink-3 was safe โ€” measured, ink-3 #3A2D27 was 4.03:1, below AA. Latent (no built page carries a band--orange today) but the wrong comment would have misled the next edit. */ .band--orange{ --bg: var(--orange); --hover: var(--orange-2); --ink-2: #2B211D; --ink-3: #2E241F; /* 4.77:1 / 4.60:1 */ --em: var(--graphite); --accent: var(--graphite); --rule: rgba(30, 25, 25, .3); --rule-strong: rgba(30, 25, 25, .6); --grid-line: rgba(30, 25, 25, .09); background-color: var(--orange); color: var(--ink); } .band--ink{ --bg: var(--graphite); --ink: var(--paper); --ink-2: #C7C1BB; --ink-3: #978F86; --rule: rgba(247,245,242,.14); --rule-strong: rgba(247,245,242,.32); background-color: var(--graphite); color: var(--ink); } .band--paper{ --bg: var(--paper); background-color: var(--paper); color: var(--ink); } /* aliases older components still read */ .band--ground, .band--yellow, .band--white, .band--pink, .band--green, .band--orange, .band--ink, .band--paper{ --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --rule-c: var(--rule); --rule-s: var(--rule-strong); }