/* ============================================================ PULSE — Melodia Market Intelligence colors_and_type.css — design tokens (color, type, space, shape) ------------------------------------------------------------ Pulse is the internal price- & market-intelligence dashboard for Melodia Musik. Aesthetic: pro-audio instrument panel — warm "VU-meter" amber on cool charcoal ink, dense data, tabular numerals. Light warm-paper workspace, dark control surfaces. Green = price advantage, red = price disadvantage. ============================================================ */ /* ---- Webfonts (CDN). For production, self-host into /fonts. Display: Space Grotesk · UI/body: IBM Plex Sans · Data: IBM Plex Mono */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { color-scheme: light only; /* --------------------------------------------------------- 1. CORE PALETTE --------------------------------------------------------- */ /* Ink — cool charcoal neutral ramp (panels, text, borders) */ --ink-950: #131419; --ink-900: #1B1D26; --ink-800: #282B38; --ink-700: #383C4C; --ink-600: #535868; --ink-500: #757B8D; /* muted body text on light */ --ink-400: #9CA2B3; --ink-300: #C4C8D4; --ink-200: #E2E4EC; --ink-150: #EAECF2; --ink-100: #F0F1F5; --ink-50: #F7F8FA; /* Paper — warm off-white workspace */ --paper: #FAF8F4; --paper-2: #F3F0EA; --white: #FFFFFF; /* Brand — Amber (VU meter / brass / wood finish) */ --amber-700: #9C5E10; --amber-600: #C27A18; --amber-500: #E0A33E; /* PRIMARY brand accent */ --amber-400: #EDBE6C; --amber-300: #F6D69B; --amber-100: #FBEED6; --amber-50: #FDF7EC; /* Gain — price advantage / cheaper / up-good (green) */ --gain-700: #0E6646; --gain-600: #14835A; --gain-500: #1BA571; --gain-300: #8AD9B8; --gain-100: #E2F5EC; /* Loss — price disadvantage / more expensive (red) */ --loss-700: #9E2B2B; --loss-600: #C23838; --loss-500: #E04B4B; --loss-300: #F2A9A9; --loss-100: #FBE7E7; /* Info — neutral data / teal (deliberately not SaaS blue) */ --info-700: #0A5C64; --info-600: #0E7C86; --info-500: #199BA6; --info-300: #8FD3D9; --info-100: #E0F2F3; /* --------------------------------------------------------- 2. SEMANTIC TOKENS (use THESE in product code) --------------------------------------------------------- */ --bg: var(--paper); /* app workspace */ --surface: var(--white); /* cards / tables */ --surface-2: var(--ink-50); /* sunken / striped rows */ --surface-inset: var(--paper-2); /* wells, inputs on light */ --panel: var(--ink-900); /* dark control rail / topbar */ --panel-2: var(--ink-800); --on-panel: #EDEEF3; --on-panel-muted:var(--ink-400); --fg: var(--ink-900); /* primary text */ --fg-muted: var(--ink-500); /* secondary text */ --fg-subtle: var(--ink-400); /* captions, placeholders */ --fg-inverse: #FFFFFF; --border: var(--ink-200); --border-strong: var(--ink-300); --divider: var(--ink-150); --accent: var(--amber-500); --accent-hover: var(--amber-600); --accent-press: var(--amber-700); --accent-tint: var(--amber-100); --accent-fg: var(--ink-950); /* text ON amber (dark for contrast) */ --pos: var(--gain-600); /* positive / advantage */ --pos-tint: var(--gain-100); --neg: var(--loss-600); /* negative / disadvantage */ --neg-tint: var(--loss-100); --neu: var(--info-600); /* neutral info */ --neu-tint: var(--info-100); --focus-ring: color-mix(in oklch, var(--amber-500) 55%, transparent); /* --------------------------------------------------------- 3. TYPOGRAPHY --------------------------------------------------------- */ --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (px). Data UI density — body 15px. */ --fs-display: 40px; --lh-display: 1.05; --tr-display: -0.02em; --fs-h1: 30px; --lh-h1: 1.12; --tr-h1: -0.018em; --fs-h2: 24px; --lh-h2: 1.18; --tr-h2: -0.014em; --fs-h3: 19px; --lh-h3: 1.25; --tr-h3: -0.01em; --fs-h4: 16px; --lh-h4: 1.3; --tr-h4: -0.006em; --fs-body: 15px; --lh-body: 1.55; --tr-body: 0; --fs-sm: 13.5px; --lh-sm: 1.5; --fs-caption: 12px; --lh-caption: 1.4; --fs-micro: 11px; --lh-micro: 1.3; --tr-micro: 0.07em; /* UPPERCASE labels */ /* --------------------------------------------------------- 4. SPACING (4px base) --------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* --------------------------------------------------------- 5. RADII --------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 9px; --r-lg: 13px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px; /* --------------------------------------------------------- 6. ELEVATION (soft, cool-tinted — sits on warm paper) --------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(19,20,25,0.06); --shadow-sm: 0 1px 2px rgba(19,20,25,0.06), 0 2px 6px rgba(19,20,25,0.05); --shadow-md: 0 2px 4px rgba(19,20,25,0.06), 0 8px 20px rgba(19,20,25,0.08); --shadow-lg: 0 8px 16px rgba(19,20,25,0.08), 0 24px 48px rgba(19,20,25,0.12); --shadow-pop: 0 12px 28px rgba(19,20,25,0.18), 0 2px 6px rgba(19,20,25,0.10); --shadow-inset: inset 0 1px 2px rgba(19,20,25,0.07); /* amber glow for active/live signal (VU meter) */ --glow-accent: 0 0 0 3px var(--focus-ring); /* --------------------------------------------------------- 7. MOTION --------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; } /* ============================================================ SEMANTIC ELEMENT STYLES — apply with utility classes. These mirror how Pulse uses the tokens in product UI. ============================================================ */ .ds-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--fg); } .ds-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--fg); } .ds-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--fg); } .ds-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--fg); } .ds-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); color: var(--fg); } .ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); } .ds-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-muted); } .ds-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-subtle); } .ds-label { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-micro); line-height: var(--lh-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--fg-muted); } /* Data / price — always tabular mono */ .ds-data { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--fg); } .ds-price { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); } .ds-pos { color: var(--pos); } .ds-neg { color: var(--neg); } .ds-neu { color: var(--neu); }