/* ────────────────────────────────────────────────────────────────────── FHIN Observer — Design Tokens (LVMH-grade reference rebuild) Derived from: BRAND-SYSTEM.md (locked) + reference screenshot 2026-05-23 · huashu-design pass ────────────────────────────────────────────────────────────────────── */ :root { /* ─── Brand-locked palette (do not edit; see BRAND-SYSTEM.md §3) ────── */ --aimwell-teal: #00B3C6; --deep-ocean: #007589; --night: #0A0F17; --steel: #AEB6BF; --pure: #FFFFFF; /* ─── Observer-tier tokens (derived from reference screenshot) ─────── */ /* Background — multi-layer dark navy with a faint vertical lift */ --obs-bg: #060912; /* page floor */ --obs-bg-tilt: radial-gradient(ellipse 1200px 600px at 50% -20%, rgba(0, 179, 198, 0.04) 0%, transparent 60%), linear-gradient(180deg, #0A0F17 0%, #060912 100%); /* Card surfaces — three layers of "lift" */ --obs-card: rgba(14, 20, 32, 0.85); --obs-card-lift: rgba(20, 28, 42, 0.92); --obs-card-press: rgba(8, 12, 20, 0.95); /* Borders — almost invisible at rest; brand-tint on focus */ --obs-border: rgba(255, 255, 255, 0.06); --obs-border-soft: rgba(255, 255, 255, 0.04); --obs-border-brand: rgba(0, 179, 198, 0.18); /* Text hierarchy — 3 levels strict (per LVMH bar: no in-between greys) */ --obs-text-primary: rgba(255, 255, 255, 0.96); --obs-text-secondary: rgba(255, 255, 255, 0.62); --obs-text-muted: rgba(255, 255, 255, 0.40); --obs-text-dim: rgba(255, 255, 255, 0.28); /* Accents */ --obs-accent: var(--aimwell-teal); --obs-accent-bright: #00D2EB; /* hover/glow */ --obs-accent-deep: #007589; /* shadow tint */ --obs-accent-glow: rgba(0, 179, 198, 0.42); --obs-accent-haze: rgba(0, 179, 198, 0.10); /* Activity indicator colors (HIGH/MEDIUM/LOW dots) */ --obs-high: #34D399; /* emerald — live activity */ --obs-medium: #A78BFA; /* soft violet — moderate */ --obs-low: #6B7280; /* steel grey — quiet */ /* Priority badges (signal feed cards) */ --obs-priority-high: #F87171; --obs-priority-medium: #FBBF24; --obs-priority-trending: var(--aimwell-teal); /* Score ring (Your Observer Profile) */ --obs-score-ring-bg: rgba(0, 179, 198, 0.10); --obs-score-ring-fill: var(--aimwell-teal); /* Map (Carbon Design-style dot grid) */ --obs-map-dot-inactive: rgba(120, 145, 175, 0.16); --obs-map-dot-low: rgba(174, 182, 191, 0.45); --obs-map-dot-active: var(--aimwell-teal); --obs-map-dot-glow: rgba(0, 179, 198, 0.55); /* ─── Spacing rhythm ─────────────────────────────────────────────── */ --obs-space-1: 4px; --obs-space-2: 8px; --obs-space-3: 12px; --obs-space-4: 16px; --obs-space-5: 22px; /* card padding standard */ --obs-space-6: 32px; /* section vertical gap */ --obs-space-7: 48px; /* hero block gap */ --obs-space-8: 64px; /* page top breathing room */ --obs-sidebar-w: 240px; --obs-right-w: 320px; --obs-main-max: 960px; --obs-card-radius: 12px; --obs-card-radius-soft: 8px; --obs-pill-radius: 999px; /* ─── Typography ─────────────────────────────────────────────────── */ /* Per BRAND-SYSTEM.md: Söhne is canonical, current stack is DM Serif Display + Inter + JetBrains Mono. Documented gap — keep current stack until Söhne migration is scheduled (see §4 Recommendation). */ --obs-font-serif: var(--aw-sans); --obs-font-sans: var(--aw-sans); --obs-font-mono: var(--aw-mono); /* Type scale (matches reference screenshot proportions) */ --obs-type-hero: 34px; /* "FHIN Observer Dashboard" */ --obs-type-hero-lh: 1.15; --obs-type-h2: 18px; /* card titles "LIVE NETWORK ACTIVITY" */ --obs-type-h2-lh: 1.4; --obs-type-stat: 42px; /* "247" / "89" — serif numerals */ --obs-type-stat-lh: 1.0; --obs-type-body: 14px; /* default UI text */ --obs-type-body-lh: 1.55; --obs-type-small: 12.5px; /* meta rows */ --obs-type-micro: 11px; /* JetBrains Mono eyebrows */ --obs-type-micro-lh: 1.3; /* Letter-spacing */ --obs-track-eyebrow: 0.14em; /* small-caps eyebrows */ --obs-track-hero: -0.018em; /* tight serif display */ --obs-track-stat: -0.015em; /* ─── Motion ──────────────────────────────────────────────────────── */ --obs-ease: cubic-bezier(0.4, 0, 0.2, 1); --obs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo out — high-end feel */ --obs-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --obs-dur-fast: 180ms; --obs-dur-base: 320ms; --obs-dur-slow: 640ms; --obs-dur-pulse: 2400ms; /* ─── Shadows / depth ─────────────────────────────────────────────── */ --obs-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 24px rgba(0, 0, 0, 0.35); --obs-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset; --obs-shadow-active: 0 0 0 1px var(--obs-border-brand), 0 12px 40px rgba(0, 179, 198, 0.18); } /* ────────────────────────────────────────────────────────────────────── DESIGN NOTES (read before implementing — not just decoration) ────────────────────────────────────────────────────────────────────── 1. PHILOSOPHY (anti-slop) The reference is *institutional*, not cyberpunk. Don't reach for: - Neon glows everywhere (only the live-pulse dots) - Purple gradients (use --obs-medium for the lone violet element) - Emoji as iconography (text-only or single-color SVG icons) - Heavy borders or accent strips on every card Reach instead for: - Whitespace as the primary structural device - One temperature shift per card (top edge highlight + base shadow) - Brand-teal earned by one or two elements per screen, not blanket 2. CARDS Default: var(--obs-card) background, var(--obs-border) 1px solid, var(--obs-card-radius) corners, var(--obs-shadow-card) depth. No left-accent-strip pattern. No emoji icons on titles. Use --obs-card-lift only when a card should feel "promoted" (e.g. the Observer Profile score card). Use --obs-card-press for the Upgrade CTA at the bottom of the sidebar. 3. MAP — dot grid (Carbon/IBM style) Generate a programmatic dot grid (canvas or SVG) at roughly: - 90 cols × 50 rows - 3px dot - 7px center spacing - Inactive: var(--obs-map-dot-inactive) - Continents emerge by leaving non-land dots invisible - Active hotspots: drawn at top of dot, pulse ring animation - Connections: thin 1px lines at 25% alpha between hotspots Country centroid coordinates need an embedded table — keep it to ~30 countries (G20 + biotech hubs). Don't reach for d3-geo on Observer tier; that's Researcher-tier complexity. 4. STAT TILES Serif numerals (DM Serif Display) in --obs-type-stat. Eyebrow label above in mono uppercase. Single sparkline-arrow glyph (↑/↓) absolutely positioned to baseline-align with the numeral. No bar charts inside stat tiles — they're for the Top Research Areas card only. 5. TYPOGRAPHY HIERARCHY Strict 5 levels. If a string of text doesn't fit one of: hero / h2 / stat / body / micro, restructure the copy, don't invent a 6th size. Eyebrows (e.g. "NETWORK PULSE") get the mono treatment with generous letter-spacing. Headlines stay serif. Body is Inter. Numerical values are always serif (DM Serif Display) — this is the brand's quietest signature. 6. INTERACTION Hover transitions: var(--obs-dur-fast) on background tint shifts, var(--obs-dur-base) on transform/opacity. Use var(--obs-ease-out) (expo) for any "appear" animation — gives the high-end feel. Never use linear/ease for entrances. 7. UPGRADE CTA (sidebar bottom card) One element on the page should feel like the destination. The "Upgrade for Full Access" button is that element: solid teal background, white text, slight bottom shadow with teal tint, hover lifts +1px. Don't compete with it elsewhere. ────────────────────────────────────────────────────────────────────── */