# Deviant — Palette & Typography Extracted from `Parameters/webfiles/deviant_website.html` (`:root` CSS variables). The landing page is the source of truth; if these values ever drift, the website wins. ## Themes Two live themes swap via `data-theme` on ``: - `data-theme="signal"` — default. Deep-space blue, cool. - `data-theme="editorial"` — near-monochrome. High-contrast, more graphic. ## `signal` (default) | Token | Hex / value | Role | |---|---|---| | `--sky-deep` | `#050810` | Page ground — the deepest black | | `--sky-mid` | `#0a0f1c` | Elevated surfaces (cards, hero) | | `--sky-rim` | `#131a2a` | Borders, dividers | | `--ink-soft` | `#b8c2d4` | Secondary text | | `--ink` | `#d6dde9` | Primary text | | `--ink-bright` | `#f1f4fa` | Headings, emphasis | | `--muted` | `#6a7488` | Captions, timestamps | | `--acid` | `#d6ff3d` | Load-bearing accent — CTAs, orbital dot, focus rings | | `--acid-glow` | `rgba(214,255,61,0.55)` | Halo behind the acid dot | | `--acid-halo` | `rgba(214,255,61,0.22)` | Softer diffusion | | `--acid-dim` | `rgba(214,255,61,0.08)` | Idle-state tint | | `--rust-deep` | `#6b2a1c` | Rare warning / archival accent | | `--star-faint` | `rgba(255,255,255,0.22)` | Starfield — background layer | | `--star-mid` | `rgba(255,255,255,0.38)` | Starfield — mid layer | | `--star-bright` | `rgba(255,255,255,0.58)` | Starfield — near-foreground | ## `editorial` | Token | Hex / value | Role | |---|---|---| | `--sky-deep` | `#050505` | Page ground | | `--sky-mid` | `#0a0a0a` | Elevated surfaces | | `--sky-rim` | `#161616` | Borders | | `--ink` | `#f2f2f2` | Primary text | | `--ink-bright` | `#ffffff` | Headings | | `--ink-soft` | `#d2d2d2` | Secondary text | | `--muted` | `#9a9a9a` | Captions | | `--acid` | `#c6ff00` | Accent — slightly cooler than signal's | | `--acid-glow` | `rgba(198,255,0,0.60)` | | | `--acid-halo` | `rgba(198,255,0,0.34)` | | | `--acid-dim` | `rgba(198,255,0,0.16)` | | ## Typography | Face | Where | Weights loaded | |---|---|---| | **Fraunces** | Display headlines, hero, wordmark | 300, 400, 500, 600 (opsz 9..144) | | **DM Sans** | Body, UI, buttons, nav | 400, 500, 600, 700, 800 | | **JetBrains Mono** | Code, hashes, addresses (technical surface) | 400, 500 | | **DM Mono** | Numeric readouts, receipts, tote-style data | 400, 500 | Load line (Google Fonts): ```html ``` ## Print / static asset defaults For assets shipped as SVG (icons, social cards, logos) that must render without CSS-var lookups: **hard-code the `signal` values above.** The `data-theme` mechanism is HTML/CSS-only; a raw SVG loaded into Slack or a Twitter feed does not carry the palette with it.