/* ============================================================ HYPE Terminal · Obsidian Design Tokens Drop this file into your project and import it from index.html or your main stylesheet. Replace existing color/font vars. ============================================================ */ /* Fonts — load from Google Fonts in index.html : */ :root { /* ---------- SURFACES ---------- */ --bg-base: #061515; /* page background — hl.eco dark cyan-teal (matched to hl.eco #061515) */ --bg-elevated: #0c1a1a; /* cards, panels, chart containers — gentle cyan lift over base (≈ hl.eco's 2.4% white card) */ --bg-sunken: #051313; /* inputs, pill-group backgrounds — recessed cyan */ --bg-hover: #163232; /* row hover, button hover — lifted cyan */ --bg-hover-soft: #0f2120; /* PANEL/card hover — barely-there cyan-mint lift (hl.eco-style subtle hover, NOT the big --bg-hover jump) */ --bg-inset: #0a1c1c; /* recessed surface — sidebar column + search/input bg */ --overlay-scrim: rgba(6,21,21,0.85); /* chart loading/empty scrim over a panel (matches --bg-base canvas) */ --overlay-scrim-strong: rgba(6,21,21,0.92); /* error-state scrim (slightly denser) */ /* ---------- BORDERS ---------- */ --border-default: #16241f; /* all card borders, dividers, grid lines — teal-tinted (v2) */ --border-strong: #26403a; /* hover/focus borders, tooltip & inset hairlines */ --border-row: #101c19; /* subtle table-row divider — darker than --border-default */ --border-accent: rgba(151, 252, 228, 0.22); /* accent-tinted borders (live pills, active states) */ /* ---------- TEXT ---------- */ --text-primary: #e7eef1; /* headlines, primary values */ --text-secondary: #8b989f; /* labels, section descriptions */ --text-tertiary: #70808a; /* axis labels, hints, footer text — lightened from #525d63 (3.1:1, failed WCAG AA) to ≥4.5:1 on --bg-base */ --text-disabled: #4a4f57; --text-nav: #c2cdcf; /* crisper header/sidebar nav labels — brighter than --text-secondary so the chrome doesn't read pale (v2 flat chrome) */ /* ---------- ACCENT (UI brand color — Hyperliquid mint) ---------- */ --accent: #97fce4; /* PRIMARY accent — active states, live, brand */ --accent-dim: #7acdb8; /* hover on accent buttons (mint darkened ~20%) */ /* Soft DATA mint (two-tier, hl.eco --brand-mint #50d2c1): the default mint for chart data, headline values, and up/positive — calmer than the brand. The bright --accent above stays RESERVED for interactive/brand/highlight only (active tabs, nav, live dots, focus, ranking highlight). 2026-07-01. */ --mint-soft: #50d2c1; --mint-soft-tint-20: rgba(80,210,193,0.20); /* single-series chart area-fill top */ --accent-glow: rgba(151, 252, 228, 0.5); /* for box-shadow glow on live dots */ --accent-tint-02: rgba(151, 252, 228, 0.025); /* card-top sheen (v2) */ --border-card: rgba(255, 255, 255, 0.08); /* card/panel outline — subtle white at 8%, matched to hl.eco's faint card edge (v2) */ --border-kpi: rgba(255, 255, 255, 0.15); /* KPI box outline — clearly visible neutral (v2) */ --border-hover: rgba(80,210,193,0.14); /* PANEL/card hover edge — faint soft-mint, exactly hl.eco's .card:hover border (2026-07-01) */ /* LIQUID-GLASS CHROME tokens removed (v2 flat-chrome redesign, 2026-06-30): the header / tab / sidebar frosting was dropped for solid surfaces that match the panels — back in line with the no-glass / no-shadow rule. */ --dot-grid: rgba(151, 252, 228, 0.06); /* faint page-background grid lines (#hx-bg-grid) */ --accent-tint-08: rgba(151, 252, 228, 0.08); /* subtle bg tint — active sidebar item */ --accent-tint-12: rgba(151, 252, 228, 0.12); /* badge bg */ --accent-tint-20: rgba(151, 252, 228, 0.20); /* badge border */ --accent-tint-40: rgba(151, 252, 228, 0.40); /* active-control border (timeframe/metric chips) */ --accent-tint-55: rgba(151, 252, 228, 0.55); /* HIP-4 chart crosshair line */ /* ---------- SEMANTIC (positive / negative only — no rainbow) ---------- */ --positive: var(--mint-soft); /* soft data mint (two-tier, hl.eco #50d2c1) — up/signed-positive. Bright brand mint stays = --accent (2026-07-01, was #97fce4) */ --negative: #ef6767; /* funding negative, loss %, sell side */ --neutral: #9ca3af; /* "neutral" signal pill, tied values */ --warn: #fbbf24; /* caution/partial status pills (e.g. PARTIAL KPI tag) — NOT a chart series color */ --warn-tint-10: rgba(251,191,36,0.10); /* warn pill background */ --warn-tint-35: rgba(251,191,36,0.35); /* warn pill border */ --positive-tint-08: rgba(80,210,193,0.08); /* positive subtle bg (edge-hold) — soft mint */ --positive-tint-10: rgba(80,210,193,0.10); /* positive/verified pill bg (e.g. on-chain provenance badge) */ --positive-tint-12: rgba(80,210,193,0.12); /* positive bg (edge-buy) */ --positive-tint-30: rgba(80,210,193,0.30); /* positive border (signals, status pills) */ --positive-tint-40: rgba(80,210,193,0.40); /* muted signed bar (partial day) */ --positive-tint-45: rgba(80,210,193,0.45); /* up-volume histogram bars */ --negative-tint-08: rgba(239,103,103,0.08); /* negative subtle bg (state-error) */ --negative-tint-10: rgba(239,103,103,0.10); /* negative pill bg (stale, status-critical, sig-up) */ --negative-tint-12: rgba(239,103,103,0.12); /* negative bg (edge-sell) */ --negative-tint-18: rgba(239,103,103,0.18); /* negative bar fill (unstaked) */ --negative-tint-30: rgba(239,103,103,0.30); /* negative border (signals, status pills) */ --negative-tint-40: rgba(239,103,103,0.40); /* muted signed bar (partial day) */ --negative-tint-45: rgba(239,103,103,0.45); /* down-volume histogram bars */ --negative-tint-05: rgba(239,103,103,0.05); /* faint negative bg (unlock is-next row) */ --neutral-tint-10: rgba(156,163,175,0.10); /* neutral pill bg (freshness, status-unknown) — canonical --neutral */ /* Drag-select + navigator interaction overlays (supply-demand panel) */ --select-fill: rgba(139,92,246,0.20); /* selection rectangle fill (violet) */ --select-stroke: rgba(196,181,253,0.85); /* selection rectangle border */ --select-dim: rgba(3,7,18,0.48); /* navigator out-of-window mask */ --select-window: rgba(34,211,168,0.11); /* navigator in-window highlight (teal) */ /* ---------- PREDICTION-MARKET CATEGORY COLORS (HIP-4 table chips, hl.eco-style distinct hues) ---------- */ --cat-sports: #6ea8e8; /* blue */ --cat-crypto: #50d2c1; /* mint (soft data mint) */ --cat-politics: #b08cf0; /* violet */ --cat-economics: #f2cd6b; /* amber (macro / economics) */ --cat-culture: #ec85b0; /* pink (culture / pop) */ --cat-other: #7c8a90; /* neutral gray (fallback) */ /* ---------- TYPOGRAPHY ---------- */ --font-ui: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Terminal type (Perps redesign): IBM Plex Mono = data/body/numerics, Bebas Neue = wordmark / section eyebrows / display. */ --font-plex: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-display: 'Bebas Neue', var(--font-ui); /* Sizes — small numbers are intentional; this is a terminal */ --text-xxs: 9px; /* uppercase labels w/ letter-spacing */ --text-xs: 10px; /* footer, micro-hints */ --text-sm: 11px; /* axis labels, table cells */ --text-base: 12px; /* default body */ --text-md: 13px; /* section headers, table header emphasis */ --text-lg: 15px; /* page titles */ --text-xl: 16px; /* mini-KPI values (inside charts) */ --text-2xl: 22px; /* primary KPI values */ --text-3xl: 28px; /* hero stats (reserved for landing/empty states) */ /* Weights — 400 / 500 / 600 (600 = small-caps emphasis: table headers, role/freshness pills, LIVE badge; only on loaded faces — Plex Mono / Bebas) */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; /* Letter-spacing — used on uppercase labels */ --tracking-label: 0.08em; /* small caps labels: "PERP VOL · UTC DAY" */ --tracking-tight: -0.01em; /* large numbers */ /* ---------- SPACING (4px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* ---------- RADIUS ---------- */ --radius-sm: 3px; /* pills inside toggle groups */ --radius-md: 5px; /* toggle group containers, small buttons */ --radius-lg: 12px; /* cards, panels, KPI blocks (v2 — softer) */ --radius-xl: 12px; /* outermost app container */ --radius-pill: 999px; /* status dots, avatar fallback */ /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; /* hovers, button states */ --duration-med: 240ms; /* tab switches, panel fades */ --duration-slow: 400ms; /* chart redraws */ /* ---------- SHADOWS (used sparingly) ---------- */ --shadow-glow: 0 0 8px var(--accent-glow); /* on live dots only */ --shadow-focus: 0 0 0 2px var(--accent-tint-20); /* input focus rings */ --shadow-dropdown: 0 8px 28px rgba(0,0,0,0.5); /* dropdown / floating-card depth */ --shadow-modal: 0 24px 48px rgba(0,0,0,0.55); /* modal / overlay depth */ --backdrop: rgba(7,8,10,0.72); /* modal scrim = --bg-sunken @ 72% */ /* ============================================================ SEMANTIC ASSET PALETTE One permanent color per asset, tied to what the asset is. Consumed via assetColor() in js/charts.js. Synonym resolution (XAU→gold, UBTC→btc, USA500→sp500, …) lives in ASSET_VAR_MAP in js/charts.js, not here. ============================================================ */ /* ---------- COMMODITIES (material appearance) ---------- */ --asset-aluminium: #a8b1b7; /* light industrial gray */ --asset-brent: #8b4513; /* lighter oil amber */ --asset-copper: #b87333; /* oxidized copper */ --asset-corn: #f2c84b; /* corn yellow */ --asset-gold: #e8c547; /* warm lustrous yellow */ --asset-natgas: #4a90a4; /* flame-blue (gas burning) */ --asset-palladium: #ced0dd; /* pale silver-platinum */ --asset-platinum: #e5e4e2; /* bright white-silver */ --asset-silver: #c0c5cc; /* cool metallic steel */ --asset-wheat: #e8b75a; /* warm amber-gold (grain) */ --asset-wti: #8b5a2b; /* medium-dark crude oil amber — readable on dark surfaces */ /* ---------- EQUITIES & INDICES (brand where available) ---------- */ --asset-aapl: #a2aaad; /* Apple silver-gray */ --asset-amd: #ed1c24; /* AMD red */ --asset-amzn: #ff9900; /* Amazon orange */ --asset-baba: #ff6a00; /* Alibaba orange */ --asset-coin: #0052ff; /* Coinbase blue */ --asset-crcl: #10a5b5; /* Circle teal */ --asset-googl: #4285f4; /* Google blue */ --asset-hood: #00c805; /* Robinhood green */ --asset-meta: #0866ff; /* Meta blue */ --asset-mstr: #ff9900; /* Strategy orange */ --asset-msft: #00a4ef; /* Microsoft blue */ --asset-nflx: #e50914; /* Netflix red */ --asset-nvda: #76b900; /* Nvidia green */ --asset-orcl: #c74634; /* Oracle red */ --asset-pltr: #000000; /* Palantir black (dark — needs border) */ --asset-sp500: #d9d9d9; /* broad-market neutral */ --asset-tencent: #0052d9; /* Tencent blue */ --asset-tsla: #cc0000; /* Tesla red */ --asset-xyz100: #d9d9d9; /* index fallback */ /* ---------- CRYPTO (community brand colors) ---------- */ --asset-aave: #b6509e; /* Aave pink-purple */ --asset-ada: #0033ad; /* Cardano blue */ --asset-apt: #ff7a45; /* Aptos — assigned (no canonical brand color) */ --asset-avax: #e84142; /* Avalanche red */ --asset-bch: #8dc351; /* Bitcoin Cash green */ --asset-bnb: #f0b90b; /* Binance yellow */ --asset-btc: #f7931a; /* Bitcoin orange */ --asset-doge: #c2a633; /* Dogecoin tan */ --asset-eth: #627eea; /* Ethereum blue */ --asset-hype: #97fce4; /* same as --accent, by design */ --asset-link: #375bd2; /* Chainlink blue */ --asset-ltc: #345d9d; /* Litecoin blue-gray */ --asset-near: #00ec97; /* NEAR green */ --asset-purr: #f25fb0; /* Hyperliquid PURR — magenta-pink (assigned; no canonical brand) */ --asset-sol: #9945ff; /* Solana purple */ --asset-sui: #4da2ff; /* Sui blue */ --asset-tao: #ff6b00; /* Bittensor orange */ --asset-ton: #0098ea; /* TON blue */ --asset-trx: #ef0027; /* Tron red */ --asset-usdc: #2775ca; /* Circle blue */ --asset-usdt: #26a17b; /* Tether teal */ --asset-xmr: #ff6600; /* Monero orange */ --asset-xrp: #23292f; /* Ripple dark (dark — needs border) */ --asset-zec: #f4b728; /* Zcash gold */ --asset-zro: #000000; /* LayerZero black (dark — needs border) */ /* ---------- VENUES (third-party exchanges · DEXs · prediction markets) ---------- */ /* Brand hues tone-/hue-shifted onto the dark canvas so none reads as a positive/negative/warn signal or collides with --accent. Consumed via venueColor() in js/charts.js. Spec: "HYPE Terminal · Venue Colors" board. HL first (own venue = --accent mint, reserved); rest alphabetical. */ --venue-hyperliquid: #97fce4; /* = --accent; own venue, reserved (no competitor uses mint) */ --venue-aster: #6c93c4; /* no brand hue → steel blue */ --venue-binance: #d9b84a; /* brand gold ≈ --warn → muted olive-gold */ --venue-bybit: #ff8c42; /* brand orange ≈ --warn → true orange */ --venue-dydx: #7d7af0; /* indigo, bluer than --role-hip3 */ --venue-kalshi: #22c55e; /* brand green, off cyan-teal to clear --accent/HIP-4 mint */ --venue-lighter: #cf8fb0; /* brand red ≈ --negative → dusty rose */ --venue-okx: #c8ced4; /* mono brand → cool silver */ --venue-polymarket: #5b9dff; /* lifted brand blue */ --venue-uniswap: #e857c4; /* brand pink collides --role-spot → magenta series */ /* ---------- HL ECOSYSTEM ROLES (product categories, not assets) ---------- */ /* Ordered by ecosystem hierarchy, not alphabetically — these are consumed as an ordered array by ecosystemRoleColors(count). */ --role-perp: #6ee7ff; /* Perp (cyan) */ --role-hip3: #c084fc; /* HIP-3 (violet) */ --role-hip3-tint-15: rgba(192,132,252,0.15); /* HIP-3 violet fill (purr HYPE value area) */ /* HIP-3 deployer palette (deployerColor) — muted, evenly-spaced jewel tones tuned to hl.eco's multi-series look (cohesive on the dark teal bg, not vivid/clashing). The dominant deployer (trade.xyz/XYZ = --deployer-1) leads in mint-teal, on-brand like hl.eco. Retuned 2026-06-30 (was a vivid blue-heavy set; 4 of 7 read as cool-blue). */ --deployer-1: #55c6a4; /* soft mint-teal (dominant · trade.xyz) — calmer than a neon cyan as a solid fill */ --deployer-2: #ef9b5c; /* muted orange */ --deployer-3: #b08cf0; /* soft purple */ --deployer-4: #f2cd6b; /* soft gold */ --deployer-5: #ec85b0; /* soft pink */ --deployer-6: #6ea8e8; /* muted blue */ --deployer-7: #6dd58c; /* soft green */ --role-spot: #f472b6; /* Spot (pink) */ --role-dex: #fbbf24; /* DEX (amber) */ --role-hip4: #10b981; /* HIP-4 prediction markets (emerald) — distinct from amber Total Vol line on PMA chart */ --role-neutral: #9ca3af; /* Other / unmapped role */ /* ---------- EXTENDED SERIES HUES ---------- When a many-series chart (HIP-3 deployers, asset categories) has more entities than the 4 role hues + mint can distinctly cover, give each tail entity a hue from this cool/jewel extension so it never collapses to one shared gray. Same near-black-canvas family as the role hues; --accent (mint) stays reserved for the "total"/primary series. */ --series-emerald: #34d399; /* bright emerald */ --series-blue: #5b9dff; /* cornflower blue (sits between cyan & violet) */ --series-blue-tint-08: rgba(91,157,255,0.08); /* navigator price area fill */ --series-teal: #2dd4bf; /* teal (cool blue-green) */ /* ---------- FALLBACK ---------- */ --asset-fallback: #a9a9a9; /* unmapped symbols — neutral gray */ } /* ============================================================ BASE RESET — apply to body / #app root ============================================================ */ html, body { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-plex); /* v2 terminal base — Plex Mono (matches main.css html,body) */ font-size: var(--text-base); font-weight: var(--weight-normal); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; /* Inter character variants — inert on Plex; harmless for any residual --font-ui section */ } /* Tabular numbers everywhere mono is used */ .mono, [class*="mono"], code, pre { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'zero' 1; /* tabular nums, slashed zero */ font-variant-numeric: tabular-nums; } /* ============================================================ COMPONENT RULES — copy these patterns, don't invent new ones ============================================================ */ /* --- Card / Panel --- */ .card { background: linear-gradient(180deg, var(--accent-tint-02), transparent 60%), var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); transition: border-color var(--duration-fast) var(--ease-out); } .card:hover { border-color: var(--border-strong); } /* --- Uppercase label (KPI subtitle, table header, etc.) --- */ .label { font-size: var(--text-xxs); color: var(--text-tertiary); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-normal); } /* --- KPI value --- */ .kpi-value { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-primary); } /* --- Live indicator dot (pulsing) --- */ .live-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent); box-shadow: var(--shadow-glow); animation: live-pulse 2s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* --- Badge (LIVE, BUILD VERIFIED, etc.) --- */ .badge-accent { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--accent-tint-08); border: 1px solid var(--accent-tint-20); border-radius: var(--radius-sm); color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* --- Toggle group (7D / 30D / 90D / All) --- */ .toggle-group { display: inline-flex; gap: 2px; background: var(--bg-sunken); padding: 2px; border-radius: var(--radius-md); border: 1px solid var(--border-default); } .toggle-group button { padding: 4px 10px; background: transparent; border: 0; color: var(--text-tertiary); font-size: var(--text-sm); font-family: inherit; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .toggle-group button:hover { color: var(--text-secondary); } .toggle-group button.active { background: var(--accent); color: var(--bg-base); font-weight: var(--weight-medium); } /* Secondary toggle (no accent fill — just bg) */ .toggle-group button.active-muted { background: var(--border-default); color: var(--text-primary); } /* --- Tab bar (Perps / HIP-3 / HYPE / ...) --- */ .tabs { display: flex; border-bottom: 1px solid var(--border-default); padding: 0 var(--space-5); gap: var(--space-1); } .tabs a { padding: var(--space-3) var(--space-4); color: var(--text-secondary); text-decoration: none; font-size: var(--text-base); border-bottom: 2px solid transparent; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .tabs a:hover { color: var(--text-primary); } .tabs a.active { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: var(--weight-medium); } /* --- Sidebar nav item --- */ .nav-item { padding: var(--space-2) var(--space-3); color: var(--text-secondary); font-size: var(--text-base); cursor: pointer; border-left: 2px solid transparent; transition: all var(--duration-fast) var(--ease-out); } .nav-item:hover { color: var(--text-primary); background: var(--bg-hover); } .nav-item.active { color: var(--accent); background: var(--accent-tint-08); border-left-color: var(--accent); font-weight: var(--weight-medium); } /* --- Data table --- */ /* Table component CSS lives in css/main.css (.data-table) — the single authority. Removed the competing block here (it out-specified the base via thead/tbody and forced an Inter/gray fallback); the tokens file stays tokens-only. */ /* Positive / negative deltas */ .pos { color: var(--positive); } .neg { color: var(--negative); } /* --- Focus ring (accessibility) --- */ button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* ============================================================ CHART.JS CONFIG NOTES — apply these in your chart init code: Chart.defaults.font.family = "'JetBrains Mono', monospace"; Chart.defaults.font.size = 10; Chart.defaults.color = '#525d63'; // --text-tertiary Chart.defaults.borderColor = '#191f23'; // --border-default Chart.defaults.scale.grid.color = '#191f23'; Chart.defaults.scale.ticks.color = '#525d63'; Volume bars / OI line / trade count: backgroundColor: '#97fce4' Funding positive: backgroundColor: '#4ade80' Funding negative: backgroundColor: '#ef6767' Turn OFF: legends (build custom HTML above chart instead), chart titles (use the card header), gradient fills (flat only). ============================================================ */