/* ============================================================================ WhirlWind View — design tokens Extracted from the 23 July mockups. Drop in as the first stylesheet loaded. Three type families, three scales, one palette. Signature traits: square corners, hairline rules, warm paper ground, mono for anything machine-generated (ids, counts, labels, timestamps). ========================================================================= */ /* ---- fonts ------------------------------------------------------------- Self-host these rather than pulling from Google. The droplet already serves static assets, an external font call is a render-blocking dependency on someone else's uptime, and the wall must survive a flaky connection without falling back to Times. Fraunces — display only. Headings, big numbers, the wall's hero. IBM Plex Sans — everything a person reads as prose or UI. IBM Plex Mono — everything a machine produced. Ids, counts, dates, labels, weights, status tags. This split is the single strongest signal in the whole design: if it is mono, a human did not type it. --------------------------------------------------------------------------- */ :root { /* ---- ink ------------------------------------------------------------ */ --wv-ink: #1B2027; /* headings, primary text, active states */ --wv-soft: #4A5560; /* body copy */ --wv-slate: #727E8B; /* labels, muted meta, placeholder */ /* ---- ground --------------------------------------------------------- */ --wv-stone: #E7E3DC; /* page background — warm, never white */ --wv-paper: #FFFFFF; /* cards, panels, anything raised */ --wv-page: #FBFAF8; /* subtle fill — annotation boxes, headers */ --wv-rule: #D3CEC5; /* real borders */ --wv-line: #E9E4DB; /* hairlines inside a surface */ --wv-fill: #F2EFE8; /* chip background */ /* ---- meaning -------------------------------------------------------- */ --wv-green: #2E7D4F; /* on track, done, complete */ --wv-brick: #9C3B2E; /* off track, overdue, critical, escalated */ --wv-amber: #B4761F; /* warning, pinned to-do, unclaimed */ --wv-teal: #1F6F6B; /* primary action, development, add */ --wv-plum: #6A4A6E; /* roll-up, client links, ticket refs */ --wv-sky: #2C5C86; /* secondary refs, DevOps ids */ /* tinted grounds — same hues at 8%ish, for banded regions */ --wv-green-bg: #E8F4ED; --wv-brick-bg: #FBEDEA; --wv-amber-bg: #FBF0DC; --wv-plum-bg: #F0E9F1; --wv-sky-bg: #E4EBF2; /* ---- the wall ------------------------------------------------------- */ /* Separate palette. The TV is read at ten feet in a lit room, so it runs dark with saturated accents — the paper palette washes out. */ --wv-tv: #12161C; /* screen ground */ --wv-tv-panel: #1B222C; /* rotation cards */ --wv-tv-line: #2C3642; /* dividers */ --wv-tv-text: #E8EDF2; --wv-tv-dim: #8896A6; --wv-tv-red: #E23B2C; /* being worked */ --wv-tv-amber: #E0A030; /* unclaimed — the loudest thing on screen */ --wv-tv-green: #2FBE73; /* cleared, on track */ /* ---- families ------------------------------------------------------- */ --wv-display: 'Fraunces', Georgia, 'Times New Roman', serif; --wv-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --wv-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- page scale ------------------------------------------------------ Documents, panels, forms, the expanded card. Comfortable reading. Note this sits below the 18px fleet body standard used in ClientPulse and PMAH — see the note at the foot of this file before reconciling. */ --wv-t-hero: clamp(32px, 5.4vw, 52px); /* page title, display 600 */ --wv-t-h2: 31px; /* section, display 600 */ --wv-t-h3: 21px; /* subsection, display 600 */ --wv-t-lede: 17.5px; /* standfirst, sans 400 */ --wv-t-body: 16px; /* sans 400 */ --wv-t-small: 13.5px; /* table cells, dense prose */ --wv-t-label: 10.5px; /* mono 500, uppercase */ /* ---- card scale ------------------------------------------------------ DECIDED 24 Jul — scale B. A 288px card. Sits between the 232px compact draft and the 18px fleet standard. Chips are legible without leaning in, and they still read as secondary to the title rather than competing with it. This is a scanning surface, so it stays below the fleet reading scale — but not as far below as the first draft went. The old 232px values are kept commented beneath each line in case a denser variant is ever needed for a sidebar or a narrow column. */ --wv-c-title: 17px; /* sans 600, clamps at 2 lines (was 14.5) */ --wv-c-sub: 13px; /* description, clamps at 1 line (was 11) */ --wv-c-health: 14px; /* sans 600 (was 11.5) */ --wv-c-meta: 13px; /* progress figures (was 10.5) */ --wv-c-foot: 12.5px; /* owner, age (was 10) */ --wv-c-chip: 10.5px; /* mono 600, uppercase (was 8) */ --wv-c-count: 11px; /* mono, the to-do / notes row (was 9) */ --wv-c-id: 11px; /* mono, record id (was 9.5) */ --wv-c-roll: 12px; /* mono, roll-up line (was 9.5) */ /* card rhythm — scales with the type */ --wv-c-unit: 12px; /* vertical step between blocks */ --wv-c-padx: 13px; /* horizontal padding */ --wv-c-pady: 10px; /* top padding */ /* ---- wall scale ------------------------------------------------------ Container-query units, not px. The wall must scale with the screen it lands on — a 43" and a 75" both need to work without a rebuild. Set `container-type: inline-size` on the screen element. */ --wv-w-hero: 4.4cqw; /* client name, single emergency */ --wv-w-hero-2: 2.8cqw; /* client name, two up */ --wv-w-hero-3: 2.1cqw; /* client name, three up */ --wv-w-body: 2.15cqw; /* symptom line, who's on it */ --wv-w-age: 3.6cqw; /* the elapsed count */ --wv-w-label: 1.55cqw; /* mono band labels */ --wv-w-card: 1.5cqw; /* rotation card titles */ /* ---- tracking -------------------------------------------------------- Mono labels are always uppercase with open tracking. This is what makes machine-written text read as machine-written at a glance. */ --wv-track-label: .14em; /* section labels */ --wv-track-chip: .07em; /* chips, status tags */ --wv-track-id: .05em; /* record ids — tighter, they're read not scanned */ /* ---- geometry -------------------------------------------------------- Square corners are a signature, not an oversight. Nothing in this system has a border-radius except avatars and status dots. */ --wv-radius: 0; --wv-radius-full: 50%; /* avatars, health dots only */ --wv-border: 1px solid var(--wv-rule); --wv-hairline: 1px solid var(--wv-line); /* ---- elevation ------------------------------------------------------- Almost never. Borders do the separating. The only shadow in the system is the expanded panel, because it genuinely floats. */ --wv-shadow-panel: 0 24px 60px -30px rgba(27, 32, 39, .5); --wv-shadow-card: none; /* ---- rhythm ---------------------------------------------------------- */ --wv-sp-1: 3px; --wv-sp-2: 6px; --wv-sp-3: 9px; --wv-sp-4: 11px; /* card horizontal padding */ --wv-sp-5: 14px; --wv-sp-6: 18px; --wv-sp-7: 22px; --wv-sp-8: 30px; /* ---- board ----------------------------------------------------------- 288px is a MINIMUM, not a fixed width. The board already runs a Responsive mode that fits as many cards as will fit, plus a manual 1–6 override remembered per user. So this token is the only lever that changes: cards may render wider than 288 and that is correct, they must never render narrower, because below it the chips wrap and the title clamps mid-word. Consequence of moving 232 -> 288: on a wide monitor, likely none. On a laptop, one fewer column. Nobody has to configure anything — Responsive is the default and it works this out per screen. */ --wv-card-w-min: 288px; --wv-card-gap: 14px; --wv-panel-max: 1240px; /* expanded card, documents */ } /* ============================================================================ PRIMITIVES The handful of patterns that repeat everywhere. Everything else composes from these. ========================================================================= */ /* Section label — mono, uppercase, tracked. Used above every block. */ .wv-label { font-family: var(--wv-mono); font-size: var(--wv-t-label); letter-spacing: var(--wv-track-label); text-transform: uppercase; color: var(--wv-slate); font-weight: 500; } /* Chip — a fact about a card. Never interactive. */ .wv-chip { font-family: var(--wv-mono); font-size: var(--wv-c-chip); letter-spacing: var(--wv-track-chip); text-transform: uppercase; padding: 2px 5px; background: var(--wv-fill); color: var(--wv-soft); display: inline-block; white-space: nowrap; } .wv-chip--alert { background: var(--wv-brick-bg); color: var(--wv-brick); } .wv-chip--client { background: var(--wv-plum-bg); color: var(--wv-plum); } .wv-chip--devops { background: var(--wv-sky-bg); color: var(--wv-sky); } /* Type badge — a card's type. Solid, coloured by family. */ .wv-type { font-family: var(--wv-mono); font-size: var(--wv-c-chip); letter-spacing: var(--wv-track-chip); text-transform: uppercase; padding: 2px 5px; color: #fff; } .wv-type--product { background: var(--wv-teal); } .wv-type--business { background: var(--wv-brick); } .wv-type--client { background: var(--wv-plum); } .wv-type--internal { background: var(--wv-slate); } /* Record id — mono, muted. An address, not content. */ .wv-id { font-family: var(--wv-mono); font-size: 9.5px; letter-spacing: var(--wv-track-id); color: var(--wv-slate); } /* Health line — dot, verdict, optional status, source. */ .wv-health { display: flex; align-items: center; gap: var(--wv-sp-2); font-size: var(--wv-c-health); font-weight: 600; } .wv-health__dot { width: 7px; height: 7px; border-radius: var(--wv-radius-full); background: currentColor; flex: none; } .wv-health--ok { color: var(--wv-green); } .wv-health--off { color: var(--wv-brick); } .wv-health--done { color: var(--wv-slate); } /* Source tag — always right-aligned, always mono, always small. It exists so the verdict can be argued with. */ .wv-health__source { margin-left: auto; font-family: var(--wv-mono); font-size: 8px; letter-spacing: var(--wv-track-chip); text-transform: uppercase; color: var(--wv-slate); font-weight: 400; } /* Progress track — flat, square, no rounding. */ .wv-track { height: 16px; background: #EFECE5; position: relative; overflow: hidden; } .wv-track__fill { position: absolute; inset: 0 auto 0 0; background: var(--wv-teal); } .wv-track__fill--result { background: var(--wv-brick); } .wv-track__fill--off { background: var(--wv-brick); } /* Pace marker — a 2px rule at the elapsed-period mark. Turns "ahead or behind" from a calculation into something you see. */ .wv-track__pace { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--wv-ink); } /* Pinned to-do marker — amber dot suffix, marks template-seeded items. */ .wv-pin::after { content: ' ●'; color: var(--wv-amber); font-size: 8.5px; vertical-align: 2px; } /* ============================================================================ NOTE — reconciling with the fleet typography standard ClientPulse and PMAH run an 18px body baseline: 18 body/inputs/buttons, 14 minimum for help text, 24 h3, 28 h2, 32 h1, 40 hero. This file sets a 17px card title and 10.5px chips, which is smaller. DECIDED 24 Jul. The line is drawn here: - SCANNING surfaces use the card scale above. The board, and only the board. You are reading forty things at once to find the one that matters, and density is the point. - READING surfaces use the fleet 18px scale. The expanded card, every form, the Friday review, the to-do list, the edit modal. You are reading one thing carefully, so there is no reason to be tight. That single sentence resolves it everywhere and stops it being an argument at each component. Anything not obviously a board is a reading surface — when in doubt, use the fleet scale. Note the chips are the reason the fleet standard cannot apply literally to a card: the fleet puts labels at 18px, and on a card the chips ARE labels. At 18px "Q3 2026" is the same size as the card title. 10.5px keeps them legible and clearly secondary. Fluent UI — DECIDED 24 Jul: not used. WhirlWind View owns its look. Nothing in the fleet had adopted it, the existing app already uses native browser controls throughout, v5 is still a release candidate with breaking changes from v4, and its visual language is Teams' rather than this one. The only component the new design needs that does not already exist is a type-ahead for card search — a small build, not a reason to take a dependency. This is a per-app choice. WorkPortal may still adopt Fluent later without affecting anything here. ========================================================================= */