/* ========================================================================== WorldNaturalDisasters (WND) — Colors & Type Canonical reusable token layer for the WND Design System. PROVENANCE Every value below is either [MEASURED] from the three source mockups in assets/, or [INFERRED] and labelled as such. Nothing is inherited from a framework default. Source evidence (assets/): wnd-event-detail-mobile-reference.jpeg — event page hierarchy + data type wnd-homepage_variant_2.jpeg — composition + editorial serif wnd-homepage_variant_1.jpeg — global hex-field treatment Measurement method: screen region isolated from the device photograph, illuminant normalized to the 99.5th-percentile white point, then frequency-ranked and cluster-averaged per UI role. Small-text values use glyph-core averaging. Sizes derive from a 575px-wide screen crop mapped to a 393pt logical viewport (1 image px = 0.6835 CSS px). KEY SYSTEM PROPERTY The neutral ramp is not grey. Every structural neutral sits on a single blue hue of ~254deg in OKLCH, at chroma rising from 0.000 to 0.034. Measured ink 254.6deg, muted 254.1deg, accent 250.4deg, cyclone 253.9deg. Do not substitute a neutral grey ramp — it breaks the system's cool cast. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. NEUTRAL RAMP — one hue (254deg), chroma 0 -> 0.034 [MEASURED] Anchors: 900 = measured ink (#0f1b2a, darkest glyph cores across all three mockups); 600 = measured secondary/meta text; 200 = measured hairline; 50 = measured page canvas. --------------------------------------------------------------------- */ --wnd-neutral-0: #ffffff; /* oklch(100.00% 0.0000 254) */ --wnd-neutral-50: #f5f6f7; /* oklch(97.30% 0.0017 254) page canvas */ --wnd-neutral-100: #eef0f2; /* oklch(95.50% 0.0035 254) sunken/track */ --wnd-neutral-200: #e3e7ec; /* oklch(92.70% 0.0075 254) hairline */ --wnd-neutral-300: #d2d7de; /* oklch(87.80% 0.0110 254) strong rule */ --wnd-neutral-400: #a9b2bd; /* oklch(76.00% 0.0180 254) disabled ink */ --wnd-neutral-500: #7d8896; /* oklch(62.30% 0.0250 254) placeholder */ --wnd-neutral-600: #5f6b7a; /* oklch(52.30% 0.0279 254) meta / muted */ --wnd-neutral-700: #424e5d; /* oklch(42.00% 0.0300 254) body secondary */ --wnd-neutral-800: #253141; /* oklch(31.00% 0.0330 254) */ --wnd-neutral-900: #0f1b2a; /* oklch(21.90% 0.0343 254) ink */ --wnd-neutral-950: #040e1b; /* oklch(16.00% 0.0330 254) */ /* --------------------------------------------------------------------- 2. STRUCTURAL ROLES [MEASURED] NOTE: in the source photographs the page canvas and the card fill measure within +/-1/255 of each other. Cards are NOT separated by a fill step — they are separated by a hairline plus a micro-shadow. The 1-step delta below is the minimum regularization needed to keep that relationship legible on real displays. Never widen it. --------------------------------------------------------------------- */ --wnd-canvas: var(--wnd-neutral-50); --wnd-canvas-warm: #f6f5f2; /* variant-2 paper cast, editorial use */ --wnd-surface: var(--wnd-neutral-0); --wnd-surface-sunken: var(--wnd-neutral-100); --wnd-ink: var(--wnd-neutral-900); --wnd-ink-secondary: var(--wnd-neutral-700); --wnd-muted: var(--wnd-neutral-600); --wnd-placeholder: var(--wnd-neutral-500); --wnd-disabled: var(--wnd-neutral-400); --wnd-border: var(--wnd-neutral-200); --wnd-border-strong: var(--wnd-neutral-300); --wnd-divider: var(--wnd-neutral-200); /* --------------------------------------------------------------------- 3. ACCENT — interactive, markers, focus [MEASURED] Measured from timeline dots (#245687-#375b7f), overview dot (#3067a0-#4374a8), links and eyebrow labels (#203a51-#2b4051). The evidence shows two related blues: a quiet slate for link text at small sizes, and a brighter blue for dots/markers. Both are kept. --------------------------------------------------------------------- */ --wnd-accent: #2f5f8f; /* oklch(47.50% 0.0940 250) 6.66:1 on white */ --wnd-accent-quiet: #3d566f; /* link text at <=14px, eyebrow labels */ --wnd-accent-hover: #24496e; /* L -0.06 */ --wnd-accent-active: #1b3855; /* L -0.12 */ --wnd-accent-bg: #edf5ff; --wnd-accent-border: #cddff1; --wnd-accent-on: #ffffff; /* foreground on --wnd-accent */ /* --------------------------------------------------------------------- 4. HAZARD TAXONOMY Three measured directly from the mockups' hazard tiles and markers; three inferred to complete the taxonomy shown in the source screens (Flood, Volcanic Unrest, Severe Weather appeared with icons but no large enough color field to measure reliably). Each family: -bg (tint) / -border / (base) / -text (>=4.5:1 on white). Use -text for any hazard-colored *text*; the base is for marks, rules and icon strokes only. --------------------------------------------------------------------- */ /* Earthquake / seismic [MEASURED] */ --wnd-seismic: #b8392a; /* oklch(53.00% 0.1659 30) 5.74:1 */ --wnd-seismic-text: #b8392a; --wnd-seismic-bg: #fff0ed; --wnd-seismic-border: #ffd0c7; --wnd-seismic-mark: #d1442a; /* epicentre ring stroke, measured #dc2601 core */ /* Cyclone / storm [MEASURED] */ --wnd-cyclone: #4479b8; /* oklch(56.90% 0.1134 254) 4.49:1 */ --wnd-cyclone-text: #4378b7; /* nudged to 4.56:1 for text use */ --wnd-cyclone-bg: #ecf5ff; --wnd-cyclone-border: #cbdef6; /* Wildfire [MEASURED] */ --wnd-wildfire: #e07c39; /* oklch(68.60% 0.1472 51) 2.95:1 — MARKS ONLY */ --wnd-wildfire-text: #bb5b08; /* 4.55:1 — use for wildfire text */ --wnd-wildfire-bg: #fff1e9; --wnd-wildfire-border: #f9d4bf; /* Flood [INFERRED] */ --wnd-flood: #327ea0; --wnd-flood-text: #327ea0; --wnd-flood-bg: #ebf6fd; --wnd-flood-border: #c9e1ed; /* Volcanic unrest [INFERRED — kept darker and lower-chroma than seismic so the two separate at 16px and below] */ --wnd-volcanic: #8a4336; --wnd-volcanic-text: #8a4336; --wnd-volcanic-bg: #fff1ee; --wnd-volcanic-border: #f2d5cf; /* Severe weather [INFERRED] */ --wnd-severe: #6b578f; --wnd-severe-text: #6b578f; --wnd-severe-bg: #f6f2fe; --wnd-severe-border: #dfd8f0; /* --------------------------------------------------------------------- 5. STATUS — WND Event lifecycle, independent of hazard type Canonical lifecycle vocabulary (fixed; do not extend or substitute): emerging -> active -> stabilizing -> recovery -> closed -> historical ACTIVE measured from the event-detail status dot (#01735a-#0c6b56) and the impact-band building icon (#064635). It is a deep teal-green, NOT a bright UI success green. Only `active` is colored. Every other lifecycle state renders as plain muted text — that asymmetry is deliberate (see WND-DESIGN-SYSTEM.md §4). A single `--wnd-status-quiet` token covers all five non-active states; do not add a dedicated color per state. Hazard-specific descriptive language (e.g. wildfire "containment") is a separate axis from lifecycle and must never be styled as a status. --------------------------------------------------------------------- */ --wnd-active: #0d6e57; /* oklch(48.10% 0.0905 171) 6.20:1 [MEASURED] */ --wnd-active-bg: #ebf8f3; --wnd-active-border: #c9e3da; --wnd-status-quiet: var(--wnd-neutral-600); /* [DERIVED] emerging / stabilizing / recovery / closed / historical */ --wnd-stabilizing: var(--wnd-status-quiet); /* deprecated alias — prefer --wnd-status-quiet */ /* Directional change (revised upward / downward) [MEASURED] The up-arrow delta in the event detail measures #841504 at its core. */ --wnd-delta-rise: #a8321c; --wnd-delta-fall: var(--wnd-active); /* --------------------------------------------------------------------- 6. GEOGRAPHIC FIELD — the signature element [MEASURED] The world map is an abstract hexagonal tessellation, never a web map. Land hexes measure #c0c3c8 (dense) to #dfe3e9 (sparse) on canvas; pitch measures ~8.5 image px ~= 5.8 CSS px at mobile width. --------------------------------------------------------------------- */ --wnd-geo-land: #cfd6de; --wnd-geo-land-dense: #c0c3c8; --wnd-geo-land-sparse: #dfe3e9; --wnd-geo-water: transparent; /* the canvas shows through */ --wnd-geo-graticule: #e3e7ec; --wnd-geo-cell: 6px; /* hex pitch at mobile */ --wnd-geo-cell-lg: 9px; /* hex pitch at desktop */ /* --------------------------------------------------------------------- 7. TYPOGRAPHY The system is deliberately DUAL-FACE, confirmed across the mockups: - a transitional SERIF carries the wordmark and editorial display (measured in variant-2: wordmark, H1, and event card titles); - a grotesque SANS carries all UI, data and metadata (measured in the event detail and variant-1). A single face for both is a misreading of this system. No font binaries were supplied with the source evidence, so these are stacks, not @font-face bindings. Source Serif 4 and Inter are the closest widely-available matches to the measured specimens; see assets/wnd-wordmark-serif-v2.png and wnd-wordmark-sans-eventdetail.png. --------------------------------------------------------------------- */ --wnd-font-display: "Source Serif 4", "Spectral", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif; --wnd-font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --wnd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* [INFERRED] utility only */ /* Type scale. Measured anchors are marked; intermediate steps are a regularized ~1.22 modular scale fitted to those anchors. */ --wnd-text-display: 64px; /* [MEASURED] magnitude readout ~68px */ --wnd-text-6xl: 48px; --wnd-text-5xl: 40px; --wnd-text-4xl: 32px; --wnd-text-3xl: 26px; --wnd-text-2xl: 22px; --wnd-text-xl: 18px; /* [MEASURED] event title */ --wnd-text-lg: 17px; --wnd-text-md: 15px; /* body */ --wnd-text-sm: 13px; /* metadata */ --wnd-text-xs: 11px; /* [MEASURED] eyebrow label, all-caps */ --wnd-leading-tight: 1.08; /* display / magnitude */ --wnd-leading-heading: 1.22; --wnd-leading-body: 1.55; --wnd-leading-dense: 1.35; /* data rows */ --wnd-tracking-display: -0.022em; /* large sans numerals */ --wnd-tracking-heading: -0.012em; --wnd-tracking-body: 0; --wnd-tracking-label: 0.085em; /* [MEASURED] all-caps eyebrows */ --wnd-weight-regular: 400; --wnd-weight-medium: 500; --wnd-weight-semibold: 600; --wnd-weight-bold: 700; /* --------------------------------------------------------------------- 8. SPACE / RADIUS / ELEVATION 8px baseline grid with a 4px sub-step. Radius 8px measured from the event-detail navigation cards. --------------------------------------------------------------------- */ --wnd-space-1: 4px; --wnd-space-2: 8px; --wnd-space-3: 12px; --wnd-space-4: 16px; --wnd-space-5: 20px; --wnd-space-6: 24px; --wnd-space-8: 32px; --wnd-space-10: 40px; --wnd-space-12: 48px; --wnd-space-16: 64px; --wnd-space-20: 80px; --wnd-radius-sm: 4px; --wnd-radius-md: 8px; /* [MEASURED] default container */ --wnd-radius-lg: 12px; --wnd-radius-pill: 999px; --wnd-border-width: 1px; /* Elevation is deliberately near-invisible: the mockups separate surfaces with a hairline first and light second. */ --wnd-shadow-sm: 0 1px 2px rgba(15, 27, 42, 0.05); --wnd-shadow-md: 0 2px 8px rgba(15, 27, 42, 0.06); --wnd-shadow-lg: 0 8px 28px rgba(15, 27, 42, 0.08); --wnd-shadow-none: none; /* --------------------------------------------------------------------- 9. MOTION [INFERRED] Not measurable from still images. Values chosen to match the stated character (calm, serious, restrained): short, ease-out, no bounce, no attention-seeking loops except the live-event pulse. --------------------------------------------------------------------- */ --wnd-duration-fast: 120ms; --wnd-duration-base: 180ms; --wnd-duration-slow: 240ms; --wnd-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --wnd-pulse-duration: 2600ms; /* live epicentre / active marker */ /* Focus */ --wnd-focus-ring: 0 0 0 2px var(--wnd-surface), 0 0 0 4px var(--wnd-accent); } /* ========================================================================== DARK THEME Same hue architecture (254deg neutrals). Hazard hues keep their identity but lift in lightness so each stays >=4.5:1 on the dark surface. [INFERRED] — no dark mockup was supplied. ========================================================================== */ :root[data-theme="dark"], .wnd-dark { --wnd-neutral-0: #080f17; --wnd-neutral-50: #0c141d; --wnd-neutral-100: #101821; --wnd-neutral-200: #252f3b; --wnd-neutral-300: #3d4957; --wnd-neutral-400: #5b6877; --wnd-neutral-500: #74818f; --wnd-neutral-600: #8c9aab; --wnd-neutral-700: #b3becb; --wnd-neutral-800: #ced6df; --wnd-neutral-900: #e3e8ef; --wnd-neutral-950: #f2f5f8; --wnd-canvas: #080f17; --wnd-canvas-warm: #0d1319; --wnd-surface: #101821; --wnd-surface-sunken: #0c141d; --wnd-ink: #e3e8ef; --wnd-ink-secondary: #b3becb; --wnd-muted: #8c9aab; --wnd-placeholder: #74818f; --wnd-disabled: #5b6877; --wnd-border: #252f3b; --wnd-border-strong: #3d4957; --wnd-divider: #252f3b; --wnd-accent: #6ba3dd; --wnd-accent-quiet: #93b6dd; --wnd-accent-hover: #86b6e8; --wnd-accent-active: #a3c7f0; --wnd-accent-bg: #14243a; --wnd-accent-border: #2b4a6b; --wnd-accent-on: #071019; --wnd-seismic: #df6a58; --wnd-seismic-text: #df6a58; --wnd-seismic-bg: #2c1512; --wnd-seismic-border:#4d2820; --wnd-seismic-mark: #e8735c; --wnd-cyclone: #73a8e8; --wnd-cyclone-text: #73a8e8; --wnd-cyclone-bg: #12202f; --wnd-cyclone-border:#26405d; --wnd-wildfire: #f69558; --wnd-wildfire-text: #f69558; --wnd-wildfire-bg: #2c1a0e; --wnd-wildfire-border:#4d3018; --wnd-flood: #5fa9cc; --wnd-flood-text: #5fa9cc; --wnd-flood-bg: #0f2029; --wnd-flood-border: #1f3d4c; --wnd-volcanic: #ce8171; --wnd-volcanic-text: #ce8171; --wnd-volcanic-bg: #291613; --wnd-volcanic-border:#472823; --wnd-severe: #ae97d8; --wnd-severe-text: #ae97d8; --wnd-severe-bg: #1d1730; --wnd-severe-border: #342a4e; --wnd-active: #4eb496; --wnd-active-bg: #0d221c; --wnd-active-border: #1c3f35; --wnd-status-quiet: #8c9aab; --wnd-stabilizing: var(--wnd-status-quiet); --wnd-delta-rise: #e0806c; --wnd-delta-fall: #4eb496; --wnd-geo-land: #29384a; --wnd-geo-land-dense: #35485e; --wnd-geo-land-sparse: #1e2a38; --wnd-geo-graticule: #1a2532; --wnd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --wnd-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --wnd-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5); --wnd-focus-ring: 0 0 0 2px var(--wnd-surface), 0 0 0 4px var(--wnd-accent); } /* ========================================================================== BASE TYPOGRAPHY PRIMITIVES Minimal, opinionated defaults. Import this file and these classes work. ========================================================================== */ .wnd-root, body.wnd { background: var(--wnd-canvas); color: var(--wnd-ink); font-family: var(--wnd-font-ui); font-size: var(--wnd-text-md); line-height: var(--wnd-leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Editorial display — serif. Headlines, event titles, wordmark. */ .wnd-display, .wnd-h1, .wnd-h2, .wnd-h3 { font-family: var(--wnd-font-display); font-weight: var(--wnd-weight-regular); line-height: var(--wnd-leading-heading); letter-spacing: var(--wnd-tracking-heading); color: var(--wnd-ink); } .wnd-h1 { font-size: var(--wnd-text-4xl); } .wnd-h2 { font-size: var(--wnd-text-2xl); } .wnd-h3 { font-size: var(--wnd-text-xl); } /* Magnitude / primary datum — sans, large, tight. The single loudest element on an event page. Never set this in the serif. */ .wnd-magnitude { font-family: var(--wnd-font-ui); font-size: var(--wnd-text-display); font-weight: var(--wnd-weight-bold); line-height: var(--wnd-leading-tight); letter-spacing: var(--wnd-tracking-display); font-variant-numeric: tabular-nums; color: var(--wnd-ink); } /* Eyebrow / section label — all caps, tracked, quiet blue. */ .wnd-label { font-family: var(--wnd-font-ui); font-size: var(--wnd-text-xs); font-weight: var(--wnd-weight-semibold); letter-spacing: var(--wnd-tracking-label); text-transform: uppercase; color: var(--wnd-accent-quiet); } /* Metadata row — sans, muted, middot separated. */ .wnd-meta { font-family: var(--wnd-font-ui); font-size: var(--wnd-text-sm); color: var(--wnd-muted); line-height: var(--wnd-leading-dense); } /* Any number the reader may compare across rows. */ .wnd-numeric { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }