71 lines
2.9 KiB
Markdown
71 lines
2.9 KiB
Markdown
|
# 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):
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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.
|