/* * Site palette: the one place to change the site's colors. * * Read by the marketing pages (Tailwind: bg-brand-600, text-ink-900, ...) and by the header and footer * (site-chrome.css), on marketing pages and /app alike. Change a value here and all of them follow. * * brand = the logo blue (#007FFC is 500) and its tints/shades; 600 is the button/link color. * ink = navy-tinted slate for text, borders, light backgrounds (50) and dark sections (950). * Values are "R G B" channels (no commas) so Tailwind opacity modifiers work (bg-brand-600/10). * * Keep contrast in mind: white text on brand-600 and ink-600 text on white should stay at 4.5:1 or better. * * Below the two scales come the semantic tokens the marketing pages paint with (Tailwind: bg-surface, * text-fg-muted, border-line, ...). They are the only colors that flip for dark mode, so a page built from * the shared components follows along without a single dark variant of its own. Each one picks a step off * the scales above; the table in the block itself says which. Sections that are deliberately dark in light * mode (.section-dark, .hero, .section-brand) keep raw scale colors and never flip. */ :root { --brand-50: 238 246 255; --brand-100: 217 236 255; --brand-200: 188 220 255; --brand-300: 142 197 255; --brand-400: 86 166 255; --brand-500: 0 127 252; --brand-600: 0 102 214; --brand-700: 0 82 173; --brand-800: 4 68 140; --brand-900: 10 58 115; --brand-950: 8 36 74; --ink-50: 245 247 250; --ink-100: 233 238 245; --ink-200: 211 220 232; --ink-300: 174 188 207; --ink-400: 127 147 173; --ink-500: 91 111 140; --ink-600: 68 86 114; --ink-700: 51 67 92; --ink-800: 31 45 68; --ink-900: 19 32 58; --ink-950: 10 20 40; /* Semantic tokens, light mode. surface white page background surface-muted ink-50 alternating sections surface-raised white cards, tiles, form panels surface-sunken ink-100 recesses behind images line ink-100 borders and dividers line-strong ink-200 hover borders, button rings fg ink-900 headings and emphasis fg-muted ink-600 body text fg-subtle ink-500 captions and meta accent brand-600 links, eyebrows, icons accent-hover brand-700 their hover accent-strong brand-700 text on a soft accent fill accent-soft brand-50 icon tiles, badges accent-soft-line brand-100 their ring logo-surface white customer logo tiles, see the dark block logo-line ink-100 their border */ --surface: 255 255 255; --surface-muted: 245 247 250; --surface-raised: 255 255 255; --surface-sunken: 233 238 245; --line: 233 238 245; --line-strong: 211 220 232; --fg: 19 32 58; --fg-muted: 68 86 114; --fg-subtle: 91 111 140; --accent: 0 102 214; --accent-hover: 0 82 173; --accent-strong: 0 82 173; --accent-soft: 238 246 255; --accent-soft-line: 217 236 255; --logo-surface: 255 255 255; --logo-line: 233 238 245; } /* Semantic tokens, dark mode. Scoped exactly like the dark chrome tokens in site-chrome.css, so the header, the footer and the page body flip together: the OS asks for dark and the page has not opted out with . The second block lets a manual toggle force dark with data-color-mode="dark". Surfaces stack the ink scale the other way up: ink-950 for the page, ink-900 for muted sections, ink-800 for cards, so raised things read as lighter. Text is ink-200 and ink-300 against them (7:1 or better), and the accent moves to brand-300, the same step the existing dark sections already use. Logo tiles stay white in both modes: the customer logo PNGs have opaque white backgrounds, so tinting the tile would only show a seam. Their border lightens instead. */ @media (prefers-color-scheme: dark) { html:not([data-color-mode="light"]) { --surface: 10 20 40; --surface-muted: 19 32 58; --surface-raised: 31 45 68; --surface-sunken: 19 32 58; --line: 51 67 92; --line-strong: 68 86 114; --fg: 255 255 255; --fg-muted: 211 220 232; --fg-subtle: 174 188 207; --accent: 142 197 255; --accent-hover: 188 220 255; --accent-strong: 142 197 255; --accent-soft: 10 58 115; --accent-soft-line: 4 68 140; --logo-surface: 255 255 255; --logo-line: 211 220 232; } } html[data-color-mode="dark"] { --surface: 10 20 40; --surface-muted: 19 32 58; --surface-raised: 31 45 68; --surface-sunken: 19 32 58; --line: 51 67 92; --line-strong: 68 86 114; --fg: 255 255 255; --fg-muted: 211 220 232; --fg-subtle: 174 188 207; --accent: 142 197 255; --accent-hover: 188 220 255; --accent-strong: 142 197 255; --accent-soft: 10 58 115; --accent-soft-line: 4 68 140; --logo-surface: 255 255 255; --logo-line: 211 220 232; }