/* ============================================================ DESKA LAB HELSINKI — Design Foundations colors_and_type.css Single source of truth for color + type tokens. Import this file, then use the variables — never hard-code raw hex/oklch values in components. Two layers: 1. PRIMITIVE tokens (--paper, --ink, --accent, --wine …) 2. SEMANTIC tokens (--fg-1, --bg-1, --h1, --label …) ============================================================ */ /* Webfonts — TWO TYPE PROFILES, one shared role system. ---------------------------------------------------------- The lab works across two kinds of surface, so --font-sans is split into two profiles. Everything else (sizes, roles, colour, spacing, weights) is identical between them. • STUDIO (default) → Gotham Narrow. For artefacts PRODUCED on lab machines: decks, posters, figures, PDFs. Requires the desktop licence. ⚠ Web hosting NOT permitted under the lab's licence — do NOT serve the .otf files or this @import on any public-facing URL. Load gotham-narrow.css only in local/desktop tooling (slides exporter, print CSS, etc.). • PRODUCT (opt-in) → Barlow Semi Condensed (OFL). For anything SHIPPED as live webfont: the public site, the mobile app. Free to self-host/embed. Activate per-document: ALL public web pages must use this profile. Both faces are wired to the weights they carry as true masters. STUDIO (Gotham Narrow) ships 400 / 500 / 700 / 800 and has NO 600. PRODUCT (Barlow) additionally carries a true 600. To stay face-safe, use the --w-* tokens (never a raw font-weight): --w-semibold resolves to 700 on Studio and 600 on Product, so the SAME token renders cleanly in either face. Reach for --w-semibold on UI labels, nav and buttons (the site/app); keep --w-bold / --w-black for headings & titles. The LOGO is exempt from all of this: it ships as an outlined SVG (assets/logo-*.svg) — Gotham geometry, no font file — so the brand mark is identical on every surface. See README. */ @import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,800;1,700;1,800&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ───────────────────────────────────────────── 1 · PRIMITIVES ───────────────────────────────────────────── */ /* Paper stack — backgrounds & surfaces (zero-chroma) */ --paper: oklch(0.995 0 0); --paper-2: oklch(0.970 0 0); --paper-3: oklch(0.925 0 0); --rule: oklch(0.84 0 0); --rule-strong: oklch(0.62 0 0); /* Ink stack — text & strong borders (zero-chroma) */ --ink: oklch(0.175 0 0); --ink-2: oklch(0.38 0 0); --ink-3: oklch(0.58 0 0); /* Wine accent scale — the brand signature. --accent is the canonical deep wine. */ --accent: #86145C; /* wine — primary accent · oklch(0.420 0.161 348) · 9.2:1 on paper */ --accent-2: oklch(0.46 0.14 358); --accent-3: oklch(0.60 0.11 2); --accent-4: oklch(0.74 0.08 6); --accent-5: oklch(0.87 0.04 10); --accent-soft: oklch(0.93 0.025 12); /* highlight text background */ /* ── EXPANDED MUTED PALETTE (v2) ────────────── The deep wine plus SIX muted companions, for categorical use: charts, scientific figures, slide accents, app surfaces. All seven base colors stay mutually DISTINGUISHABLE under deuteranopia & protanopia (red-green color-vision deficiency): they are separated on the blue↔yellow axis and by lightness — NOT by red-green hue, the axis those viewers cannot see. The seventh, --graphite, is a fully-neutral ink parked in the open DARK slot. A neutral grey has no blue-yellow lean, so it only stays distinct when kept dark (mid-brightness greys collapse into the muted colors under CVD). Worst-case ΔE across all 21 pairs = 17 (deutan & protan, Machado 2009). The first SIX colors alone clear ΔE > 20 — the same bar as the original four — so graphite is the spare 7th / high-contrast partner to wine. Verify: 01-foundations/color-cvd-accessibility.html */ --wine: #86145C; /* = --accent · the anchor (L*≈30) */ --wine-muted: #8A535B; /* muted wine / rosewood (L*≈42) */ --slate-muted: #6A8299; /* muted slate-blue (L*≈53) */ --ochre-muted: #C8A971; /* muted ochre / gold (L*≈71) */ --jade: #74AA8F; /* muted jade green (L*≈65) */ --mist: #C6D2D9; /* pale blue-grey (L*≈83) */ --graphite: #333333; /* neutral ink · spare 7th (L*≈21) */ /* Soft background tints of each color (≈14% in paper) */ --wine-soft: #efe2e4; --slate-soft: #e3e9ee; --ochre-soft: #f4ecdb; --jade-soft: #eaf1ee; --mist-soft: #f5f7f8; /* a whisper — mist is already pale */ --graphite-soft: #e6e6e6; /* Deeper variants for text/keylines on light surfaces */ --wine-deep: #4B1036; /* dark wine anchor · same hue line as --wine */ --slate-deep: #41566A; --ochre-deep: #7E5F22; --jade-deep: #3A5548; /* CR 8.2 on paper */ --mist-deep: #63696D; /* CR 5.6 on paper — mist's readable text shade */ --graphite-deep: #1A1A1A; /* ── Ordered categorical ramp ────────────────── Assign data series in this order. Colors 1–6 are all ΔE > 20 distinct under CVD; reach for --cat-7 (graphite) as the spare, or as a high-contrast second entity paired with --cat-1 (wine). */ --cat-1: var(--wine); /* 1 · deep wine (anchor) */ --cat-2: var(--wine-muted); /* 2 · muted wine / rosewood */ --cat-3: var(--slate-muted); /* 3 · slate-blue */ --cat-4: var(--ochre-muted); /* 4 · ochre / gold */ --cat-5: var(--jade); /* 5 · jade green */ --cat-6: var(--mist); /* 6 · pale blue-grey */ --cat-7: var(--graphite); /* 7 · neutral ink (spare) */ /* ───────────────────────────────────────────── 2 · TYPE PRIMITIVES ───────────────────────────────────────────── */ /* STUDIO profile is the default. The PRODUCT override lives below :root and only swaps --font-sans. */ --font-sans: "Gotham Narrow", "Barlow Semi Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* WEIGHT TOKENS — semantic, face-safe. Decouple design intent ('black heading') from the raw number. Both profiles share these four masters, so the same token renders the same weight in either face. Never write a bare font-weight; use these. */ --w-regular: 400; /* @kind font */ --w-medium: 500; /* @kind font */ --w-semibold: 700; /* @kind font */ /* face-safe: Studio falls to 700 (no Gotham 600) — Product overrides to 600 */ --w-bold: 700; /* @kind font */ --w-black: 800; /* @kind font */ /* ───────────────────────────────────────────── 3 · SPACING (4px base, linear) + RADII ───────────────────────────────────────────── */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px; --r-pill:999px; --maxw: 1240px; /* ───────────────────────────────────────────── 4 · SEMANTIC ALIASES ───────────────────────────────────────────── */ --bg-1: var(--paper); /* page background */ --bg-2: var(--paper-2); /* alt rows, tinted cards */ --bg-3: var(--paper-3); /* placeholders, fills */ --fg-1: var(--ink); /* primary text */ --fg-2: var(--ink-2); /* secondary text */ --fg-3: var(--ink-3); /* meta / muted text */ --border: var(--rule); --border-strong: var(--rule-strong); --link: var(--ink); --link-hover: var(--accent); } /* ============================================================ PRODUCT TYPE PROFILE — opt-in, web/mobile only Put data-type-profile="product" on (or any wrapper) for surfaces that render live webfont text we SHIP: the public site and the mobile app. Swaps the sans face to Barlow Semi Condensed (OFL — free to self-host/embed). Roles, sizes, weights and colour are inherited unchanged. ============================================================ */ [data-type-profile="product"] { --font-sans: "Barlow Semi Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; --w-semibold: 600; /* @kind font */ /* Barlow carries a true 600 master — use for nav / buttons / UI labels */ } /* ============================================================ SEMANTIC TYPE ROLES Apply as classes, or copy the rule bodies into components. ============================================================ */ .ds-hero { /* hero headline — landing only */ font-family: var(--font-sans); font-size: clamp(40px, 5vw, 70px); font-weight: var(--w-black); line-height: 1.02; letter-spacing: -0.025em; color: var(--fg-1); } .ds-h1 { font-family: var(--font-sans); font-size: clamp(36px, 5vw, 68px); font-weight: var(--w-black); line-height: 1.02; letter-spacing: -0.02em; color: var(--fg-1); text-wrap: balance; } .ds-h2 { font-family: var(--font-sans); font-size: 36px; font-weight: var(--w-black); line-height: 1.05; letter-spacing: -0.02em; color: var(--fg-1); } .ds-sec-title { font-family: var(--font-sans); font-size: clamp(24px, 3vw, 36px); font-weight: var(--w-bold); line-height: 1.05; letter-spacing: -0.01em; color: var(--fg-1); } .ds-h3 { font-family: var(--font-sans); font-size: 22px; font-weight: var(--w-bold); line-height: 1.15; letter-spacing: -0.005em; color: var(--fg-1); } .ds-lead { font-family: var(--font-sans); font-size: 18px; font-weight: var(--w-regular); line-height: 1.55; color: var(--fg-2); text-wrap: pretty; } .ds-body { font-family: var(--font-sans); font-size: 15px; font-weight: var(--w-regular); line-height: 1.65; color: var(--fg-2); text-wrap: pretty; } /* Serif italic accent — used for ONE emphasised word inside a headline */ .ds-accent-em { font-family: var(--font-serif); font-style: italic; font-weight: 700; color: var(--accent); } /* Mono label / eyebrow / metadata */ .ds-label { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } .ds-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--fg-3); }