feat(frontend): redesign token aliases + brand decision

packages/frontend/branding/BRANDING_GUIDE.md

@@ -21,35 +21,40 @@
 
 ## Color System
 
-**Single accent**: Discord Blurple `#5865f2` and its strong variant `#4752c4`.
+**Dual accent** (resolved 2026-04-21, see `docs/decisions/2026-04-21-redesign-port-target.md`):
+- **Primary** (CTAs, active nav, focus rings): Discord Blurple `#5865f2`, hover `#4752c4`.
+- **Secondary** (live pings, highlights, gradient accents): Neon Pink `#ec4899`.
 
-No gold accent. No purple gradient backgrounds. The old purple family (`#8b5cf6`, etc.) and gold family (`#d4a017`, etc.) are no longer part of the brand palette.
+Removed gold family (`#d4a017`, etc.) and old purple (`#8b5cf6`, etc.) — not part of the brand palette.
 
 | Purpose | Color |
 |---|---|
 | Primary accent / CTAs | `#5865f2` (blurple) |
-| Accent hover | `#4752c4` (blurple-strong) |
+| Primary hover | `#4752c4` (blurple-strong) |
+| Secondary accent | `#ec4899` (neon pink) |
+| Landing gradient end | `#fb923c` (neon orange — landing only) |
 | Success | `#23a55a` |
 | Error | `#f23f42` |
 | Warning | `#f0b232` |
-| Page background | `#0f1117` |
+| Page background (canvas) | `#0f1117` |
 | Sidebar | `#161b22` |
 | Panel | `#1c2129` |
+| Elevated | `#222831` |
+| Highlight (active) | `#2a3140` |
 
 ## Typography
 
-- **Display/UI font**: Inter
-    - Use for all headings, UI labels, body copy, controls.
-- **Mono font**: JetBrains Mono
-    - Use for command snippets, IDs, technical metadata only.
-- No Sora, no Manrope.
+- **Display font**: `Sora` — used for all headings (`h1`–`h4`, `type-display`, `type-title`).
+- **Body font**: `Manrope` — used for body copy, UI labels, controls.
+- **Mono font**: `JetBrains Mono` — used for command snippets, IDs, case numbers, technical metadata.
 
 ## Typography Rules
 
 - Keep body text at `14–15px` for dashboard readability.
-- Use sentence case for labels; avoid all-caps except for `type-meta` eyebrows.
+- Use sentence case for labels; avoid all-caps except for `type-meta` eyebrows (0.07em tracking).
 - No extreme letter-spacing or display-style tracking in UI text.
-- Headings use Inter with moderate negative tracking (`-0.01em` to `-0.02em`).
+- Headings use Sora with moderate negative tracking (`-0.01em` to `-0.02em`).
+- Mono eyebrows (`text-[10px] font-mono uppercase tracking-widest`) are the redesign's operational-console pattern — use for section/status labels.
 
 ## Voice and Copy
 

packages/frontend/src/index.css

@@ -123,6 +123,24 @@
   --color-lucky-blue: #5865f2;
   --color-lucky-purple: #5865f2;
 
+  /* Short-form aliases for the 2026-04-21 redesign port.
+     Values match the existing --color-lucky-* tokens. Keep both during
+     migration; the --lucky-* aliases will be dropped in a later cleanup PR
+     after every page has been ported. Decision: docs/decisions/2026-04-21-redesign-port-target.md */
+  --color-canvas: #0f1117;
+  --color-sidebar: #161b22;
+  --color-panel: #1c2129;
+  --color-elevated: #222831;
+  --color-highlight: #2a3140;
+  --color-brand-discord: #5865f2;
+  --color-brand-accent: #ec4899;
+  --color-text-strong: #e6edf3;
+  --color-text-body: #adbac7;
+  --color-text-muted: #768390;
+  --color-text-subtle: #545d68;
+  --shadow-soft: 0 4px 16px rgb(0 0 0 / 0.3);
+  --shadow-panel: 0 8px 32px rgb(0 0 0 / 0.4);
+
   --font-lucky-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
   --font-lucky-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
   --font-lucky-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas,
@@ -309,6 +327,21 @@
   box-shadow: var(--lucky-shadow-soft);
 }
 
+@utility discord-gradient {
+  background: linear-gradient(135deg, #ec4899 0%, #fb923c 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+@utility lucky-focus-ring {
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgb(88 101 242 / 0.4);
+  }
+}
+
 @layer base {
   :root {
     --background: 216 13% 7%;