/* * Xterium Rust — design tokens (v1, dark-only) * * Source of truth: * - Brandbook: docs/reference/brand/design1.png + design2.png (owner-approved, 2026-06-29) * - Plan: docs/plans/refocus-2026-07-02.md §3.1 (Лейн 3 · Сайт) * - Rank colors mirrored EXACTLY from carbon/plugins/EloArena.cs:484-495 (GetRankColor) — * this is the same palette already unified across in-game UI + discord_bot embeds. * * Tone: cold space premium. NOT rust/industrial, NOT warm, NOT grunge. * Every value below that does NOT appear literally in the brandbook is marked * "PROPOSED — not in brandbook, owner to approve" — treat those as a draft, * not a decision. (Do not quote comment markers inside this doc block: CSS * comments do not nest, and a literal close-sequence here kills the whole :root.) */ :root { /* ============================================================ * CORE PALETTE — brandbook-exact (design1.png / design2.png) * ============================================================ */ --color-deep-space: #0A0E17; /* bg — darkest, base canvas */ --color-void-blue: #111827; /* surface — card/panel background */ --color-stellar-blue: #1A2A4D; /* border/structure — 1px card borders, dividers */ --color-energy-blue: #2563EB; /* THE single hero accent — CTAs, links, active state. Do not add a 2nd accent hue. */ --color-light-core: #7DD3FC; /* highlight / glow terminus, gradient endpoint */ --color-cosmic-white: #E6F0FF; /* primary text */ /* ============================================================ * BRAND GRADIENTS — brandbook-exact (design2.png "GRADIENTS") * ============================================================ */ --gradient-deep-energy: linear-gradient(135deg, var(--color-deep-space) 0%, var(--color-energy-blue) 100%); --gradient-energy-light: linear-gradient(135deg, var(--color-energy-blue) 0%, var(--color-light-core) 100%); --gradient-stellar-light: linear-gradient(135deg, var(--color-stellar-blue) 0%, var(--color-light-core) 100%); /* Already in production: ForgeBranding.cs:59-62 uses #2563EB -> #7DD3FC (= --gradient-energy-light). Keep in sync. */ /* ============================================================ * BALANCE RULE — brandbook-exact (design2.png "BALANCE" bar) * ------------------------------------------------------------ * 60% Deep Space / Void Blue — bg + large neutral surfaces (page canvas, panel fills) * 25% Stellar Blue — structure: borders, dividers, inactive/secondary chrome * 10% Energy Blue — accent-structure: active states, links, icon accents, focus * 5% Light Core (+ glow) — hero moment ONLY: CTA glow, hero beam, headline highlight. * Do not spend this share on routine UI chrome. * Enforce this ratio when composing any new screen: if a page reads "bright" or * "glowy" everywhere, the 5% share has leaked into the 60/25/10 budget. * ============================================================ */ /* ============================================================ * SEMANTIC ALIASES * ============================================================ */ --bg: var(--color-deep-space); --surface: var(--color-void-blue); --surface-raised: #17213A; /* PROPOSED — not in brandbook, owner to approve. Between Void Blue and Stellar Blue; for stacked/hovered panels. */ --border: var(--color-stellar-blue); --text: var(--color-cosmic-white); --text-dim: #9FB0CE; /* PROPOSED — not in brandbook, owner to approve. Cosmic White dimmed toward Stellar Blue, for secondary/meta text. */ --accent: var(--color-energy-blue); --accent-hover: #3B82F6; /* PROPOSED — not in brandbook, owner to approve. Energy Blue lightened one step (Tailwind blue-500 family) for hover state. */ --accent-pressed: #1D4ED8; /* PROPOSED — not in brandbook, owner to approve. Energy Blue darkened one step (Tailwind blue-700 family) for active/pressed state. */ --focus-ring: rgba(37, 99, 235, 0.55); /* PROPOSED — not in brandbook, owner to approve. Energy Blue at reduced opacity, for :focus-visible outlines. */ /* ============================================================ * STATUS COLORS — cool-toned, no warm orange/red clashes. * All PROPOSED — not in brandbook, owner to approve. * ============================================================ */ --status-success: #2DD4BF; /* PROPOSED — cool teal-green, reads as "good" without a warm-green clash against the blue palette */ --status-error: #E11D48; /* PROPOSED — cold crimson (rose family), deliberately NOT orange-red */ --status-warn: #A78BFA; /* PROPOSED — cool violet caution tone, avoids warm amber/orange; distinct hue from accent/success/error */ /* ============================================================ * RANK COLORS — copied EXACTLY from EloArena.cs:484-495 (GetRankColor). * Canonical, already unified across in-game UI + discord_bot (embeds.py / * setup_roles.py). Do NOT alter without updating all three surfaces. * These double as the dataviz categorical palette for rank-colored charts * (per the dataviz skill) — use them in ladder order, not re-sorted. * ============================================================ */ --rank-xterium-master: #F97316; --rank-legend: #F97316; /* same as Xterium Master in source — top band shares the color */ --rank-champion: #EF4444; --rank-diamond: #06B6D4; --rank-platinum: #8B5CF6; --rank-gold: #EAB308; --rank-silver: #9CA3AF; --rank-bronze: #D97706; --rank-iron: #8B7355; /* ============================================================ * TYPOGRAPHY * ============================================================ */ --font-display: 'Orbitron', sans-serif; /* brandbook-exact (design1.png "TYPOGRAPHY") */ --font-body: 'Inter', sans-serif; /* PROPOSED — not in brandbook, owner to approve. Brandbook leaves body font unresolved; Inter is the recommended pairing (plan §3.1/§3.2). */ /* Max 2 families total — do not introduce a third. */ --type-display-xl: 72px; /* PROPOSED — hero headline */ --type-display-lg: 48px; /* PROPOSED — section headline */ --type-heading: 28px; /* PROPOSED — card/section title */ --type-body: 16px; /* PROPOSED — running text */ --type-caption: 13px; /* PROPOSED — meta/labels/timestamps */ /* ============================================================ * SPACING SCALE — 4px base. PROPOSED — not in brandbook, owner to approve. * ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ============================================================ * RADIUS SCALE — deliberately small/sharp (aesthetic = technical, not bubbly). * PROPOSED — not in brandbook, owner to approve. * ============================================================ */ --radius-sm: 2px; /* inputs, badges */ --radius-md: 4px; /* buttons, tiles */ --radius-lg: 6px; /* cards, panels — do not go rounder than this */ /* ============================================================ * MOTION — strong custom curves (built-in ease/ease-out are too weak and read * as template defaults). --ease-out for entrances/press/hover transforms; * --ease-fill is the codebase's pre-existing meter curve, tokenized unchanged. * Added 2026-07-08 (design-liveliness pass). * ============================================================ */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-fill: cubic-bezier(0.22, 0.7, 0.3, 1); /* ============================================================ * GLOW / SHADOW — glow is reserved for the 5% hero/CTA share only. * PROPOSED — not in brandbook, owner to approve. * ============================================================ */ --glow-hero: 0 0 64px 8px rgba(125, 211, 252, 0.35); /* Light Core glow — hero beam / primary CTA ONLY */ --glow-accent: 0 0 24px 2px rgba(37, 99, 235, 0.45); /* Energy Blue glow — small CTA/active-icon accent, sparing use */ --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4); /* subtle card lift off --bg, no color tint */ }