/* ============================================================ Appify — design tokens The single place colour, type and spacing are defined. Nothing below this file should contain a raw hex value. ============================================================ */ /* ---------- fonts, self-hosted ---------- Served from our own origin rather than the Google Fonts CDN, so no visitor IP is handed to a third party. Relevant for a Belgian company: a German court found embedding Google Fonts that way unlawful under the GDPR in 2022, and the same reasoning is why most EU sites now self-host. Costs nothing. */ @font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* ---------- brand inks ---------- Each one means something. See README. */ --plum: #2E2438; /* brand surface — hero, app chrome, card front */ --plum-deep: #1B1522; /* type on light grounds */ --stock: #EDEAE1; /* light ground; in diagrams, what's consumed */ --signal: #F04E2C; /* something needs a human. One thing per surface */ --relay: #9A93B8; /* events in flight. GRAPHIC INK ONLY, never type */ --relay-deep: #574E72; /* lilac's readable twin — labels on light */ --relay-ink: #48405F; /* the same ink one step down, for type ON GLASS. Relay-deep measures 2.9:1 on the pane — under the 3:1 large-text floor. This is 3.7:1. */ --signal-ink: #BC3417; /* Signal's readable twin, for ERROR TEXT. Signal itself is 3.6:1 on white — fine for a large numeral or a rule, not for a sentence. This is 5.8:1 on white, 5.5:1 on the app ground, 4.8:1 on stock. Flips to plain Signal on dark, which already measures 5.1:1 there. */ --trace: #6A6076; /* whatever you inherited */ /* type on a plum surface — the hero, the contact block, the page heads */ --stock-muted: #B7ADC2; /* body copy on plum */ --stock-quiet: #A093B0; /* labels and nav on plum */ /* hero ground wash — plum family only, no new hues */ --hero-bloom: #453650; --hero-pool: #191320; /* ---------- semantic surfaces (flip in dark mode) ---------- */ --page: var(--stock); --page-2: #E5E1D6; --ink: var(--plum-deep); --ink-muted: var(--relay-deep); --rule: #D5CFC2; --card: #F5F3ED; --label: var(--relay-deep); /* mono labels — flips, because relay-deep is lilac's readable twin ON LIGHT ONLY */ --label-quiet: var(--trace); /* ---------- type ---------- */ --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --fs-xs: 0.75rem; /* 12px — mono labels */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1.0625rem; /* 17px — body */ --fs-md: 1.1875rem; /* 19px — lede */ --fs-lg: clamp(1.25rem, 1.10rem + 0.7vw, 1.5rem); --fs-xl: clamp(1.55rem, 1.25rem + 1.5vw, 2.15rem); --fs-2xl: clamp(1.9rem, 1.45rem + 2.3vw, 2.9rem); --fs-3xl: clamp(2.15rem, 1.45rem + 3.4vw, 3.2rem); /* h1 */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.6; --track-tight: -0.045em; /* display */ --track-head: -0.025em; /* headings */ --track-mono: 0.12em; /* mono labels */ /* ---------- space ---------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 8rem; --measure: 62ch; --page-max: 1140px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --radius-sm: 3px; --radius: 10px; --radius-lg: 18px; /* ---------- the glass pane (Direction B) ---------- */ --pane-bg: rgba(237, 234, 225, .56); --pane-blur: 12px; /* not 24 — blur is a low-pass filter and eats the topology */ --pane-sat: .95; /* DOWN, not up. Milky vs shiny. */ --pane-bright: 1.5; /* lifts the dark ground before the cream goes on top */ --pane-border: rgba(255, 255, 255, .22); /* Depth, not shine. A wide diagonal wash off the top-left corner and a shade settling at the bottom — both low-frequency, both under 16%, so the pane reads as a slab of milky glass rather than a flat rectangle. No specular rim, no hotspot: that's Direction C, and we didn't pick it. */ --pane-sheen: linear-gradient(158deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 34%, rgba(255,255,255,0) 64%); --pane-shade: linear-gradient(to top, rgba(27,21,34,.085), rgba(27,21,34,0) 46%); /* ---------- controls ---------- A control's border IS the control: it is what tells a person where the field is, so it is held to 3:1 like any other meaningful graphic. The card and table borders elsewhere are decorative and sit far below that — --app-line is 1.3:1 on white, which is right for a divider and wrong for an input. Hence a separate value. */ --control-bg: #FFFFFF; --control-line: #8B8394; /* 3.6:1 on white · 3.5:1 on the app ground · 3.0:1 on stock */ --control-ink: var(--plum-deep); --control-holder: #6E6579; /* placeholder — 5.5:1, because it is still text */ --control-on: var(--plum); /* checked. NOT Signal: "on" is not "a human is needed" */ --control-on-ink: var(--stock); /* the tick inside the checked box — 12.3:1 */ --control-off-bg: #F2EFE9; /* disabled fill */ --control-off-ink: #7E7590; /* disabled text — 3.4:1, and deliberately so */ /* ---------- the hero topology ---------- Scale is driven by the drawing's HEIGHT, and the drawing is anchored to the shell rather than the viewport, so its position relative to the pane is the same at 1140px and at 2560px. viewBox unit 1050 lands exactly on the pane's left edge; --topo-anchor is how many multiples of the height sit to the left of it (enough runway to reach the edge of a 4K window). */ --topo-h: clamp(300px, 30vw, 425px); --topo-anchor: 3.5; } /* ---------- dark mode ---------- The hero stays plum in both modes: it's a brand surface, not a ground. Only the light body sections flip. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #14101A; --page-2: #1B1522; --ink: var(--stock); --ink-muted: #A79EB8; --rule: #2C2436; --card: #1E1826; --label: var(--relay); --label-quiet: #918AA3; --signal-ink: var(--signal); /* 5.1:1 on the dark app ground already */ --control-bg: #211A2A; --control-line: #736A80; /* 3.6:1 on the dark ground */ --control-ink: var(--stock); --control-holder: #9A92A8; --control-on: var(--relay); /* lilac reads as "on" against a dark field */ --control-on-ink: var(--plum-deep); --control-off-bg: #1E1826; --control-off-ink: #7E7590; } } :root[data-theme="dark"] { --page: #14101A; --page-2: #1B1522; --ink: var(--stock); --ink-muted: #A79EB8; --rule: #2C2436; --card: #1E1826; --label: var(--relay); --label-quiet: #918AA3; --signal-ink: var(--signal); /* 5.1:1 on the dark app ground already */ --control-bg: #211A2A; --control-line: #736A80; /* 3.6:1 on the dark ground */ --control-ink: var(--stock); --control-holder: #9A92A8; --control-on: var(--relay); /* lilac reads as "on" against a dark field */ --control-on-ink: var(--plum-deep); --control-off-bg: #1E1826; --control-off-ink: #7E7590; }