2.9 KiB
2.9 KiB
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 <html>:
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):
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
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.