/* ════════════════════════════════════════════════════════════════ PostLever design tokens The page is dark and only dark, so every semantic token here is already resolved for a dark ground: --color-text is the ink that lands on --color-bg, not a light-mode default waiting to be flipped by a second stylesheet. Two colours and a ground, each with a job. BLUE is the brand and the interface accent both, which is the whole point: it is the product's own colour, so the page and the screenshots on it agree rather than reading as two products. It carries the links, the icons, the active states, the glows behind the panels and the dividers, and at full strength it is the primary button. Spending it everywhere at once is the failure to avoid — a page wearing its accent on every surface has no accent left — so the saturated end is rationed to what can be pressed. The GROUND is deep navy: the same hue as the accent, several steps down. A ground sharing the accent's hue is what lets a blue glow read as light on the surface rather than as a second colour laid over it, and at L* 7 that hue reads as depth rather than as a colour choice. STATUS is the third thing, and it is not the brand's to spend: green for completed, amber for a warning, red for a failure. The mockups here are pictures of the product and they speak the product's vocabulary. Surfaces climb in steps you can see. The source ran seven near-identical navy values, which is why its section boundaries and its diagonal dividers had nothing to divide. These are 3 to 5 L* apart. ════════════════════════════════════════════════════════════════ */ :root { /* ---- ground ---- Surfaces step by about 9 L*. Contrast ratios compress to nothing near black — page to panel reads about 1.2:1 whatever you do — while the eye still reads the step. */ --ink: #0A0E19; /* the page — deep navy, L* 6.6 */ --ink-sunken: #070B14; /* under it, and the footer */ --ink-band: #0D1321; /* a banded section */ --ink-deep: #101625; /* a deep section */ --ink-raised: #141B2B; /* a card */ --ink-high: #1B2234; /* hover, and a raised card */ --ink-line: #2A3348; /* a border */ --ink-line-hi: #38445C; /* a border that has to be seen */ /* ---- the brand ramp ---- The accent from its palest tint to its deepest step. Only --brand-200 and --brand-300 are used on this page; the rest are here so a rule that wants a neighbouring step has one to reach for rather than inventing it. */ --brand-200: #93C5FD; /* the button */ --brand-300: #60A5FA; /* the app's own wordmark tint */ --brand-400: #60A5FA; /* the mark's fold */ --brand-600: #3B82F6; /* the mark itself */ --brand-700: #2563EB; /* the app's gradient, 70% */ --brand-900: #1D4ED8; /* the app's light cut, 0% */ /* ---- ink on the ground ---- Measured against --ink. On a ground this dark, light text needs alpha 0.50 to clear 4.5:1, so nothing on the page sits below it. */ --paper: #E7EBF1; /* 15.9:1 on the page */ --paper-2: #BFC8D5; /* 11.4:1 */ --paper-muted: #8A96A7; /* 6.9:1 */ --paper-subtle: #6D798A; /* 4.8:1 */ /* ---- the hue names the page inherits ---- The page and the component sheet ask for these by name. They keep the names and point at the ramp, so a rule that wants "blue" gets the brand instead of a colour the brand does not own. */ --navy: #0A0E19; --navy-deep: #070B14; --navy-mid: #0D1321; /* The component sheet asks for these by name, and they all resolve into the one blue family: the sheet's cyan, indigo and teal are not colours this page spends separately, so pointing them at the accent is what keeps a ported rule from reintroducing a hue the palette retired. */ --blue: #2563EB; --blue-dark: #1D4ED8; --blue-light: #3B82F6; --blue-pale: #93C5FD; --blue-wash: #EFF6FF; --cyan: #60A5FA; --indigo: #3B82F6; --indigo-dark: #1D4ED8; --indigo-light:#60A5FA; --indigo: #2563EB; --indigo-dark: #1D4ED8; --indigo-light:#3B82F6; --teal: #60A5FA; --teal-dark: #1D4ED8; --teal-light: #93C5FD; --emerald: #22c55e; --emerald-dark: #16a34a; --emerald-light:#4ade80; /* ---- status ---- Exactly as the app sets them: green for completed, amber for a warning, red for a failure. These are the one part of the palette the brand does not get to move, because a reader reads them as states rather than as styling. */ --green: #22c55e; --green-light: #4ade80; --amber: #f59e0b; --amber-light: #fbbf24; --red: #ef4444; --red-light: #f87171; /* ---- neutral ramp ---- The names are the page's, the values are this palette's. */ --slate-50: #F2F4F8; --slate-100: #EBEEF3; --slate-200: #E7EBF1; --slate-300: #BFC8D5; --slate-400: #8A96A7; --slate-500: #6D798A; --slate-600: #515A68; --slate-700: #363D48; --slate-800: #141B2B; --slate-900: #0A0E19; /* True white, for the few things that want it whatever the ground: a hairline edge, a status dot. */ --white: #ffffff; --alpha-white-85: rgba(231,235,241,0.85); --alpha-white-75: rgba(231,235,241,0.75); --alpha-white-70: rgba(231,235,241,0.70); --alpha-white-65: rgba(231,235,241,0.65); --alpha-white-60: rgba(231,235,241,0.60); --alpha-white-50: rgba(231,235,241,0.50); --alpha-white-30: rgba(231,235,241,0.30); --alpha-white-20: rgba(255,255,255,0.24); --alpha-white-15: rgba(255,255,255,0.20); --alpha-white-10: rgba(255,255,255,0.16); --alpha-white-8: rgba(255,255,255,0.14); --alpha-black-30: rgba(0,0,0,0.30); --alpha-navy-dark-95: rgba(10,14,25,0.95); --alpha-blue-40: rgba(37,99,235,0.40); --alpha-blue-15: rgba(37,99,235,0.18); --alpha-blue-10: rgba(37,99,235,0.14); --alpha-blue-light-15: rgba(59,130,246,0.18); --alpha-blue-light-20: rgba(59,130,246,0.24); /* ---- semantic surfaces and ink ---- Resolved for the dark ground, which is why no theme file follows this one. Anything generic — a lead paragraph, a border, a card — lands correctly without a per-component dark rule. */ --color-text: #E7EBF1; --color-text-muted: #8A96A7; --color-text-subtle: #6D798A; --color-text-on-dark: #E7EBF1; --color-text-on-dark-muted: rgba(231,235,241,0.80); --color-bg: #0A0E19; --color-bg-alt: #0D1321; --color-bg-dark: #0A0E19; --color-bg-dark-alt: #101625; --color-bg-raised: #141B2B; --color-border: #2A3348; --color-border-light: #141B2B; /* ---- the accents ---- --color-accent is the blue allowed to be TEXT: 5.9:1 on the page. --color-accent-strong is the blue allowed to be a FILL. --color-on-accent is the ink that rides a fill. The fill is saturated rather than light, so that ink is white: white on --brand-fill reads 5.2:1, where the page's own ground on it reads 2.4:1 — the opposite of what a light fill wants, and the reason this slot is not just --ink. */ --color-accent: #3B82F6; --color-accent-strong: #2563EB; --color-on-accent: #FFFFFF; --color-link: #3B82F6; --accent-300: #93C5FD; --accent-400: #3B82F6; --accent-500: #2563EB; --accent-600: #1D4ED8; --accent-glow: rgba(37,99,235,0.16); /* The primary action. It is the one saturated fill on the page, so it is the product's blue at full strength rather than a tint: a pale blue at this size reads as a disabled control on a ground this dark. The hero spends it once, because a page wearing its accent everywhere has no accent left. */ --brand-fill: #2563EB; --brand-fill-hover: #3B82F6; --brand-ink: #60A5FA; /* ---- type ---- Unchanged from the page this grew out of: the rebrand was a name, a mark and a palette, not a new typeface. */ --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: 'Plus Jakarta Sans', sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; --text-6xl: clamp(3rem, 5.5vw, 4.5rem); --text-5xl: clamp(2.5rem, 4.5vw, 3.5rem); --text-4xl: clamp(2rem, 4vw, 3rem); --text-3xl: clamp(1.75rem,3vw, 2.25rem); --text-2xl: 1.5rem; --text-xl: 1.25rem; --text-lg: 1.125rem; --text-base: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem; --text-2xs: 0.65rem; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.65; --leading-relaxed: 1.75; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.18em; /* ---- space, 4px base ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --container-sm: 720px; --container-md: 1120px; --container-lg: 1200px; --container-xl: 1400px; --container-nav: var(--container-lg); /* ---- the prototype's width ---- Declared here because two rules depend on it: the panel itself and the padding that clears it for the copy column. Bounded by four things — a share of the width, an absolute cap, what the viewport height allows at the panel's 780:560 ratio, and a 460px reservation for the copy. That last term is the one that matters: without it a wide screen gave the panel 56vw and squeezed the heading to one word per line. Do not raise the 46vw share or the 820px cap. This was tried — the reasoning was that the reservation term never binds at real viewport sizes, so the share must be what shrank the panel, and the hero copy was measured before and after and did not move. That measurement was of the wrong column. The hero copy has a width of its own and does not yield, but the five explorer stages take their copy column from this same token through the padding rule that clears the panel, and at 56vw that column collapsed to one word per line with the stage eyebrow cut off — the exact failure described above, reproduced. The reservation does not save it, because the padding is derived from the panel width rather than from what is left over. */ --proto-w: max(380px, min(46vw, 820px, calc((100svh - 168px) * 1.3929), calc(100vw - 460px))); --nav-height: 80px; --nav-height-scrolled: 64px; /* A translucent slate shadow darkens nothing visible on this ground, so these are almost black. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.55); --shadow-md: 0 4px 14px rgba(0,0,0,0.50); --shadow-lg: 0 20px 48px rgba(0,2,8,0.66); --shadow-xl: 0 28px 64px rgba(0,2,8,0.65); --shadow-blue: 0 4px 16px rgba(37,99,235,0.22); --shadow-blue-lg: 0 6px 20px rgba(37,99,235,0.28); --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --border-default: 1px solid var(--color-border); --border-light: 1px solid var(--color-border-light); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1); --duration-fast: 0.15s; --duration-normal: 0.25s; --duration-slow: 0.45s; --z-sticky: 100; --z-dropdown: 200; /* The mobile sheet. It covers the whole viewport, so it has to clear both the fixed nav at 100 and the prototype's frame at 90 — and the frame is `position: fixed` for the length of the page, not just while it is on screen. Without this the sheet opens underneath both and the hamburger reads as doing nothing at all. */ --z-mobile-nav: 250; --z-modal: 300; --z-toast: 400; color-scheme: dark; } /* ════════════════════════════════════════════════════════════════ The light ground The site is moving to a light ground, page by page: a page opts in with data-ground="light" on , and these redefine the semantic tokens for it, so a rule written against --color-text or --color-bg lands correctly on either ground without a rule of its own. The brand stays the same blue. On white it is darker work than on navy: --color-accent is the blue allowed to be text, 5.2:1 on white, and the fill keeps white ink at 5.2:1. The two greys are the page and a band set off from it; the ribbon and the drawings are tuned to the band's grey, which is why it is a token rather than a tint. ════════════════════════════════════════════════════════════════ */ [data-ground="light"] { --paper-ground: #FFFFFF; /* the page */ --paper-band: #F7F8FA; /* a band set off from it */ /* The app's icon rail as the site's prototypes draw it: the brand's blue, a step deeper than the accent. */ --app-rail: linear-gradient(180deg, #2C55D4 0%, #2142B0 100%); --paper-wash: #EEF3FD; /* a stage the drawings sit on, washed blue */ --paper-line: #E3E8EF; /* a border */ --paper-line-hi:#D5DCE6; /* a border that has to be seen */ --color-text: #0A0E19; /* 19.4:1 on white */ --color-text-muted: #5C6778; /* 5.7:1 on white, 5.2:1 on band */ --color-text-subtle: #5C6778; --color-text-on-dark: #E7EBF1; --color-text-on-dark-muted: rgba(231,235,241,0.80); --color-bg: #FFFFFF; --color-bg-alt: #F1F4F6; --color-bg-raised: #FFFFFF; --color-border: #E3E8EF; --color-border-light: #EEF1F5; --color-accent: #2563EB; --color-accent-strong: #2563EB; --color-on-accent: #FFFFFF; --color-link: #2563EB; --brand-fill: #2563EB; /* Darker on hover rather than lighter: a lighter blue on white loses the white ink. */ --brand-fill-hover: #1D4ED8; --brand-ink: #2563EB; --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow-md: 0 4px 14px rgba(15,23,42,0.08); --shadow-lg: 0 20px 48px rgba(15,23,42,0.10); color-scheme: light; }