diff --git a/.claude/skills/nothing-design/SKILL.md b/.claude/skills/nothing-design/SKILL.md
new file mode 100644
index 00000000..32f7f421
--- /dev/null
+++ b/.claude/skills/nothing-design/SKILL.md
@@ -0,0 +1,177 @@
+---
+name: nothing-design
+description: This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger automatically for generic UI or design tasks.
+version: 3.0.0
+allowed-tools: [Read, Write, Edit, Glob, Grep]
+---
+
+# Nothing-Inspired UI/UX Design System
+
+A senior product designer's toolkit trained in Swiss typography, industrial design (Braun, Teenage Engineering), and modern interface craft. Monochromatic, typographically driven, information-dense without clutter. Dark and light mode with equal rigor.
+
+**Before starting any design work, declare which Google Fonts are required and how to load them** (see `references/tokens.md` Section 1). Never assume fonts are already available.
+
+---
+
+## 1. DESIGN PHILOSOPHY
+
+- **Subtract, don't add.** Every element must earn its pixel. Default to removal.
+- **Structure is ornament.** Expose the grid, the data, the hierarchy itself.
+- **Monochrome is the canvas.** Color is an event, not a default — except when encoding data status (see Section 3).
+- **Type does the heavy lifting.** Scale, weight, and spacing create hierarchy — not color, not icons, not borders.
+- **Both modes are first-class.** Dark mode: OLED black. Light mode: warm off-white. Neither is "derived" — both get full design attention. Ask the user which mode to start with.
+- **Industrial warmth.** Technical and precise, but never cold. A human hand should be felt.
+
+---
+
+## 2. CRAFT RULES — HOW TO COMPOSE
+
+### 2.1 Visual Hierarchy: The Three-Layer Rule
+
+Every screen has exactly **three layers of importance.** Not two, not five. Three.
+
+| Layer | What | How |
+|-------|------|-----|
+| **Primary** | The ONE thing the user sees first. A number, a headline, a state. | Doto or Space Grotesk at display size. `--text-display`. 48–96px breathing room. |
+| **Secondary** | Supporting context. Labels, descriptions, related data. | Space Grotesk at body/subheading. `--text-primary`. Grouped tight (8–16px) to the primary. |
+| **Tertiary** | Metadata, navigation, system info. Visible but never competing. | Space Mono at caption/label. `--text-secondary` or `--text-disabled`. ALL CAPS. Pushed to edges or bottom. |
+
+**The test:** Squint at the screen. Can you still tell what's most important? If two things compete, one needs to shrink, fade, or move.
+
+**Common mistake:** Making everything "secondary." Evenly-sized elements with even spacing = visual flatness. Be brave — make the primary absurdly large and the tertiary absurdly small. The contrast IS the hierarchy.
+
+### 2.2 Font Discipline
+
+Per screen, use maximum:
+- **2 font families** (Space Grotesk + Space Mono. Doto only for hero moments.)
+- **3 font sizes** (one large, one medium, one small)
+- **2 font weights** (Regular + one other — usually Light or Medium, rarely Bold)
+
+Think of it as a budget. Every additional size/weight costs visual coherence. Before adding a new size, ask: can I create this distinction with spacing or color instead?
+
+| Decision | Size | Weight | Color |
+|----------|:---:|:---:|:---:|
+| Heading vs. body | Yes | No | No |
+| Label vs. value | No | No | Yes |
+| Active vs. inactive nav | No | No | Yes |
+| Hero number vs. unit | Yes | No | No |
+| Section title vs. content | Yes | Optional | No |
+
+**Rule of thumb:** If reaching for a new font-size, it's probably a spacing problem. Add distance instead.
+
+### 2.3 Spacing as Meaning
+
+Spacing is the primary tool for communicating relationships.
+
+```
+Tight (4–8px)   = "These belong together" (icon + label, number + unit)
+Medium (16px)    = "Same group, different items" (list items, form fields)
+Wide (32–48px)   = "New group starts here" (section breaks)
+Vast (64–96px)   = "This is a new context" (hero to content, major divisions)
+```
+
+**If a divider line is needed, the spacing is probably wrong.** Dividers are a symptom of insufficient spacing contrast. Use them only in data-dense lists where items are structurally identical.
+
+### 2.4 Container Strategy (prefer top)
+
+1. **Spacing alone** (proximity groups items)
+2. A single divider line
+3. A subtle border outline
+4. A surface card with background change
+
+Each step down adds visual weight. Use the lightest tool that works. Never box the most important element — let it float on the background.
+
+### 2.5 Color as Hierarchy
+
+In a monochrome system, the gray scale IS the hierarchy. Max 4 levels per screen:
+
+```
+--text-display (100%) → Hero numbers. One per screen.
+--text-primary (90%)  → Body text, primary content.
+--text-secondary (60%) → Labels, captions, metadata.
+--text-disabled (40%) → Disabled, timestamps, hints.
+```
+
+**Red (#D71921) is not part of the hierarchy.** It's an interrupt — "look HERE, NOW." If nothing is urgent, no red on the screen.
+
+**Data status colors** (success green, warning amber, accent red) are exempt from the "one accent" rule when encoding data values. Apply color to the **value itself**, not labels or row backgrounds. See `references/tokens.md` for the full color system.
+
+### 2.6 Consistency vs. Variance
+
+**Be consistent in:** Font families, label treatment (always Space Mono ALL CAPS), spacing rhythm, color roles, component shapes, alignment.
+
+**Break the pattern in exactly ONE place per screen:** An oversized number, a circular widget among rectangles, a red accent among grays, a Doto headline, a vast gap where everything else is tight.
+
+This single break IS the design. Without it: sterile grid. With more than one: visual chaos.
+
+### 2.7 Compositional Balance
+
+**Asymmetry > symmetry.** Centered layouts feel generic. Favor deliberately unbalanced composition:
+- **Large left, small right:** Hero metric + metadata stack.
+- **Top-heavy:** Big headline near top, sparse content below.
+- **Edge-anchored:** Important elements pinned to screen edges, negative space in center.
+
+Balance heavy elements with more empty space, not with more heavy elements.
+
+### 2.8 The Nothing Vibe
+
+1. **Confidence through emptiness.** Large uninterrupted background areas. Resist filling space.
+2. **Precision in the small things.** Letter-spacing, exact gray values, 4px gaps. Micro-decisions compound into craft.
+3. **Data as beauty.** `36GB/s` in Space Mono at 48px IS the visual. No illustrations needed.
+4. **Mechanical honesty.** Controls look like controls. A toggle = physical switch. A gauge = instrument.
+5. **One moment of surprise.** A dot-matrix headline. A circular widget. A red dot. Restraint makes the one expressive moment powerful.
+6. **Percussive, not fluid.** Imagine UI sounds: click not swoosh, tick not chime. Design transitions that feel mechanical and precise.
+
+### 2.9 Visual Variety in Data-Dense Screens
+
+When 3+ data sections appear on one screen, vary the visual form:
+
+| Form | Best for | Weight |
+|------|----------|--------|
+| Hero number (large Doto/Space Mono) | Single key metric | Heavy — use once |
+| Segmented progress bar | Progress toward goal | Medium |
+| Concentric rings / arcs | Multiple related percentages | Medium |
+| Inline compact bar | Secondary metrics in rows | Light |
+| Number-only with status color | Values without proportion | Lightest |
+| Sparkline | Trends over time | Medium |
+| Stat row (label + value) | Simple data points | Light |
+
+Lead section → heaviest treatment. Secondary → different form. Tertiary → lightest. The FORM varies, the VOICE stays the same.
+
+---
+
+## 3. ANTI-PATTERNS — WHAT TO NEVER DO
+
+- No gradients in UI chrome
+- No shadows. No blur. Flat surfaces, border separation.
+- No skeleton loading screens. Use `[LOADING...]` text or segmented spinner.
+- No toast popups. Use inline status text: `[SAVED]`, `[ERROR: ...]`
+- No sad-face illustrations, cute mascots, or multi-paragraph empty states
+- No zebra striping in tables
+- No filled icons, multi-color icons, or emoji as UI
+- No parallax, scroll-jacking, or gratuitous animation
+- No spring/bounce easing. Use subtle ease-out only.
+- No border-radius > 16px on cards. Buttons are pill (999px) or technical (4–8px).
+- Data visualization: differentiate with **opacity** (100%/60%/30%) or **pattern** (solid/striped/dotted) before introducing color.
+
+---
+
+## 4. WORKFLOW
+
+1. **Declare fonts** — tell the user which Google Fonts to load (see `references/tokens.md`)
+2. **Ask mode** — dark or light? Neither is default.
+3. **Sketch hierarchy** — identify the 3 layers before writing any code
+4. **Compose** — apply craft rules (Sections 2.1–2.9)
+5. **Check tokens** — consult `references/tokens.md` for exact values
+6. **Build components** — consult `references/components.md` for patterns
+7. **Adapt to platform** — consult `references/platform-mapping.md` for output conventions
+
+---
+
+## 5. REFERENCE FILES
+
+For detailed token values, component specs, and platform-specific guidance:
+
+- **`references/tokens.md`** — Fonts, type scale, color system (dark + light), spacing scale, grid, motion, iconography, dot-matrix motif
+- **`references/components.md`** — Cards, buttons, inputs, lists, tables, nav, tags, segmented controls, progress bars, charts, widgets, overlays, state patterns
+- **`references/platform-mapping.md`** — HTML/CSS, SwiftUI, React/Tailwind, Paper output conventions
diff --git a/.claude/skills/nothing-design/references/components.md b/.claude/skills/nothing-design/references/components.md
new file mode 100644
index 00000000..d25768db
--- /dev/null
+++ b/.claude/skills/nothing-design/references/components.md
@@ -0,0 +1,153 @@
+# Nothing Design System — Components
+
+## 1. CARDS / SURFACES
+
+- Background: `--surface` or `--surface-raised`
+- Border: `1px solid --border`, or none. Radius: 12–16px cards, 8px compact, 4px technical
+- Padding: 16–24px. No shadows. Flat surfaces, border separation.
+
+---
+
+## 2. BUTTONS
+
+| Variant | Background | Border | Text | Radius |
+|---------|-----------|--------|------|--------|
+| Primary | `--text-display` (#FFF) | none | `--black` | 999px (pill) |
+| Secondary | transparent | `1px solid --border-visible` | `--text-primary` | 999px |
+| Ghost | transparent | none | `--text-secondary` | 0 |
+| Destructive | transparent | `1px solid --accent` | `--accent` | 999px |
+
+All buttons: `Space Mono`, 13px, ALL CAPS, letter-spacing 0.06em, padding 12px 24px. Min height 44px.
+
+---
+
+## 3. INPUTS
+
+- Underline preferred (`1px solid --border-visible` bottom) or full border 8px radius
+- Label above: `--label` style (Space Mono, ALL CAPS, `--text-secondary`)
+- Focus: border → `--text-primary`. Error: border → `--accent`, message below in `--accent`
+- Data-entry fields: `Space Mono` for input text
+
+---
+
+## 4. LISTS / DATA ROWS
+
+- Dividers: `1px solid --border`, full-width. Row padding: 12–16px vertical
+- Left: label (Space Mono caps, `--text-secondary`). Right: value (`--text-primary`)
+- Never alternating row backgrounds. Use dividers.
+
+**Stat rows:** Label left (Space Mono, ALL CAPS, `--text-secondary`), value right (color = status color), unit adjacent in `--label` size. Trend arrow same color as value.
+
+**Hierarchical rows:** Sub-items indented 16–24px, same divider treatment. No tree lines or expand/collapse — indentation IS the hierarchy.
+
+---
+
+## 5. TABLES / DATA GRIDS
+
+- Header: `--label` style, bottom border `--border-visible`
+- Cell text: `Space Mono` numeric, `Space Grotesk` text. Cell padding: 12px 16px
+- Numbers right, text left. No zebra striping, no cell backgrounds.
+- Active row: `--surface-raised` background, left `2px solid --accent` indicator
+
+---
+
+## 6. NAVIGATION
+
+- Bottom bar mobile, horizontal text bar desktop
+- Labels: Space Mono, ALL CAPS. Active: `--text-display` + dot/underline. Inactive: `--text-disabled`
+- Bracket `[ HOME ]  GALLERY  INFO` or pipe `HOME | GALLERY | INFO`
+- **Back button:** Circular 40–44px, `--surface` bg, thin chevron `<`, top-left 16px from edges
+
+---
+
+## 7. TAGS / CHIPS
+
+- Border: `1px solid --border-visible`, no fill. Text: Space Mono, `--caption`, ALL CAPS
+- Radius: 999px (pill) or 4px (technical). Padding: 4px 12px. Active: `--text-display` border+text
+
+---
+
+## 8. SEGMENTED CONTROL
+
+- Container: `1px solid --border-visible`, pill or 8px rounded
+- Active: `--text-display` bg, `--black` text (inverted). Inactive: transparent, `--text-secondary`
+- Text: Space Mono, ALL CAPS, `--label` size. Height: 36–44px. Transition: 200ms ease-out
+- Max 2–4 segments
+
+---
+
+## 9. DATE / PERIOD NAVIGATION
+
+- Layout: `< LABEL >` — back arrow, label, forward arrow
+- Label: Space Mono/Grotesk, ALL CAPS. Arrows: thin chevrons, `--text-secondary`, 44px touch
+- No calendar popovers — linear stepping IS the interaction
+
+---
+
+## 10. TOGGLES / SWITCHES
+
+- Pill track, circle thumb. Off: `--border-visible` track, `--text-disabled` thumb
+- On: `--text-display` track, `--black` thumb. Min touch target: 44px
+
+---
+
+## 11. SEGMENTED PROGRESS BARS
+
+The signature data visualization. Discrete blocks — mechanical, instrument-like.
+
+**Anatomy:** Label + value above, full-width bar of discrete rectangular segments with 2px gaps below.
+
+**Segments:** Square-ended blocks, no border-radius. Filled = solid status color. Empty = `--border` (dark) / `#E0E0E0` (light).
+
+| State | Fill | When |
+|-------|------|------|
+| Neutral | `--text-display` | Within normal range |
+| Over limit | `--accent` | Exceeds target |
+| Good | `--success` | Healthy range |
+| Moderate | `--warning` | Caution zone |
+
+**Overflow:** Filled segments continue past "full" mark in status color (typically red).
+
+**Sizes:** Hero 16–20px, Standard 8–12px, Compact 4–6px height.
+
+Always pair with numeric readout. Bar = proportion, number = precision.
+
+---
+
+## 12. OTHER DATA VISUALIZATION
+
+- **Bar charts:** Vertical, white fill, `--border` remainder. Square ends.
+- **Gauges:** Thin stroke circles + tick marks, numeric readout centered/adjacent.
+- **Dot grids:** Vary opacity/size for heat maps. Uniform spacing.
+- **Category differentiation:** Opacity → pattern → line style → color (last resort).
+- Always show numeric value alongside any visual.
+
+**Charts:** Line 1.5–2px `--text-display`, average dashed 1px `--text-secondary`. Axis labels: Space Mono, `--caption`. Grid: `--border`, horizontal only. No area fill, no legend boxes — label lines directly.
+
+---
+
+## 13. WIDGETS (DASHBOARD CARDS)
+
+- `--surface` bg, 16px radius. Hero metric: large Doto/Space Mono, left-aligned
+- Unit: `--label` size, adjacent. Category: ALL CAPS Space Mono top-left
+- Instrument gauges: compass, thermometer, dial motifs
+
+---
+
+## 14. OVERLAYS & LAYERING
+
+No shadows. Layering through background contrast and borders.
+
+- **Modals:** Backdrop `rgba(0,0,0,0.8)`, dialog `--surface` + `1px solid --border-visible` + 16px radius, centered max 480px. Close: `[ X ]` top-right ghost button.
+- **Bottom sheets:** `--surface`, 2px handle bar centered, 16px top radius, drag-to-dismiss. Full-page sheets: title centered + dismiss button right, sections with `--text-secondary` headings.
+- **Dropdowns:** `--surface-raised`, `1px solid --border-visible` 8px radius, 44px items. Selected: left 2px accent bar. No shadow.
+- **Toasts:** None. Use inline status text: `[SAVED]`, `[ERROR: ...]`. Space Mono, `--caption`, near trigger.
+
+---
+
+## 15. STATE PATTERNS
+
+- **Error:** Input border → `--accent` + message below. Form-level: summary box `1px solid --accent`. Inline: `[ERROR]` prefix. Never red backgrounds or alert banners.
+- **Empty:** Centered, 96px+ padding. Headline `--text-secondary`, 1 sentence description `--text-disabled`. Optional dot-matrix illustration. No mascots.
+- **Loading:** Segmented spinner (hardware-style), or segmented bar + percentage. No skeletons — use `[LOADING]` bracket text.
+- **Disabled:** Opacity 0.4 or `--text-disabled`. Borders fade to `--border`.
diff --git a/.claude/skills/nothing-design/references/platform-mapping.md b/.claude/skills/nothing-design/references/platform-mapping.md
new file mode 100644
index 00000000..5d5201ab
--- /dev/null
+++ b/.claude/skills/nothing-design/references/platform-mapping.md
@@ -0,0 +1,64 @@
+# Nothing Design System — Platform Mapping
+
+## 1. HTML / CSS / WEB
+
+Load fonts via Google Fonts `<link>` or `@import`. Use CSS custom properties, `rem` for type, `px` for spacing/borders. Dark/light via `prefers-color-scheme` or class toggle.
+
+```css
+:root {
+  --black: #000000;
+  --surface: #111111;
+  --surface-raised: #1A1A1A;
+  --border: #222222;
+  --border-visible: #333333;
+  --text-disabled: #666666;
+  --text-secondary: #999999;
+  --text-primary: #E8E8E8;
+  --text-display: #FFFFFF;
+  --accent: #D71921;
+  --accent-subtle: rgba(215,25,33,0.15);
+  --success: #4A9E5C;
+  --warning: #D4A843;
+  --interactive: #5B9BF6;
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-2xl: 48px;
+  --space-3xl: 64px;
+  --space-4xl: 96px;
+}
+```
+
+---
+
+## 2. SWIFTUI / iOS
+
+Register fonts in Info.plist, bundle `.ttf` files. Use `@Environment(\.colorScheme)` for mode switching.
+
+```swift
+extension Color {
+    static let ndBlack = Color(hex: "000000")
+    static let ndSurface = Color(hex: "111111")
+    static let ndSurfaceRaised = Color(hex: "1A1A1A")
+    static let ndBorder = Color(hex: "222222")
+    static let ndBorderVisible = Color(hex: "333333")
+    static let ndTextDisabled = Color(hex: "666666")
+    static let ndTextSecondary = Color(hex: "999999")
+    static let ndTextPrimary = Color(hex: "E8E8E8")
+    static let ndTextDisplay = Color.white
+    static let ndAccent = Color(hex: "D71921")
+    static let ndSuccess = Color(hex: "4A9E5C")
+    static let ndWarning = Color(hex: "D4A843")
+    static let ndInteractive = Color(hex: "5B9BF6")
+}
+```
+
+Light mode values in tokens.md Dark/Light table. Derive Font extension from font stack table (trivial: `.custom("Doto"/"SpaceGrotesk-Regular"/"SpaceMono-Regular", size:)`).
+
+---
+
+## 3. PAPER (DESIGN TOOL)
+
+Use `get_font_family_info` to verify fonts before writing styles. Direct hex values (no CSS variables). Dark mode as default canvas, light mode as separate artboard.
diff --git a/.claude/skills/nothing-design/references/tokens.md b/.claude/skills/nothing-design/references/tokens.md
new file mode 100644
index 00000000..38578adc
--- /dev/null
+++ b/.claude/skills/nothing-design/references/tokens.md
@@ -0,0 +1,142 @@
+# Nothing Design System — Tokens
+
+## 1. TYPOGRAPHY
+
+### Font Stack
+
+| Role | Font | Fallback | Weight |
+|------|------|----------|--------|
+| **Display** | `"Doto"` | `"Space Mono", monospace` | 400–700, variable dot-size |
+| **Body / UI** | `"Space Grotesk"` | `"DM Sans", system-ui, sans-serif` | Light 300, Regular 400, Medium 500, Bold 700 |
+| **Data / Labels** | `"Space Mono"` | `"JetBrains Mono", "SF Mono", monospace` | Regular 400, Bold 700 |
+
+**Why these fonts:** Doto = variable dot-matrix (closest to NDot 57). Space Grotesk + Space Mono by Colophon Foundry — same foundry as Nothing's actual typefaces. Shared design DNA.
+
+### Type Scale
+
+| Token | Size | Line Height | Letter Spacing | Use |
+|-------|------|-------------|----------------|-----|
+| `--display-xl` | 72px | 1.0 | -0.03em | Hero numbers, time displays |
+| `--display-lg` | 48px | 1.05 | -0.02em | Section heroes, percentages |
+| `--display-md` | 36px | 1.1 | -0.02em | Page titles |
+| `--heading` | 24px | 1.2 | -0.01em | Section headings |
+| `--subheading` | 18px | 1.3 | 0 | Subsections |
+| `--body` | 16px | 1.5 | 0 | Body text |
+| `--body-sm` | 14px | 1.5 | 0.01em | Secondary body |
+| `--caption` | 12px | 1.4 | 0.04em | Timestamps, footnotes |
+| `--label` | 11px | 1.2 | 0.08em | ALL CAPS monospace labels |
+
+### Typographic Rules
+
+- **Doto:** 36px+ only, tight tracking, never for body text
+- **Labels:** Always Space Mono, ALL CAPS, 0.06–0.1em spacing, 11–12px ("instrument panel" labels)
+- **Data/Numbers:** Always Space Mono. Units as `--label` size, slightly raised, adjacent
+- **Hierarchy:** display (Doto) > heading (Space Grotesk) > label (Space Mono caps) > body (Space Grotesk). Four levels max.
+
+---
+
+## 2. COLOR SYSTEM
+
+### Primary Palette (Dark Mode)
+
+| Token | Hex | Contrast on #000 | Role |
+|-------|-----|-------------------|------|
+| `--black` | `#000000` | — | Primary background (OLED) |
+| `--surface` | `#111111` | 1.3:1 | Elevated surfaces, cards |
+| `--surface-raised` | `#1A1A1A` | 1.5:1 | Secondary elevation |
+| `--border` | `#222222` | — | Subtle dividers (decorative only) |
+| `--border-visible` | `#333333` | — | Intentional borders, wireframe lines |
+| `--text-disabled` | `#666666` | 4.0:1 | Disabled text, decorative elements |
+| `--text-secondary` | `#999999` | 6.3:1 | Labels, captions, metadata |
+| `--text-primary` | `#E8E8E8` | 16.5:1 | Body text |
+| `--text-display` | `#FFFFFF` | 21:1 | Headlines, hero numbers |
+
+### Accent & Status Colors
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `--accent` | `#D71921` | Signal light: active states, destructive, urgent. One per screen as UI element. Never decorative. |
+| `--accent-subtle` | `rgba(215,25,33,0.15)` | Accent tint backgrounds |
+| `--success` | `#4A9E5C` | Confirmed, completed, connected |
+| `--warning` | `#D4A843` | Caution, pending, degraded |
+| `--error` | `#D71921` | Shares accent red — errors ARE the accent moment |
+| `--info` | `#999999` | Uses secondary text color |
+| `--interactive` | `#007AFF` / `#5B9BF6` | Tappable text: links, picker values. Not for buttons. |
+
+**Data status colors:** `--success` = good/in range, `--warning` = moderate/attention, `--accent` = bad/over limit, `--text-primary` = neutral. Apply color to **value**, not label or background. Labels stay `--text-secondary`. Trend arrows inherit value color.
+
+### Dark / Light Mode
+
+| Token | Dark | Light |
+|-------|------|-------|
+| `--black` | `#000000` | `#F5F5F5` |
+| `--surface` | `#111111` | `#FFFFFF` |
+| `--surface-raised` | `#1A1A1A` | `#F0F0F0` |
+| `--border` | `#222222` | `#E8E8E8` |
+| `--border-visible` | `#333333` | `#CCCCCC` |
+| `--text-disabled` | `#666666` | `#999999` |
+| `--text-secondary` | `#999999` | `#666666` |
+| `--text-primary` | `#E8E8E8` | `#1A1A1A` |
+| `--text-display` | `#FFFFFF` | `#000000` |
+| `--interactive` | `#5B9BF6` | `#007AFF` |
+
+**Identical across modes:** Accent red, status colors, ALL CAPS labels, fonts, type scale, spacing, component shapes.
+
+**Dark feel:** Instrument panel in a dark room. OLED black, white data glowing.
+**Light feel:** Printed technical manual. Off-white paper (#F5F5F5), black ink. Cards = `#FFFFFF` on off-white page = subtle elevation without shadows.
+
+---
+
+## 3. SPACING
+
+### Spacing Scale (8px base)
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `--space-2xs` | 2px | Optical adjustments only |
+| `--space-xs` | 4px | Icon-to-label gaps, tight padding |
+| `--space-sm` | 8px | Component internal spacing |
+| `--space-md` | 16px | Standard padding, element gaps |
+| `--space-lg` | 24px | Group separation |
+| `--space-xl` | 32px | Section margins |
+| `--space-2xl` | 48px | Major section breaks |
+| `--space-3xl` | 64px | Page-level vertical rhythm |
+| `--space-4xl` | 96px | Hero breathing room |
+
+---
+
+## 4. MOTION & INTERACTION
+
+- **Duration:** 150–250ms micro, 300–400ms transitions
+- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)` — subtle ease-out. No spring/bounce.
+- Prefer opacity over position. Elements fade, don't slide.
+- Hover: border/text brightens. No scale, no shadows.
+- No parallax, scroll-jacking, gratuitous animation.
+
+---
+
+## 5. ICONOGRAPHY
+
+- Monoline, 1.5px stroke, no fill. 24x24 base, 20x20 live area. Round caps/joins.
+- Color inherits text color. Max 5–6 strokes.
+- Preferred: Lucide (thin), Phosphor (thin). Never filled or multi-color.
+
+---
+
+## 6. DOT-MATRIX MOTIF
+
+**When to use:** Hero typography (Doto), decorative grid backgrounds, dot-grid data viz, loading indicators, empty state illustrations.
+
+### CSS Implementation
+```css
+.dot-grid {
+  background-image: radial-gradient(circle, var(--border-visible) 1px, transparent 1px);
+  background-size: 16px 16px;
+}
+.dot-grid-subtle {
+  background-image: radial-gradient(circle, var(--border) 0.5px, transparent 0.5px);
+  background-size: 12px 12px;
+}
+```
+
+Dots 1–2px, uniform 12–16px grid. Opacity 0.1–0.2 for backgrounds, full for data. Never as container border or button style.
diff --git a/specs/028-nothing-design-redesign/README.md b/specs/028-nothing-design-redesign/README.md
new file mode 100644
index 00000000..850bd21e
--- /dev/null
+++ b/specs/028-nothing-design-redesign/README.md
@@ -0,0 +1,109 @@
+# 028 — Nothing Design Redesign
+
+## Overview
+
+This spec proposes replacing the AI Developer Hub's current, inconsistent theming with one
+coherent visual system inspired by Nothing's instrument-panel / printed-manual aesthetic. The
+existing UI leans on a green-primary shadcn theme (`--primary: oklch(0.78 0.19 120)`) applied
+unevenly across screens, with mixed type, ad-hoc accent usage, and shadow-heavy surfaces.
+
+**Goal:** a single source of truth — `mockups/styles/nothing.css` — that styles every screen with
+the same monochrome canvas, one disciplined red interrupt, a type-driven hierarchy, and flat
+bordered surfaces. Both dark and light are first-class, not an afterthought. Dark reads as an
+instrument panel; light reads as a printed manual.
+
+The `mockups/` folder contains a standalone, framework-free HTML mockup per screen plus a gallery
+index, all sharing `nothing.css`. These are static design references — the eventual implementation
+maps these tokens onto the app's real `src/app/globals.css`.
+
+## Font declaration
+
+Three families, each with one job. Maximum two families visible per screen plus a single Doto hero
+moment.
+
+| Role | Family | Usage |
+| --- | --- | --- |
+| **Display / hero** | **Doto** | Hero display numbers and titles only, 36px+. |
+| **UI / body** | **Space Grotesk** | All interface chrome, headings, and prose. |
+| **Labels + all data** | **Space Mono** | ALL-CAPS tracked labels, plus every number / metric / table value. |
+
+Exact `@import` line used at the top of `mockups/styles/nothing.css`:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Doto:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap');
+```
+
+These are exposed as tokens:
+
+```css
+--font-display: "Doto", "Space Mono", monospace;
+--font-ui:      "Space Grotesk", "DM Sans", system-ui, sans-serif;
+--font-mono:    "Space Mono", "JetBrains Mono", "SF Mono", monospace;
+```
+
+## How to view
+
+Open **`mockups/index.html`** in a browser. It is a self-contained gallery — no build step, no
+server. Each card links to a sibling screen mockup. Use the Dark / Light toggle (top-right of every
+page) to verify both modes; the choice persists across pages via `localStorage`.
+
+## Screens
+
+| # | Screen | Route | Mockup |
+| --- | --- | --- | --- |
+| 01 | Dashboard | `/` | `mockups/dashboard.html` |
+| 02 | AI Tools | `/tools` | `mockups/tools.html` |
+| 03 | Users | `/users` | `mockups/users.html` |
+| 04 | License Assignments | `/assignments` | `mockups/assignments.html` |
+| 05 | Access Requests | `/requests` | `mockups/requests.html` |
+| 06 | Budget | `/budget` | `mockups/budget.html` |
+| 07 | Reports | `/reports` | `mockups/reports.html` |
+| 08 | GitHub Copilot | `/copilot` | `mockups/copilot.html` |
+| 09 | Claude Console | `/claude` | `mockups/claude.html` |
+| 10 | Invoices | `/invoices` | `mockups/invoices.html` |
+| 11 | Settings | `/settings` | `mockups/settings.html` |
+| 12 | Sign In | `/login` | `mockups/login.html` |
+
+## Nothing principles applied
+
+- **Monochrome canvas + one red interrupt.** Greyscale carries the entire hierarchy. The `--accent`
+  red (`#d71921`) appears at most once per screen — an active state, a destructive action, or the
+  single urgent number. If nothing is urgent, there is no red.
+- **Type-driven 3-layer hierarchy.** Exactly three layers per screen: one large primary (hero number
+  or title), secondary context, and small tertiary metadata. The size contrast *is* the hierarchy —
+  no boxes or color needed to separate them.
+- **Flat bordered surfaces / no shadows.** Cards and panels are defined by 1px borders and spacing,
+  never drop shadows, gradients, or blur. Status colors apply to value text only, never to row
+  backgrounds or labels.
+- **Segmented-bar data viz.** The signature visualization is a segmented progress bar (~20 discrete
+  segments) rather than smooth fills; overflow segments turn red. Charts are thin inline SVG lines,
+  labeled directly with no legend boxes or area fills.
+- **Both modes first-class.** Every value is a token — no hardcoded `#fff` / `#000`. Flipping the
+  toggle yields two intentional looks: dark = instrument panel, light = printed manual.
+
+## Migration notes
+
+`mockups/styles/nothing.css` is authored as the proposed replacement for the app's
+`src/app/globals.css` design tokens. The Nothing tokens map directly onto the existing shadcn token
+names, so adoption is largely a values swap (plus wiring the three font families and switching the
+dark-mode selector). The headline change is retiring the **oklch green primary**
+(`oklch(0.78 0.19 120)`) in favor of a monochrome canvas with a single red interrupt.
+
+Key token swaps (current `globals.css` → proposed Nothing equivalent):
+
+| shadcn token | Current value | Nothing equivalent (dark / light) |
+| --- | --- | --- |
+| `--background` | `oklch(0.16 0 0)` dark · `oklch(1 0 0)` light | `--black` `#000000` / `#f5f5f5` |
+| `--foreground` | `oklch(0.97 0 0)` dark · `oklch(0.145 0 0)` light | `--text-primary` `#e8e8e8` / `#1a1a1a` (display text → `--text-display` `#ffffff` / `#000000`) |
+| `--card` / `--popover` | `oklch(0.21 0 0)` dark · `oklch(1 0 0)` light | `--surface` `#111111` / `#ffffff` (raised → `--surface-raised` `#1a1a1a` / `#f0f0f0`) |
+| `--primary` | `oklch(0.78 0.19 120)` **green** (both modes) | `--text-display` (monochrome) — primary actions become high-contrast greyscale, **not** a brand hue |
+| `--accent` | `oklch(0.25 0.03 120)` / `oklch(0.95 0.03 120)` green-tinted | `--accent` `#d71921` red interrupt (subtle fill → `--accent-subtle`) |
+| `--destructive` | `oklch(0.704 0.191 22.216)` / `oklch(0.577 0.245 27.325)` | `--error` `#d71921` (unified with the single accent red) |
+| `--border` / `--input` | `oklch(1 0 0 / 10%)` dark · `oklch(0.91 0 0)` light | `--border` `#222222` / `#e8e8e8` (visible → `--border-visible` `#333333` / `#cccccc`) |
+| `--ring` | `oklch(0.78 0.19 120)` green | `--border-visible` / `--text-primary` focus, no green ring |
+| Fonts | shadcn default (system / Geist) | `--font-ui` Space Grotesk, `--font-mono` Space Mono, `--font-display` Doto (see `@import` above) |
+
+Status colors (`--success #4a9e5c`, `--warning #d4a843`) are new value-text-only tokens with no
+direct shadcn equivalent; the existing rainbow `--chart-1..5` would collapse to greyscale +
+segmented bars. The app's `.dark` class selector maps to the mockup's `:root` (dark) default and
+`:root[data-theme="light"]` override pattern.
diff --git a/specs/028-nothing-design-redesign/implementation-notes.html b/specs/028-nothing-design-redesign/implementation-notes.html
new file mode 100644
index 00000000..8125be93
--- /dev/null
+++ b/specs/028-nothing-design-redesign/implementation-notes.html
@@ -0,0 +1,286 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Nothing Redesign · Implementation Notes</title>
+  <link rel="stylesheet" href="./mockups/styles/nothing.css" />
+  <script src="./mockups/styles/theme.js"></script>
+  <style>
+    /* Scoped doc styles — tokens only, eats its own dog food (mirrors implementation-plan.html). */
+    .doc-main { min-width: 0; padding: var(--space-2xl) var(--space-2xl) var(--space-4xl); max-width: 920px; margin: 0 auto; }
+    .doc-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
+    section { margin-top: var(--space-3xl); }
+    section:first-of-type { margin-top: var(--space-xl); }
+    .prose p { font-family: var(--font-ui); font-size: var(--body); color: var(--text-primary); line-height: 1.6; margin: var(--space-md) 0; max-width: 74ch; }
+    .lead { font-family: var(--font-ui); font-size: var(--subheading); color: var(--text-secondary); line-height: 1.5; max-width: 74ch; }
+    .section-head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-md); }
+    .section-head .heading { margin: 0; }
+    code, .code { font-family: var(--font-mono); font-size: var(--caption); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-tech); padding: 2px 6px; color: var(--text-display); }
+    .note { border: 1px solid var(--border-visible); border-left: 2px solid var(--text-display); border-radius: var(--radius-compact); padding: var(--space-md) var(--space-lg); margin: var(--space-md) 0; }
+    .note--decision { border-left-color: var(--success); }
+    .note--deviation { border-left-color: var(--warning); }
+    .note--tradeoff { border-left-color: var(--interactive); }
+    .note--open { border-left-color: var(--accent); }
+    .note .kind { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-xs); display: block; }
+    .note .title { font-family: var(--font-ui); font-size: var(--body); font-weight: 500; color: var(--text-display); margin-bottom: var(--space-xs); }
+    .note p { font-family: var(--font-ui); font-size: var(--body-sm); color: var(--text-primary); line-height: 1.55; margin: var(--space-xs) 0; max-width: 74ch; }
+    .phase-tag { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; color: var(--accent); margin-right: var(--space-sm); }
+    .meta-line { font-family: var(--font-mono); font-size: var(--caption); color: var(--text-disabled); letter-spacing: 0.04em; }
+    ul.bullets { margin: var(--space-md) 0; padding-left: var(--space-lg); list-style: disc; max-width: 74ch; }
+    ul.bullets li { font-family: var(--font-ui); font-size: var(--body-sm); color: var(--text-primary); line-height: 1.6; margin: 6px 0; }
+    ul.bullets li::marker { color: var(--text-disabled); }
+  </style>
+</head>
+<body>
+  <main class="doc-main">
+    <div class="doc-topbar">
+      <div>
+        <span class="label eyebrow">SPEC 028 · IMPLEMENTATION NOTES</span>
+        <h1 class="display-md" style="margin-top: var(--space-sm);">Nothing Redesign — Build Log</h1>
+      </div>
+      <div class="theme-toggle" role="group" aria-label="Theme">
+        <button data-theme="dark" class="active">Dark</button>
+        <button data-theme="light">Light</button>
+      </div>
+    </div>
+
+    <p class="lead">A running record of how the implementation interprets, extends, or departs from
+      <code>spec 028</code> and its <code>implementation-plan.html</code>. Updated continuously as phases land.
+      Categories: <span class="t-success">decisions</span>, <span class="t-warning">deviations</span>,
+      <span style="color:var(--interactive)">tradeoffs</span>, <span class="t-accent">open questions</span>.</p>
+
+    <!-- ===================================================================== -->
+    <section id="status">
+      <div class="section-head"><span class="label">00</span><h2 class="heading">Phase status</h2></div>
+      <div class="stat-list">
+        <div class="stat-row"><span class="label">P0 · Tokens &amp; fonts</span><span class="value value--success" id="st-p0">DONE · build green</span></div>
+        <div class="stat-row"><span class="label">P1 · Primitives &amp; overlays</span><span class="value value--success" id="st-p1">DONE · verified</span></div>
+        <div class="stat-row"><span class="label">P2 · App shell &amp; layout</span><span class="value value--success" id="st-p2">DONE · verified both modes</span></div>
+        <div class="stat-row"><span class="label">P3 · Shared tables &amp; charts</span><span class="value value--success" id="st-p3">DONE</span></div>
+        <div class="stat-row"><span class="label">P4 · Page migration</span><span class="value value--success" id="st-p4">DONE · shared-driven + tint sweep</span></div>
+        <div class="stat-row"><span class="label">P5 · QA gate &amp; PR</span><span class="value value--success" id="st-p5">DONE · grep gate clean, a11y audited, PR open</span></div>
+      </div>
+    </section>
+
+    <!-- ===================================================================== -->
+    <section id="decisions">
+      <div class="section-head"><span class="label">01</span><h2 class="heading">Design decisions</h2></div>
+      <p class="prose">Choices made where the spec or plan left room for interpretation.</p>
+
+      <div class="note note--decision">
+        <span class="kind">Decision</span>
+        <span class="title"><span class="phase-tag">P0</span>shadcn <code>--accent</code> stays NEUTRAL; the Nothing red routes through <code>--destructive</code></span>
+        <p>The plan's flagged naming collision: shadcn's <code>--accent</code> is a subtle hover background used
+          all over (<code>bg-accent</code>, <code>data-[state]:bg-accent</code>), NOT the loud Nothing red.
+          So <code>--accent</code> is mapped to a neutral surface (<code>#f0f0f0</code> light / <code>#1a1a1a</code>
+          dark) and the single red interrupt + every error/destructive state route through
+          <code>--destructive</code> = <code>#d71921</code> (also <code>--ring</code>). This dodges the collision
+          cleanly and means re-skinned primitives keep their hover semantics. New tokens shadcn lacks were added
+          and registered in <code>@theme inline</code>: <code>--color-ink</code> (100% display text),
+          <code>--color-faint</code> (40% tertiary), <code>--color-success</code>, <code>--color-warning</code>,
+          <code>--color-seg-empty</code>, <code>--color-destructive-subtle</code>, <code>--color-border-strong</code>.</p>
+      </div>
+
+      <div class="note note--decision">
+        <span class="kind">Decision</span>
+        <span class="title"><span class="phase-tag">P0</span>Direct per-mode token assignment (two blocks), not a raw-token+alias indirection</span>
+        <p>Values are assigned straight onto the shadcn var names per mode — light on <code>:root</code>, dark on
+          <code>.dark</code> — mirroring the file's original two-block shape. This keeps the diff legible and the
+          theme mechanism identical to before (next-themes <code>attribute="class"</code>, <code>defaultTheme</code>
+          and <code>system</code> retained). <code>--radius</code> drops to <code>0.5rem</code> (technical scale);
+          cards get an explicit 14px in P1. The color vocabulary for downstream phases:
+          <code>text-ink</code> (hero/headings, 100%), <code>text-foreground</code> (body, 90%),
+          <code>text-muted-foreground</code> (labels, 60%), <code>text-faint</code> (tertiary, 40%),
+          <code>bg-primary</code>/<code>text-primary-foreground</code> (greyscale fill),
+          <code>text/border/bg-destructive</code> (the one red), <code>text-success</code>/<code>text-warning</code>
+          (value text only).</p>
+      </div>
+
+      <div class="note note--decision">
+        <span class="kind">Decision</span>
+        <span class="title"><span class="phase-tag">P0</span>next/font variable names are font-specific, not <code>--font-sans</code> directly</span>
+        <p>To avoid a circular <code>--font-sans: var(--font-sans)</code> in Tailwind v4's <code>@theme inline</code>,
+          next/font injects <code>--font-space-grotesk</code> / <code>--font-space-mono</code> / <code>--font-doto</code>,
+          and <code>@theme inline</code> chains <code>--font-sans</code>/<code>--font-mono</code>/<code>--font-display</code>
+          to those (with fallbacks). The mockup vocabulary alias <code>--font-ui</code> is also defined
+          (<code>= var(--font-sans)</code>) so any ported Nothing class keeps resolving.</p>
+      </div>
+
+      <div class="note note--decision">
+        <span class="kind">Decision</span>
+        <span class="title"><span class="phase-tag">P0</span>Nothing component classes become React components, not global CSS classes</span>
+        <p>The mockups use generic class names (<code>.card</code>, <code>.grid</code>, <code>.label</code>,
+          <code>.table</code>, <code>.row</code>). Dumping those into <code>globals.css</code> would collide with
+          Tailwind utilities (notably <code>.grid</code>) and arbitrary <code>className</code>s. Instead the app
+          keeps using re-skinned shadcn primitives (Button, Card, Badge, …) plus a small set of new, clearly-named
+          React components for Nothing-specific idioms (<code>&lt;SegmentedBar&gt;</code>, <code>&lt;Metric&gt;</code>,
+          <code>&lt;StatusText&gt;</code>, <code>&lt;LoadingState&gt;</code>, <code>&lt;PeriodNav&gt;</code>). Only
+          non-colliding type/utility helpers are added globally. This is the idiomatic React/Tailwind path and
+          keeps the mockup look without the collision risk.</p>
+      </div>
+
+      <div class="note note--decision">
+        <span class="kind">Decision</span>
+        <span class="title"><span class="phase-tag">P3</span>Stacked bar charts: cap at top-4 + "Other" with a monotonic grey ramp + separators</span>
+        <p>Greyscale has only ~4–5 perceptually-distinct steps, so the Claude console's stacked daily-spend
+          charts (by workspace and by user) were illegible once my P0 swap replaced their spectral palette with
+          greys — 8–9 stacked grey segments blur together. Fix (in response to review feedback): fold all but the
+          top 4 ranks into an aggregated <strong>"Other"</strong> (≤5 segments), colour them in <em>rank order</em>
+          along a single monotonic ramp <code>--chart-1…--chart-5</code> (no repeats, so the legend reads as a
+          dark→light gradient), and draw a <strong>1px <code>--card</code> separator</strong> stroke on each
+          segment so adjacent tones keep crisp edges. Full per-row precision stays in the tooltip + the
+          workspace/user list below. The "Use workspace colors" toggle still switches to per-workspace hues for
+          users who need to track many specific workspaces. Ranked (non-stacked) bars like "Top 10 users" keep the
+          grey ramp as-is — separated, axis-labelled bars don't suffer the adjacency problem.</p>
+      </div>
+    </section>
+
+    <!-- ===================================================================== -->
+    <section id="deviations">
+      <div class="section-head"><span class="label">02</span><h2 class="heading">Deviations</h2></div>
+      <p class="prose">Intentional departures from the spec/plan, with rationale.</p>
+
+      <div class="note note--deviation">
+        <span class="kind">Deviation</span>
+        <span class="title"><span class="phase-tag">P2</span>Sonner kept as a flattened transitional toast; full 183-site removal staged</span>
+        <p>The plan bans toasts and removes Sonner, replacing all ~183 <code>toast.*</code> sites with inline
+          <code>&lt;StatusText&gt;</code>. The inline primitive + <code>useInlineStatus</code> hook are built and
+          adopted on migrated surfaces. But removing the global <code>&lt;Toaster/&gt;</code> while 183 call sites
+          remain turns them into silent no-ops (lost success/error + lost screen-reader announcements) — a
+          regression that can't be safely verified across 41 files in one pass. So the global Toaster stays
+          mounted, <strong>re-skinned to the Nothing look</strong> (flat, no shadow, Space Mono, monochrome
+          surface, status color on text only, red errors), and toast→inline conversion proceeds incrementally on
+          key forms. Net: feedback never breaks and looks on-system; finishing the long tail of conversions +
+          deleting Sonner is tracked as remaining work (P5 grep gate will still flag residual <code>toast.*</code>).</p>
+      </div>
+
+      <div class="note note--deviation">
+        <span class="kind">Deviation</span>
+        <span class="title"><span class="phase-tag">P2</span>Simplified shell: fixed rail + mobile drawer, no collapsible/Cmd+B/cookie</span>
+        <p>The plan keeps the shadcn <code>SidebarProvider</code> machinery (collapsible rail, Cmd+B, cookie
+          persistence, mobile Sheet) and re-skins it. I replaced it with a plain CSS-grid <code>.app</code> +
+          a self-contained responsive sidebar: a fixed 248px desktop rail and a lightweight mobile drawer
+          (state + backdrop). The Nothing design has a fixed rail (no collapse), so the collapsible/keyboard/cookie
+          features aren't part of the target; dropping them removes a dependency on the large <code>sidebar.tsx</code>
+          and keeps the shell legible. <code>sidebar.tsx</code> remains in the repo (unused by the shell).
+          Nav is <strong>text-only</strong> (Lucide row icons dropped) to match the mockups' text nav.</p>
+      </div>
+
+      <div class="note note--deviation">
+        <span class="kind">Deviation</span>
+        <span class="title"><span class="phase-tag">P0</span>Light-mode status colors darkened for WCAG, unlike the mockups</span>
+        <p>The mockups (and <code>nothing.css</code>) use the same <code>--success #4a9e5c</code> /
+          <code>--warning #d4a843</code> in both modes. As <em>value text</em> on the light canvas those fail the
+          plan's own P5 a11y gate (≥4.5:1): amber <code>#d4a843</code> on <code>#f5f5f5</code> is ~1.9:1 and the
+          green is ~3:1. Since the spec mandates status colors be value-text-only AND demands ≥4.5:1, I kept the
+          spec values in dark mode (they pass on black) and darkened the light-mode values to
+          <code>--success #2e7d32</code> and <code>--warning #835f00</code>. Trade: light-mode warning reads
+          more olive/brown than the mockup amber; revert if you prefer literal mockup hues over the a11y gate.</p>
+        <p><strong>Measured (verified in-browser P5):</strong> light — foreground 15.96, destructive 4.76,
+          success 4.70, warning 5.35 on the <code>#f5f5f5</code> canvas (all ≥4.5 ✓; warning was bumped from
+          <code>#946c00</code>=4.37 to <code>#835f00</code>=5.35 to clear the canvas). dark — foreground 17.14,
+          success 6.34, warning 9.48 (✓). The brand red <code>#d71921</code> is <strong>4.05 on #000 / 3.64 on
+          #111</strong>: it clears WCAG AA for graphical/UI (≥3:1) and large text, and matches the value the spec's
+          own contrast table documents as accepted, but is just under the 4.5 normal-text bar on the dark canvas.
+          Per the spec's explicit "use #d71921 verbatim in both modes" brand decision, the red is kept as-is
+          (the redesign uses it mostly for borders/fills/large numbers + uppercase mono labels); Lighthouse
+          accessibility scored <strong>98</strong> on the audited route.</p>
+      </div>
+    </section>
+
+    <!-- ===================================================================== -->
+    <section id="tradeoffs">
+      <div class="section-head"><span class="label">03</span><h2 class="heading">Tradeoffs</h2></div>
+      <p class="prose">Alternatives considered and why the chosen path won.</p>
+
+      <div class="note note--tradeoff">
+        <span class="kind">Tradeoff</span>
+        <span class="title"><span class="phase-tag">P1</span>Parallel agent fan-out to re-skin primitives vs hand-editing all 22</span>
+        <p>The 4 defining primitives (button/badge/card/input) + the net-new shared helpers were hand-built for
+          control; the remaining 18 were re-skinned by one agent each in a single parallel workflow (each owns one
+          file, so no write conflicts), against a shared "Nothing primitive contract" + per-file spec. Faster and
+          consistent, at the cost of a review pass — caught by the build/lint gate and a browser spot-check.</p>
+      </div>
+
+      <div class="note note--tradeoff">
+        <span class="kind">Tradeoff</span>
+        <span class="title"><span class="phase-tag">P3</span>Re-theme Recharts in place vs rebuilding every chart as CSS/SVG</span>
+        <p>Per the plan's P3 gate: re-theme the shared <code>ui/chart.tsx</code> wrapper once (mono axes, no legend
+          boxes, shadowless tooltip, monochrome ramp) and keep Recharts for line/bar (preserves
+          tooltips/responsiveness/accessibility), rebuilding only the idioms Nothing forbids (donut → segmented
+          proportion; area fill → line). The signature segmented bar becomes a reusable React
+          <code>&lt;SegmentedBar&gt;</code> replacing the continuous SpendProgressBar / multi-marker bar.</p>
+      </div>
+    </section>
+
+    <!-- ===================================================================== -->
+    <section id="open">
+      <div class="section-head"><span class="label">04</span><h2 class="heading">Open questions</h2></div>
+      <p class="prose">Things worth a confirm or a later revision.</p>
+
+      <div class="note note--open">
+        <span class="kind">Open question</span>
+        <span class="title">"One red per screen" on dense admin screens</span>
+        <p>The admin dashboard legitimately surfaces several reds at once: the active-nav bar, the budget-at-risk
+          card (border + icon + tag), and failed-invoice dots in the activity timeline. The plan's mitigation is
+          to demote the active-nav / active-row indicator to neutral <code>--ink</code> when an error/at-risk
+          state is present on that view. Confirm you want that auto-demotion logic wired globally, or whether a
+          per-screen judgement (e.g. dashboard keeps the budget red as the one moment, nav goes neutral) is
+          enough. Currently the nav active bar is always red.</p>
+      </div>
+
+      <div class="note note--open">
+        <span class="kind">Open question</span>
+        <span class="title">Theme toggle placement — sidebar footer vs page topbar</span>
+        <p>The mockups put the Dark/Light toggle in each page's top-right action area. Because the 40 routes
+          already render their own page headers (no shared Topbar contract was force-adopted), I placed the
+          segmented toggle in the sidebar footer instead (always visible, no per-page change). If you want it in
+          the topbar to match the mockups exactly, that requires a shared <code>&lt;Topbar&gt;</code> the pages
+          adopt — a larger P4 change.</p>
+      </div>
+    </section>
+
+    <!-- ===================================================================== -->
+    <section id="remaining">
+      <div class="section-head"><span class="label">05</span><h2 class="heading">Remaining work (not yet done)</h2></div>
+      <p class="prose">What this pass delivered: the full design system (P0 tokens+fonts, P1 every primitive/overlay,
+        P2 shell, P3 shared tables + chart wrapper + segmented bar + loaders + monochrome charts), verified in a
+        browser on an isolated Neon branch in both modes. Because the app is built on shared components, the
+        token + primitive + shell + table/chart re-skin already propagates the Nothing look to essentially every
+        route. The items below are the scoped follow-ups that remain.</p>
+      <ul class="bullets prose">
+        <li><strong>Page-level literal color sweep — DONE.</strong> The 23-file workflow first hit the account
+          session limit; on re-run it completed. All scattered literal Tailwind tints now map to value-text-only
+          Nothing tokens (<code>text-emerald/amber/green-*</code> → <code>text-success</code>/<code>text-warning</code>,
+          <code>bg-amber-500</code> fills → <code>bg-warning</code>, green success callouts → token borders on
+          transparent bg, chart hex series → greyscale chart tokens), routine month-over-month deltas neutralized,
+          and the last <code>animate-pulse</code> placeholders → <code>&lt;LoadingState&gt;</code>. Anti-pattern
+          grep gate now: <strong>0</strong> literal rainbow classes, <strong>0</strong> <code>animate-pulse</code>,
+          <strong>0</strong> <code>&lt;Skeleton&gt;</code>, <strong>0</strong> <code>shadow-*</code> on ui primitives.</li>
+        <li><strong>Full toast removal — DONE.</strong> All 38 <code>toast.*</code> components converted to inline
+          <code>&lt;StatusText&gt;</code>/<code>useInlineStatus</code> (success-on-navigate dropped, errors kept
+          inline, aria-live preserved); the global <code>&lt;Toaster/&gt;</code> was removed and
+          <code>sonner.tsx</code> deleted. Zero <code>toast.*</code> / sonner imports remain.</li>
+        <li><strong>Mono-caps form labels — DONE.</strong> <code>FormLabel</code> now renders the Space Mono
+          ALL-CAPS instrument label across every RHF form (login shows EMAIL/PASSWORD); plain <code>&lt;Label&gt;</code>
+          stays sentence-case for inline checkbox/switch labels.</li>
+        <li><strong>Native <code>confirm()</code> → modal — DONE.</strong> Both call sites (request cancel,
+          ingestion-filter delete) now use the Nothing <code>AlertDialog</code>. Zero <code>confirm()</code> remain.</li>
+        <li><strong>Light-mode contrast / a11y — DONE.</strong> Ratios verified in-browser (see the status-color
+          deviation note); Lighthouse accessibility 98. The dark-mode brand red sits at the spec's documented
+          4.05:1 (graphical/large-text AA) by deliberate brand decision.</li>
+        <li><strong>Still open (low value / deferred):</strong> the two single-date pickers still use the
+          Popover + react-day-picker calendar — but it was re-skinned to monochrome tokens in P1, so it's a
+          documented-acceptable exception rather than an anti-pattern; converting to a Space-Mono date input is
+          optional polish. Hero <code>Doto</code> display moments and the per-screen "one red" auto-demotion
+          (see Open questions) are the remaining purely-aesthetic refinements.</li>
+      </ul>
+    </section>
+
+    <div class="divider"></div>
+    <p class="caption t-disabled">AI Developer Hub · Spec 028 — Nothing Design Redesign · Implementation Notes ·
+      Styled with the Nothing design system (tokens only). Dark default; flip the toggle top-right.</p>
+  </main>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/implementation-plan.html b/specs/028-nothing-design-redesign/implementation-plan.html
new file mode 100644
index 00000000..43294635
--- /dev/null
+++ b/specs/028-nothing-design-redesign/implementation-plan.html
@@ -0,0 +1,977 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Nothing Redesign · Implementation Plan</title>
+  <link rel="stylesheet" href="./mockups/styles/nothing.css" />
+  <script src="./mockups/styles/theme.js"></script>
+  <style>
+    /* =========================================================================
+       SCOPED DOCUMENT STYLES — tokens only. No hardcoded hex/rgb, no shadows,
+       no gradients in chrome. This document eats our own dog food: it IS a
+       Nothing-styled artifact.
+
+       This document eats its own dog food: it IS a Nothing-styled artifact that
+       links nothing.css verbatim, so --accent is the stock Nothing red #d71921 —
+       the accent this plan KEEPS. The only additions below are local aliases the
+       doc's own rules reference; per the confirmed decision they all resolve to
+       that same #d71921 red (errors share the accent — the Nothing default — so
+       there is no lime and no darkened light-mode variant).
+       ========================================================================= */
+    :root {
+      /* Accent stays the stock Nothing red inherited from nothing.css. These
+         aliases resolve to the same red so the doc's own rules keep resolving. */
+      --accent-strong: var(--accent);
+      --danger: var(--accent);
+      --danger-subtle: var(--accent-subtle);
+    }
+    /* Selection is the red accent fill with black text — passes in both modes. */
+    ::selection { background: var(--accent); color: var(--black); }
+
+    /* ----- document layout: sticky TOC nav + centered content column ----- */
+    .doc {
+      display: grid;
+      grid-template-columns: var(--sidebar-w) 1fr;
+      min-height: 100vh;
+      align-items: start;
+    }
+    @media (max-width: 980px) {
+      .doc { grid-template-columns: 1fr; }
+      .doc-nav { display: none; }
+    }
+
+    .doc-nav {
+      position: sticky; top: 0; align-self: start;
+      height: 100vh; overflow-y: auto;
+      border-right: 1px solid var(--border);
+      padding: var(--space-xl) var(--space-lg);
+      background: var(--black);
+    }
+    .doc-nav .nav { gap: 0; }
+    .doc-nav .nav-item { padding: 8px var(--space-sm); }
+    .doc-nav .nav-num { color: var(--text-disabled); margin-right: 8px; }
+
+    .doc-main {
+      min-width: 0;
+      padding: var(--space-2xl) var(--space-2xl) var(--space-4xl);
+      max-width: 960px;
+      margin: 0 auto;
+    }
+
+    /* theme toggle pinned top-right, above the content column */
+    .doc-topbar {
+      display: flex; align-items: flex-start; justify-content: space-between;
+      gap: var(--space-lg); margin-bottom: var(--space-2xl);
+    }
+
+    /* ----- prose rhythm ----- */
+    .doc-main h2 { scroll-margin-top: var(--space-lg); }
+    .doc-main h3 { scroll-margin-top: var(--space-lg); }
+    section { margin-top: var(--space-3xl); }
+    section:first-of-type { margin-top: var(--space-xl); }
+    .prose p { font-family: var(--font-ui); font-size: var(--body); color: var(--text-primary); line-height: 1.6; margin: var(--space-md) 0; max-width: 72ch; }
+    .prose ul.bullets { margin: var(--space-md) 0; padding-left: var(--space-lg); list-style: disc; max-width: 72ch; }
+    .prose ul.bullets li { font-family: var(--font-ui); font-size: var(--body-sm); color: var(--text-primary); line-height: 1.6; margin: 6px 0; }
+    .prose ul.bullets li::marker { color: var(--text-disabled); }
+    .lead { font-family: var(--font-ui); font-size: var(--subheading); color: var(--text-secondary); line-height: 1.5; max-width: 72ch; }
+
+    .section-head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-md); }
+    .section-head .heading { margin: 0; }
+
+    /* ----- code/token chips ----- */
+    code, .code {
+      font-family: var(--font-mono); font-size: var(--caption);
+      background: var(--surface-raised); border: 1px solid var(--border);
+      border-radius: var(--radius-tech); padding: 2px 6px; color: var(--text-display);
+    }
+
+    /* ----- swatches for color decisions ----- */
+    .swatch-row { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-md) 0; }
+    .swatch-card { display: flex; align-items: center; gap: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-compact); padding: var(--space-sm) var(--space-md); }
+    .swatch { width: 28px; height: 28px; border-radius: var(--radius-tech); border: 1px solid var(--border-visible); flex-shrink: 0; }
+    .sw-accent { background: var(--accent); }
+    .sw-accent-strong { background: var(--accent-strong); }
+    .sw-danger { background: var(--danger); }
+    .sw-success { background: var(--success); }
+    .sw-warning { background: var(--warning); }
+    .sw-black { background: var(--black); }
+    .sw-surface { background: var(--surface); }
+    .sw-surface-raised { background: var(--surface-raised); }
+    .sw-text-display { background: var(--text-display); }
+    .swatch-meta { display: flex; flex-direction: column; gap: 2px; }
+    .swatch-meta .nm { font-family: var(--font-mono); font-size: var(--caption); color: var(--text-display); letter-spacing: 0.04em; }
+    .swatch-meta .hx { font-family: var(--font-mono); font-size: var(--label); color: var(--text-secondary); }
+
+    /* ----- tables (build on .table, add wrapping for dense docs) ----- */
+    .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-card); overflow-x: auto; margin: var(--space-md) 0; }
+    .table-wrap .table { min-width: 760px; }
+    .table-wrap .table thead th { padding: var(--space-md) 16px; background: var(--surface); position: sticky; top: 0; }
+    .table-wrap .table tbody td { font-family: var(--font-ui); font-size: var(--body-sm); line-height: 1.5; color: var(--text-primary); vertical-align: top; }
+    .table-wrap .table tbody td.mono { font-family: var(--font-mono); font-size: var(--caption); color: var(--text-secondary); }
+    .table-wrap .table tbody td.mono.path { color: var(--text-primary); }
+    .table-wrap .table tbody td a { color: var(--accent-strong); border-bottom: 1px solid var(--border-visible); }
+    [data-theme="light"] .table-wrap .table tbody td a { color: var(--accent-strong); }
+    html:not([data-theme="light"]) .table-wrap .table tbody td a { color: var(--accent); }
+    .table-wrap .table tbody td a:hover { border-bottom-color: currentColor; }
+
+    /* effort pills reuse .tag styling */
+    .eff { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--border-visible); border-radius: var(--radius-tech); white-space: nowrap; color: var(--text-secondary); }
+    .eff-s { border-color: var(--success); color: var(--success); }
+    .eff-m { border-color: var(--border-visible); color: var(--text-primary); }
+    .eff-l { border-color: var(--warning); color: var(--warning); }
+    .eff-xl { border-color: var(--accent); color: var(--accent); }
+    html[data-theme="light"] .eff-xl { color: var(--accent-strong); border-color: var(--accent-strong); }
+
+    .sev { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; text-transform: uppercase; }
+    .sev-high { color: var(--danger); }
+    .sev-medium { color: var(--warning); }
+    .sev-low { color: var(--text-secondary); }
+
+    /* callouts */
+    .callout { border: 1px solid var(--border-visible); border-left: 2px solid var(--accent); border-radius: var(--radius-compact); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; }
+    .callout--danger { border-left-color: var(--danger); }
+    .callout--warn { border-left-color: var(--warning); }
+    .callout .callout-title { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-sm); }
+    .callout p { margin: var(--space-sm) 0; font-size: var(--body-sm); }
+
+    /* decision badge */
+    .decide { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 3px 10px; }
+    html[data-theme="light"] .decide { color: var(--accent-strong); border-color: var(--accent-strong); }
+
+    /* phase cards */
+    .phase { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-lg); margin: var(--space-md) 0; }
+    .phase-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; }
+    .phase-id { font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.1em; color: var(--accent); }
+    html[data-theme="light"] .phase-id { color: var(--accent-strong); }
+    .phase dl { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-sm) var(--space-md); margin-top: var(--space-md); }
+    .phase dt { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
+    .phase dd { font-family: var(--font-ui); font-size: var(--body-sm); color: var(--text-primary); line-height: 1.55; }
+    .phase dd code { font-size: var(--label); }
+
+    /* mockup link inline pill */
+    .mock-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border-visible); border-radius: var(--radius-pill); padding: 3px 10px; color: var(--text-secondary); }
+    .mock-link:hover { color: var(--accent); border-color: var(--accent); }
+    html[data-theme="light"] .mock-link:hover { color: var(--accent-strong); border-color: var(--accent-strong); }
+    .mock-link::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
+
+    .mock-strip { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0; }
+
+    .meta-line { font-family: var(--font-mono); font-size: var(--caption); color: var(--text-disabled); letter-spacing: 0.04em; }
+
+    .num { font-family: var(--font-mono); }
+
+    /* contrast math mini table */
+    .contrast-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: var(--space-md) 0; }
+    @media (min-width: 760px) { .contrast-grid { grid-template-columns: repeat(2, 1fr); } }
+  </style>
+</head>
+<body>
+  <div class="doc">
+    <!-- ============================ TOC NAV ============================ -->
+    <nav class="doc-nav" aria-label="Table of contents">
+      <div class="brand">
+        <span class="dot"></span>
+        <span class="wordmark">AI·HUB · PLAN</span>
+      </div>
+      <div class="nav">
+        <a class="nav-item" href="#overview"><span class="nav-num">00</span> Overview &amp; goals</a>
+        <a class="nav-item" href="#foundation"><span class="nav-num">01</span> Design foundation</a>
+        <a class="nav-item" href="#components"><span class="nav-num">02</span> Component matrix</a>
+        <a class="nav-item" href="#antipatterns"><span class="nav-num">03</span> Anti-patterns</a>
+        <a class="nav-item" href="#shell"><span class="nav-num">04</span> App shell &amp; nav</a>
+        <a class="nav-item" href="#charts"><span class="nav-num">05</span> Charts &amp; data viz</a>
+        <a class="nav-item" href="#overlays"><span class="nav-num">06</span> Dialogs &amp; overlays</a>
+        <a class="nav-item" href="#pages"><span class="nav-num">07</span> Page-by-page</a>
+        <a class="nav-item" href="#phasing"><span class="nav-num">08</span> Phasing &amp; sequence</a>
+        <a class="nav-item" href="#risks"><span class="nav-num">09</span> Risks</a>
+        <a class="nav-item" href="#testing"><span class="nav-num">10</span> Testing</a>
+        <a class="nav-item" href="#rollout"><span class="nav-num">11</span> Rollout &amp; effort</a>
+      </div>
+      <div class="sidebar-footer">
+        <span class="caption">SPEC 028 · NOTHING REDESIGN</span>
+        <span class="caption t-disabled">12 MOCKUPS · 14 SUBSYSTEMS</span>
+      </div>
+    </nav>
+
+    <!-- ============================ CONTENT ============================ -->
+    <main class="doc-main">
+      <div class="doc-topbar">
+        <div>
+          <span class="label eyebrow">SPEC 028 · IMPLEMENTATION PLAN</span>
+          <h1 class="display-md" style="margin-top: var(--space-sm);">Nothing Design Redesign</h1>
+        </div>
+        <div class="theme-toggle" role="group" aria-label="Theme">
+          <button data-theme="dark" class="active">Dark</button>
+          <button data-theme="light">Light</button>
+        </div>
+      </div>
+
+      <p class="lead">Migrate the AI Developer Hub from a stock shadcn/ui oklch system to one coherent
+        Nothing design system &mdash; monochrome canvas, a single red interrupt, Space Grotesk /
+        Space Mono / Doto, flat surfaces, inline status text. This document is itself styled with
+        <code>nothing.css</code>: we eat our own dog food.</p>
+
+      <!-- =================================================================
+           1. OVERVIEW & GOALS
+           ================================================================= -->
+      <section id="overview">
+        <div class="section-head">
+          <span class="label">00</span>
+          <h2 class="heading">Overview &amp; goals</h2>
+        </div>
+
+        <p class="prose">The redesign is a presentation-layer migration of ~40 routes and 14 subsystems
+          to the Nothing design language. No server actions, data shapes, or business logic change. The
+          dominant cost drivers are the toast removal (~183 <code>toast.*</code> call sites), the
+          ~20 Recharts components, and the page-by-page Card&rarr;<code>.card</code> /
+          status&rarr;<code>.tag</code> / form&rarr;<code>.field</code> conversion across every route.</p>
+
+        <h3 class="subheading" style="margin-top: var(--space-xl);">Why migrate</h3>
+        <ul class="bullets prose">
+          <li>One coherent, intentional system in both dark and light, instead of stock shadcn defaults that drift per screen.</li>
+          <li>Instrument-panel hierarchy: greyscale carries the structure; color is reserved as an interrupt, not decoration.</li>
+          <li>Remove accessibility/UX anti-patterns already proven present in the codebase: toast-only feedback, skeleton shimmer, red alert banners, calendar popovers, multi-hue charts.</li>
+          <li>Retire the drifting green: the app's lime <code>--primary</code> <code>oklch(0.78 0.19 120)</code> becomes greyscale fills, and the single Nothing interrupt reuses the red the app <em>already</em> ships as <code>--destructive</code> &mdash; so the accent isn't a new color, just a re-scoping of existing tokens.</li>
+        </ul>
+
+        <h3 class="subheading" style="margin-top: var(--space-xl);">Current state</h3>
+        <ul class="bullets prose">
+          <li><strong>Tokens:</strong> oklch shadcn "new-york" semantic vars in <code>src/app/globals.css</code>; light is the <code>:root</code> default, dark is the <code>.dark</code> override via next-themes <code>attribute="class"</code>, <code>defaultTheme="system"</code>.</li>
+          <li><strong>Accent:</strong> <code>--primary</code> = green/chartreuse, reused as <code>--ring</code>, <code>--chart-1</code>, <code>--sidebar-primary</code>. <code>--destructive</code> is a separate red.</li>
+          <li><strong>Font:</strong> Inter via <code>next/font/google</code> applied globally to <code>&lt;body&gt;</code>; no monospace data font, no display font.</li>
+          <li><strong>Feedback:</strong> Sonner <code>&lt;Toaster/&gt;</code> mounted in layout; toasts everywhere. Skeleton loaders in 15 <code>loading.tsx</code> route files. A destructive shadcn alert banner in the global layout. shadcn Sidebar shell with Lucide row icons + filled active background.</li>
+        </ul>
+
+        <h3 class="subheading" style="margin-top: var(--space-xl);">Target state</h3>
+        <ul class="bullets prose">
+          <li>One Nothing token layer in <code>globals.css</code>, re-keyed onto the existing <code>:root</code>(light)/<code>.dark</code>(dark) selectors so next-themes keeps working unchanged. shadcn semantic var names stay <em>aliased</em> to Nothing tokens so no primitive loses color.</li>
+          <li>Three-family type stack (Doto / Space Grotesk / Space Mono) via <code>next/font</code>; ALL-CAPS Space Mono labels, Space Mono numbers, Doto for 36px+ hero numbers only.</li>
+          <li>CSS-grid <code>.app</code> shell, text-nav sidebar with a 2px red active bar, topbar eyebrow + title + actions, inline <code>[SAVED]</code>/<code>[ERROR]</code> status, <code>[LOADING…]</code>, segmented bars and direct-labeled charts.</li>
+        </ul>
+
+        <div class="callout">
+          <div class="callout-title">How to read this doc &amp; the mockups</div>
+          <p>The 12 mockups demonstrate <strong>layout and hierarchy</strong> and render the final accent:
+            the stock Nothing <strong>red</strong> <code>#d71921</code>, linked from <code>nothing.css</code>
+            verbatim. The brand accent was evaluated &mdash; Unic lime <code>#A4C400</code> was considered
+            and <strong>rejected</strong> (see &sect;01) &mdash; and the decision is to keep Nothing red, so
+            the mockups already show the target. Each section links the mockup(s) that map to the screens
+            it covers.</p>
+        </div>
+
+        <div class="mock-strip">
+          <a class="mock-link" href="./mockups/dashboard.html">dashboard.html</a>
+          <a class="mock-link" href="./mockups/tools.html">tools.html</a>
+          <a class="mock-link" href="./mockups/users.html">users.html</a>
+          <a class="mock-link" href="./mockups/assignments.html">assignments.html</a>
+          <a class="mock-link" href="./mockups/requests.html">requests.html</a>
+          <a class="mock-link" href="./mockups/budget.html">budget.html</a>
+          <a class="mock-link" href="./mockups/reports.html">reports.html</a>
+          <a class="mock-link" href="./mockups/copilot.html">copilot.html</a>
+          <a class="mock-link" href="./mockups/claude.html">claude.html</a>
+          <a class="mock-link" href="./mockups/invoices.html">invoices.html</a>
+          <a class="mock-link" href="./mockups/settings.html">settings.html</a>
+          <a class="mock-link" href="./mockups/login.html">login.html</a>
+        </div>
+      </section>
+
+      <!-- =================================================================
+           2. DESIGN FOUNDATION & COLOR DECISIONS
+           ================================================================= -->
+      <section id="foundation">
+        <div class="section-head">
+          <span class="label">01</span>
+          <h2 class="heading">Design foundation &amp; color decisions</h2>
+        </div>
+
+        <p class="prose">The token layer is the foundational dependency for every other subsystem. The
+          migration re-keys the Nothing value sets onto the app's existing <code>:root</code>(light) /
+          <code>.dark</code>(dark) selectors &mdash; do <strong>not</strong> copy nothing.css's
+          <code>:root[data-theme="light"]</code> selectors verbatim. Keep the next-themes class strategy.</p>
+
+        <h3 class="subheading" style="margin-top: var(--space-xl);">Token migration map</h3>
+        <p class="prose">Every current oklch shadcn token re-points to a Nothing token (kept aliased so
+          <code>bg-background</code>, <code>text-muted-foreground</code>, etc. keep resolving).</p>
+
+        <div class="table-wrap">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Current shadcn token (oklch)</th>
+                <th>Nothing token</th>
+                <th>Notes</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr><td class="mono path">--background</td><td><code>var(--black)</code></td><td>Canvas. Dark <code>#000</code> / light <code>#F5F5F5</code>.</td></tr>
+              <tr><td class="mono path">--foreground</td><td><code>var(--text-primary)</code></td><td>Body text. <code>#e8e8e8</code> dark / <code>#1a1a1a</code> light.</td></tr>
+              <tr><td class="mono path">--card / --popover</td><td><code>var(--surface)</code> / <code>var(--surface-raised)</code></td><td>Cards &rarr; surface; dropdowns/popovers &rarr; surface-raised. No translucency (<code>bg-card/60</code> dropped).</td></tr>
+              <tr><td class="mono path">--card-foreground / --popover-foreground</td><td><code>var(--text-primary)</code></td><td>Plus add <code>--text-display</code> for titles/strong cells (shadcn lacks this).</td></tr>
+              <tr><td class="mono path">--primary</td><td><code>var(--text-display)</code> (fills) <span class="meta-line">+ <code>--accent</code> for the one interrupt</span></td><td>Primary <em>fills</em> become greyscale white/black per Nothing; red is reserved for the single per-screen interrupt. <code>--primary-foreground</code> &rarr; <code>--black</code>.</td></tr>
+              <tr><td class="mono path">--secondary</td><td><code>var(--surface-raised)</code> / transparent + 1px border</td><td>Collapse shadcn secondary(fill)+outline onto one bordered <code>.btn--secondary</code>.</td></tr>
+              <tr><td class="mono path">--muted / --muted-foreground</td><td><code>var(--surface)</code> / <code>var(--text-secondary)</code></td><td>Muted backgrounds become neutral surfaces; muted text &rarr; secondary.</td></tr>
+              <tr><td class="mono path">--accent (shadcn hover tint)</td><td><code>var(--surface-raised)</code> (neutral)</td><td><strong>Naming collision:</strong> shadcn <code>--accent</code> is a subtle hover bg, NOT the Nothing loud interrupt. Keep <code>bg-accent</code> neutral; reserve the Nothing red interrupt under a deliberately-scoped token. Audit all <code>bg-accent</code>/<code>data-[state]:bg-accent</code> usages.</td></tr>
+              <tr><td class="mono path">--destructive</td><td><code>var(--accent)</code> = <code>#D71921</code></td><td><strong>Unified</strong> with <code>--accent</code> &mdash; errors ARE the red accent (Nothing default). A <code>--danger</code> alias = <code>--accent</code> is kept only for readable code naming.</td></tr>
+              <tr><td class="mono path">--border / --input</td><td><code>var(--border)</code> / <code>var(--border-visible)</code></td><td><code>--border</code> for dividers; <code>--border-visible</code> for interactive edges/inputs.</td></tr>
+              <tr><td class="mono path">--ring</td><td><code>var(--accent)</code> (both modes)</td><td>Focus moves from 3px ring to border-color brighten; red passes in both modes, so no per-mode variant.</td></tr>
+              <tr><td class="mono path">--chart-1</td><td><code>var(--text-display)</code></td><td>chart-1 == primary today; re-derive as monochrome top series. Red reserved for over/active.</td></tr>
+              <tr><td class="mono path">--chart-2..5</td><td>greys via opacity ramp (<code>--text-secondary</code>, <code>--border-visible</code>)</td><td>Drop the multi-hue palette + duplicated 8-color spectral FALLBACK_PALETTE. <code>var(--destructive)</code> chart usages &rarr; the <code>--accent</code> red.</td></tr>
+              <tr><td class="mono path">--radius (0.625rem)</td><td><code>--radius-tech 4</code> / <code>--radius-compact 8</code> / <code>--radius-card 14</code> / <code>--radius-pill</code></td><td>Cap card radius at 14px (&le;16px rule); pills for buttons/tags.</td></tr>
+              <tr><td class="mono path">--sidebar-* (primary/accent/...)</td><td>Nothing nav tokens</td><td><code>--sidebar-primary</code> == primary today &rarr; active nav becomes <code>--text-display</code> text + 2px <code>--accent</code> left bar.</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h3 class="subheading" style="margin-top: var(--space-2xl);">Brand accent decision <span class="decide">confirmed: Nothing red</span></h3>
+        <p class="prose">The single interrupt stays the stock Nothing red <code>#D71921</code> &mdash; the
+          mockups already render it. Error and destructive states share this same red, per the Nothing
+          default "errors ARE the accent moment": no separate danger color, no per-mode variant.</p>
+
+        <div class="swatch-row">
+          <div class="swatch-card"><span class="swatch sw-accent"></span><span class="swatch-meta"><span class="nm">--accent</span><span class="hx">#D71921 · the one interrupt (also errors)</span></span></div>
+          <div class="swatch-card"><span class="swatch sw-success"></span><span class="swatch-meta"><span class="nm">--success</span><span class="hx">#4A9E5C · in-range data</span></span></div>
+          <div class="swatch-card"><span class="swatch sw-warning"></span><span class="swatch-meta"><span class="nm">--warning</span><span class="hx">#D4A843 · attention data</span></span></div>
+        </div>
+
+        <ul class="bullets prose">
+          <li><strong><code>--accent</code> = #D71921 is the single interrupt:</strong> active nav indicator (2px left bar), the one emphasis/active-state moment per screen, segmented-bar "over/active", table active-row rail, selected dropdown/command item left bar, brand dot, error/destructive surfaces, <code>::selection</code> (with <code>--black</code> text). Hold the rule: at most ONE red moment per screen.</li>
+          <li><strong>Errors share the accent:</strong> <code>btn--destructive</code>, <code>.tag--accent</code>, <code>.field.is-error</code>, <code>.error-msg</code>, <code>.status-text--err</code> and the active-tab underline all resolve to the same <code>--accent</code> red &mdash; nothing.css verbatim, nothing to decouple. (A <code>--danger</code> alias = <code>--accent</code> may be kept purely for readable code naming.)</li>
+          <li><strong>Rejected alternative &mdash; Unic lime #A4C400:</strong> brand-aligned and matches the app's current green <code>--primary</code>, but it would force a light-mode a11y workaround (lime fails ~2:1 on <code>#F5F5F5</code>, needing a darkened <code>~#4F6800</code> for any accent-as-text/border) <em>and</em> a danger-red decoupling so delete/error states don't read as lime. Rejected in favor of one color and one contrast story.</li>
+        </ul>
+
+        <h3 class="subheading" style="margin-top: var(--space-2xl);">Contrast &mdash; red passes both modes</h3>
+        <p class="prose"><code>#D71921</code> needs no per-mode variant: it clears WCAG as text and as a graphical
+          element on both canvases, and as a fill it carries contrast through white/black text. There is
+          exactly ONE accent color to verify.</p>
+
+        <div class="contrast-grid">
+          <div class="card card--raised">
+            <span class="label card-label">As text / thin border — pass</span>
+            <div class="stat-list">
+              <div class="stat-row"><span class="label">#D71921 on #F5F5F5 (light)</span><span class="value value--success">~4.76:1 · PASS</span></div>
+              <div class="stat-row"><span class="label">#D71921 on #000 (dark)</span><span class="value value--success">~4.05:1 · PASS</span></div>
+              <div class="stat-row"><span class="label">#D71921 on #111 surface</span><span class="value value--success">&ge;3:1 · graphical OK</span></div>
+            </div>
+          </div>
+          <div class="card card--raised">
+            <span class="label card-label">As fill — text carries it</span>
+            <div class="stat-list">
+              <div class="stat-row"><span class="label">#FFF text on #D71921 fill</span><span class="value value--success">~5.2:1 · PASS</span></div>
+              <div class="stat-row"><span class="label">fill vs canvas (graphical)</span><span class="value value--success">&ge;3:1 · OK</span></div>
+              <div class="stat-row"><span class="label">identical dark + light</span><span class="value value--success">no variant</span></div>
+            </div>
+          </div>
+        </div>
+
+        <ul class="bullets prose">
+          <li>Use <code>#D71921</code> <strong>verbatim in both modes</strong> for text, thin borders (2px nav bar, tab underline, table rail, <code>.tag--active</code>), fills, and strokes &mdash; no darkened light-mode variant needed.</li>
+          <li><code>--accent-subtle</code> stays an rgba of <code>#D71921</code> (already correct in nothing.css for both modes); no recompute.</li>
+          <li>Because errors share the accent, P5 verifies <strong>one</strong> accent color in light mode &mdash; no separate lime/danger contrast matrix.</li>
+          <li>Status colors (<code>--success</code> / <code>--warning</code>) stay on <strong>value text only</strong>, never on labels or backgrounds.</li>
+        </ul>
+
+        <h3 class="subheading" style="margin-top: var(--space-2xl);">Fonts</h3>
+        <p class="prose">Replace Inter with the three-family Nothing stack via <code>next/font/google</code>
+          (self-hosted, auto fallback-metrics) &mdash; <strong>not</strong> the mockup's render-blocking
+          Google <code>@import</code>.</p>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Family</th><th>Role</th><th>Loader config</th><th>Token</th></tr></thead>
+            <tbody>
+              <tr><td class="cell-strong">Space Grotesk</td><td>UI / body (new default)</td><td class="mono">weight ['300','400','500','700'], variable:'--font-sans', display:'swap', preload:true</td><td><code>--font-sans</code> (alias <code>--font-ui</code>)</td></tr>
+              <tr><td class="cell-strong">Space Mono</td><td>ALL labels + ALL numbers/data</td><td class="mono">weight ['400','700'], variable:'--font-mono', display:'swap'</td><td><code>--font-mono</code></td></tr>
+              <tr><td class="cell-strong">Doto</td><td>Hero display 36px+ ONLY</td><td class="mono">weight ['400','500','700'] (pin if variable axis unreliable), variable:'--font-display', display:'swap', preload:false</td><td><code>--font-display</code></td></tr>
+            </tbody>
+          </table>
+        </div>
+        <ul class="bullets prose">
+          <li>Register <code>--font-sans</code>/<code>--font-mono</code>/<code>--font-display</code> in <code>@theme inline</code> (Tailwind v4, no <code>tailwind.config</code>) so <code>font-sans</code>/<code>font-mono</code> utilities AND the Nothing <code>.ui</code>/<code>.mono</code>/<code>.doto</code> classes both resolve.</li>
+          <li><strong>Naming reconciliation:</strong> mockups use <code>--font-ui</code>; Tailwind expects <code>--font-sans</code>. Define both, with <code>--font-ui: var(--font-sans)</code>. Chain tokens to the next/font-injected var name (not a raw string) to preserve fallback metrics.</li>
+          <li>The 28 existing <code>font-mono</code> call sites (18 files) re-point automatically to Space Mono once the token is wired &mdash; no call-site changes, just an audit for width regressions (count badges, KPI cards, table columns).</li>
+          <li>Transactional email (<code>src/emails/invite-email.tsx</code>) cannot use next/font &mdash; document the gap; recommend it stays system-font.</li>
+        </ul>
+
+        <h3 class="subheading" style="margin-top: var(--space-2xl);">Dark/light strategy</h3>
+        <p class="prose">Keep next-themes <code>attribute="class"</code> with the <code>.dark</code> class and the
+          three states <code>light/dark/system</code>. Re-key Nothing's dark values onto <code>.dark</code>
+          and light values onto plain <code>:root</code>. The segmented theme toggle is wired to
+          <code>setTheme</code> (next-themes), <strong>not</strong> the mockup's <code>data-theme</code>/
+          <code>theme.js</code>. Decision: keep <code>system</code> as a third segment or as the default.
+          <code>suppressHydrationWarning</code> already present guards FOUC; decide whether to remove
+          <code>disableTransitionOnChange</code> for a subtle cross-fade.</p>
+      </section>
+
+      <!-- =================================================================
+           3. COMPONENT MIGRATION MATRIX
+           ================================================================= -->
+      <section id="components">
+        <div class="section-head">
+          <span class="label">02</span>
+          <h2 class="heading">Component migration matrix</h2>
+        </div>
+        <p class="prose">Re-skin the 16 shadcn primitives <strong>in place</strong> (rewrite CVA/className
+          strings; keep imports) so the ~30 consuming components keep working. Mockup references:
+          <a class="mock-link" href="./mockups/tools.html">tools.html</a>
+          <a class="mock-link" href="./mockups/settings.html">settings.html</a>
+          <a class="mock-link" href="./mockups/users.html">users.html</a>.</p>
+
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>shadcn primitive</th><th>Nothing treatment / class</th><th class="num">Effort</th><th>Notes</th></tr></thead>
+            <tbody>
+              <tr><td class="mono path">button.tsx — default (bg-primary green)</td><td><code>.btn .btn--primary</code> — <code>--text-display</code> fill, <code>--black</code> text, pill, Space Mono 13px CAPS, min-height 44px</td><td class="num"><span class="eff eff-m">M</span></td><td>Primary fill is greyscale white, NOT the accent. Add <code>btn--sm</code> (36px). Keep asChild/Slot.</td></tr>
+              <tr><td class="mono path">button.tsx — secondary / outline</td><td><code>.btn--secondary</code> — transparent, 1px <code>--border-visible</code>, hover border&rarr;text-primary</td><td class="num"><span class="eff eff-m">M</span></td><td>Collapse shadcn secondary(fill)+outline onto one bordered variant.</td></tr>
+              <tr><td class="mono path">button.tsx — ghost</td><td><code>.btn--ghost</code> + <code>.btn--icon</code> (44&times;44) for icon-only row actions</td><td class="num"><span class="eff eff-s">S</span></td><td>Table row View/Edit/More pattern.</td></tr>
+              <tr><td class="mono path">button.tsx — destructive (bg-destructive)</td><td><code>.btn--destructive</code> — transparent, 1px <code>--danger</code>, danger text, hover <code>--danger-subtle</code></td><td class="num"><span class="eff eff-m">M</span></td><td>Outline (1px), not solid fill; resolves to the shared <code>--accent</code> red (the <code>--danger</code> alias).</td></tr>
+              <tr><td class="mono path">button.tsx — link</td><td>Inline text link in <code>--interactive</code>, underline-offset hover</td><td class="num"><span class="eff eff-s">S</span></td><td>Not a <code>.btn</code>; <code>--interactive</code> is for tappable text.</td></tr>
+              <tr><td class="mono path">button.tsx — size scale (xs/sm/lg/icon-*)</td><td>Reduce to default(44) + <code>--sm</code>(36) + <code>--icon</code>; map xs&rarr;sm, lg&rarr;default</td><td class="num"><span class="eff eff-m">M</span></td><td>Audit dense table callers; sanction a 32px <code>.icon-btn</code> exception (users.html) vs 44px.</td></tr>
+              <tr><td class="mono path">card.tsx (rounded-xl, shadow-sm)</td><td><code>.card</code> / <code>.card--raised</code> / <code>.card--bare</code> / <code>.card--pad-lg</code> — 14px radius, no shadow</td><td class="num"><span class="eff eff-s">S</span></td><td>CardTitle&rarr;<code>.heading</code>; CardDescription&rarr;<code>.caption t-secondary</code>.</td></tr>
+              <tr><td class="mono path">input.tsx (full border box)</td><td><code>.field &gt; label.label + .control</code> (underline) or <code>.field--boxed</code></td><td class="num"><span class="eff eff-m">M</span></td><td>Default is underline; label ALL-CAPS above; input text Space Mono. Error: <code>.is-error</code> + <code>.error-msg</code>.</td></tr>
+              <tr><td class="mono path">textarea.tsx</td><td><code>.control</code> on a textarea; keep field-sizing-content</td><td class="num"><span class="eff eff-s">S</span></td><td>No dedicated class; boxed may read better for multi-line.</td></tr>
+              <tr><td class="mono path">label.tsx (text-sm font-medium)</td><td><code>.label</code> (Space Mono 11px CAPS 0.1em) for field captions; sentence-case for inline checkbox/switch labels</td><td class="num"><span class="eff eff-s">S</span></td><td>Two registers: instrument label vs body label.</td></tr>
+              <tr><td class="mono path">checkbox.tsx (bg-primary checked)</td><td>Square, 4px radius, 1px <code>--border-visible</code>; checked &rarr; <code>--text-display</code> fill + <code>--black</code> check</td><td class="num"><span class="eff eff-m">M</span></td><td>NEW pattern (no nothing.css class). Greyscale, NOT the accent. Keep Lucide CheckIcon.</td></tr>
+              <tr><td class="mono path">switch.tsx (bg-primary checked)</td><td><code>.switch</code> / <code>.switch.on</code> — track <code>--text-display</code> on, thumb <code>--black</code></td><td class="num"><span class="eff eff-s">S</span></td><td>Greyscale, NOT the accent. Ensure &ge;44px hit area.</td></tr>
+              <tr><td class="mono path">select.tsx (trigger + content shadow-md)</td><td>Trigger = <code>.btn--secondary --sm</code> or <code>.field .control</code>; content = surface-raised, 8px, 44px items, left 2px accent bar, NO shadow</td><td class="num"><span class="eff eff-l">L</span></td><td>Biggest restyle: drop zoom/slide; selected indicator becomes a left accent bar, not a right CheckIcon.</td></tr>
+              <tr><td class="mono path">badge.tsx (filled pill chips)</td><td><code>.tag</code> (+ <code>--success</code>/<code>--warning</code>/<code>--accent</code>/<code>--active</code>/<code>--tech</code>) — border-only, optional <code>.led</code> dot</td><td class="num"><span class="eff eff-m">M</span></td><td>Core inversion: fill&rarr;border. default&rarr;<code>--active</code>, destructive&rarr;<code>--accent</code>(danger). Add success/warning variants.</td></tr>
+              <tr><td class="mono path">separator.tsx</td><td><code>.divider</code> (1px <code>--border</code>); vertical keeps w-px</td><td class="num"><span class="eff eff-s">S</span></td><td>Near 1:1.</td></tr>
+              <tr><td class="mono path">tooltip.tsx (dark bubble + zoom/slide)</td><td>Restyle: surface-raised, 1px border-visible, Space Mono caption, opacity-fade only (drop zoom/slide/scale)</td><td class="num"><span class="eff eff-m">M</span></td><td>Nothing prefers inline labels. Decide whether to retain hover tooltips at all; audit <code>title=</code> icon buttons.</td></tr>
+              <tr><td class="mono path">tabs.tsx (segmented pill + line variant)</td><td><code>.tabs &gt; .tab(.active)</code> text tabs; in-content tabs use NEUTRAL underline; segmented filters &rarr; <code>.segmented</code></td><td class="num"><span class="eff eff-m">M</span></td><td>settings.html overrides active underline to <code>--border-visible</code> so accent stays the single interrupt; only nav is accent.</td></tr>
+              <tr><td class="mono path">table.tsx (hover bg-muted)</td><td><code>.table</code> — label headers + border-visible; <code>--border</code> dividers; <code>.num</code> mono right; <code>.cell-strong</code> first col; <code>.is-active</code> = surface-raised + 2px left accent</td><td class="num"><span class="eff eff-l">L</span></td><td>No zebra. Touches TanStack column defs in consumers — coordinate with tables work.</td></tr>
+              <tr><td class="mono path">form.tsx (text-destructive messages)</td><td>FormLabel&rarr;<code>.label</code>; FormDescription&rarr;<code>.caption t-secondary</code>; FormMessage&rarr;<code>.error-msg</code> / <code>.field.is-error</code></td><td class="num"><span class="eff eff-m">M</span></td><td>Error text points at <code>--danger</code> (= the <code>--accent</code> red). Logic unchanged.</td></tr>
+              <tr><td class="mono path">calendar.tsx (react-day-picker popover)</td><td>For period selection &rarr; <code>.period-nav</code> linear stepper. Restyle DayPicker to tokens only for true arbitrary-date pickers</td><td class="num"><span class="eff eff-l">L</span></td><td>Largest semantic shift; calendar effectively deprecated for month/period navigation.</td></tr>
+            </tbody>
+          </table>
+        </div>
+        <p class="prose">Foundational fonts/radii also flow through here: Inter&rarr;Space Grotesk/Mono/Doto;
+          <code>--radius</code> 0.625rem &rarr; Nothing 4/8/14/pill; sonner Toaster removal &rarr; inline
+          <code>.status-text</code>. All covered as cross-cutting items in &sect;03.</p>
+      </section>
+
+      <!-- =================================================================
+           4. ANTI-PATTERNS TO RESOLVE
+           ================================================================= -->
+      <section id="antipatterns">
+        <div class="section-head">
+          <span class="label">03</span>
+          <h2 class="heading">Anti-patterns to resolve</h2>
+        </div>
+        <p class="prose">Four Nothing violations, all confirmed in real code, touch nearly every interactive
+          screen. Three of the four already have proven classes in nothing.css; the only true gap is a
+          hardware-style segmented spinner (must be authored, respecting <code>prefers-reduced-motion</code>).</p>
+
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Anti-pattern</th><th>Where it lives</th><th>Resolution</th><th class="num">Scale</th></tr></thead>
+            <tbody>
+              <tr>
+                <td class="cell-strong">Toast popups (Sonner)</td>
+                <td class="mono">Single <code>&lt;Toaster/&gt;</code> in <code>layout.tsx:65</code> feeds 183 <code>toast.*</code> call sites / 39 files (invoice-upload 14, scheduled-jobs 12, assignment-detail 12, assignments 11, user-detail 10, budget-detail 10, github-integration 8, tool-detail 8, …)</td>
+                <td>Inline <code>[SAVED]</code>/<code>[ERROR: …]</code> via <code>.status-text</code>/<code>--ok</code>/<code>--err</code> near each trigger; build one shared <code>&lt;StatusText&gt;</code>/<code>useInlineStatus</code> with <code>aria-live="polite"</code>; remove the global Toaster only after the primitive exists. Bulk/multi-event outcomes get an inline summary box.</td>
+                <td class="num"><span class="eff eff-l">L</span></td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Skeleton loaders</td>
+                <td class="mono"><code>ui/skeleton.tsx</code> used 108&times; / 16 files; 15 are route <code>loading.tsx</code> (app, assignments, reports, users[/[id]], tools[/[id]], invoices, copilot[/seats,/billing,/analytics], budget[/[id]]) + sidebar SidebarMenuSkeleton + budget-report</td>
+                <td><code>[LOADING…]</code> via <code>.loading-text</code> + a NEW hardware-style segmented/dot-matrix spinner. Collapse the 15 near-identical grids to a shared <code>&lt;LoadingState label/&gt;</code>. Drop Card scaffolds.</td>
+                <td class="num"><span class="eff eff-m">M</span></td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Alert banner (red)</td>
+                <td class="mono"><code>alert-banner.tsx</code> (shadcn Alert variant=destructive, AlertTriangle) at <code>layout.tsx:58</code>; + ~8 other <code>&lt;Alert&gt;</code> consumers (api-preview, cost-tracking, sync/ingestion tables, setup/login forms)</td>
+                <td>Flat inline status box: 1px border (<code>--danger</code> critical / <code>--warning</code> approaching) on BORDER + value text only, never a background fill; <code>[ X ]</code> ghost dismiss; <code>.stat-row</code> utilization rows. Keep localStorage fingerprint + aria-live.</td>
+                <td class="num"><span class="eff eff-m">M</span></td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Calendar date popovers</td>
+                <td class="mono">Exactly 2 sites: <code>assignments-client.tsx:281</code> &amp; <code>assignment-detail-client.tsx:359</code> (single "Assigned Date", future-date guard, dropdown caption)</td>
+                <td>Per components.md &sect;9 prefer linear <code>.period-nav</code> stepping; but these are single-date fields &mdash; recommend a Space Mono underline date input. Reserve <code>.period-nav</code> for genuine period browsing (dashboard/reports/claude month nav). Documented exception.</td>
+                <td class="num"><span class="eff eff-m">M</span></td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Status-as-floating-popover</td>
+                <td class="mono"><code>error-popover.tsx</code> (ingestion/sync tables)</td>
+                <td>Inline expandable <code>.status-text--err</code> (click-to-expand), no Popover.</td>
+                <td class="num"><span class="eff eff-s">S</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="callout">
+          <div class="callout-title">Error-heavy subsystem — one red, watch the count</div>
+          <p>Error/destructive is the dominant accent use here (<code>toast.error</code>, Alert destructive,
+            failed outcome badges). Under the confirmed unified-red model these all resolve to the same
+            <code>--accent</code> #D71921 &mdash; nothing to decouple. The watch-item is <em>quantity</em>:
+            a dialog or row showing an active/selected state <em>and</em> an error can surface two reds.
+            Hold "one red region per screen" &mdash; let the error be the red moment and de-emphasize the
+            active indicator when both are present.</p>
+        </div>
+      </section>
+
+      <!-- =================================================================
+           5. APP SHELL & NAVIGATION
+           ================================================================= -->
+      <section id="shell">
+        <div class="section-head">
+          <span class="label">04</span>
+          <h2 class="heading">App shell &amp; navigation</h2>
+        </div>
+        <p class="prose">Replace the shadcn <code>SidebarProvider</code>/<code>Sidebar</code>/<code>SidebarInset</code>
+          composition with the Nothing CSS-grid <code>.app</code> shell + sticky text-nav <code>.sidebar</code>.
+          The shell owns the single red accent moment per screen (active nav bar). Every mockup shares this
+          shell &mdash; see
+          <a class="mock-link" href="./mockups/dashboard.html">dashboard.html</a>
+          for the canonical rendered chrome.</p>
+
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Shell element</th><th>From (shadcn)</th><th>To (Nothing)</th><th class="num">Effort</th></tr></thead>
+            <tbody>
+              <tr><td class="cell-strong">Root grid</td><td class="mono">SidebarProvider + Sidebar + SidebarInset (flex)</td><td>CSS-grid <code>.app</code> + sticky <code>.sidebar</code> + <code>.main</code> (max-width 1280px). Keep SidebarProvider context ONLY for mobile open state &mdash; re-skin, don't delete.</td><td class="num"><span class="eff eff-l">L</span></td></tr>
+              <tr><td class="cell-strong">Wordmark</td><td class="mono">&lt;h2&gt;AI Developer Hub&lt;/h2&gt;</td><td><code>.brand</code> &gt; <code>.dot</code> (red) + <code>.wordmark</code> "AI·HUB" (Space Mono CAPS 0.14em)</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="cell-strong">Nav items</td><td class="mono">SidebarMenuButton + Lucide icons, "Navigation" group label</td><td><code>.nav &gt; a.nav-item</code> ALL-CAPS Space Mono; drop the group label; icons optional (decide monoline vs text-only). Role filtering + active-path logic carry over.</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="cell-strong">Active state</td><td class="mono">data-[active]:bg-sidebar-accent (filled)</td><td><code>.nav-item.active::before</code> 2px left bar in <code>--accent</code> + text&rarr;<code>--text-display</code>. THE single accent moment per screen (red, both modes).</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="cell-strong">User chip / footer</td><td class="mono">SidebarFooter DropdownMenu (My Profile / Sign Out)</td><td><code>.sidebar-footer &gt; .user-chip</code> (<code>.avatar</code> initials + name/role) + a <code>.nav-item</code> Sign Out. Decide where "My Profile" goes (chip&rarr;/profile, or keep a shadowless Nothing dropdown).</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="cell-strong">Topbar</td><td class="mono">&lt;header h-14 border-b&gt; with only SidebarTrigger</td><td><code>.topbar</code> &gt; {<code>.label.eyebrow</code> + <code>h1.display-md</code>} + <code>.topbar-actions</code>. Needs a shared <code>&lt;Topbar eyebrow title actions&gt;</code> contract pages consume in P4.</td><td class="num"><span class="eff eff-l">L</span></td></tr>
+              <tr><td class="cell-strong">Mobile trigger</td><td class="mono">SidebarTrigger (PanelLeftIcon)</td><td>NET-NEW: re-skinned monoline trigger at mobile breakpoint; add a <code>@media</code> rule to off-canvas the sidebar. Mockups are desktop-only &mdash; design/approve this.</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="cell-strong">Theme toggle</td><td class="mono">Sun/Moon DropdownMenu (Light/Dark/System)</td><td>Segmented <code>.theme-toggle</code> (DARK | LIGHT [| SYSTEM]) wired to next-themes <code>setTheme</code>. Reconcile 2-state mockup vs 3-state app.</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="cell-strong">Breadcrumb</td><td class="mono">shadcn Breadcrumb (budget only, ChevronRight)</td><td>Fold into the topbar <code>.eyebrow</code> as a Space Mono "SECTION / CONTEXT" trail (only 1 real consumer). Preserve aria-current / nav[aria-label=breadcrumb] if kept standalone.</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="cell-strong">Alert banner</td><td class="mono">shadcn Alert variant=destructive (red bg)</td><td>Bordered inline status box (1px <code>--danger</code> critical / <code>--warning</code> approaching), value-only color, <code>[ X ]</code> ghost dismiss. Keep aria-live + localStorage dismiss + null guards.</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="callout">
+          <div class="callout-title">In-content tabs stay neutral</div>
+          <p>The shell owns the red accent (active nav bar). Therefore in-content tab underlines and
+            progress "within-range" fills are NEUTRAL (<code>--border-visible</code> / <code>--text-display</code>)
+            &mdash; proven by the scoped overrides in settings.html, reports.html, copilot.html and claude.html.
+            This keeps "one interrupt per screen" intact.</p>
+        </div>
+      </section>
+
+      <!-- =================================================================
+           6. CHARTS & DATA VISUALIZATION
+           ================================================================= -->
+      <section id="charts">
+        <div class="section-head">
+          <span class="label">05</span>
+          <h2 class="heading">Charts &amp; data visualization</h2>
+        </div>
+        <p class="prose">~20 Recharts components + 2 Sparkline impls + 3 non-Recharts bar/gauge visuals,
+          all routed through one shared wrapper (<code>ui/chart.tsx</code>). Migrate the wrapper FIRST &mdash;
+          every chart inherits its grid/tooltip/legend/axis styling. References:
+          <a class="mock-link" href="./mockups/reports.html">reports.html</a>
+          <a class="mock-link" href="./mockups/claude.html">claude.html</a>
+          <a class="mock-link" href="./mockups/copilot.html">copilot.html</a>
+          <a class="mock-link" href="./mockups/budget.html">budget.html</a>.</p>
+
+        <h3 class="subheading" style="margin-top: var(--space-xl);">Recharts theming rules</h3>
+        <ul class="bullets prose">
+          <li><strong>Monochrome-first categories:</strong> differentiate by opacity &rarr; pattern &rarr; line-style &rarr; color (color last). Use 2&ndash;3 greys (<code>--text-display</code> / <code>--text-secondary</code> / <code>--border-visible</code>) + an opacity ramp. Delete the duplicated 8-color spectral FALLBACK_PALETTE; define one shared <code>getCategoryStyle(rank)</code>.</li>
+          <li><strong>Reserve red for one over/active series only.</strong> Demote it from its current default <code>--chart-1</code> data role; <code>var(--destructive)</code> chart usages &rarr; the <code>--accent</code> red.</li>
+          <li><strong>Bars:</strong> square ends (<code>radius=[0,0,0,0]</code>), fill <code>--text-display</code>, empty/remainder <code>--border</code>, over-limit <code>--accent</code> (red).</li>
+          <li><strong>Lines:</strong> 1.5&ndash;2px <code>--text-display</code> current; secondary by opacity; projection/average 1px dashed <code>--text-secondary</code> (<code>3 3</code>); no dots (or one end dot); horizontal-only grid <code>--border</code>; direct line labels, no legend boxes.</li>
+          <li><strong>No area fill, no gradients, no shadows.</strong> Remove the <code>viewerSpendArea</code> linearGradient; restyle the tooltip card to surface-raised + 1px border-visible + 8px radius (drop <code>shadow-xl</code>).</li>
+          <li><strong>Axis/labels:</strong> Space Mono at caption/label size, <code>--text-disabled</code>/<code>--text-secondary</code>; set <code>tick={{fontFamily:'var(--font-mono)'}}</code> centrally in the wrapper.</li>
+          <li><strong>Light-mode strokes:</strong> the red accent passes as a stroke/axis color in light mode (~4.76:1), so no darkened variant is needed; keep non-accent series differentiated by opacity, not hue.</li>
+        </ul>
+
+        <h3 class="subheading" style="margin-top: var(--space-xl);">Segmented-bar / gauge / sparkline approach</h3>
+        <ul class="bullets prose">
+          <li><strong>Segmented bar (signature):</strong> <code>.seg-bar</code> / <code>.seg-bar--hero</code> / <code>.seg-bar--compact</code> of ~20 discrete <code>.seg</code>; <code>.is-filled</code> (text-display) / <code>.is-good</code> / <code>.is-warn</code> / <code>.is-over</code> (accent). Build one reusable React component computing segment counts from percentages; replaces the rounded continuous <code>SpendProgressBar</code>, the multi-marker budget-health bar, and the per-model mini bars.</li>
+          <li><strong>Gauge / proportion:</strong> the forbidden donut (<code>copilot/activity-distribution</code>) becomes a 4-row segmented bar or horizontal stacked proportion bar with direct <code>.legend</code> labels and numeric readouts (sign-off needed). Pies are banned.</li>
+          <li><strong>Sparkline:</strong> standardize on <code>ui/sparkline.tsx</code> (already Nothing-correct: 1.5px <code>currentColor</code> polyline + end dot). Delete the duplicate Recharts <code>reports/sparkline.tsx</code> and re-point consumers.</li>
+          <li><strong>Re-theme vs rebuild (P3 gate):</strong> re-theme the wrapper once and keep Recharts for line/bar (preserves tooltips/responsiveness); rebuild only the donut and area chart where Nothing forbids the idiom. Mockups render some charts as pure CSS columns/seg-bars &mdash; decide per chart family.</li>
+        </ul>
+
+        <p class="prose meta-line">Ripple files: cumulative-pacing, twelve-month-bar, cost-distribution-histogram,
+          workspace-daily, plan-vs-actual, forecast-cumulative, daily-by-user, top-users, billing-trend,
+          cost-utilization, language, editor, usage-trend, global-metrics, spend-trend, my-usage. Verify each
+          in BOTH modes for legibility/contrast.</p>
+      </section>
+
+      <!-- =================================================================
+           7. DIALOGS & OVERLAYS  (user priority — exhaustive)
+           ================================================================= -->
+      <section id="overlays">
+        <div class="section-head">
+          <span class="label">06</span>
+          <h2 class="heading">Dialogs &amp; overlays</h2>
+        </div>
+        <p class="prose">User priority &mdash; exhaustive inventory. Nothing overlay spec (components.md &sect;14):
+          NO shadows; layering via background contrast + 1px <code>--border-visible</code>; modals = backdrop
+          <code>rgba(0,0,0,0.8)</code> + 16px radius + ghost <code>[ X ]</code>; dropdowns = surface-raised +
+          8px + 44px items + left 2px accent bar on selected; fade-only (no zoom/slide); toasts BANNED.</p>
+
+        <h4 class="label" style="margin-top: var(--space-lg);">Primitives (6)</h4>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Primitive</th><th>From</th><th>Nothing pattern</th><th class="num">Effort</th></tr></thead>
+            <tbody>
+              <tr><td class="mono path">dialog.tsx — Overlay</td><td class="mono">bg-black/50 + fade</td><td>Backdrop <code>bg-black/80</code>; fade only</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="mono path">dialog.tsx — Content</td><td class="mono">rounded-lg bg-background shadow-lg zoom-in-95</td><td><code>--surface</code> + 1px <code>--border-visible</code> + 16px, NO shadow, fade only; cap ~480px but allow wide overrides</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">dialog.tsx — [X] close</td><td class="mono">opacity-70 icon, data-[state]:bg-accent</td><td>Bordered/ghost <code>[ X ]</code> top-right; remove accent tint</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="mono path">alert-dialog.tsx</td><td class="mono">shadow-lg, rounded-lg, bg-black/50</td><td>Same Nothing modal; AlertDialogAction destructive &rarr; <code>.btn--destructive</code> (<code>--danger</code> outline)</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">sheet.tsx</td><td class="mono">4 sides, w-3/4, shadow-lg, slide 300/500ms</td><td><code>--surface</code>, NO shadow; right edge 1px border-visible; bottom-sheet adds 16px top radius + handle; soften slide</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">popover.tsx</td><td class="mono">rounded-md bg-popover shadow-md zoom+slide</td><td><code>--surface-raised</code> + 1px border-visible + 8px, NO shadow, fade only</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="mono path">dropdown-menu.tsx</td><td class="mono">shadow-md, focus:bg-accent, items ~32px</td><td>surface-raised + 8px, no shadow, 44px items, selected = left 2px <code>--accent</code> bar; destructive item text <code>--danger</code></td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">command.tsx</td><td class="mono">CommandDialog p-0, data-[selected]:bg-accent</td><td>On Nothing modal; selected &rarr; left 2px accent bar + surface-raised row (not full-row tint); 44px rows; input underline border-b</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h4 class="label" style="margin-top: var(--space-lg);">Feature dialogs, sheets &amp; comboboxes</h4>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Component</th><th>Type</th><th>Nothing pattern</th><th class="num">Effort</th></tr></thead>
+            <tbody>
+              <tr><td class="mono path">edit-user-dialog.tsx</td><td>Dialog</td><td>Nothing modal + <code>.field</code> labels + boxed controls; footer secondary Cancel + primary Save; toast&rarr;inline status</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">invite-link-dialog.tsx</td><td>Dialog</td><td>Read-only boxed <code>.control</code>; Copy = <code>.btn--icon</code> secondary; Send = primary; copied feedback inline <code>[COPIED]</code> (not toast)</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">sync/backfill-dialog.tsx</td><td>Dialog</td><td>Trigger ghost btn&rarr;<code>.btn--ghost</code>; date boxed control; result <code>[SAVED]</code>/<code>[ERROR]</code></td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">requests/[id]/approval-dialog.tsx</td><td>Dialog (wide)</td><td>Keep max-w-3xl; preview/source panes 1px border-visible NO bg-muted; labels <code>.label</code>; toast&rarr;inline. dangerouslySetInnerHTML preview stays</td><td class="num"><span class="eff eff-l">L</span></td></tr>
+              <tr><td class="mono path">requests/[id]/rejection-dialog.tsx</td><td>Dialog</td><td>Textarea&rarr;Space Mono control; Send = <code>.btn--destructive</code> (<code>--danger</code>); toast&rarr;inline</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">requests/[id]/completion-dialog.tsx</td><td>Dialog (wide, wizard)</td><td>Keep wide; 2-step nav; Select+Textarea+date Nothing-styled; toast&rarr;inline summary</td><td class="num"><span class="eff eff-l">L</span></td></tr>
+              <tr><td class="mono path">invoices/sync-results-dialog.tsx</td><td>Dialog (wide)</td><td>OutcomeBadge&rarr;<code>.tag</code> border-only (success/warning/accent), NO bg-green/blue/amber/red-100; scrollable <code>.table</code>; secondary Close + primary Apply</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">budget/.../billed-cost-dialog.tsx</td><td>Dialog</td><td>Nothing modal; 4 boxed <code>.control</code>; ghost Cancel + primary Save; inline status</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">settings/license-templates/template-editor-dialog.tsx</td><td>Dialog (max-w-4xl)</td><td>Wide override; 3-col labels <code>.label</code>; preview pane 1px border-visible no fill; warning &rarr; 1px <code>--warning</code> summary (no amber bg); Delete = <code>.btn--destructive</code>; toast&rarr;inline</td><td class="num"><span class="eff eff-l">L</span></td></tr>
+              <tr><td class="mono path">reset-password-dialog.tsx</td><td>AlertDialog</td><td>Nothing alert modal; Checkbox&rarr;Nothing checkbox; Reset = <code>.btn--destructive</code>; chains to InviteLinkDialog; toast&rarr;inline</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="mono path">budget/.../delete-billed-cost-dialog.tsx</td><td>AlertDialog</td><td>Remove literal <code>bg-destructive</code> override; destructive Action = <code>.btn--destructive</code> (<code>--danger</code> outline)</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">users/users-table.tsx (in-table)</td><td>AlertDialog &times;2</td><td>Deactivate {name}? + batch Send invites &rarr; inherit alert mapping; Deactivate = <code>--danger</code>; row menu items 44px + accent bar</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="mono path">settings/sync/github-member-sync-sheet.tsx</td><td>Sheet (right)</td><td>Nothing sheet; SummaryCards&rarr;<code>.card</code>/stat-rows; conflict box&rarr;1px <code>--danger</code> (no bg tint); Tabs&rarr;<code>.tabs</code>; Tables&rarr;<code>.table</code>; Loader2&rarr;<code>[LOADING…]</code>; toast&rarr;inline. Embeds combobox + inline form + member cards</td><td class="num"><span class="eff eff-l">L</span></td></tr>
+              <tr><td class="mono path">error-popover.tsx</td><td>Popover</td><td>Inline expandable <code>[ERROR: …]</code> status text; or restyle popover surface; no floating reveal</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="mono path">user-combobox.tsx</td><td>Popover + Command</td><td>Trigger&rarr;<code>.btn--secondary</code>; selected = left accent bar (not Check tick); single thin chevron; shouldFilter=false preserved</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="mono path">user-search-combobox.tsx</td><td>Command</td><td>surface-raised 8px; status Badge&rarr;<code>.tag</code> (no fill); empty&rarr;<code>[TYPE TO SEARCH]</code>; Cancel&rarr;ghost; debounce kept</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="mono path">data-table-faceted-filter.tsx</td><td>Popover + Command</td><td>Nothing popover; selected options&rarr;left accent bar; count&rarr;<code>.tag</code>; CheckIcon stroke 1.5</td><td class="num"><span class="eff eff-s">S</span></td></tr>
+              <tr><td class="mono path">DropdownMenu row actions (&times;10)</td><td>DropdownMenu</td><td>users/tools/budget/assignments[/[id]]/claude-users/integrations/ingestion/tool-detail/user-detail &mdash; one primitive fix covers chrome; per-file work is destructive-item + label tweaks</td><td class="num"><span class="eff eff-m">M</span></td></tr>
+              <tr><td class="mono path">ui/sonner.tsx + ~25 call sites</td><td>Global toast</td><td>Remove Toaster; per-surface inline <code>[SAVED]</code>/<code>[ERROR]</code> status with auto-clear + aria-live. Defining change of this subsystem</td><td class="num"><span class="eff eff-l">L</span></td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="callout">
+          <div class="callout-title">Wide-modal exception</div>
+          <p>Keep <code>max-w-3xl</code>/<code>max-w-4xl</code> for approval / completion / template-editor /
+            sync-results / member-sync &mdash; these are data-dense 2&ndash;3-column editors, not confirmations.
+            Document as an accepted deviation from the &sect;14 480px modal cap.</p>
+        </div>
+      </section>
+
+      <!-- =================================================================
+           8. PAGE-BY-PAGE MIGRATION (40 routes)
+           ================================================================= -->
+      <section id="pages">
+        <div class="section-head">
+          <span class="label">07</span>
+          <h2 class="heading">Page-by-page migration</h2>
+        </div>
+        <p class="prose">All 40 routes + the AuthGuard access-denied gate, grouped by section, with mapped mockup, effort and notes. Subpages
+          (detail / new / import) included.</p>
+
+        <h4 class="label" style="margin-top: var(--space-lg);">Dashboard</h4>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Route</th><th>Key components</th><th>Mockup</th><th class="num">Effort</th><th>Notes</th></tr></thead>
+            <tbody>
+              <tr><td class="mono path">/ (admin)</td><td>admin-dashboard, budget-hero (SpendProgressBar), this-month-card, kpi-grid, spend-trend-card (Recharts), insights-grid, activity-timeline, jump-to-row</td><td><a href="./mockups/dashboard.html">dashboard.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>1:1 mockup map. Hero&rarr;seg-bar + Doto; at-risk = the one accent (red <code>--danger</code>). Shared SpendProgressBar/Timeline/KpiWithMom/WhatChanged migrate as a unit.</td></tr>
+              <tr><td class="mono path">/ ?as=viewer</td><td>viewer-dashboard, identity-card (SyncCallout), my-usage-card (AreaChart), personal-kpis, my-tools-table, personal-activity, catalog-link-card</td><td class="mono">none (derive)</td><td class="num"><span class="eff eff-l">L</span></td><td>No mockup &mdash; author/sign-off. SyncCallout tinted boxes&rarr;inline status; AreaChart&rarr;line; preview banner&rarr;border/text only.</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h4 class="label" style="margin-top: var(--space-lg);">Tools / Users / Assignments / Requests</h4>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Route</th><th>Key components</th><th>Mockup</th><th class="num">Effort</th><th>Notes</th></tr></thead>
+            <tbody>
+              <tr><td class="mono path">/tools</td><td>tools-table (DataTable), status/vendor faceted filters, Archive AlertDialog</td><td><a href="./mockups/tools.html">tools.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Inherits shared DataTable re-skin; status Badge&rarr;<code>.tag--success</code> + <code>.led</code>.</td></tr>
+              <tr><td class="mono path">/tools/new</td><td>new-tool-form (RHF, useFieldArray tiers)</td><td><a href="./mockups/tools.html">tools.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Cards&rarr;<code>.card</code>; repeatable tier rows; ALL-CAPS field labels.</td></tr>
+              <tr><td class="mono path">/tools/[id]</td><td>tool-detail-client, Edit form, Archive AlertDialog, Access Tiers + Add/Edit Tier Dialogs (Switch), Change History</td><td><a href="./mockups/tools.html">tools.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Dual edit/read-only; tier dialogs Nothing-styled; history&rarr;<code>.stat-list</code>.</td></tr>
+              <tr><td class="mono path">/users</td><td>users-table (8 cols, 6 faceted filters, discipline icons), batch-invite + deactivate AlertDialogs, ResetPasswordDialog</td><td><a href="./mockups/users.html">users.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Pending users = the single accent hero. <code>.filter-chip</code> promote to nothing.css.</td></tr>
+              <tr><td class="mono path">/users/new</td><td>new-user-form (Selects), InviteLinkDialog on success</td><td><a href="./mockups/users.html">users.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>User Details Card&rarr;<code>.card</code> + <code>.field</code>.</td></tr>
+              <tr><td class="mono path">/users/[id]</td><td>user-detail-client, GitHub Profile Card, Edit form, Reset/Deactivate, Assigned Tools (revoke/reactivate), Assign License Dialog, AdminCostSection (Recharts), Change History</td><td><a href="./mockups/users.html">users.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Large multi-section; API-key reveal/copy preserved; AdminCostSection deferred to charts.</td></tr>
+              <tr><td class="mono path">/users/import</td><td>bulk-import-form (CSV, preview table, Valid/Invalid/Update/New badges, invite links)</td><td><a href="./mockups/users.html">users.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>No red row tint &mdash; error to Status column only; changed cells&rarr;<code>.cell-strong</code>.</td></tr>
+              <tr><td class="mono path">/assignments</td><td>assignments-client (DataTable), Assign License Dialog (UserCombobox + date Popover+Calendar), EditAssignmentDialog (API key reveal), sync-managed Badge+Tooltip, revoke AlertDialog</td><td><a href="./mockups/assignments.html">assignments.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Date popover &rarr; Space Mono date input (documented exception).</td></tr>
+              <tr><td class="mono path">/assignments/[id]</td><td>assignment-detail-client (dual edit/read, tier Select, date Popover+Calendar, API key), Comments (Textarea + counter)</td><td><a href="./mockups/assignments.html">assignments.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Back link&rarr;<code>.back-btn</code>; comments&rarr;<code>.stat-list</code>.</td></tr>
+              <tr><td class="mono path">/assignments/import</td><td>bulk-assignment-import-form (CSV preview, masked API key, server-error notice)</td><td><a href="./mockups/assignments.html">assignments.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>border-destructive bg tint&rarr;inline <code>[ERROR]</code> in Status column.</td></tr>
+              <tr><td class="mono path">/requests</td><td>requests-table, status faceted filter, statusBadge() (rejected=destructive), REQ-### mono links</td><td><a href="./mockups/requests.html">requests.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Rejected stays red <code>--danger</code>; active-row left accent rail.</td></tr>
+              <tr><td class="mono path">/requests/[id]</td><td>request-detail-client, Requester Card, payload (FormPayloadList), Sent messages (border-l-primary + prose), action bar (Approve/Reject/Complete/Cancel), native confirm()</td><td><a href="./mockups/requests.html">requests.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Replace native confirm() with Nothing modal; message left border&rarr;<code>--border-visible</code>.</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h4 class="label" style="margin-top: var(--space-lg);">Budget / Invoices / Reports</h4>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Route</th><th>Key components</th><th>Mockup</th><th class="num">Effort</th><th>Notes</th></tr></thead>
+            <tbody>
+              <tr><td class="mono path">/budget</td><td>active-budget landing + EmptyBudgetState</td><td><a href="./mockups/budget.html">budget.html</a></td><td class="num"><span class="eff eff-s">S</span></td><td>Empty&rarr;<code>.empty</code>.</td></tr>
+              <tr><td class="mono path">/budget/history</td><td>budget-table (DataTable), back-link</td><td><a href="./mockups/budget.html">budget.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Inherits shared DataTable.</td></tr>
+              <tr><td class="mono path">/budget/new</td><td>new-budget-form (RHF, fiscalYear/totalAmount/periodType Selects)</td><td><a href="./mockups/budget.html">budget.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>periodType&rarr;<code>.segmented</code> (Monthly/Quarterly).</td></tr>
+              <tr><td class="mono path">/budget/[id]</td><td>budget-detail-client, budget-health-hero (MultiMarkerBar), past-month-spotlight, period-allocations-table (inline inputs, sub-rows), 3 dialogs</td><td><a href="./mockups/budget.html">budget.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Multi-marker bar&rarr;seg-bar + legend (hardest piece). Colored row tints&rarr;value/tag only.</td></tr>
+              <tr><td class="mono path">/invoices</td><td>invoices-table (DataTable), Download Tooltip; ADD archived-invoices hero count</td><td><a href="./mockups/invoices.html">invoices.html</a></td><td class="num"><span class="eff eff-s">S</span></td><td>Server must surface total count for the new Doto hero.</td></tr>
+              <tr><td class="mono path">/invoices/new</td><td>invoice-upload-form (file picker, ConfidenceInput low-confidence amber, Duplicate AlertDialog), aria-live</td><td><a href="./mockups/invoices.html">invoices.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Low-confidence underline&rarr;<code>--warning</code>; Loader2&rarr;<code>[LOADING…]</code>; toast&rarr;inline.</td></tr>
+              <tr><td class="mono path">/invoices/bulk</td><td>bulk-upload-form (idle/uploading/reviewing/saving/done/error machine), editable rows, outcome badges, results table</td><td><a href="./mockups/invoices.html">invoices.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>6 states&rarr;<code>[STATUS]</code>; duplicate&rarr;<code>tag--warning</code> (confirm vs accent); skipped rows opacity 0.4.</td></tr>
+              <tr><td class="mono path">/reports (overview)</td><td>reports-nav (tabs), OverviewPanel: KpiWithMom &times;4, BudgetHealthHero, WhatChanged, tool-adoption + spend-by-circle Tables, Sparkline</td><td><a href="./mockups/reports.html">reports.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Tabs NEUTRAL underline. MoM "up" delta flips from red&rarr;<code>tag--active</code>/neutral.</td></tr>
+              <tr><td class="mono path">/reports/budget</td><td>budget-report, at-a-glance (SpendProgressBar), plan-vs-actual-chart + forecast-cumulative-chart (Recharts), per-tool-breakdown, past-month-spotlight</td><td><a href="./mockups/reports.html">reports.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Two Recharts charts re-themed; sub-row bg tints&rarr;surface-raised + indentation.</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h4 class="label" style="margin-top: var(--space-lg);">Copilot / Claude consoles</h4>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Route</th><th>Key components</th><th>Mockup</th><th class="num">Effort</th><th>Notes</th></tr></thead>
+            <tbody>
+              <tr><td class="mono path">/copilot (Overview)</td><td>copilot-tab-bar, overview-cards (5-up KPI), usage-trend-chart</td><td><a href="./mockups/copilot.html">copilot.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Tabs NEUTRAL underline; Acceptance Rate = Doto hero.</td></tr>
+              <tr><td class="mono path">/copilot/seats</td><td>seats-table (DataTable, avatar+login, plan/status badges)</td><td><a href="./mockups/copilot.html">copilot.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Seat-user cells; badges&rarr;<code>.tag</code>.</td></tr>
+              <tr><td class="mono path">/copilot/seats/[userId]</td><td>seat detail: back btn, avatar, status/plan badges, field grid, Sync History timeline</td><td><a href="./mockups/copilot.html">copilot.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Unmatched amber&rarr;<code>--warning</code> on value; timeline badges&rarr;<code>.tag</code>.</td></tr>
+              <tr><td class="mono path">/copilot/billing</td><td>4 KPI cards, billing-trend-chart, cost-utilization-chart, Monthly Billing Details table</td><td><a href="./mockups/copilot.html">copilot.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Bars&rarr;<code>.hist-bars</code>; dual-axis line re-themed.</td></tr>
+              <tr><td class="mono path">/copilot/analytics</td><td>metrics-freshness-card (amber), language-chart, editor-chart, activity-distribution (DONUT)</td><td><a href="./mockups/copilot.html">copilot.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Donut&rarr;seg-bars/stat-list; freshness amber bg&rarr;border-only <code>.alert</code>.</td></tr>
+              <tr><td class="mono path">/claude (Workspaces)</td><td>claude-tabs, sync-button, global-metrics-client (stacked BarChart + est ghost), historical-trend-card (segmented), org-credits-panel, workspace-budget-list, sync-status-pill</td><td><a href="./mockups/claude.html">claude.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Stacked chart&rarr;CSS columns; 8-color palette&rarr;grey tiers; progress bars&rarr;seg-bars; toasts&rarr;inline.</td></tr>
+              <tr><td class="mono path">/claude/users</td><td>users-month-picker, sync-status-pill, user-kpi-strip, daily-by-user-chart, top-users bar, cost-distribution-histogram, top-movers-chips, bespoke users-table (cmdk filters, Sparkline, Switch)</td><td><a href="./mockups/claude.html">claude.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Month picker&rarr;<code>.mini-select</code>/period-nav; histogram bucket destructive&rarr;<code>--danger</code>.</td></tr>
+              <tr><td class="mono path">/claude/users/[userId]</td><td>user-detail-client (breadcrumb, badges, MonthPicker, pricing-unresolved amber, KpiStrip, daily + model breakdown + top dates, 12-month bars)</td><td><a href="./mockups/claude.html">claude.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>12-month&rarr;<code>.hist-bars</code> with <code>.is-proj</code>.</td></tr>
+              <tr><td class="mono path">/claude/workspaces/[workspaceId]</td><td>workspace-detail-client (breadcrumb, color dot, Default/Over-budget badges, inline limit edit, KpiStrip, daily chart, top users, model breakdown)</td><td><a href="./mockups/claude.html">claude.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Over-budget badge stays warning-toned; projected KPI = the one red interrupt; displayColor kept as dot only.</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h4 class="label" style="margin-top: var(--space-lg);">Settings / Profile</h4>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Route</th><th>Key components</th><th>Mockup</th><th class="num">Effort</th><th>Notes</th></tr></thead>
+            <tbody>
+              <tr><td class="mono path">/settings/appearance</td><td>3-up theme grid (useThemePreference)</td><td><a href="./mockups/settings.html">settings.html</a></td><td class="num"><span class="eff eff-s">S</span></td><td><code>.theme-grid</code>/<code>.theme-opt</code>; isSaving&rarr;<code>[SAVED]</code>.</td></tr>
+              <tr><td class="mono path">/settings/integrations</td><td>github-integration-client (PAT input, Validate, org Select, Connect/Disconnect AlertDialog), claude-code-status-card</td><td><a href="./mockups/settings.html">settings.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Disconnect = <code>--danger</code>; scopes in <code>.code</code> chips; toast&rarr;inline.</td></tr>
+              <tr><td class="mono path">/settings/sync</td><td>sync-dashboard (polling 30s/5s), scheduled-jobs-table, manual-jobs-table, github-member-sync-sheet, OutcomeBadge, ErrorPopover</td><td><a href="./mockups/settings.html">settings.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Sync hero Doto fraction + seg-bar; Suspense skeleton&rarr;<code>[LOADING…]</code>; live <code>.poll</code> LED.</td></tr>
+              <tr><td class="mono path">/settings/ingestion</td><td>ingestion-filters-section (rules table, Switch, create/edit Dialog, native confirm), ingestion-history-table (DataTable, faceted filters)</td><td><a href="./mockups/settings.html">settings.html</a></td><td class="num"><span class="eff eff-l">L</span></td><td>Blacklist Badge&rarr;neutral <code>tag--tech</code> (not red); confirm()&rarr;Nothing modal.</td></tr>
+              <tr><td class="mono path">/settings/license-templates</td><td>templates-client (per-tool cards, TemplateRow), template-editor-dialog (3-col)</td><td><a href="./mockups/settings.html">settings.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>kind Badges&rarr;neutral tags; wide editor exception.</td></tr>
+              <tr><td class="mono path">/settings/api-preview</td><td>api-preview-client (email/month form, Send, response Badge, Copy JSON, JsonViewer), not-configured Alert</td><td><a href="./mockups/settings.html">settings.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>JSON viewer multi-color&rarr;monochrome; Loader2/toast&rarr;inline.</td></tr>
+              <tr><td class="mono path">/profile</td><td>profile-client, profile-header (avatar, badges), profile-assignments, cost-tracking-section (MonthPicker, CostChart, destructive Alert)</td><td class="mono">none (settings vocab)</td><td class="num"><span class="eff eff-m">M</span></td><td>Avatar&rarr;bordered <code>.avatar</code>; CostChart Nothing-themed; unresolved-pricing&rarr;<code>--warning</code> value.</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h4 class="label" style="margin-top: var(--space-lg);">Auth</h4>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Route</th><th>Key components</th><th>Mockup</th><th class="num">Effort</th><th>Notes</th></tr></thead>
+            <tbody>
+              <tr><td class="mono path">/login</td><td>(auth)/layout (2-col), login page Card, login-form (RHF, signIn, Alert destructive, Loader2)</td><td><a href="./mockups/login.html">login.html</a></td><td class="num"><span class="eff eff-m">M</span></td><td>Fully mocked; copy scoped <code>.auth-split</code>/<code>.auth-pane</code>; per-route theme toggle; brand panel neutral (not an accent fill). Submit stays white-on-black, NOT the accent.</td></tr>
+              <tr><td class="mono path">/setup-password/[token]</td><td>setup-password page (3 error branches: expired/consumed/invalid), setup-password-form (New/Confirm, success toast)</td><td class="mono">none (login vocab)</td><td class="num"><span class="eff eff-m">M</span></td><td>Toast&rarr;inline <code>[PASSWORD SET]</code>; expired/invalid = <code>--danger</code>, consumed = neutral; tinted chips&rarr;monoline glyphs.</td></tr>
+              <tr><td class="mono path">AuthGuard (Access Denied)</td><td>server gate + admin "Access Denied" Card</td><td class="mono">shell empty</td><td class="num"><span class="eff eff-s">S</span></td><td>&rarr;<code>.empty</code> (informational, no red).</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- =================================================================
+           9. PHASING & SEQUENCING
+           ================================================================= -->
+      <section id="phasing">
+        <div class="section-head">
+          <span class="label">08</span>
+          <h2 class="heading">Phasing &amp; sequencing</h2>
+        </div>
+        <p class="prose">Hard-sequence foundation &rarr; primitives &rarr; shell &rarr; shared-data &rarr;
+          pages &rarr; QA so shared surfaces stabilize before per-page work. shadcn semantic var names stay
+          aliased throughout so primitives never lose color mid-migration.</p>
+
+        <div class="phase">
+          <div class="phase-head"><span class="phase-id">P0</span><span class="heading" style="font-size:var(--subheading);">Foundation: Decisions, Tokens &amp; Fonts</span><span class="eff eff-l">L</span></div>
+          <p class="prose" style="margin:0;">Ratify the brand-accent decision, port the Nothing token layer into <code>globals.css</code> (re-keyed onto next-themes <code>.dark</code>, NOT <code>data-theme</code>), load the three-family font stack via next/font.</p>
+          <dl>
+            <dt>Includes</dt><dd>Design tokens, theming &amp; dark/light · Typography &amp; font loading (Inter &rarr; Doto/Space Grotesk/Space Mono)</dd>
+            <dt>Depends on</dt><dd>&mdash;</dd>
+            <dt>Exit</dt><dd>Full Nothing token set on <code>:root</code>(light)/<code>.dark</code>(dark); <code>--accent</code>=#D71921 single interrupt (errors share it, no decoupling; red verified &ge;4.5:1 text / &ge;3:1 graphical both modes); radii 4/8/14/pill; <code>--ease</code>. shadcn names aliased (no primitive loses color). <code>@theme inline</code> registers font tokens; next/font loads all three (Space Grotesk preloaded, Doto preload:false), Inter removed. Utility classes available. typecheck + build pass; one route smoke-tested both modes, no FOUC.</dd>
+          </dl>
+        </div>
+
+        <div class="phase">
+          <div class="phase-head"><span class="phase-id">P1</span><span class="heading" style="font-size:var(--subheading);">Primitives &amp; Overlays Re-skin</span><span class="eff eff-xl">XL</span></div>
+          <p class="prose" style="margin:0;">Re-skin the 16 control primitives + 6 overlay primitives in place; build shared cross-cutting helpers (inline status-text, <code>[LOADING]</code>, segmented spinner, Nothing dropdown/modal/sheet chrome).</p>
+          <dl>
+            <dt>Includes</dt><dd>shadcn primitives · Overlays · Anti-pattern resolution (toasts/skeletons/banner/date-popovers)</dd>
+            <dt>Depends on</dt><dd>P0</dd>
+            <dt>Exit</dt><dd>All primitives Nothing-styled (pill/underline/flat/no-shadow, Space Mono caps, square greyscale checkbox/switch, border-only tags). Overlays use surface/surface-raised, 1px border-visible, 16/8px, 0.8 backdrop, NO shadow, fade-only, <code>[X]</code> ghost close, left 2px accent on selected. Destructive primitives point at <code>--danger</code> (outline). Shared <code>&lt;StatusText&gt;</code>/<code>useInlineStatus</code> + <code>[LOADING]</code>/spinner documented. Variant collapse reviewed vs call sites. Verified vs tools.html/settings.html both modes; typecheck/lint/build green.</dd>
+          </dl>
+        </div>
+
+        <div class="phase">
+          <div class="phase-head"><span class="phase-id">P2</span><span class="heading" style="font-size:var(--subheading);">App Shell, Sidebar, Topbar &amp; Global Layout</span><span class="eff eff-xl">XL</span></div>
+          <p class="prose" style="margin:0;">Migrate the shell so global chrome is correct and owns the one accent moment. Establish the Topbar contract. Remove global Toaster + AlertBanner from layout.tsx.</p>
+          <dl>
+            <dt>Includes</dt><dd>App shell, sidebar, topbar, breadcrumbs &amp; alert banner</dd>
+            <dt>Depends on</dt><dd>P0, P1</dd>
+            <dt>Exit</dt><dd>CSS-grid <code>.app</code> with re-skinned shadcn sidebar machinery preserved (Cmd+B, cookie, mobile Sheet/useIsMobile); ALL-CAPS nav with 2px red active bar; AI·HUB wordmark + dot; user chip + Sign Out; segmented toggle wired to next-themes (System retained). Topbar exposes eyebrow+title+actions + mobile SidebarTrigger (net-new, approved). Global Toaster removed; AlertBanner&rarr;flat bordered status box (red critical / amber approaching) keeping aria-live + dismiss. Breadcrumb folded into eyebrow. Verified vs every shared shell both modes + mobile; build green.</dd>
+          </dl>
+        </div>
+
+        <div class="phase">
+          <div class="phase-head"><span class="phase-id">P3</span><span class="heading" style="font-size:var(--subheading);">Shared Data Layer: Tables &amp; Charts</span><span class="eff eff-xl">XL</span></div>
+          <p class="prose" style="margin:0;">Re-skin the shared DataTable + ui/table + column header + faceted filters ONCE (cascades to ~9 tables); migrate the shared Recharts wrapper + shared viz (SpendProgressBar&rarr;seg-bar, Sparkline consolidation, Timeline, KpiWithMom, WhatChanged, budget-health-hero). Resolve re-theme-vs-rebuild.</p>
+          <dl>
+            <dt>Includes</dt><dd>Data tables (TanStack) &amp; filters · Charts (Recharts) &amp; data viz</dd>
+            <dt>Depends on</dt><dd>P0, P1, P2</dd>
+            <dt>Exit</dt><dd>Tables: label headers, <code>--border</code> dividers (no zebra), <code>.num</code> mono right, <code>.cell-strong</code>, hover=surface, active row=surface-raised + 2px left accent; search=<code>.search</code>; pager=segmented+period-nav. OutcomeBadge/status&rarr;<code>.tag</code>/<code>.led</code> (failed=red). Chart wrapper: horizontal-only grid, mono axes, shadowless tooltip, no legend boxes, monochrome ramp (opacity&gt;pattern&gt;color), red for one over/active series. SpendProgressBar&rarr;seg-bar; one canonical Sparkline; donut + area replacements signed off. Re-theme-vs-rebuild decided per family. Verified both modes (red strokes pass in light).</dd>
+          </dl>
+        </div>
+
+        <div class="phase">
+          <div class="phase-head"><span class="phase-id">P4</span><span class="heading" style="font-size:var(--subheading);">Page Migration by Section</span><span class="eff eff-xl">XL</span></div>
+          <p class="prose" style="margin:0;">Migrate route content for all feature areas. Sequence by risk: Auth first (most-referenced, mocked), then Dashboards, then CRUD list/detail, then the chart-heavy financial + console screens.</p>
+          <dl>
+            <dt>Includes</dt><dd>Auth · Dashboards (admin+viewer) · Tools/Users/Assignments/Requests · Budget/Invoices/Reports · Copilot/Claude · Settings/Profile</dd>
+            <dt>Depends on</dt><dd>P0, P1, P2, P3</dd>
+            <dt>Exit</dt><dd>All ~40 routes Nothing-correct in both modes vs mockups; viewer + setup-password composed/signed off. Every former toast is inline <code>[SAVED]</code>/<code>[ERROR]</code> with aria-live; every skeleton/loading.tsx is <code>[LOADING]</code>; no red row/tinted-bg statuses (value text only); exactly one accent interrupt per screen audited; native confirm() replaced; JSON viewer monochrome. Per-section typecheck/lint/build green.</dd>
+          </dl>
+        </div>
+
+        <div class="phase">
+          <div class="phase-head"><span class="phase-id">P5</span><span class="heading" style="font-size:var(--subheading);">Anti-pattern Sweep, A11y &amp; Visual QA Gate</span><span class="eff eff-l">L</span></div>
+          <p class="prose" style="margin:0;">Final cross-cutting verification: zero orphaned toasts/skeletons/shadows/zebra/calendar-popovers; automated contrast/a11y (the single red accent in both modes); mockup-fidelity visual regression across all routes in both themes + mobile; no stale oklch leaks in edge states. Gate before merge.</p>
+          <dl>
+            <dt>Includes</dt><dd>Anti-pattern resolution · All subsystems (verification pass)</dd>
+            <dt>Depends on</dt><dd>P4</dd>
+            <dt>Exit</dt><dd>Lint/grep gate: zero <code>toast.*</code>/sonner imports, zero <code>&lt;Skeleton&gt;</code>/animate-pulse, zero <code>shadow-*</code> on chrome, zero calendar popovers except sanctioned exceptions. axe + Lighthouse pass; WCAG check confirms the red accent and amber/green status pass &ge;4.5:1 text / &ge;3:1 graphical in both modes, and no screen shows more than one red region. Visual regression matches mockups across 40 routes in dark+light+mobile. "One accent interrupt per screen" audited. Full typecheck/lint/build/test green; ready to merge as one coordinated replacement.</dd>
+          </dl>
+        </div>
+      </section>
+
+      <!-- =================================================================
+           10. RISKS & MITIGATIONS
+           ================================================================= -->
+      <section id="risks">
+        <div class="section-head">
+          <span class="label">09</span>
+          <h2 class="heading">Risks &amp; mitigations</h2>
+        </div>
+        <div class="table-wrap">
+          <table class="table">
+            <thead><tr><th>Risk</th><th class="num">Severity</th><th>Mitigation</th></tr></thead>
+            <tbody>
+              <tr>
+                <td class="cell-strong">One-red-per-screen at scale — accent and error/destructive share #D71921, so a screen with BOTH an active/selected state AND an error or destructive surface can show two reds, breaking the "single interrupt" rule. Most acute in the error-heavy console/sync/dialog flows.</td>
+                <td class="num"><span class="sev sev-medium">Medium</span></td>
+                <td>Make it a hard checklist item in P4/P5: exactly one red region per screen. When an error is present, IT is the red moment &mdash; render the active-nav / active-row / tab indicator in neutral <code>--text-display</code> on that view. The consistency sweep that cleared the mockups (neutral in-content tabs) is the template; the P5 manual audit asserts the per-route count in both modes.</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Recharts theming effort — ~20 Recharts components + 2 sparklines must go monochrome (square bars, no area fill, no legend boxes, direct labels, mono axes, shadowless tooltips). Mockups render many as pure CSS/inline-SVG (no 1:1 map); pies/donut + area are bans needing redesign.</td>
+                <td class="num"><span class="sev sev-high">High</span></td>
+                <td>P3 gate per chart family: re-theme the shared wrapper once; keep Recharts for line/bar; rebuild only donut (&rarr;segmented/stacked-proportion) and area (&rarr;line). Shared <code>getCategoryStyle(rank)</code> (opacity&gt;pattern&gt;color); delete duplicated 8-color palettes. Verify both modes; the red accent strokes pass in light (no darkened variant).</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Removing Sonner is app-wide behavioral — ~183 <code>toast.*</code> sites / 39 files are the ONLY success/error feedback (incl. multi-event "sent 12 of 15", bulk created/updated/skipped/failed). Naive removal = silent failures + lost screen-reader announcements.</td>
+                <td class="num"><span class="sev sev-high">High</span></td>
+                <td>Build ONE shared inline-status primitive (StatusText/useInlineStatus, aria-live=polite) in P1 BEFORE touching call sites; remove the global Toaster only in P2 once it exists. Per-form placement convention + inline summary-box for bulk outcomes. P5 lint/grep gate asserts zero remaining sonner imports/toast.* calls.</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Font FOUT/CLS &amp; loading — three families via the mockup's render-blocking @import would reintroduce FOUT/CLS + payload; Inter&rarr;Space Grotesk/Mono glyph-width changes can overflow tight UI; Doto variable axis may be unreliable in next/font.</td>
+                <td class="num"><span class="sev sev-medium">Medium</span></td>
+                <td>Use next/font/google per family (self-hosted, auto fallback metrics), NOT @import; display:'swap', preload Space Grotesk only, preload:false on Doto/Space Mono. Pin Doto weights ['400','500','700'] if the axis misbehaves; validate hero rendering. Define both <code>--font-sans</code> and <code>--font-ui</code> (aliased). Screenshot-diff key routes for width overflow.</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Reconciling theme strategy — app authors LIGHT as <code>:root</code> default + <code>.dark</code> via class; nothing.css authors DARK as <code>:root</code> + <code>data-theme=light</code>. Mis-mapping inverts colors. Also <code>--primary</code>==<code>--ring</code>==<code>--chart-1</code>==<code>--sidebar-primary</code>, so the accent change recolors buttons/rings/sidebar-active/primary-chart at once. Toggle is 2-state in mockup vs 3-state in app.</td>
+                <td class="num"><span class="sev sev-medium">Medium</span></td>
+                <td>Re-key nothing.css value sets onto the existing <code>:root</code>(light)/<code>.dark</code>(dark) selectors (don't copy data-theme). Keep attribute=class + System. Change primary/ring/chart-1/sidebar-primary in one coordinated edit and verify all four surfaces together. Wire the segmented toggle to next-themes (not theme.js); <code>suppressHydrationWarning</code> guards FOUC.</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Scope/regression across ~40 routes — shared blast radius: tokens (every screen), 16 primitives (every screen), shared DataTable (~9 tables), shared viz (SpendProgressBar/Timeline/KpiWithMom/WhatChanged used by dashboard AND reports AND claude). One bad shared rule regresses the whole app; cannot ship incrementally per page.</td>
+                <td class="num"><span class="sev sev-high">High</span></td>
+                <td>Hard-sequence P0&rarr;P4 so shared surfaces stabilize before page work. Keep shadcn var names aliased so primitives never lose color mid-migration. Migrate shared viz as a single unit and regression-test ALL consumers. Mockup-based visual regression from P1 onward + final P5 cross-route gate in both themes + mobile before the single-shot merge.</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- =================================================================
+           11. TESTING & VERIFICATION
+           ================================================================= -->
+      <section id="testing">
+        <div class="section-head">
+          <span class="label">10</span>
+          <h2 class="heading">Testing &amp; verification</h2>
+        </div>
+        <ul class="bullets prose">
+          <li><strong>Per-phase build gates:</strong> run <code>pnpm typecheck</code>, <code>pnpm lint</code> (zero warnings) and <code>pnpm build</code> at the end of every phase and before merging any P4 page-section batch. A red gate is blocking; no phase advances until its predecessor is green.</li>
+          <li><strong>Mockup-fidelity visual regression:</strong> use the <code>chrome-devtools</code> / <code>playwright-skill</code> to render each migrated route at desktop + mobile widths in BOTH themes and diff against the matching <code>mockups/*.html</code>. Build the harness in P1 (primitives vs tools.html/settings.html); run cumulatively through P4/P5.</li>
+          <li><strong>Auth-gated coverage:</strong> use the <code>agent-browser-session</code> skill to mint a NextAuth session cookie for the seeded agent user so the browser reaches every non-public route without the /login flow. Respect the agent deny-list (no DELETE /api/users, invite, reset-password, etc.). Test login.html / setup-password directly via the public routes.</li>
+          <li><strong>Automated a11y + contrast:</strong> run Lighthouse (<code>lighthouse_audit</code>) and axe (<code>chrome-devtools a11y-debugging</code> skill) on representative routes in BOTH themes, with a SPECIFIC assertion that the red accent <code>#D71921</code> and the amber/green status colors meet &ge;4.5:1 text / &ge;3:1 graphical in both modes, and that no screen shows more than one red region. Verify focus rings/borders, tap targets (44px vs sanctioned 32px compact icon-btn), keyboard nav.</li>
+          <li><strong>Anti-pattern grep/lint gate (P5):</strong> assert zero remaining <code>from "sonner"</code> / <code>toast.</code> sites, zero <code>&lt;Skeleton&gt;</code>/animate-pulse, zero <code>shadow-*</code> on chrome, zero zebra striping, zero calendar popovers except documented exceptions, zero stale oklch leaks in edge states (rails/disabled/focus/skeleton). Confirm exactly one accent interrupt per screen via a manual checklist.</li>
+          <li><strong>Shared-component regression sweeps:</strong> after P1 and P3, re-test EVERY consumer route of each shared component (not just one) — e.g. verify the DataTable re-skin against tools/users/assignments/copilot-seats/ingestion/invoices simultaneously, and seg-bar/timeline/KPI against dashboard+reports+claude.</li>
+          <li><strong>Functional behavior preservation:</strong> confirm API-key reveal/copy stays masked-by-default, RHF/Zod still fires (<code>.field.is-error</code>/<code>.error-msg</code>), TanStack sort/filter/pagination works, sync polling (30s/5s) updates rows with the new live LED, theme toggle persists to DB without FOUC, and bulk import/invite multi-event outcomes surface via the inline summary-box pattern.</li>
+        </ul>
+      </section>
+
+      <!-- =================================================================
+           12. ROLLOUT & EFFORT
+           ================================================================= -->
+      <section id="rollout">
+        <div class="section-head">
+          <span class="label">11</span>
+          <h2 class="heading">Rollout &amp; effort</h2>
+        </div>
+
+        <h3 class="subheading" style="margin-top: var(--space-md);">Rollout strategy</h3>
+        <p class="prose">Execute the entire migration on a single long-lived feature branch (off main) as a
+          coordinated full replacement &mdash; the goal is a complete swap, and the shared-surface blast radius
+          (tokens, 16 primitives, shared DataTable, shared viz) makes true page-by-page production rollout
+          impossible without leaving the app half-styled. Within the branch, sequence strictly P0&rarr;P5 so
+          foundation stabilizes before consumers.</p>
+        <ul class="bullets prose">
+          <li><strong>No broken middle:</strong> because next-themes is class-based and shadcn var names are aliased to Nothing tokens, author the Nothing token VALUES so the app compiles and renders at every commit. Keep the old oklch values reachable behind a build flag / scoped wrapper class until P5 to A/B against mockups and bail per-surface if a shared edit regresses.</li>
+          <li><strong>No permanent dual theme:</strong> do NOT ship a user-facing "classic vs nothing" toggle (doubles maintenance, contradicts full-replacement). The parallel theme is a dev-time scaffold only, removed before merge.</li>
+          <li><strong>Preview review:</strong> land the branch behind a Vercel preview so reviewers click through all ~40 routes (agent-browser-session cookie) in both themes before merge.</li>
+          <li><strong>Single merge:</strong> merge to main as one squashed/coordinated PR only after the P5 gate (visual regression + a11y/contrast + grep gate + green build) passes; no interim commits to main. Per project memory, if any gh-aw workflow files are touched, recompile <code>lock.yml</code> in the same commit (not expected here).</li>
+        </ul>
+
+        <h3 class="subheading" style="margin-top: var(--space-2xl);">Sequencing notes</h3>
+        <p class="prose">P0 (tokens+fonts) is foundational for EVERYTHING and lands first; the accent decision is
+          settled (Nothing red #D71921, errors share it), so token values can be written without further sign-off.
+          P1 (primitives+overlays) precedes shell/pages because ~30 components import the primitives; the
+          shared inline-status + <code>[LOADING]</code> helpers are built here. P2 (shell) precedes pages
+          because it removes the global Toaster/AlertBanner, defines the Topbar contract, and owns the single
+          red active-nav accent so in-content tabs stay NEUTRAL. P3 (shared tables + chart wrapper + shared
+          viz) precedes pages because ~9 tables and 6 dashboard/reports/console screens inherit from them. P4
+          (pages) is ordered Auth &rarr; Dashboards &rarr; CRUD &rarr; financial/console (which stress P3
+          hardest). P5 is the cross-cutting cleanup + QA gate.</p>
+        <p class="prose"><strong>Cross-cutting decisions to lock at P0/P1</strong> so they don't churn: accent =
+          Nothing red #D71921 as the single per-screen interrupt, shared by destructive/error (no separate danger
+          color, no darkened variant &mdash; red passes both modes); keep next-themes class strategy +
+          System; full toast removal via inline status; full skeleton removal via <code>[LOADING]</code>;
+          period-nav vs Space-Mono date input for single-date pickers; wide-modal exception
+          (<code>max-w-3xl</code>/<code>4xl</code>) for data-dense editors; sanctioned 32px compact icon-btn in
+          dense tables. <strong>The pleasant surprise:</strong> the app ALREADY ships red as <code>--destructive</code>,
+          so the Nothing red accent reuses an existing token while the green <code>--primary</code> collapses to greyscale.</p>
+
+        <h3 class="subheading" style="margin-top: var(--space-2xl);">Total effort</h3>
+        <div class="card card--raised" style="margin-top: var(--space-md);">
+          <div class="stat-list">
+            <div class="stat-row"><span class="label">P0 · Foundation</span><span class="value"><span class="eff eff-l">L</span></span></div>
+            <div class="stat-row"><span class="label">P1 · Primitives + Overlays</span><span class="value"><span class="eff eff-xl">XL</span></span></div>
+            <div class="stat-row"><span class="label">P2 · Shell</span><span class="value"><span class="eff eff-xl">XL</span></span></div>
+            <div class="stat-row"><span class="label">P3 · Shared Tables + Charts</span><span class="value"><span class="eff eff-xl">XL</span></span></div>
+            <div class="stat-row"><span class="label">P4 · Page Migration (largest by volume)</span><span class="value"><span class="eff eff-xl">XL</span></span></div>
+            <div class="stat-row"><span class="label">P5 · QA gate</span><span class="value"><span class="eff eff-l">L</span></span></div>
+            <div class="stat-row"><span class="label t-display">TOTAL</span><span class="value value--accent">XL · multi-week, focused team</span></div>
+          </div>
+        </div>
+        <p class="prose" style="margin-top: var(--space-lg);">A full-app redesign across ~40 routes and 14
+          subsystems. Dominant cost drivers: ~183 toast call sites (app-wide behavioral refactor), ~20 Recharts
+          components (re-theme/rebuild), and the page-by-page Card&rarr;<code>.card</code> /
+          status&rarr;<code>.tag</code> / form&rarr;<code>.field</code> conversion across every route.
+          De-risked substantially by (a) complete on-contract mockups for 12 screens + nothing.css shipping
+          nearly every needed class, and (b) the app already shipping red as <code>--destructive</code>, so the accent reuses an existing
+          token while the green <code>--primary</code> collapses to greyscale.
+          ~60% of the leverage lands from a handful of shared-surface edits (P0&ndash;P3).</p>
+      </section>
+
+      <div class="divider"></div>
+      <p class="caption t-disabled">AI Developer Hub · Spec 028 — Nothing Design Redesign · Implementation Plan ·
+        Styled with the Nothing design system (tokens only). Dark default; flip the toggle top-right.</p>
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/_CONTRACT.md b/specs/028-nothing-design-redesign/mockups/_CONTRACT.md
new file mode 100644
index 00000000..3be6459f
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/_CONTRACT.md
@@ -0,0 +1,175 @@
+# Mockup Authoring Contract — Nothing redesign
+
+Every screen mockup is a standalone `.html` file in this `mockups/` folder. It MUST link the shared
+`./styles/nothing.css` and `./styles/theme.js` and reuse the shell + component classes below verbatim.
+This file is the single source of consistency. Do not invent new color/spacing values, new fonts, or
+ad-hoc component styles. If a screen needs something truly bespoke, add a small scoped `<style>` block
+that only uses the existing CSS custom properties (`var(--...)`).
+
+## Hard rules (Nothing)
+
+- **Three layers only** per screen: ONE primary (hero number / title), secondary context, tertiary
+  metadata. Make the primary large and the tertiary small — the contrast IS the hierarchy.
+- **Monochrome canvas.** Greyscale does the hierarchy. `--accent` red is an *interrupt* — at most one
+  red UI moment per screen (active state / destructive / the single urgent number). If nothing is
+  urgent, no red.
+- **Data-status colors** (`--success` / `--warning` / `--accent`) are applied to the **value text only**,
+  never to row backgrounds or labels. Labels stay `--text-secondary`.
+- **Fonts:** Space Grotesk (UI/body), Space Mono (ALL CAPS labels + all numbers/data), Doto (hero
+  display 36px+ only). Max 2 families visible per screen besides a single Doto hero moment.
+- **Both modes must look intentional.** Use only the tokens; never hardcode `#fff`/`#000`. Test by
+  flipping the toggle — light is a printed-manual look, dark is an instrument panel.
+- **Anti-patterns — never:** shadows, gradients in chrome, blur, skeletons, toast popups, zebra
+  striping, filled/multi-color icons, emoji, border-radius > 16px on cards, bounce/spring easing.
+  Use inline `[SAVED]` / `[ERROR]` status text, `[LOADING…]`, and dividers/spacing instead of cards
+  for everything.
+- Mockups show realistic **sample data** drawn from the real page (real labels, plausible numbers,
+  real tool/user/vendor names). They are static — links can be `#` or sibling mockups; no real JS
+  behaviour beyond the theme toggle.
+
+## Canonical filenames (use these exact names for cross-links)
+
+`dashboard.html` `tools.html` `users.html` `assignments.html` `requests.html` `budget.html`
+`reports.html` `copilot.html` `claude.html` `invoices.html` `settings.html` `login.html`
+
+## Shell — copy verbatim, then (1) set `<title>`, (2) add `active` to the current nav item, (3) fill topbar + `<main>` content
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — SCREEN · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">SECTION&nbsp;/&nbsp;CONTEXT</div>
+          <h1 class="display-md">Page Title</h1>
+        </div>
+        <div class="topbar-actions">
+          <!-- screen-specific actions (search, primary button, period nav) go here, BEFORE the toggle -->
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+    </main>
+  </div>
+</body>
+</html>
+```
+
+For **auth** (`login.html`) skip the `.app`/sidebar shell entirely — use `.auth-screen` > `.auth-card`
+and put a small `.theme-toggle` top-right or below the card.
+
+## Component cheat-sheet (classes already in nothing.css)
+
+**Hero metric**
+```html
+<div class="metric metric-hero">
+  <span class="label">TOTAL ANNUAL BUDGET</span>
+  <span class="metric-value is-doto">128,400<span class="metric-unit">CHF</span></span>
+  <span class="metric-trend t-success">&uarr; 4.2% vs last year</span>
+</div>
+```
+
+**KPI card grid**
+```html
+<div class="grid grid--kpi">
+  <div class="card"><span class="label card-label">SPENT YTD</span>
+    <div class="metric"><span class="metric-value">82,140<span class="metric-unit">CHF</span></span></div>
+  </div>
+  <!-- … -->
+</div>
+```
+
+**Segmented progress bar** (signature viz — generate ~20 `.seg`; fill the proportion; overflow segments use `is-over`)
+```html
+<div class="seg-head"><span class="label">CLAUDE API · MARCH</span><span class="value value--warning mono">78%</span></div>
+<div class="seg-bar seg-bar--hero">
+  <span class="seg is-filled"></span> <!-- repeat filled… --> <span class="seg"></span> <!-- …then empty -->
+</div>
+```
+
+**Stat rows**
+```html
+<div class="stat-list">
+  <div class="stat-row"><span class="label">GITHUB COPILOT</span><span class="value value--success">$1,240.00</span></div>
+  <div class="stat-row"><span class="label">ANTHROPIC API</span><span class="value value--accent">$3,910.50</span></div>
+</div>
+```
+
+**Table** (numbers right + `.num` mono, active row gets `is-active`)
+```html
+<table class="table">
+  <thead><tr><th>Tool</th><th>Vendor</th><th class="num">Seats</th><th class="num">Monthly</th><th>Status</th></tr></thead>
+  <tbody>
+    <tr><td class="cell-strong">GitHub Copilot</td><td>GitHub</td><td class="num">42</td><td class="num">$798.00</td>
+        <td><span class="tag tag--success"><span class="led"></span>Active</span></td></tr>
+  </tbody>
+</table>
+```
+
+**Buttons** `.btn .btn--primary | --secondary | --ghost | --destructive` (add `.btn--sm`). **Tags**
+`.tag` + `--success/--warning/--accent/--active`, optional `<span class="led"></span>`. **Segmented
+control** `.segmented > button(.active)`. **Tabs** `.tabs > .tab(.active)`. **Period nav** `.period-nav`
+with `.nav-arrow`, `.period-label`. **Switch** `.switch(.on)`. **Field** `.field > label.label + .control`.
+**Search** `.search > svg + input`. **Empty** `.empty > .empty-title + .empty-sub`.
+
+## Inline monoline icons (16–20px, stroke 1.5, currentColor) — reuse, don't invent
+
+```html
+<!-- search -->   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+<!-- plus -->     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+<!-- chevron-left --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+<!-- chevron-right--> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+<!-- chevron-down --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+<!-- close (x) --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+<!-- arrow-up (trend) --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+<!-- arrow-down (trend) --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+<!-- check --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+<!-- upload --> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+```
+
+## Sparkline / line chart (mockup-scale)
+
+Use inline `<svg>` with `stroke="var(--text-display)"` `stroke-width="1.5"` `fill="none"`. Average line:
+`stroke="var(--text-secondary)" stroke-dasharray="3 3"`. Axis labels: `.axis > span`. No area fill, no
+legend boxes — label the line directly. For vertical bars use `.bars > .bar` (add `.is-muted`/`.is-accent`).
diff --git a/specs/028-nothing-design-redesign/mockups/assignments.html b/specs/028-nothing-design-redesign/mockups/assignments.html
new file mode 100644
index 00000000..5f0c8499
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/assignments.html
@@ -0,0 +1,562 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — License Assignments · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+  <style>
+    /* Scoped helpers — tokens only, no new colors/shadows. */
+
+    /* hero band: one big Doto number sat beside the page subtitle */
+    .hero-band { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2xl); flex-wrap: wrap; }
+    .hero-metric { display: flex; flex-direction: column; gap: var(--space-sm); }
+    .hero-metric .metric-value { font-size: var(--display-xl); }
+
+    /* faceted filter toolbar */
+    .filter-bar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
+    .facet {
+      display: inline-flex; align-items: center; gap: var(--space-sm);
+      padding: 8px 14px;
+      border: 1px solid var(--border-visible); border-radius: var(--radius-pill);
+      font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.06em; text-transform: uppercase;
+      color: var(--text-secondary);
+      transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
+    }
+    .facet:hover { border-color: var(--text-primary); color: var(--text-primary); }
+    .facet svg { width: 14px; height: 14px; stroke-width: 1.5; opacity: 0.7; }
+    .facet.is-on { border-color: var(--text-display); color: var(--text-display); }
+    .facet .count {
+      display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
+      border-radius: var(--radius-pill); background: var(--surface-raised);
+      font-size: 10px; color: var(--text-primary);
+    }
+
+    /* table-frame card with a thin meta header strip */
+    .table-frame { padding: 0; overflow: hidden; }
+    .table-head-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-visible); }
+    .table-scroll { overflow-x: auto; }
+    .table-frame .table { min-width: 940px; }
+    .table-frame .table thead th { padding-top: var(--space-md); }
+    .table-frame .table thead th:first-child,
+    .table-frame .table tbody td:first-child { padding-left: var(--space-lg); }
+    .table-frame .table thead th:last-child,
+    .table-frame .table tbody td:last-child { padding-right: var(--space-lg); }
+
+    /* sortable header affordance */
+    .th-sort { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
+    .th-sort svg { width: 12px; height: 12px; opacity: 0.55; }
+    .th-sort.is-active { color: var(--text-display); }
+    .th-sort.is-active svg { opacity: 1; }
+
+    /* primary cell = user identity */
+    .id-cell { display: flex; align-items: center; gap: var(--space-sm); }
+    .id-cell .avatar { width: 28px; height: 28px; font-size: 10px; }
+    .id-cell .stack { gap: 2px; }
+    .id-mail { font-family: var(--font-mono); font-size: 11px; color: var(--text-disabled); letter-spacing: 0.02em; }
+
+    /* source / sync inline markers (text only — no colored backgrounds) */
+    .src { font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.04em; color: var(--text-secondary); }
+    .em-dash { color: var(--text-disabled); }
+
+    /* row action cluster */
+    .row-actions { display: inline-flex; align-items: center; gap: var(--space-xs); justify-content: flex-end; }
+    .icon-btn { width: 32px; height: 32px; border-radius: var(--radius-tech); display: grid; place-items: center; color: var(--text-secondary); transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); }
+    .icon-btn:hover { color: var(--text-primary); background: var(--surface-raised); }
+    .icon-btn svg { width: 16px; height: 16px; stroke-width: 1.5; }
+    .managed-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-disabled); white-space: nowrap; }
+
+    /* pagination footer */
+    .table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border-visible); flex-wrap: wrap; }
+    .page-size { display: inline-flex; align-items: center; gap: var(--space-sm); }
+    .pager { display: inline-flex; align-items: center; gap: var(--space-sm); }
+    .pager .nav-arrow { width: 32px; height: 32px; border: 1px solid var(--border-visible); border-radius: var(--radius-tech); display: grid; place-items: center; color: var(--text-secondary); transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
+    .pager .nav-arrow:hover { border-color: var(--text-primary); color: var(--text-primary); }
+    .pager .nav-arrow[aria-disabled="true"] { opacity: 0.4; }
+    .pager .nav-arrow svg { width: 16px; height: 16px; }
+
+    /* layout columns: table is the hero, dialogs sit beside as static design specs */
+    .work-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); }
+    @media (min-width: 1180px) { .work-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
+
+    /* static dialog mockups (mounted inline, not modal overlays) */
+    .dialog-mock { border: 1px solid var(--border-visible); border-radius: var(--radius-card); background: var(--surface-raised); padding: var(--space-lg); }
+    .dialog-mock + .dialog-mock { margin-top: var(--space-lg); }
+    .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
+    .dialog-body { display: flex; flex-direction: column; gap: var(--space-lg); }
+    .combo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); border: 1px solid var(--border-visible); border-radius: var(--radius-compact); padding: 11px 14px; }
+    .combo .val { font-family: var(--font-mono); font-size: var(--body-sm); color: var(--text-display); }
+    .combo .ph { font-family: var(--font-mono); font-size: var(--body-sm); color: var(--text-disabled); }
+    .combo svg { width: 16px; height: 16px; stroke-width: 1.5; color: var(--text-secondary); }
+    .combo.is-disabled { opacity: 0.5; }
+    .tier-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
+
+    /* the ONE red moment: the Revoke confirmation AlertDialog */
+    .alert-dialog { border: 1px solid var(--accent); border-radius: var(--radius-card); background: var(--accent-subtle); padding: var(--space-lg); }
+    .alert-dialog .ad-head { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-md); }
+    .alert-dialog .ad-head svg { width: 20px; height: 20px; stroke-width: 1.5; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
+    .alert-dialog .ad-title { font-family: var(--font-ui); font-size: var(--subheading); font-weight: 500; color: var(--accent); }
+    .alert-dialog .ad-body { font-size: var(--body-sm); color: var(--text-primary); line-height: 1.5; }
+    .alert-dialog .ad-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
+
+    .warn-note { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
+    .warn-note svg { width: 13px; height: 13px; stroke-width: 1.5; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item active" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">LICENSES</div>
+          <h1 class="display-md">License Assignments</h1>
+        </div>
+        <div class="topbar-actions">
+          <a class="btn btn--secondary btn--sm" href="#">
+            <!-- upload -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+            Bulk Import
+          </a>
+          <button class="btn btn--primary btn--sm" type="button">
+            <!-- plus -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+            Assign License
+          </button>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- HERO BAND — the one big number; table is the hero, this frames it -->
+      <section class="hero-band">
+        <div class="hero-metric">
+          <span class="label">ACTIVE LICENSE ASSIGNMENTS</span>
+          <span class="metric-value is-doto">142<span class="metric-unit">assignments</span></span>
+          <span class="subheading t-secondary">Track user-to-tool license assignments</span>
+        </div>
+        <div class="stat-list" style="min-width:240px">
+          <div class="stat-row"><span class="label">MONTHLY SNAPSHOT</span><span class="value value--display">$2,684.00</span></div>
+          <div class="stat-row"><span class="label">MANAGED BY SYNC</span><span class="value">38</span></div>
+          <div class="stat-row"><span class="label">REVOKED · 30D</span><span class="value">6</span></div>
+        </div>
+      </section>
+
+      <div class="divider"></div>
+
+      <!-- FILTER / TOOLBAR ROW — wrapping flex of search + faceted multi-selects -->
+      <div class="filter-bar" style="margin-bottom:var(--space-lg)">
+        <span class="search" style="max-width:24rem">
+          <!-- search -->
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+          <input type="text" placeholder="Search assignments…" value="" />
+        </span>
+
+        <button class="facet is-on" type="button">
+          Tool<span class="count">3</span>
+          <!-- chevron-down -->
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+        </button>
+        <button class="facet" type="button">
+          Tier
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+        </button>
+        <button class="facet" type="button">
+          Workspace
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+        </button>
+        <button class="facet is-on" type="button">
+          Status<span class="count">1</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+        </button>
+        <button class="facet" type="button">
+          Source
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+        </button>
+
+        <button class="btn--ghost mono" type="button" style="font-size:var(--caption);letter-spacing:0.06em;text-transform:uppercase">
+          Reset
+          <!-- close -->
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="width:13px;height:13px;display:inline;vertical-align:middle;margin-left:4px"><path d="M18 6 6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+
+      <div class="work-grid">
+
+        <!-- ===== ASSIGNMENTS DATA TABLE — the hero section ===== -->
+        <section class="card table-frame">
+          <div class="table-head-strip">
+            <span class="label">SHOWING 1&ndash;5 OF 142 · SORTED BY ASSIGNED &darr;</span>
+            <span class="row" style="gap:var(--space-md)">
+              <span class="tag tag--success"><span class="led"></span>136 Active</span>
+              <span class="tag">6 Revoked</span>
+            </span>
+          </div>
+
+          <div class="table-scroll">
+            <table class="table">
+              <thead>
+                <tr>
+                  <th><span class="th-sort">User</span></th>
+                  <th><span class="th-sort">Tool</span></th>
+                  <th><span class="th-sort">Tier</span></th>
+                  <th class="num"><span class="th-sort">Monthly Cost</span></th>
+                  <th>Status</th>
+                  <th>Source</th>
+                  <th>Workspace</th>
+                  <th class="num">
+                    <span class="th-sort is-active">Assigned
+                      <!-- arrow-down -->
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+                    </span>
+                  </th>
+                  <th class="num"><span class="t-disabled label" style="letter-spacing:0.1em">Actions</span></th>
+                </tr>
+              </thead>
+              <tbody>
+
+                <!-- Tobias Studer — most recent (top of desc sort) -->
+                <tr>
+                  <td>
+                    <span class="id-cell">
+                      <span class="avatar">TS</span>
+                      <span class="stack">
+                        <span class="cell-strong">Tobias Studer</span>
+                        <span class="id-mail">tobias.studer@unic.com</span>
+                      </span>
+                    </span>
+                  </td>
+                  <td>Anthropic API</td>
+                  <td>Boost · usage-billed</td>
+                  <td class="num">$0.00</td>
+                  <td><span class="tag"><span class="led"></span>Active</span></td>
+                  <td><span class="src">Manual</span></td>
+                  <td>default-workspace</td>
+                  <td class="num">May 19, 2026</td>
+                  <td class="num">
+                    <span class="row-actions">
+                      <a class="icon-btn" href="#" title="View">
+                        <!-- eye -->
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                      </a>
+                      <button class="icon-btn" type="button" title="Edit">
+                        <!-- pencil -->
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                      </button>
+                      <button class="icon-btn" type="button" title="More actions">
+                        <!-- more-horizontal -->
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
+                      </button>
+                    </span>
+                  </td>
+                </tr>
+
+                <!-- Admin User · Cursor -->
+                <tr>
+                  <td>
+                    <span class="id-cell">
+                      <span class="avatar">AU</span>
+                      <span class="stack">
+                        <span class="cell-strong">Admin User</span>
+                        <span class="id-mail">admin@unic.com</span>
+                      </span>
+                    </span>
+                  </td>
+                  <td>Cursor</td>
+                  <td>Team</td>
+                  <td class="num">$40.00</td>
+                  <td><span class="tag"><span class="led"></span>Active</span></td>
+                  <td><span class="src">Manual</span></td>
+                  <td>team-alpha</td>
+                  <td class="num">Mar 01, 2026</td>
+                  <td class="num">
+                    <span class="row-actions">
+                      <a class="icon-btn" href="#" title="View">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                      </a>
+                      <button class="icon-btn" type="button" title="Edit">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                      </button>
+                      <button class="icon-btn" type="button" title="More actions">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
+                      </button>
+                    </span>
+                  </td>
+                </tr>
+
+                <!-- Marco Rossi · Claude · no workspace -->
+                <tr>
+                  <td>
+                    <span class="id-cell">
+                      <span class="avatar">MR</span>
+                      <span class="stack">
+                        <span class="cell-strong">Marco Rossi</span>
+                        <span class="id-mail">marco.rossi@unic.com</span>
+                      </span>
+                    </span>
+                  </td>
+                  <td>Claude</td>
+                  <td>Pro</td>
+                  <td class="num">$20.00</td>
+                  <td><span class="tag"><span class="led"></span>Active</span></td>
+                  <td><span class="src">Manual</span></td>
+                  <td><span class="em-dash mono">&mdash;</span></td>
+                  <td class="num">Feb 02, 2026</td>
+                  <td class="num">
+                    <span class="row-actions">
+                      <a class="icon-btn" href="#" title="View">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                      </a>
+                      <button class="icon-btn" type="button" title="Edit">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                      </button>
+                      <button class="icon-btn" type="button" title="More actions">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
+                      </button>
+                    </span>
+                  </td>
+                </tr>
+
+                <!-- Sarah Chen · GitHub Copilot · sync-managed (read-only) -->
+                <tr>
+                  <td>
+                    <span class="id-cell">
+                      <span class="avatar">SC</span>
+                      <span class="stack">
+                        <span class="cell-strong">Sarah Chen</span>
+                        <span class="id-mail">sarah.chen@unic.com</span>
+                      </span>
+                    </span>
+                  </td>
+                  <td>GitHub Copilot</td>
+                  <td>Business</td>
+                  <td class="num">$19.00</td>
+                  <td>
+                    <span class="row" style="gap:6px">
+                      <span class="tag"><span class="led"></span>Active</span>
+                      <span class="tag tag--tech">Sync</span>
+                    </span>
+                  </td>
+                  <td><span class="src">Copilot Sync</span></td>
+                  <td>unic-engineering</td>
+                  <td class="num">Jan 14, 2026</td>
+                  <td class="num">
+                    <span class="row-actions">
+                      <a class="icon-btn" href="#" title="View">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                      </a>
+                      <span class="managed-note" title="This assignment is managed by Copilot sync and cannot be edited or revoked manually.">Managed by sync</span>
+                    </span>
+                  </td>
+                </tr>
+
+                <!-- Lena Fischer · revoked · sync-managed -->
+                <tr>
+                  <td>
+                    <span class="id-cell">
+                      <span class="avatar">LF</span>
+                      <span class="stack">
+                        <span class="cell-strong">Lena Fischer</span>
+                        <span class="id-mail">lena.fischer@unic.com</span>
+                      </span>
+                    </span>
+                  </td>
+                  <td>GitHub Copilot</td>
+                  <td>Business</td>
+                  <td class="num">$19.00</td>
+                  <td>
+                    <span class="row" style="gap:6px">
+                      <span class="tag">Revoked</span>
+                      <span class="tag tag--tech">Sync</span>
+                    </span>
+                  </td>
+                  <td><span class="src">Copilot Sync</span></td>
+                  <td>unic-engineering</td>
+                  <td class="num">Nov 08, 2025</td>
+                  <td class="num">
+                    <span class="row-actions">
+                      <a class="icon-btn" href="#" title="View">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                      </a>
+                      <span class="managed-note" title="This assignment is managed by Copilot sync and cannot be edited or revoked manually.">Managed by sync</span>
+                    </span>
+                  </td>
+                </tr>
+
+              </tbody>
+            </table>
+          </div>
+
+          <!-- pagination footer: page-size selector + prev/next -->
+          <div class="table-foot">
+            <span class="page-size">
+              <span class="label">ROWS PER PAGE</span>
+              <span class="segmented">
+                <button class="active" type="button">10</button>
+                <button type="button">25</button>
+                <button type="button">50</button>
+                <button type="button">100</button>
+              </span>
+            </span>
+            <span class="pager">
+              <span class="caption">PAGE 1 OF 15</span>
+              <span class="nav-arrow" aria-disabled="true" title="Previous">
+                <!-- chevron-left -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+              </span>
+              <span class="nav-arrow" title="Next">
+                <!-- chevron-right -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+              </span>
+            </span>
+          </div>
+        </section>
+
+        <!-- ===== SIDE COLUMN — admin dialogs as static design specs ===== -->
+        <aside class="stack stack--lg">
+
+          <!-- Assign License dialog -->
+          <div class="dialog-mock">
+            <div class="dialog-head">
+              <span class="heading" style="font-size:var(--subheading)">Assign License</span>
+              <span class="icon-btn">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+              </span>
+            </div>
+            <div class="dialog-body">
+              <div class="field">
+                <label class="label">User</label>
+                <div class="combo">
+                  <span class="val">Sarah Chen</span>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+                </div>
+              </div>
+              <div class="field">
+                <label class="label">Tool</label>
+                <div class="combo">
+                  <span class="val">GitHub Copilot</span>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                </div>
+              </div>
+              <div class="field">
+                <label class="label">Tier</label>
+                <div class="combo">
+                  <span class="tier-line" style="flex:1">
+                    <span class="val">Business</span>
+                    <span class="src">$19.00 / mo</span>
+                  </span>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                </div>
+              </div>
+              <button class="btn btn--primary" type="button" style="width:100%">Assign License</button>
+            </div>
+          </div>
+
+          <!-- Edit Assignment dialog -->
+          <div class="dialog-mock">
+            <div class="dialog-head">
+              <span class="heading" style="font-size:var(--subheading)">Edit Assignment</span>
+              <span class="icon-btn">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+              </span>
+            </div>
+            <div class="dialog-body">
+              <div class="field">
+                <label class="label">Tier</label>
+                <div class="combo">
+                  <span class="tier-line" style="flex:1">
+                    <span class="val">Business</span>
+                    <span class="src">$19.00 / mo</span>
+                  </span>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                </div>
+              </div>
+              <div class="field">
+                <label class="label">Assigned Date</label>
+                <div class="combo">
+                  <span class="val">Jan 14, 2026</span>
+                  <!-- calendar -->
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></svg>
+                </div>
+                <span class="warn-note t-warning">
+                  <!-- alert-triangle -->
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+                  This date is more than 12 months in the past.
+                </span>
+              </div>
+              <div class="field">
+                <label class="label">Workspace</label>
+                <input class="control" type="text" value="team-alpha" />
+              </div>
+              <div class="field">
+                <label class="label">API Key</label>
+                <div class="combo">
+                  <span class="ph mono">&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</span>
+                  <span class="row" style="gap:var(--space-sm)">
+                    <!-- eye -->
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                    <!-- copy -->
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
+                  </span>
+                </div>
+                <span class="caption t-disabled">An existing key is stored. Leave blank to keep it.</span>
+              </div>
+              <button class="btn btn--primary" type="button" style="width:100%">Save Changes</button>
+            </div>
+          </div>
+
+          <!-- ===== THE SINGLE RED MOMENT — Revoke AlertDialog ===== -->
+          <div class="alert-dialog" role="alertdialog" aria-labelledby="revoke-title">
+            <div class="ad-head">
+              <!-- alert-triangle -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+              <span class="ad-title" id="revoke-title">Revoke this assignment?</span>
+            </div>
+            <p class="ad-body">
+              Marco Rossi will lose access to <strong>Claude · Pro</strong>. This frees the seat but keeps the
+              historical cost snapshot. You can re-assign later.
+            </p>
+            <div class="ad-actions">
+              <button class="btn btn--secondary btn--sm" type="button">Cancel</button>
+              <button class="btn btn--destructive btn--sm" type="button">Revoke</button>
+            </div>
+          </div>
+
+        </aside>
+      </div>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/budget.html b/specs/028-nothing-design-redesign/mockups/budget.html
new file mode 100644
index 00000000..137da8e4
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/budget.html
@@ -0,0 +1,436 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Budget · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item active" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">SPEND&nbsp;TRACKING</div>
+          <h1 class="display-md">Budget</h1>
+        </div>
+        <div class="topbar-actions">
+          <a class="btn btn--ghost btn--sm" href="./budget-history.html">All budgets</a>
+          <a class="btn btn--secondary btn--sm" href="./budget-new.html">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+            New Budget
+          </a>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- Breadcrumb (suppressed on /budget landing; shown here for the FY detail view) -->
+      <nav class="row" style="gap:var(--space-sm);margin-bottom:var(--space-lg)">
+        <a href="./budget-history.html" class="caption mono t-secondary">Budget history</a>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;color:var(--text-disabled)"><path d="m9 18 6-6-6-6"/></svg>
+        <span class="caption mono t-primary">FY 2026</span>
+      </nav>
+
+      <!-- Budget title row: FY name + eyebrow, status badge, period-type caption -->
+      <section class="row row--between row--wrap" style="align-items:flex-end;margin-bottom:var(--space-lg)">
+        <div class="stack stack--sm">
+          <span class="label eyebrow">ANNUAL&nbsp;AI&nbsp;TOOL&nbsp;BUDGET</span>
+          <div class="row" style="gap:var(--space-md)">
+            <span class="heading">FY 2026 Budget</span>
+            <span class="tag tag--active"><span class="led"></span>Active</span>
+          </div>
+        </div>
+        <span class="caption mono">Monthly allocation</span>
+      </section>
+
+      <!-- ================= PRIMARY SECTION: Budget health hero (heaviest treatment) ================= -->
+      <div class="card card--pad-lg">
+        <!-- top: narrative + status on left, hero ceiling on right -->
+        <div class="row row--between row--wrap" style="align-items:flex-start;gap:var(--space-2xl);margin-bottom:var(--space-xl)">
+          <div class="stack stack--md" style="max-width:46ch">
+            <div class="row" style="gap:var(--space-md)">
+              <span class="tag tag--warning"><span class="led"></span>At risk</span>
+              <span class="caption mono t-warning">Variance +$3,200.00 through May 2026</span>
+            </div>
+            <p class="subheading" style="line-height:1.5">
+              Tracking <span class="mono t-warning">$3,200.00</span> over the closed-period plan &mdash;
+              actual <span class="mono">$52,300.00</span> vs <span class="mono">$49,100.00</span> expected through May.
+              Projected to land under ceiling.
+            </p>
+          </div>
+          <div class="metric" style="align-items:flex-end;text-align:right">
+            <span class="label">ANNUAL CEILING</span>
+            <span class="metric-value is-doto" style="font-size:var(--display-xl)">240,000<span class="metric-unit">USD</span></span>
+            <span class="metric-trend t-secondary">$18,500.00 unallocated</span>
+          </div>
+        </div>
+
+        <!-- SIGNATURE VIZ: multi-marker segmented progress bar -->
+        <div class="seg-head">
+          <span class="label">SPEND vs CEILING &middot; FY 2026</span>
+          <span class="value value--display mono">Ceiling $240,000.00</span>
+        </div>
+        <!-- 20 segments: actual YTD fill (~8), allocated-remaining (~10), empty headroom (~2) -->
+        <div class="seg-bar seg-bar--hero">
+          <span class="seg is-filled"></span>
+          <span class="seg is-filled"></span>
+          <span class="seg is-filled"></span>
+          <span class="seg is-filled"></span>
+          <span class="seg is-filled"></span>
+          <span class="seg is-filled"></span>
+          <span class="seg is-filled"></span>
+          <span class="seg is-filled" style="opacity:0.5"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg" style="background:var(--border-visible)"></span>
+          <span class="seg"></span>
+          <span class="seg"></span>
+        </div>
+
+        <!-- marker legend -->
+        <div class="legend" style="margin-top:var(--space-md)">
+          <span class="legend-item"><span class="swatch" style="background:var(--text-display)"></span>Actual YTD &middot; <span class="mono t-primary">$100,520.00</span></span>
+          <span class="legend-item"><span class="swatch" style="background:var(--border-visible)"></span>Allocated remaining</span>
+          <span class="legend-item"><span class="swatch" style="width:2px;height:12px;background:var(--text-secondary)"></span>Planned YTD &middot; <span class="mono">$100,000.00</span></span>
+          <span class="legend-item"><span class="swatch" style="width:2px;height:12px;background:var(--warning)"></span>Expected through May 2026 &middot; <span class="mono">$49,100.00</span></span>
+        </div>
+
+        <hr class="divider" style="margin:var(--space-xl) 0" />
+
+        <!-- 4-tile KPI grid -->
+        <div class="grid grid--kpi">
+          <div class="card card--raised">
+            <span class="label card-label">BILLED YTD</span>
+            <div class="metric">
+              <span class="metric-value" style="font-size:var(--display-md)">96,400<span class="metric-unit">USD</span></span>
+              <span class="caption mono t-secondary">+ $4,120.00 running API</span>
+            </div>
+          </div>
+          <div class="card card--raised">
+            <span class="label card-label">ACTUAL YTD</span>
+            <div class="metric">
+              <span class="metric-value" style="font-size:var(--display-md)">100,520<span class="metric-unit">USD</span></span>
+              <span class="caption mono t-secondary">$8,300.00 in Jun 2026 so far</span>
+            </div>
+          </div>
+          <div class="card card--raised">
+            <span class="label card-label">PROJECTED YEAR-END</span>
+            <div class="metric">
+              <span class="metric-value" style="font-size:var(--display-md)">231,800<span class="metric-unit">USD</span></span>
+              <span class="caption mono t-success">$8,200.00 under ceiling</span>
+            </div>
+          </div>
+          <div class="card card--raised">
+            <span class="label card-label">VARIANCE THRU MAY 2026</span>
+            <div class="metric">
+              <span class="metric-value t-warning" style="font-size:var(--display-md)">+3,200<span class="metric-unit">USD</span></span>
+              <span class="caption mono t-secondary">$52,300.00 vs $49,100.00 expected</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ================= SECONDARY: Past month spotlight (varied form — eyebrow card + KPI grid) ================= -->
+      <div class="section-gap">
+        <div class="card card--pad-lg">
+          <span class="label card-label">PAST MONTH SPOTLIGHT</span>
+          <div class="row row--between row--wrap" style="align-items:baseline;margin-bottom:var(--space-lg)">
+            <span class="heading">May 2026 &mdash; $19,800.00 actual vs $20,000.00 planned</span>
+            <span class="caption mono t-success">On track &middot; within plan</span>
+          </div>
+          <div class="grid grid--4">
+            <div class="stack stack--sm">
+              <span class="label">PLANNED</span>
+              <span class="metric-value mono" style="font-size:var(--heading)">$20,000.00</span>
+              <span class="caption">Allocated</span>
+            </div>
+            <div class="stack stack--sm">
+              <span class="label">EXPECTED</span>
+              <span class="metric-value mono" style="font-size:var(--heading)">$18,500.00</span>
+              <span class="caption">From license assignments</span>
+            </div>
+            <div class="stack stack--sm">
+              <span class="label">ACTUAL</span>
+              <span class="metric-value mono" style="font-size:var(--heading)">$19,800.00</span>
+              <span class="caption">$18,940.00 billed + $860.00 API</span>
+            </div>
+            <div class="stack stack--sm">
+              <span class="label">VARIANCE %</span>
+              <span class="metric-value mono t-warning" style="font-size:var(--heading)">+7.0%</span>
+              <span class="caption">+$1,300.00 vs expected</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ================= PRIMARY DATA: Period allocations & billed costs table ================= -->
+      <div class="section-gap">
+        <div class="row row--between" style="margin-bottom:var(--space-md)">
+          <span class="label">PERIOD ALLOCATIONS &amp; BILLED COSTS</span>
+          <span class="caption mono">12 monthly periods &middot; click <span class="t-primary">&#9662;</span> to expand line items</span>
+        </div>
+
+        <div class="card card--pad-lg">
+          <table class="table">
+            <thead>
+              <tr>
+                <th style="width:34px"></th>
+                <th>Period</th>
+                <th class="num">Planned</th>
+                <th class="num">Expected</th>
+                <th class="num">Actual</th>
+                <th class="num">Variance</th>
+                <th class="num">% Diff</th>
+                <th style="width:80px"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- January -->
+              <tr>
+                <td class="num">
+                  <button class="nav-arrow" style="width:24px;height:24px;color:var(--text-secondary)">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="m9 18 6-6-6-6"/></svg>
+                  </button>
+                </td>
+                <td class="cell-strong">Jan 2026</td>
+                <td class="num"><input value="$20,000.00" readonly style="all:unset;font-family:var(--font-mono);font-size:var(--body-sm);color:var(--text-display);text-align:right;border-bottom:1px solid var(--border-visible);min-width:96px" /></td>
+                <td class="num t-secondary">$18,500.00</td>
+                <td class="num">$18,940.00</td>
+                <td class="num value--success">-$420.00</td>
+                <td class="num"><span class="tag tag--success">-2%</span></td>
+                <td class="num">
+                  <span class="row" style="gap:var(--space-xs);justify-content:flex-end">
+                    <button class="nav-arrow" style="width:24px;height:24px" title="Add billed cost">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="width:16px;height:16px"><path d="M12 5v14M5 12h14"/></svg>
+                    </button>
+                  </span>
+                </td>
+              </tr>
+
+              <!-- January expanded: line items (raised surface, no box-shadow rail) -->
+              <tr>
+                <td style="background:var(--surface-raised)"></td>
+                <td colspan="7" style="padding-top:0;background:var(--surface-raised)">
+                  <div class="stat-list" style="margin:var(--space-xs) 0 var(--space-sm)">
+                    <div class="stat-row">
+                      <span class="stack">
+                        <span class="t-primary" style="font-size:13px">GitHub Copilot Business &mdash; March invoice</span>
+                        <span class="caption">Ref: INV-2026-001 &middot; 2026-03-31</span>
+                      </span>
+                      <span class="row" style="gap:var(--space-md)">
+                        <span class="value mono">$4,200.00</span>
+                        <button class="nav-arrow" style="width:24px;height:24px" title="Edit">
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                        </button>
+                        <button class="nav-arrow" style="width:24px;height:24px" title="Delete">
+                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><path d="M18 6 6 18M6 6l12 12"/></svg>
+                        </button>
+                      </span>
+                    </div>
+                    <!-- running API row — neutral surface/label; blue stays on the value text only -->
+                    <div class="stat-row">
+                      <span class="stack">
+                        <span class="row" style="gap:var(--space-sm)">
+                          <span class="t-secondary" style="font-size:13px">Anthropic API</span>
+                          <span class="tag tag--tech">[LIVE]</span>
+                        </span>
+                        <span class="caption">Workspace: Default &middot; Updated Jun 2, 2026 14:05</span>
+                      </span>
+                      <span class="value mono" style="color:var(--interactive)">$4,120.00 <span class="caption">(API)</span></span>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+
+              <!-- May — the single over-budget period (ONE red moment) -->
+              <tr>
+                <td class="num">
+                  <button class="nav-arrow" style="width:24px;height:24px;color:var(--text-secondary)">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="m9 18 6-6-6-6"/></svg>
+                  </button>
+                </td>
+                <td class="cell-strong">May 2026</td>
+                <td class="num"><input value="$20,000.00" readonly style="all:unset;font-family:var(--font-mono);font-size:var(--body-sm);color:var(--text-display);text-align:right;border-bottom:1px solid var(--border-visible);min-width:96px" /></td>
+                <td class="num t-secondary">$18,500.00</td>
+                <td class="num">$21,300.00</td>
+                <td class="num value--accent">+$2,800.00</td>
+                <td class="num"><span class="tag tag--accent">+15%</span></td>
+                <td class="num">
+                  <button class="nav-arrow" style="width:24px;height:24px" title="Add billed cost">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="width:16px;height:16px"><path d="M12 5v14M5 12h14"/></svg>
+                  </button>
+                </td>
+              </tr>
+
+              <!-- June — current, partial period with running API -->
+              <tr>
+                <td class="num">
+                  <button class="nav-arrow" style="width:24px;height:24px;color:var(--text-secondary)">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="m9 18 6-6-6-6"/></svg>
+                  </button>
+                </td>
+                <td>
+                  <span class="row" style="gap:var(--space-sm)">
+                    <span class="cell-strong">Jun 2026</span>
+                    <span class="tag tag--active"><span class="led"></span>Current</span>
+                  </span>
+                </td>
+                <td class="num"><input value="$20,000.00" readonly style="all:unset;font-family:var(--font-mono);font-size:var(--body-sm);color:var(--text-display);text-align:right;border-bottom:1px solid var(--border-visible);min-width:96px" /></td>
+                <td class="num t-secondary">$18,500.00</td>
+                <td class="num" style="color:var(--interactive)">$8,300.00 <span class="caption">(API)</span></td>
+                <td class="num t-disabled">&mdash;</td>
+                <td class="num t-disabled">&mdash;</td>
+                <td class="num">
+                  <button class="nav-arrow" style="width:24px;height:24px" title="Add billed cost">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="width:16px;height:16px"><path d="M12 5v14M5 12h14"/></svg>
+                  </button>
+                </td>
+              </tr>
+
+              <!-- Total footer -->
+              <tr>
+                <td></td>
+                <td class="cell-strong">Total through May 2026</td>
+                <td class="num cell-strong">$238,000.00</td>
+                <td class="num t-secondary">$92,500.00</td>
+                <td class="num cell-strong">$96,640.00</td>
+                <td class="num value--warning">+$4,140.00</td>
+                <td class="num"></td>
+                <td></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <!-- Save row + over-allocation warning (admin, non-archived) -->
+          <div class="row row--between row--wrap" style="margin-top:var(--space-lg);gap:var(--space-md)">
+            <span class="caption mono t-secondary">Inline-edit any Planned cell, then save. Archived budgets are read-only.</span>
+            <div class="row" style="gap:var(--space-md)">
+              <span class="caption mono t-warning">Allocations exceed budget by $4,000.00</span>
+              <button class="btn btn--primary btn--sm">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                Save Allocations
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ================= TERTIARY: dialogs & alternate states (reference forms) ================= -->
+      <div class="section-gap">
+        <div class="row row--between" style="margin-bottom:var(--space-md)">
+          <span class="label">DIALOGS &amp; STATES</span>
+          <span class="caption mono">Add / edit billed cost &middot; delete &middot; empty</span>
+        </div>
+
+        <div class="grid grid--2">
+          <!-- Add / Edit Billed Cost dialog -->
+          <div class="card card--pad-lg">
+            <div class="row row--between" style="margin-bottom:var(--space-lg)">
+              <span class="heading">Add Billed Cost</span>
+              <button class="nav-arrow" style="width:24px;height:24px" title="Close">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="width:18px;height:18px"><path d="M18 6 6 18M6 6l12 12"/></svg>
+              </button>
+            </div>
+            <div class="stack stack--lg">
+              <div class="field">
+                <label class="label">AMOUNT ($)</label>
+                <input class="control" type="text" value="4200.00" />
+              </div>
+              <div class="field">
+                <label class="label">INVOICE DATE</label>
+                <input class="control" type="text" value="2026-03-31" />
+              </div>
+              <div class="field">
+                <label class="label">DESCRIPTION</label>
+                <input class="control" type="text" value="GitHub Copilot Business - March invoice" />
+              </div>
+              <div class="field">
+                <label class="label">VENDOR REFERENCE (OPTIONAL)</label>
+                <input class="control" type="text" value="INV-2026-001" />
+              </div>
+            </div>
+            <div class="row row--between" style="margin-top:var(--space-xl)">
+              <button class="btn btn--ghost btn--sm">Cancel</button>
+              <div class="row" style="gap:var(--space-sm)">
+                <span class="caption mono t-secondary">Add Cost / Save Changes</span>
+                <button class="btn btn--primary btn--sm">Add Cost</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="stack stack--lg">
+            <!-- Delete confirmation (destructive AlertDialog) -->
+            <div class="card card--pad-lg">
+              <span class="label card-label">CONFIRM &middot; ALERTDIALOG</span>
+              <h2 class="heading" style="margin-bottom:var(--space-sm)">Delete billed cost?</h2>
+              <p class="caption" style="line-height:1.7;margin-bottom:var(--space-lg)">
+                This will permanently remove the billed cost entry
+                &ldquo;GitHub Copilot Business - March invoice&rdquo;
+                (<span class="mono t-primary">$4,200.00</span>). This action cannot be undone.
+              </p>
+              <div class="row" style="gap:var(--space-sm);justify-content:flex-end">
+                <button class="btn btn--ghost btn--sm">Cancel</button>
+                <button class="btn btn--secondary btn--sm">Delete</button>
+              </div>
+            </div>
+
+            <!-- Empty state (no active budget) -->
+            <div class="card card--pad-lg">
+              <span class="label card-label">EMPTY &middot; NO ACTIVE BUDGET</span>
+              <div class="empty" style="padding:var(--space-2xl) var(--space-md)">
+                <div class="empty-title">No active budget for the current fiscal year.</div>
+                <div class="empty-sub" style="margin-bottom:var(--space-xl)">Annual AI tool budget planning.</div>
+                <div class="row" style="gap:var(--space-sm);justify-content:center">
+                  <a href="./budget-new.html" class="btn btn--primary btn--sm">Create Annual Budget</a>
+                  <a href="./budget-history.html" class="btn btn--secondary btn--sm">View past budgets</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/claude.html b/specs/028-nothing-design-redesign/mockups/claude.html
new file mode 100644
index 00000000..bb3cc785
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/claude.html
@@ -0,0 +1,593 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Claude Console · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+  <style>
+    /* Scoped Claude Console layout — tokens only, no new colors/shadows. */
+
+    /* In-content tabs use a neutral underline so red stays the single content
+       interrupt (matches copilot.html / reports.html / settings.html). */
+    .tabs .tab.active::after { background: var(--border-visible); }
+
+    /* Sync status pill (tertiary chrome, links to /settings/sync) */
+    .sync-pill {
+      display: inline-flex; align-items: center; gap: var(--space-sm);
+      padding: 6px 14px;
+      border: 1px solid var(--border-visible); border-radius: var(--radius-pill);
+      font-family: var(--font-mono); font-size: var(--caption);
+      letter-spacing: 0.04em; color: var(--text-secondary);
+    }
+    .sync-pill .led { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--success); }
+
+    /* spinner for "Syncing…" state on the Trigger Sync button */
+    .spinner {
+      width: 16px; height: 16px; flex-shrink: 0;
+      border: 2px solid currentColor; border-top-color: transparent;
+      border-radius: var(--radius-pill);
+      animation: spin 720ms linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1ms; } }
+
+    /* lightweight select — reuses field/search look without a new component */
+    .mini-select {
+      display: inline-flex; align-items: center; gap: var(--space-sm);
+      padding: 8px 14px;
+      border: 1px solid var(--border-visible); border-radius: var(--radius-pill);
+      font-family: var(--font-mono); font-size: var(--label);
+      letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary);
+    }
+    .mini-select svg { width: 14px; height: 14px; opacity: 0.7; }
+
+    /* card heading line shared across secondary sections */
+    .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
+    .card-title { font-family: var(--font-ui); font-size: var(--subheading); font-weight: 500; color: var(--text-display); }
+    .card-sub { font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.04em; color: var(--text-secondary); margin-top: var(--space-xs); }
+
+    /* the over-budget projected KPI tile — the ONE red interrupt */
+    .kpi-alert { border-color: var(--accent); }
+    .kpi-alert .alert-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
+    .kpi-alert .alert-mark svg { width: 14px; height: 14px; }
+
+    /* trend caption with tone-colored value */
+    .kpi-foot { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.03em; }
+    .kpi-foot svg { width: 13px; height: 13px; }
+
+    /* est. chip (dashed, never merged into actuals — spec 033) */
+    .chip-est {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 2px 9px;
+      border: 1px dashed var(--border-visible); border-radius: var(--radius-pill);
+      font-family: var(--font-mono); font-size: var(--label);
+      letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
+    }
+
+    /* ---- daily stacked bar chart (mockup-scale, pure CSS columns) ---- */
+    .chart-plot { display: flex; gap: var(--space-lg); }
+    .chart-yaxis { display: flex; flex-direction: column; justify-content: space-between; height: 180px; padding-bottom: 22px; }
+    .chart-yaxis span { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.06em; color: var(--text-disabled); }
+    .chart-cols { flex: 1; display: flex; align-items: flex-end; gap: 5px; height: 180px; }
+    .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 1px; }
+    .col .seglet { width: 100%; }
+    .col .s-1 { background: var(--text-display); }
+    .col .s-2 { background: var(--text-secondary); }
+    .col .s-3 { background: var(--border-visible); }
+    /* dashed ghost "Today (est.)" bar — outline only, never filled */
+    .col.is-est .ghost {
+      width: 100%;
+      border: 1px dashed var(--text-secondary);
+      border-bottom: none;
+      background: transparent;
+    }
+    .chart-xaxis { display: flex; gap: 5px; margin-top: var(--space-sm); padding-left: calc(var(--space-lg) + 28px); }
+    .chart-xaxis span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.02em; color: var(--text-disabled); }
+
+    /* ---- 12-month historical bars ---- */
+    .hist-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
+    .hist-bars .hb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
+    .hist-bars .hb .fill { width: 100%; background: var(--text-display); min-height: 3px; }
+    .hist-bars .hb .fill.is-proj { background: transparent; border: 1px dashed var(--text-secondary); border-bottom: none; }
+    .hist-bars .hb.is-muted .fill { background: var(--border-visible); }
+
+    /* ---- workspace budget rows ---- */
+    .ws-list { display: flex; flex-direction: column; }
+    .ws-row { display: grid; grid-template-columns: 1.6fr 1.3fr 1fr 1.2fr auto; align-items: center; gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: 1px solid var(--border); }
+    .ws-row:last-child { border-bottom: none; }
+    .ws-name { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
+    .ws-dot { width: 9px; height: 9px; border-radius: var(--radius-pill); flex-shrink: 0; }
+    .ws-link { font-family: var(--font-ui); font-size: var(--body-sm); color: var(--text-display); }
+    .ws-link:hover { color: var(--text-primary); }
+    .ws-badges { display: flex; gap: var(--space-xs); margin-top: 5px; flex-wrap: wrap; }
+    .ws-spend { font-family: var(--font-mono); font-size: var(--body-sm); color: var(--text-primary); }
+    .ws-spend .of { color: var(--text-disabled); }
+    .ws-util { display: flex; flex-direction: column; gap: 6px; }
+    .ws-util .util-num { font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.04em; }
+    .ws-util .on-pace { font-family: var(--font-mono); font-size: var(--label); color: var(--text-disabled); letter-spacing: 0.04em; }
+    .ws-spark { display: flex; align-items: center; gap: var(--space-sm); }
+    .ws-spark .delta { font-family: var(--font-mono); font-size: var(--caption); display: inline-flex; align-items: center; gap: 3px; }
+    .ws-spark .delta svg { width: 12px; height: 12px; }
+    .ws-action { justify-self: end; }
+
+    .num-tab { font-variant-numeric: tabular-nums; }
+
+    /* small badge variant tuned for inline dot+name rows */
+    .badge {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 2px 9px;
+      border: 1px solid var(--border-visible); border-radius: var(--radius-pill);
+      font-family: var(--font-mono); font-size: var(--label);
+      letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
+    }
+    .badge--warning { border-color: var(--warning); color: var(--warning); }
+    .badge--accent { border-color: var(--accent); color: var(--accent); }
+
+    .show-hidden { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.06em; color: var(--text-secondary); padding-top: var(--space-md); }
+    .show-hidden svg { width: 14px; height: 14px; opacity: 0.7; }
+
+    @media (max-width: 900px) {
+      .ws-row { grid-template-columns: 1fr 1fr; row-gap: var(--space-md); }
+      .ws-action { justify-self: start; grid-column: 1 / -1; }
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item active" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">ANTHROPIC API</div>
+          <h1 class="display-md">Claude Console</h1>
+          <p class="subheading t-secondary" style="margin-top:var(--space-sm)">Org-wide usage, budgets, and Anthropic sync status.</p>
+        </div>
+        <div class="topbar-actions">
+          <!-- sync status pill — links to /settings/sync -->
+          <a class="sync-pill" href="./settings.html">
+            <span class="led"></span>Synced 12m ago &middot; next in 48m
+          </a>
+          <!-- Trigger Sync (RefreshCw) — idle state; shows spinner + "Syncing…" while running -->
+          <button class="btn btn--secondary btn--sm">
+            <!-- refresh-cw -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5M3 21v-5h5"/></svg>
+            Trigger Sync
+          </button>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- Tab strip: Workspaces (active) | Users -->
+      <div class="tabs" style="margin-bottom:var(--space-xl)">
+        <a class="tab active" href="./claude.html">Workspaces</a>
+        <a class="tab" href="./claude.html#users">Users</a>
+      </div>
+
+      <!-- Controls row: MonthPicker + Workspace filter -->
+      <div class="row row--between row--wrap" style="margin-bottom:var(--space-xl)">
+        <span class="label eyebrow">CLAUDE CONSOLE &middot; WORKSPACES</span>
+        <div class="row row--wrap" style="gap:var(--space-sm)">
+          <button class="mini-select">
+            Jun 2026
+            <!-- chevron-down -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+          </button>
+          <button class="mini-select">
+            All workspaces
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- ===== HERO METRIC — primary layer ===== -->
+      <div class="card card--pad-lg" style="margin-bottom:var(--space-2xl)">
+        <div class="row row--between row--wrap" style="align-items:flex-start;gap:var(--space-2xl)">
+          <div class="metric">
+            <span class="label">CLAUDE API SPENDING &middot; TOTAL &middot; JUN 2026</span>
+            <span class="metric-value is-doto num-tab">$18,420.55<span class="metric-unit">USD &middot; MTD billed</span></span>
+            <div class="row row--wrap" style="gap:var(--space-sm);margin-top:var(--space-xs)">
+              <span class="chip-est">
+                <!-- plus -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+                $612.40 est. today
+              </span>
+              <span class="metric-trend t-success">
+                <!-- arrow-up -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+                +14% vs prior month
+              </span>
+            </div>
+          </div>
+          <span class="caption t-disabled" style="max-width:30ch;text-align:right">Today is an estimate &mdash; shown as a dashed ghost bar, never merged into billed actuals.</span>
+        </div>
+      </div>
+
+      <!-- ===== Org KPI strip — secondary layer ===== -->
+      <div class="label" style="margin-bottom:var(--space-md)">ORG KPI STRIP</div>
+      <div class="grid grid--kpi" style="margin-bottom:var(--space-2xl)">
+
+        <div class="card">
+          <span class="label card-label">TOTAL &middot; JUN 2026</span>
+          <div class="metric">
+            <span class="metric-value num-tab" style="font-size:var(--display-md)">$18,420.55</span>
+            <span class="kpi-foot t-secondary">incl. <span class="t-primary">+$612.40</span> est. today</span>
+          </div>
+        </div>
+
+        <div class="card">
+          <span class="label card-label">MOM DELTA</span>
+          <div class="metric">
+            <span class="metric-value num-tab" style="font-size:var(--display-md)">+$2,310.00</span>
+            <span class="kpi-foot t-success">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+              +14% vs prior month
+            </span>
+          </div>
+        </div>
+
+        <!-- THE single red moment: projected month-end exceeds budget -->
+        <div class="card kpi-alert">
+          <span class="label card-label">PROJECTED MONTH-END</span>
+          <div class="metric">
+            <span class="metric-value num-tab value--accent" style="font-size:var(--display-md)">$31,800.00</span>
+            <span class="kpi-foot alert-mark">
+              <!-- alert-triangle -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg>
+              106% of $30,000.00 &middot; incl. est. today
+            </span>
+          </div>
+        </div>
+
+        <div class="card">
+          <span class="label card-label">WORKSPACES OVER 80%</span>
+          <div class="metric">
+            <span class="metric-value num-tab" style="font-size:var(--display-md)">2<span class="metric-unit">/ 9</span></span>
+            <span class="kpi-foot t-secondary">Platform Eng &middot; <span class="t-warning">112%</span></span>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- ===== Daily spend by workspace — HEAVIEST treatment (main section) ===== -->
+      <div class="card card--pad-lg" style="margin-bottom:var(--space-2xl)">
+        <div class="card-head">
+          <div>
+            <div class="card-title">Daily spend by workspace</div>
+            <div class="card-sub">Stacked &middot; top 8 workspaces + Other &middot; $18,420.55 this period</div>
+          </div>
+          <div class="row" style="gap:var(--space-sm)">
+            <span class="label">USE WORKSPACE COLORS</span>
+            <span class="switch on" role="switch" aria-checked="true"></span>
+          </div>
+        </div>
+
+        <div class="chart-plot">
+          <div class="chart-yaxis">
+            <span>$600</span><span>$300</span><span>$0</span>
+          </div>
+          <div class="chart-cols">
+            <!-- each column: stacked seglets (Platform Eng / Data Science / Default+Other) -->
+            <div class="col"><span class="seglet s-1" style="height:54%"></span><span class="seglet s-2" style="height:22%"></span><span class="seglet s-3" style="height:14%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:48%"></span><span class="seglet s-2" style="height:20%"></span><span class="seglet s-3" style="height:12%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:60%"></span><span class="seglet s-2" style="height:24%"></span><span class="seglet s-3" style="height:10%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:44%"></span><span class="seglet s-2" style="height:18%"></span><span class="seglet s-3" style="height:9%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:52%"></span><span class="seglet s-2" style="height:26%"></span><span class="seglet s-3" style="height:13%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:58%"></span><span class="seglet s-2" style="height:21%"></span><span class="seglet s-3" style="height:11%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:40%"></span><span class="seglet s-2" style="height:16%"></span><span class="seglet s-3" style="height:8%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:50%"></span><span class="seglet s-2" style="height:23%"></span><span class="seglet s-3" style="height:12%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:64%"></span><span class="seglet s-2" style="height:28%"></span><span class="seglet s-3" style="height:15%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:56%"></span><span class="seglet s-2" style="height:22%"></span><span class="seglet s-3" style="height:11%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:62%"></span><span class="seglet s-2" style="height:25%"></span><span class="seglet s-3" style="height:13%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:70%"></span><span class="seglet s-2" style="height:30%"></span><span class="seglet s-3" style="height:16%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:66%"></span><span class="seglet s-2" style="height:27%"></span><span class="seglet s-3" style="height:14%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:72%"></span><span class="seglet s-2" style="height:32%"></span><span class="seglet s-3" style="height:18%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:60%"></span><span class="seglet s-2" style="height:24%"></span><span class="seglet s-3" style="height:12%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:68%"></span><span class="seglet s-2" style="height:29%"></span><span class="seglet s-3" style="height:15%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:74%"></span><span class="seglet s-2" style="height:31%"></span><span class="seglet s-3" style="height:17%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:78%"></span><span class="seglet s-2" style="height:34%"></span><span class="seglet s-3" style="height:19%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:64%"></span><span class="seglet s-2" style="height:26%"></span><span class="seglet s-3" style="height:13%"></span></div>
+            <div class="col"><span class="seglet s-1" style="height:70%"></span><span class="seglet s-2" style="height:30%"></span><span class="seglet s-3" style="height:16%"></span></div>
+            <!-- Today (est.) — dashed ghost, never filled -->
+            <div class="col is-est"><span class="ghost" style="height:60%"></span></div>
+          </div>
+        </div>
+        <div class="chart-xaxis">
+          <span>Jun 1</span><span>2</span><span>4</span><span>6</span><span>8</span><span>10</span><span>12</span><span>14</span><span>16</span><span>18</span><span>20</span><span>22</span><span>24</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>Jun 1</span><span>Today</span>
+        </div>
+
+        <!-- direct-labelled legend (no boxes) + est. note -->
+        <div class="legend" style="margin-top:var(--space-lg)">
+          <span class="legend-item"><span class="swatch" style="background:var(--text-display)"></span>Platform Eng</span>
+          <span class="legend-item"><span class="swatch" style="background:var(--text-secondary)"></span>Data Science</span>
+          <span class="legend-item"><span class="swatch" style="background:var(--border-visible)"></span>Default Workspace &middot; Other</span>
+          <span class="legend-item"><span class="swatch" style="background:transparent;border:1px dashed var(--text-secondary)"></span>Today (est.) &asymp; $612</span>
+        </div>
+      </div>
+
+      <!-- ===== Secondary grid: Historical trend (seg-bars) + Billing budget (stat-rows) ===== -->
+      <div class="grid grid--2" style="margin-bottom:var(--space-2xl)">
+
+        <!-- Historical trend — segmented toggle + 12-month bars -->
+        <div class="card card--pad-lg">
+          <div class="card-head">
+            <div>
+              <div class="card-title">Historical trend</div>
+              <div class="card-sub">Last 12 months &middot; monthly totals, pacing vs prior months</div>
+            </div>
+          </div>
+          <div class="row row--between row--wrap" style="margin-bottom:var(--space-lg);gap:var(--space-md)">
+            <div class="segmented">
+              <button class="active">Monthly</button>
+              <button>Pacing</button>
+              <button>Growing</button>
+            </div>
+            <div class="row row--wrap" style="gap:var(--space-xs)">
+              <span class="badge badge--warning">Platform Eng +96%</span>
+              <span class="badge badge--warning">QA Automation +143%</span>
+            </div>
+          </div>
+
+          <div class="hist-bars">
+            <div class="hb is-muted"><div class="fill" style="height:44%"></div></div>
+            <div class="hb is-muted"><div class="fill" style="height:40%"></div></div>
+            <div class="hb is-muted"><div class="fill" style="height:50%"></div></div>
+            <div class="hb is-muted"><div class="fill" style="height:46%"></div></div>
+            <div class="hb is-muted"><div class="fill" style="height:54%"></div></div>
+            <div class="hb is-muted"><div class="fill" style="height:58%"></div></div>
+            <div class="hb is-muted"><div class="fill" style="height:62%"></div></div>
+            <div class="hb is-muted"><div class="fill" style="height:60%"></div></div>
+            <div class="hb is-muted"><div class="fill" style="height:68%"></div></div>
+            <div class="hb is-muted"><div class="fill" style="height:72%"></div></div>
+            <div class="hb"><div class="fill" style="height:78%"></div></div>
+            <!-- current month, with dashed projected overlay -->
+            <div class="hb"><div class="fill is-proj" style="height:100%"></div><div class="fill" style="height:74%"></div></div>
+          </div>
+          <div class="axis">
+            <span>Jul</span><span>Sep</span><span>Nov</span><span>Jan</span><span>Mar</span><span>Jun</span>
+          </div>
+          <div class="caption t-secondary" style="margin-top:var(--space-md)">
+            Jan $12.4k &rarr; Jun $18.4k &middot; dashed = projected month-end overlay
+          </div>
+        </div>
+
+        <!-- Organization Billing — Monthly Billing Budget (stat-rows + util bar) -->
+        <div class="card card--pad-lg">
+          <div class="card-head">
+            <div>
+              <div class="card-title">Organization Billing</div>
+              <div class="card-sub">Monthly billing budget &middot; thresholds at 80% / 100%</div>
+            </div>
+            <button class="btn btn--ghost btn--sm">Edit</button>
+          </div>
+
+          <div class="stat-list">
+            <div class="stat-row">
+              <span class="label">CURRENT SPEND</span>
+              <span class="value num-tab">$18,420.55 <span class="t-disabled">&middot; 61% of $30,000.00</span></span>
+            </div>
+            <div class="stat-row">
+              <span class="label">PROJECTED MONTH-END</span>
+              <span class="value value--warning num-tab">$31,800.00 <span class="t-disabled">&middot; 106% of budget</span></span>
+            </div>
+            <div class="stat-row">
+              <span class="label">MONTHLY BUDGET</span>
+              <span class="value value--display num-tab">$30,000.00</span>
+            </div>
+          </div>
+
+          <div style="margin-top:var(--space-lg)">
+            <div class="seg-head">
+              <span class="label">UTILIZATION &middot; +$612.40 EST. TODAY</span>
+              <span class="value mono num-tab">61%</span>
+            </div>
+            <!-- ~20 segments; 12/20 filled = 61% -->
+            <div class="seg-bar seg-bar--hero">
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              <span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+            </div>
+            <div class="caption t-disabled" style="margin-top:var(--space-md)">
+              Credit balance is not exposed by the Anthropic API &mdash; view in console.
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- ===== Workspace Budgets — table of rows ===== -->
+      <div class="card card--pad-lg">
+        <div class="card-head">
+          <div>
+            <div class="card-title">Workspace Budgets</div>
+            <div class="card-sub">Spend / limit &middot; utilization &middot; 6-month trend &middot; per-workspace limits</div>
+          </div>
+          <div class="row" style="gap:var(--space-sm)">
+            <span class="label">HIDE $0 + NO LIMIT</span>
+            <span class="switch on" role="switch" aria-checked="true"></span>
+          </div>
+        </div>
+
+        <div class="ws-list">
+
+          <!-- Platform Eng — over budget (warning/danger on VALUES only) -->
+          <div class="ws-row">
+            <div>
+              <div class="ws-name">
+                <span class="ws-dot" style="background:var(--text-display)"></span>
+                <a class="ws-link" href="./claude.html#ws-platform-eng">Platform Eng</a>
+              </div>
+              <div class="ws-badges">
+                <span class="badge badge--warning">Over budget</span>
+                <span class="badge badge--warning">112%</span>
+                <span class="badge"><span class="led" style="width:5px;height:5px;background:var(--success)"></span>Synced</span>
+              </div>
+            </div>
+            <div class="ws-spend num-tab">$7,240.00 <span class="of">of $6,500.00</span></div>
+            <div class="ws-util">
+              <span class="util-num value--warning">112%</span>
+              <span class="seg-bar seg-bar--compact">
+                <span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span>
+                <span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span>
+              </span>
+              <span class="on-pace">on pace $9,800 (151%)</span>
+            </div>
+            <div class="ws-spark">
+              <svg viewBox="0 0 120 28" width="120" height="28" fill="none" stroke="var(--text-display)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 22 22 18 42 19 62 12 82 13 102 6 118 4"/></svg>
+              <span class="delta t-warning">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+                +96%
+              </span>
+            </div>
+            <div class="ws-action"><button class="btn btn--secondary btn--sm">Edit limit</button></div>
+          </div>
+
+          <!-- Data Science — 80%+ amber -->
+          <div class="ws-row">
+            <div>
+              <div class="ws-name">
+                <span class="ws-dot" style="background:var(--text-secondary)"></span>
+                <a class="ws-link" href="./claude.html#ws-data-science">Data Science</a>
+              </div>
+              <div class="ws-badges">
+                <span class="badge badge--warning">82%</span>
+                <span class="badge"><span class="led" style="width:5px;height:5px;background:var(--success)"></span>Synced</span>
+              </div>
+            </div>
+            <div class="ws-spend num-tab">$4,110.00 <span class="of">of $5,000.00</span></div>
+            <div class="ws-util">
+              <span class="util-num value--warning">82%</span>
+              <span class="seg-bar seg-bar--compact">
+                <span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span>
+                <span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg"></span><span class="seg"></span>
+              </span>
+              <span class="on-pace">on pace $5,560 (111%)</span>
+            </div>
+            <div class="ws-spark">
+              <svg viewBox="0 0 120 28" width="120" height="28" fill="none" stroke="var(--text-display)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 24 22 23 42 16 62 17 82 9 102 7 118 3"/></svg>
+              <span class="delta t-warning">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+                +181%
+              </span>
+            </div>
+            <div class="ws-action"><button class="btn btn--secondary btn--sm">Edit limit</button></div>
+          </div>
+
+          <!-- Default Workspace — no limit, Default badge -->
+          <div class="ws-row">
+            <div>
+              <div class="ws-name">
+                <span class="ws-dot" style="background:var(--border-visible)"></span>
+                <a class="ws-link" href="./claude.html#ws-default">Default Workspace</a>
+              </div>
+              <div class="ws-badges">
+                <span class="badge">Default</span>
+                <span class="badge"><span class="led" style="width:5px;height:5px;background:var(--success)"></span>Synced</span>
+              </div>
+            </div>
+            <div class="ws-spend num-tab">$980.00 <span class="of">of no limit</span></div>
+            <div class="ws-util">
+              <span class="util-num t-disabled">no limit</span>
+              <span class="seg-bar seg-bar--compact">
+                <span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+                <span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              </span>
+              <span class="on-pace">no projection</span>
+            </div>
+            <div class="ws-spark">
+              <svg viewBox="0 0 120 28" width="120" height="28" fill="none" stroke="var(--text-secondary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 14 22 13 42 15 62 13 82 14 102 13 118 14"/></svg>
+              <span class="delta t-secondary">flat</span>
+            </div>
+            <div class="ws-action"><button class="btn btn--secondary btn--sm">Set limit</button></div>
+          </div>
+
+          <!-- QA Automation — new, fast growing -->
+          <div class="ws-row">
+            <div>
+              <div class="ws-name">
+                <span class="ws-dot" style="background:var(--text-secondary)"></span>
+                <a class="ws-link" href="./claude.html#ws-qa-automation">QA Automation</a>
+              </div>
+              <div class="ws-badges">
+                <span class="badge">new</span>
+                <span class="badge"><span class="led" style="width:5px;height:5px;background:var(--warning)"></span>Stale</span>
+              </div>
+            </div>
+            <div class="ws-spend num-tab">$1,250.00 <span class="of">of $2,000.00</span></div>
+            <div class="ws-util">
+              <span class="util-num t-primary">63%</span>
+              <span class="seg-bar seg-bar--compact">
+                <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+                <span class="seg is-filled"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              </span>
+              <span class="on-pace">on pace $1,690 (85%)</span>
+            </div>
+            <div class="ws-spark">
+              <svg viewBox="0 0 120 28" width="120" height="28" fill="none" stroke="var(--text-display)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 25 22 24 42 20 62 18 82 12 102 8 118 5"/></svg>
+              <span class="delta t-warning">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+                +143%
+              </span>
+            </div>
+            <div class="ws-action"><button class="btn btn--secondary btn--sm">Edit limit</button></div>
+          </div>
+
+        </div>
+
+        <!-- Show hidden expander (localStorage-persisted toggle) -->
+        <button class="show-hidden">
+          <!-- chevron-down -->
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+          Show 5 hidden workspaces ($0 + no limit, incl. Research Sandbox)
+        </button>
+      </div>
+
+      <!-- ===== Empty state (alternate, never-synced) — kept for reference parity ===== -->
+      <!-- Shown only before first sync; hidden in the populated view above.
+      <div class="card card--pad-lg empty section-gap">
+        <div style="display:grid;place-items:center;margin-bottom:var(--space-md);color:var(--text-secondary)">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:40px;height:40px"><rect x="4" y="8" width="16" height="11" rx="3"/><path d="M12 8V4M9 4h6"/><circle cx="9" cy="13.5" r="0.6" fill="currentColor"/><circle cx="15" cy="13.5" r="0.6" fill="currentColor"/><path d="M9.5 16.5h5"/></svg>
+        </div>
+        <div class="empty-title">No data yet</div>
+        <div class="empty-sub">Workspace cost data will appear after the first sync. You can trigger a sync manually.</div>
+      </div>
+      -->
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/copilot.html b/specs/028-nothing-design-redesign/mockups/copilot.html
new file mode 100644
index 00000000..03466e24
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/copilot.html
@@ -0,0 +1,425 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — GitHub Copilot · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+  <style>
+    /* scoped — tokens only, no new colors/shadows */
+    .kpi-card { position: relative; }
+    .kpi-card .kpi-icon { position: absolute; top: var(--space-lg); right: var(--space-lg); color: var(--text-secondary); }
+    .kpi-card .kpi-icon svg { width: 18px; height: 18px; stroke-width: 1.5; }
+    .kpi-value { font-family: var(--font-mono); font-size: var(--heading); line-height: 1; letter-spacing: -0.02em; color: var(--text-display); }
+    .kpi-sub { font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.04em; color: var(--text-secondary); }
+
+    /* hero block */
+    .hero-card { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: var(--space-2xl); align-items: center; }
+    @media (max-width: 880px) { .hero-card { grid-template-columns: 1fr; } }
+    .hero-note { max-width: 46ch; }
+
+    /* chart frame */
+    .chart-wrap { position: relative; width: 100%; }
+    .chart-wrap svg.line { width: 100%; height: 200px; display: block; }
+    .chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: var(--space-md); }
+    .chart-legend .legend-item .line-key { width: 18px; height: 0; border-top: 1.5px solid currentColor; display: inline-block; }
+
+    /* In-content tabs use a neutral underline so red stays the single content
+       interrupt (matches reports.html / claude.html / settings.html). */
+    .tabs .tab.active::after { background: var(--border-visible); }
+
+    /* avatar + login cell */
+    .seat-user { display: flex; align-items: center; gap: var(--space-sm); }
+    .seat-user .avatar { width: 28px; height: 28px; font-size: var(--label); }
+    .seat-login { display: flex; flex-direction: column; gap: 2px; }
+    .seat-login .login { font-family: var(--font-mono); font-size: var(--body-sm); color: var(--text-display); }
+    .seat-login .name { font-family: var(--font-mono); font-size: var(--caption); color: var(--text-secondary); }
+
+    /* alert (stale metrics) — border + value-text only, no fill */
+    .alert { display: flex; gap: var(--space-md); border: 1px solid var(--warning); border-radius: var(--radius-card); padding: var(--space-lg); align-items: flex-start; }
+    .alert .alert-icon { color: var(--warning); flex-shrink: 0; }
+    .alert .alert-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
+    .alert .alert-title { font-family: var(--font-ui); font-size: var(--body); font-weight: 500; color: var(--text-display); margin-bottom: var(--space-xs); }
+    .alert .alert-title .when { color: var(--warning); }
+    .alert .alert-body { font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.02em; color: var(--text-secondary); line-height: 1.6; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item active" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">INTEGRATIONS&nbsp;/&nbsp;GITHUB</div>
+          <h1 class="display-md">GitHub Copilot</h1>
+          <p class="subheading t-secondary" style="margin-top:var(--space-sm);max-width:60ch">GitHub Copilot usage analytics, seat management, and billing insights.</p>
+        </div>
+        <div class="topbar-actions">
+          <div class="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+            <input type="text" placeholder="Search by GitHub login..." />
+          </div>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- Tab bar -->
+      <nav class="tabs" role="tablist" aria-label="Copilot sections" style="margin-bottom:var(--space-2xl)">
+        <a class="tab active" role="tab" aria-selected="true" href="./copilot.html">Overview</a>
+        <a class="tab" role="tab" aria-selected="false" href="./copilot.html#seats">Seats</a>
+        <a class="tab" role="tab" aria-selected="false" href="./copilot.html#billing">Billing</a>
+        <a class="tab" role="tab" aria-selected="false" href="./copilot.html#analytics">Analytics</a>
+      </nav>
+
+      <!-- Stale metrics warning (conditional amber alert) -->
+      <div class="alert" role="status" style="margin-bottom:var(--space-2xl)">
+        <span class="alert-icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.42 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+        </span>
+        <div>
+          <div class="alert-title">Copilot metrics are stale — <span class="when">last data 9 days ago (2026-05-24)</span></div>
+          <div class="alert-body">GitHub finalizes Copilot usage with a ~3 day lag, so a small gap is expected. A nine-day gap usually means the sync stalled or the token is missing the <span class="mono">read:org</span> scope. <a href="./settings.html" style="color:var(--text-primary);text-decoration:underline">Check integration status</a> or <a href="./settings.html" style="color:var(--text-primary);text-decoration:underline">run a backfill</a>.</div>
+        </div>
+      </div>
+
+      <!-- HERO: primary metric (heaviest treatment) -->
+      <section class="card card--pad-lg hero-card" aria-label="Acceptance rate">
+        <div class="metric metric-hero">
+          <span class="label">ACCEPTANCE RATE · LAST 28 DAYS</span>
+          <span class="metric-value is-doto">31<span class="metric-unit">%</span></span>
+          <span class="metric-trend t-success">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+            &uarr; 2.4 pts vs prior 28 days
+          </span>
+        </div>
+        <div class="hero-note">
+          <p class="subheading t-primary" style="margin-bottom:var(--space-md)">Suggestions accepted across the last 28 days</p>
+          <p class="caption" style="line-height:1.7">The headline efficiency signal that sits beside Total Seats and Active Seats. Acceptance rate is the share of inline Copilot suggestions developers chose to keep — the clearest measure of whether the investment is translating into shipped code.</p>
+          <div class="stat-list" style="margin-top:var(--space-lg)">
+            <div class="stat-row"><span class="label">SUGGESTIONS · 28D</span><span class="value value--display">1,284,902</span></div>
+            <div class="stat-row"><span class="label">ACCEPTANCES · 28D</span><span class="value value--success">398,320</span></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Overview KPI Cards -->
+      <h2 class="label" style="margin:var(--space-2xl) 0 var(--space-md)">OVERVIEW</h2>
+      <div class="grid grid--kpi">
+        <div class="card kpi-card">
+          <span class="label card-label">TOTAL SEATS</span>
+          <span class="kpi-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>
+          <div class="metric"><span class="kpi-value">142</span></div>
+        </div>
+        <div class="card kpi-card">
+          <span class="label card-label">ACTIVE SEATS</span>
+          <span class="kpi-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
+          <div class="metric"><span class="kpi-value">118</span></div>
+          <span class="kpi-sub" style="margin-top:var(--space-sm);display:block">83% utilization</span>
+        </div>
+        <div class="card kpi-card">
+          <span class="label card-label">ACCEPTANCE RATE</span>
+          <span class="kpi-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m6.41 6.41 2.83 2.83"/><path d="M2 12h4"/><path d="M22 12h-4"/><path d="m17.59 6.41-2.83 2.83"/><circle cx="12" cy="14" r="4"/></svg></span>
+          <div class="metric"><span class="kpi-value">31<span class="metric-unit">%</span></span></div>
+        </div>
+        <div class="card kpi-card">
+          <span class="label card-label">SUGGESTIONS</span>
+          <span class="kpi-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></svg></span>
+          <div class="metric"><span class="kpi-value">1,284,902</span></div>
+        </div>
+        <div class="card kpi-card">
+          <span class="label card-label">ACCEPTANCES</span>
+          <span class="kpi-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span>
+          <div class="metric"><span class="kpi-value">398,320</span></div>
+        </div>
+      </div>
+
+      <!-- Usage Trends chart -->
+      <section class="card card--pad-lg section-gap" aria-label="Usage Trends">
+        <div class="row row--between" style="align-items:flex-start;margin-bottom:var(--space-lg)">
+          <div>
+            <h2 class="heading">Usage Trends</h2>
+            <p class="caption" style="margin-top:var(--space-xs)">Daily Copilot suggestions, acceptances, and active users</p>
+          </div>
+          <span class="tag tag--tech">28D</span>
+        </div>
+
+        <div class="chart-wrap">
+          <svg class="line" viewBox="0 0 720 200" preserveAspectRatio="none" role="img" aria-label="Daily suggestions, acceptances and active users over 28 days">
+            <!-- baseline -->
+            <line x1="0" y1="180" x2="720" y2="180" stroke="var(--border)" stroke-width="1" />
+            <!-- Suggestions (chart-1 → text-display, the heaviest line) -->
+            <polyline fill="none" stroke="var(--text-display)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
+              points="0,96 120,72 240,84 360,40 480,58 600,30 720,46" />
+            <!-- Acceptances (chart-2 → text-secondary) -->
+            <polyline fill="none" stroke="var(--text-secondary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
+              points="0,138 120,128 240,132 360,118 480,124 600,110 720,118" />
+            <!-- Active Users (chart-3 → dashed, lightest) -->
+            <polyline fill="none" stroke="var(--text-disabled)" stroke-width="1.5" stroke-dasharray="3 3" stroke-linecap="round" stroke-linejoin="round"
+              points="0,166 120,160 240,162 360,154 480,158 600,150 720,156" />
+          </svg>
+          <div class="axis">
+            <span>May 5</span><span>May 12</span><span>May 19</span><span>May 26</span>
+          </div>
+        </div>
+
+        <div class="chart-legend">
+          <span class="legend-item t-primary"><span class="line-key" style="color:var(--text-display)"></span>Suggestions</span>
+          <span class="legend-item"><span class="line-key" style="color:var(--text-secondary)"></span>Acceptances</span>
+          <span class="legend-item"><span class="line-key" style="color:var(--text-disabled)"></span>Active Users</span>
+        </div>
+
+        <p class="caption t-disabled" style="margin-top:var(--space-lg)">May 19 — 46,210 suggestions / 14,890 acceptances / 96 users</p>
+      </section>
+
+      <!-- ===== SEATS (adjacent tab) ===== -->
+      <h2 class="label" id="seats" style="margin:var(--space-2xl) 0 var(--space-md)">SEATS · TAB</h2>
+      <section class="card section-gap" style="margin-top:0" aria-label="Copilot seat assignments">
+        <div class="row row--between" style="margin-bottom:var(--space-lg);padding:0 var(--space-md)">
+          <span class="caption">142 synced license assignments</span>
+          <div class="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+            <input type="text" placeholder="Search by GitHub login..." />
+          </div>
+        </div>
+        <table class="table">
+          <thead>
+            <tr>
+              <th>User</th>
+              <th>Matched User</th>
+              <th>Plan</th>
+              <th>Status</th>
+              <th class="num">Assigned</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <a class="seat-user" href="#">
+                  <span class="avatar">OC</span>
+                  <span class="seat-login"><span class="login">octocat</span></span>
+                </a>
+              </td>
+              <td class="cell-strong">Alex Rivera</td>
+              <td><span class="tag tag--tech">Business</span></td>
+              <td><span class="tag tag--active"><span class="led"></span>Active</span></td>
+              <td class="num">3/14/2026</td>
+            </tr>
+            <tr>
+              <td>
+                <a class="seat-user" href="#">
+                  <span class="avatar">MD</span>
+                  <span class="seat-login"><span class="login">mona-dev</span></span>
+                </a>
+              </td>
+              <td class="t-disabled">Unmatched</td>
+              <td><span class="tag tag--tech">Business</span></td>
+              <td><span class="tag"><span class="led"></span>Pending</span></td>
+              <td class="num">4/02/2026</td>
+            </tr>
+            <tr>
+              <td>
+                <a class="seat-user" href="#">
+                  <span class="avatar">HJ</span>
+                  <span class="seat-login"><span class="login">hubber-jane</span></span>
+                </a>
+              </td>
+              <td class="cell-strong">Jane Park</td>
+              <td><span class="tag tag--tech">Enterprise</span></td>
+              <td><span class="tag tag--active"><span class="led"></span>Active</span></td>
+              <td class="num">1/21/2026</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- ===== BILLING (adjacent tab) ===== -->
+      <h2 class="label" id="billing" style="margin:var(--space-2xl) 0 var(--space-md)">BILLING OVERVIEW · TAB</h2>
+      <div class="grid grid--kpi">
+        <div class="card kpi-card">
+          <span class="label card-label">CURRENT MONTH COST</span>
+          <span class="kpi-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></span>
+          <div class="metric"><span class="kpi-value">$2,820.00</span></div>
+        </div>
+        <div class="card kpi-card">
+          <span class="label card-label">CUMULATIVE COST</span>
+          <span class="kpi-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg></span>
+          <div class="metric"><span class="kpi-value">$19,740.00</span></div>
+        </div>
+        <div class="card kpi-card">
+          <span class="label card-label">COST / ACTIVE USER</span>
+          <span class="kpi-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg></span>
+          <div class="metric"><span class="kpi-value">$23.90</span></div>
+        </div>
+        <div class="card kpi-card">
+          <span class="label card-label">PLAN</span>
+          <span class="kpi-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18"/></svg></span>
+          <div class="metric"><span class="kpi-value" style="font-size:var(--subheading)">Business</span></div>
+          <span class="kpi-sub" style="margin-top:var(--space-sm);display:block">142 total / 118 active seats</span>
+        </div>
+      </div>
+
+      <!-- Monthly Billing Details table -->
+      <section class="card section-gap" aria-label="Monthly Billing Details">
+        <h3 class="heading" style="margin-bottom:var(--space-lg);padding:0 var(--space-md)">Monthly Billing Details</h3>
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Month</th>
+              <th class="num">Cost</th>
+              <th class="num">Seats</th>
+              <th class="num">Active</th>
+              <th class="num">Cost / User</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="cell-strong">Mar 2026</td>
+              <td class="num">$2,820.00</td>
+              <td class="num">142</td>
+              <td class="num">118</td>
+              <td class="num">$23.90</td>
+            </tr>
+            <tr>
+              <td class="cell-strong">Feb 2026</td>
+              <td class="num">$2,760.00</td>
+              <td class="num">138</td>
+              <td class="num">115</td>
+              <td class="num">$24.00</td>
+            </tr>
+            <tr>
+              <td class="cell-strong">Jan 2026</td>
+              <td class="num">$2,640.00</td>
+              <td class="num">132</td>
+              <td class="num">109</td>
+              <td class="num">$24.22</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- ===== ANALYTICS (adjacent tab) — segmented bars ===== -->
+      <h2 class="label" id="analytics" style="margin:var(--space-2xl) 0 var(--space-md)">ANALYTICS · TAB</h2>
+      <div class="grid grid--2">
+        <!-- By language -->
+        <section class="card card--pad-lg" aria-label="Usage by language">
+          <span class="label card-label">BY LANGUAGE</span>
+          <div class="stack stack--lg">
+            <div>
+              <div class="seg-head"><span class="label">TYPESCRIPT</span><span class="value mono">42%</span></div>
+              <div class="seg-bar seg-bar--compact">
+                <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              </div>
+            </div>
+            <div>
+              <div class="seg-head"><span class="label">PYTHON</span><span class="value mono">27%</span></div>
+              <div class="seg-bar seg-bar--compact">
+                <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              </div>
+            </div>
+            <div>
+              <div class="seg-head"><span class="label">JAVASCRIPT</span><span class="value mono">19%</span></div>
+              <div class="seg-bar seg-bar--compact">
+                <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              </div>
+            </div>
+            <div>
+              <div class="seg-head"><span class="label">GO</span><span class="value mono">12%</span></div>
+              <div class="seg-bar seg-bar--compact">
+                <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- By editor -->
+        <section class="card card--pad-lg" aria-label="Usage by editor">
+          <span class="label card-label">BY EDITOR</span>
+          <div class="stack stack--lg">
+            <div>
+              <div class="seg-head"><span class="label">VS CODE</span><span class="value mono">71%</span></div>
+              <div class="seg-bar seg-bar--compact">
+                <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              </div>
+            </div>
+            <div>
+              <div class="seg-head"><span class="label">JETBRAINS</span><span class="value mono">21%</span></div>
+              <div class="seg-bar seg-bar--compact">
+                <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              </div>
+            </div>
+            <div>
+              <div class="seg-head"><span class="label">NEOVIM</span><span class="value mono">8%</span></div>
+              <div class="seg-bar seg-bar--compact">
+                <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+              </div>
+            </div>
+          </div>
+          <hr class="divider" />
+          <span class="label card-label">ACTIVITY DISTRIBUTION</span>
+          <div class="stat-list">
+            <div class="stat-row"><span class="label">POWER USERS</span><span class="value value--display">38</span></div>
+            <div class="stat-row"><span class="label">REGULAR</span><span class="value">52</span></div>
+            <div class="stat-row"><span class="label">OCCASIONAL</span><span class="value">28</span></div>
+            <div class="stat-row"><span class="label">INACTIVE</span><span class="value t-disabled">24</span></div>
+          </div>
+        </section>
+      </div>
+
+      <!-- Utilization trend (active users vs total seats) -->
+      <section class="card card--pad-lg section-gap" aria-label="Utilization trend">
+        <div class="seg-head" style="margin-bottom:var(--space-md)">
+          <span class="label">UTILIZATION TREND · ACTIVE USERS VS TOTAL SEATS</span>
+          <span class="value value--warning mono">83%</span>
+        </div>
+        <div class="chart-wrap">
+          <svg class="line" viewBox="0 0 720 160" preserveAspectRatio="none" role="img" aria-label="Active users vs total seats per day">
+            <line x1="0" y1="20" x2="720" y2="20" stroke="var(--border)" stroke-width="1" stroke-dasharray="3 3" />
+            <polyline fill="none" stroke="var(--text-secondary)" stroke-width="1.5" stroke-dasharray="3 3" stroke-linecap="round" stroke-linejoin="round"
+              points="0,20 720,20" />
+            <polyline fill="none" stroke="var(--text-display)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
+              points="0,70 120,62 240,58 360,48 480,52 600,42 720,38" />
+          </svg>
+          <div class="axis"><span>May 5</span><span>May 12</span><span>May 19</span><span>May 26</span></div>
+        </div>
+        <div class="chart-legend">
+          <span class="legend-item t-primary"><span class="line-key" style="color:var(--text-display)"></span>Active Users</span>
+          <span class="legend-item"><span class="line-key" style="color:var(--text-secondary)"></span>Total Seats</span>
+        </div>
+      </section>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/dashboard.html b/specs/028-nothing-design-redesign/mockups/dashboard.html
new file mode 100644
index 00000000..60b2f5fa
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/dashboard.html
@@ -0,0 +1,568 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Dashboard · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+  <style>
+    /* Scoped dashboard layout — tokens only, no new colours/shadows. */
+
+    /* Two-up hero rows: wide left card + narrower right rail card. */
+    .dash-split {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--space-md);
+    }
+    @media (min-width: 1000px) {
+      .dash-split { grid-template-columns: 1.7fr 1fr; }
+    }
+
+    /* hero card internal layout */
+    .hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
+    .hero-title { display: inline-flex; align-items: center; gap: var(--space-sm); }
+    .hero-title svg { width: 20px; height: 20px; stroke-width: 1.5; color: var(--text-secondary); }
+    .hero-metric { margin-bottom: var(--space-lg); }
+    .hero-metric .metric-value { font-size: var(--display-xl); }
+    .hero-narrative { max-width: 56ch; }
+
+    /* spend-progress markers under the hero seg-bar */
+    .spend-scale { display: flex; justify-content: space-between; margin-top: var(--space-sm); }
+    .spend-scale span { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-disabled); }
+
+    /* chart row */
+    .chart-split { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
+    @media (min-width: 1000px) { .chart-split { grid-template-columns: 1.9fr 1fr; align-items: start; } }
+    .bars--tall { height: 180px; }
+
+    /* insight cards: icon + headline + body */
+    .insight { display: flex; gap: var(--space-md); align-items: flex-start; }
+    .insight svg { width: 18px; height: 18px; stroke-width: 1.5; flex-shrink: 0; margin-top: 2px; color: var(--text-secondary); }
+    .insight-head { font-family: var(--font-ui); font-weight: 500; font-size: var(--body-sm); color: var(--text-display); margin-bottom: var(--space-xs); }
+    .insight-body { font-family: var(--font-mono); font-size: var(--caption); line-height: 1.45; color: var(--text-secondary); }
+    .insight-body .num { color: var(--text-primary); }
+
+    /* timeline / recent activity dots */
+    .timeline .stat-row { align-items: flex-start; }
+    .tl-left { display: flex; gap: var(--space-sm); align-items: flex-start; min-width: 0; }
+    .tl-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--text-disabled); flex-shrink: 0; margin-top: 6px; }
+    .tl-dot.is-ok { background: var(--success); }
+    .tl-dot.is-warn { background: var(--warning); }
+    .tl-body { min-width: 0; }
+    .tl-title { font-family: var(--font-ui); font-size: var(--body-sm); color: var(--text-primary); }
+    .tl-title b { color: var(--text-display); font-weight: 500; }
+    .tl-meta { font-family: var(--font-mono); font-size: var(--caption); color: var(--text-disabled); white-space: nowrap; }
+
+    /* jump-to nav cards */
+    .jump { display: flex; flex-direction: column; gap: var(--space-md); min-height: 132px; justify-content: space-between; }
+    .jump-top { display: flex; align-items: center; justify-content: space-between; }
+    .jump-top svg { width: 20px; height: 20px; stroke-width: 1.5; color: var(--text-secondary); }
+    .jump-card:hover { border-color: var(--border-visible); }
+    .jump-card { transition: border-color var(--dur-micro) var(--ease); }
+    .jump-title { font-family: var(--font-ui); font-weight: 500; font-size: var(--subheading); color: var(--text-display); }
+
+    /* admin preview link */
+    .preview-link { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); transition: color var(--dur-micro) var(--ease); }
+    .preview-link:hover { color: var(--text-primary); }
+    .preview-link svg { width: 15px; height: 15px; stroke-width: 1.5; }
+
+    /* legend bullets inside chart side panel */
+    .split-legend { display: flex; flex-direction: column; gap: var(--space-md); }
+    .split-row { display: flex; flex-direction: column; gap: var(--space-2xs); }
+    .split-row .lead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
+    .split-row .lead .label { color: var(--text-secondary); }
+    .split-row .pct { font-family: var(--font-mono); font-size: var(--caption); color: var(--text-disabled); }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item active" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">OVERVIEW</div>
+          <h1 class="display-md">Dashboard</h1>
+        </div>
+        <div class="topbar-actions">
+          <!-- admin-only: preview as viewer -->
+          <a class="preview-link" href="#" title="Admin only">
+            <!-- eye -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="2.5"/></svg>
+            Preview as viewer
+          </a>
+
+          <!-- sync status chip -->
+          <span class="tag tag--success"><span class="led"></span>All sources synced &middot; 12m ago</span>
+
+          <!-- primary action -->
+          <a class="btn btn--primary btn--sm" href="./reports.html">
+            Open Budget report
+            <!-- chevron-right -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+          </a>
+
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- ROW 1 — Budget health hero (heaviest treatment) + This month rail -->
+      <section class="dash-split">
+
+        <!-- Budget health hero -->
+        <div class="card card--pad-lg">
+          <div class="hero-head">
+            <div class="hero-title">
+              <!-- shield-check -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 5 6v6c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6l-7-3Z"/><path d="m9 12 2 2 4-4"/></svg>
+              <span class="label">Budget health &middot; on track</span>
+            </div>
+            <span class="tag tag--success"><span class="led"></span>Within budget</span>
+          </div>
+
+          <div class="metric hero-metric">
+            <span class="label">YTD BILLED</span>
+            <span class="metric-value is-doto">$184,250</span>
+            <span class="metric-trend t-secondary">61.4% of $300,000 ceiling</span>
+          </div>
+
+          <!-- SpendProgressBar: actual YTD (good) · projected (warn) · ceiling track -->
+          <div class="seg-head">
+            <span class="label">Actual YTD &middot; projected year-end &middot; ceiling</span>
+            <span class="value value--warning mono">$291,400 proj.</span>
+          </div>
+          <div class="seg-bar seg-bar--hero" aria-label="Budget progress to ceiling">
+            <!-- 20 segments. 12 good = actual YTD (~61%); 7 warn = projected to year-end (~97%); 1 empty headroom under ceiling -->
+            <span class="seg is-good"></span><span class="seg is-good"></span><span class="seg is-good"></span>
+            <span class="seg is-good"></span><span class="seg is-good"></span><span class="seg is-good"></span>
+            <span class="seg is-good"></span><span class="seg is-good"></span><span class="seg is-good"></span>
+            <span class="seg is-good"></span><span class="seg is-good"></span><span class="seg is-good"></span>
+            <span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span>
+            <span class="seg is-warn"></span><span class="seg is-warn"></span><span class="seg is-warn"></span>
+            <span class="seg is-warn"></span><span class="seg"></span>
+          </div>
+          <div class="spend-scale">
+            <span>$0</span>
+            <span>Projected $291.4K</span>
+            <span>Ceiling $300K</span>
+          </div>
+
+          <hr class="divider" />
+
+          <p class="hero-narrative subheading t-primary">
+            Linear trend lands at <span class="mono">$291,400</span> by year-end &mdash; within the
+            <span class="mono">$300,000</span> ceiling.
+          </p>
+          <div class="row row--between" style="margin-top:var(--space-md)">
+            <span class="caption t-disabled">Sep 2025 was 4.2% under plan</span>
+            <a class="btn btn--ghost btn--sm" href="./reports.html">
+              Open Budget report
+              <!-- chevron-right -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </a>
+          </div>
+        </div>
+
+        <!-- This month -->
+        <div class="card card--pad-lg">
+          <div class="row row--between" style="margin-bottom:var(--space-xl)">
+            <span class="label">This month &middot; October 2025</span>
+            <span class="tag tag--warning">+5.9% over</span>
+          </div>
+
+          <div class="stat-list">
+            <div class="stat-row">
+              <span class="label">Actual so far</span>
+              <span class="value value--display" style="font-size:var(--heading)">$26,480</span>
+            </div>
+            <div class="stat-row">
+              <span class="label indent">Billed</span>
+              <span class="value">$22,150</span>
+            </div>
+            <div class="stat-row">
+              <span class="label indent">Anthropic API</span>
+              <span class="value">$4,330</span>
+            </div>
+            <div class="stat-row">
+              <span class="label">Planned</span>
+              <span class="value">$25,000</span>
+            </div>
+            <div class="stat-row">
+              <span class="label">Variance</span>
+              <span class="value value--warning">&plus;$1,480</span>
+            </div>
+          </div>
+
+          <hr class="divider" />
+          <span class="caption t-disabled">28 of 31 days elapsed &middot; pace projects $29.3K full month</span>
+        </div>
+      </section>
+
+      <!-- ROW 2 — KPI grid -->
+      <section class="section-gap">
+        <div class="row row--between" style="margin-bottom:var(--space-md)">
+          <span class="label">Key indicators</span>
+          <span class="caption t-disabled">Month over month &middot; vs September 2025</span>
+        </div>
+
+        <div class="grid grid--kpi">
+          <div class="card">
+            <span class="label card-label">Active users</span>
+            <div class="metric">
+              <span class="metric-value" style="font-size:var(--display-md)">142</span>
+              <span class="metric-trend t-secondary">across 6 teams</span>
+            </div>
+          </div>
+
+          <div class="card">
+            <span class="label card-label">Active tools</span>
+            <div class="metric">
+              <span class="metric-value" style="font-size:var(--display-md)">9</span>
+              <span class="metric-trend t-secondary">all sources synced</span>
+            </div>
+          </div>
+
+          <div class="card">
+            <span class="label card-label">Active licenses</span>
+            <div class="metric">
+              <span class="metric-value" style="font-size:var(--display-md)">318</span>
+              <span class="metric-trend t-success">
+                <!-- arrow-up -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+                +12 &middot; vs 306 last month
+              </span>
+            </div>
+          </div>
+
+          <div class="card">
+            <span class="label card-label">Expected monthly</span>
+            <div class="metric">
+              <span class="metric-value" style="font-size:var(--display-md)">$27,940</span>
+              <span class="metric-trend t-warning">
+                <!-- arrow-up -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+                +8.2% &middot; vs $25,820 last month
+              </span>
+            </div>
+            <hr class="divider" style="margin:var(--space-md) 0" />
+            <span class="caption t-disabled">Copilot acceptance 31% &middot; 87 devs</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- ROW 3 — Spend over time chart -->
+      <section class="section-gap">
+        <div class="card card--pad-lg">
+          <div class="chart-split">
+
+            <div>
+              <div class="row row--between" style="margin-bottom:var(--space-lg)">
+                <div class="stack stack--sm">
+                  <span class="label">Stacked monthly cost &middot; last 12 months</span>
+                  <span class="caption t-disabled">Licenses (billed) + Anthropic API (running)</span>
+                </div>
+                <span class="caption t-secondary mono">avg $17,420/mo</span>
+              </div>
+
+              <!-- vertical bars: last 12 months; final 2 are future (faint, no billed data) -->
+              <div class="bars bars--tall" style="position:relative">
+                <div class="bar" style="height:58%"></div>
+                <div class="bar" style="height:64%"></div>
+                <div class="bar" style="height:61%"></div>
+                <div class="bar" style="height:70%"></div>
+                <div class="bar" style="height:67%"></div>
+                <div class="bar" style="height:74%"></div>
+                <div class="bar" style="height:72%"></div>
+                <div class="bar" style="height:81%"></div>
+                <div class="bar" style="height:78%"></div>
+                <div class="bar" style="height:88%"></div>
+                <div class="bar is-muted" style="height:40%"></div>
+                <div class="bar is-muted" style="height:22%"></div>
+              </div>
+              <div class="axis">
+                <span>Nov</span><span>Dec</span><span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span>
+                <span>May</span><span>Jun</span><span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span>
+              </div>
+              <span class="caption t-disabled" style="display:block;margin-top:var(--space-md)">Fading bars represent future periods with no billed data yet</span>
+            </div>
+
+            <!-- side panel: YTD + split legend -->
+            <div class="card card--raised" style="padding:var(--space-lg)">
+              <div class="metric" style="margin-bottom:var(--space-lg)">
+                <span class="label">YTD billed</span>
+                <span class="metric-value" style="font-size:var(--display-md)">$184,250</span>
+              </div>
+
+              <div class="split-legend">
+                <div class="split-row">
+                  <div class="lead">
+                    <span class="label">Licenses (billed)</span>
+                    <span class="value value--display mono">$159,300</span>
+                  </div>
+                  <div class="seg-bar seg-bar--compact">
+                    <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+                    <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+                    <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+                    <span class="seg"></span>
+                  </div>
+                  <span class="pct">86% of YTD</span>
+                </div>
+
+                <div class="split-row">
+                  <div class="lead">
+                    <span class="label">Anthropic API (running)</span>
+                    <span class="value value--display mono">$24,950</span>
+                  </div>
+                  <div class="seg-bar seg-bar--compact">
+                    <span class="seg is-filled"></span>
+                    <span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+                    <span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
+                  </div>
+                  <span class="pct">14% of YTD</span>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </section>
+
+      <!-- ROW 4 — What changed this month (insight cards) -->
+      <section class="section-gap">
+        <span class="label" style="display:block;margin-bottom:var(--space-md)">What changed this month</span>
+        <div class="grid grid--2">
+
+          <div class="card">
+            <div class="insight">
+              <!-- shield-check -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 5 6v6c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6l-7-3Z"/><path d="m9 12 2 2 4-4"/></svg>
+              <div>
+                <div class="insight-head">Budget on track</div>
+                <p class="insight-body">Projected <span class="num">$291.4K</span> for the year &mdash; <span class="num">97%</span> of the <span class="num">$300.0K</span> ceiling, with headroom to spare.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="insight">
+              <!-- arrow-up -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+              <div>
+                <div class="insight-head">GitHub Copilot seats grew 72 &rarr; 87</div>
+                <p class="insight-body"><span class="num">+15 seats</span> added this month &mdash; a <span class="num">21%</span> month-over-month increase in active assignments.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="insight">
+              <!-- arrow-up -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+              <div>
+                <div class="insight-head">Expected monthly spend &uarr; 8.2%</div>
+                <p class="insight-body">Up from <span class="num">$25.8K</span> to <span class="num">$27.9K</span> vs last month, driven mostly by new Copilot seats. Sep 2025 was 4.2% under plan.</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- THE single red moment on the screen -->
+          <div class="card">
+            <div class="insight">
+              <!-- alert-triangle -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><circle cx="12" cy="17" r="0.6" fill="currentColor"/></svg>
+              <div>
+                <div class="insight-head">Anthropic workspace approaching limit</div>
+                <p class="insight-body">Engineering is at <span class="value--accent mono">92%</span> of its monthly cap with 3 days left in the period. Review allocation before it blocks usage.</p>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      <!-- ROW 5 — Recent activity (right-rail timeline) + Top tools table -->
+      <section class="section-gap dash-split">
+
+        <!-- Top tools table (secondary, wide) -->
+        <div class="card card--pad-lg">
+          <div class="row row--between" style="margin-bottom:var(--space-lg)">
+            <span class="label">Top tools by monthly cost</span>
+            <a class="btn btn--ghost btn--sm" href="./tools.html">View all 9</a>
+          </div>
+          <table class="table">
+            <thead>
+              <tr><th>Tool</th><th>Vendor</th><th class="num">Active users</th><th class="num">Total monthly cost</th></tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="cell-strong">GitHub Copilot</td><td>GitHub</td>
+                <td class="num">87</td><td class="num">$1,653.00</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Anthropic API</td><td>Anthropic</td>
+                <td class="num">34</td><td class="num">$4,330.00</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Cursor</td><td>Anysphere</td>
+                <td class="num">52</td><td class="num">$1,040.00</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">ChatGPT Enterprise</td><td>OpenAI</td>
+                <td class="num">61</td><td class="num">$1,525.00</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Perplexity Pro</td><td>Perplexity</td>
+                <td class="num">28</td><td class="num">$560.00</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Recent activity timeline -->
+        <div class="card card--pad-lg">
+          <div class="row row--between" style="margin-bottom:var(--space-lg)">
+            <span class="label">Recent activity</span>
+            <a class="btn btn--ghost btn--sm" href="./invoices.html">History</a>
+          </div>
+
+          <div class="stat-list timeline">
+            <div class="stat-row">
+              <span class="tl-left">
+                <span class="tl-dot is-ok"></span>
+                <span class="tl-body">
+                  <span class="tl-title">Invoice from <b>Anthropic</b> &mdash; Added &middot; <span class="mono">$4,330</span></span>
+                </span>
+              </span>
+              <span class="tl-meta">2h ago</span>
+            </div>
+
+            <div class="stat-row">
+              <span class="tl-left">
+                <span class="tl-dot is-ok"></span>
+                <span class="tl-body">
+                  <span class="tl-title"><b>Jordan Lee</b> assigned GitHub Copilot</span>
+                </span>
+              </span>
+              <span class="tl-meta">5h ago</span>
+            </div>
+
+            <div class="stat-row">
+              <span class="tl-left">
+                <span class="tl-dot is-ok"></span>
+                <span class="tl-body">
+                  <span class="tl-title">Invoice from <b>GitHub</b> &mdash; Added &middot; <span class="mono">$1,272</span></span>
+                </span>
+              </span>
+              <span class="tl-meta">Yesterday</span>
+            </div>
+
+            <div class="stat-row">
+              <span class="tl-left">
+                <span class="tl-dot"></span>
+                <span class="tl-body">
+                  <span class="tl-title"><b>Priya Nair</b> revoked from Cursor</span>
+                </span>
+              </span>
+              <span class="tl-meta">2d ago</span>
+            </div>
+
+            <div class="stat-row">
+              <span class="tl-left">
+                <span class="tl-dot is-warn"></span>
+                <span class="tl-body">
+                  <span class="tl-title">Invoice <b>acme-oct.pdf</b> &mdash; <span class="t-warning">Filtered (duplicate)</span></span>
+                </span>
+              </span>
+              <span class="tl-meta">3d ago</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ROW 6 — Jump to -->
+      <section class="section-gap">
+        <span class="label" style="display:block;margin-bottom:var(--space-md)">Jump to</span>
+        <div class="grid grid--4">
+
+          <a class="card jump-card" href="./tools.html">
+            <div class="jump">
+              <div class="jump-top">
+                <span class="jump-title">AI Tools</span>
+                <!-- grid -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+              </div>
+              <span class="caption t-secondary">9 active</span>
+            </div>
+          </a>
+
+          <a class="card jump-card" href="./users.html">
+            <div class="jump">
+              <div class="jump-top">
+                <span class="jump-title">Users</span>
+                <!-- users -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 19v-1a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v1"/><circle cx="9" cy="7" r="3.5"/><path d="M22 19v-1a4 4 0 0 0-3-3.8"/><path d="M16 3.2a4 4 0 0 1 0 7.6"/></svg>
+              </div>
+              <span class="caption t-secondary">142 active</span>
+            </div>
+          </a>
+
+          <a class="card jump-card" href="./assignments.html">
+            <div class="jump">
+              <div class="jump-top">
+                <span class="jump-title">Assignments</span>
+                <!-- check -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+              </div>
+              <span class="caption t-secondary">318 active</span>
+            </div>
+          </a>
+
+          <a class="card jump-card" href="./budget.html">
+            <div class="jump">
+              <div class="jump-top">
+                <span class="jump-title">Budget</span>
+                <!-- shield-check -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 5 6v6c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6l-7-3Z"/><path d="m9 12 2 2 4-4"/></svg>
+              </div>
+              <span class="caption t-success">On track &middot; 61% YTD</span>
+            </div>
+          </a>
+
+        </div>
+      </section>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/index.html b/specs/028-nothing-design-redesign/mockups/index.html
new file mode 100644
index 00000000..b9c628dc
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/index.html
@@ -0,0 +1,236 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Nothing Redesign · Gallery</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+  <style>
+    /* Scoped gallery layout — tokens only, no new colours/shadows. */
+
+    /* centered, chrome-less container (no sidebar) */
+    .gallery {
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: var(--space-4xl) var(--space-2xl) var(--space-4xl);
+    }
+    @media (max-width: 720px) {
+      .gallery { padding: var(--space-2xl) var(--space-lg) var(--space-3xl); }
+    }
+
+    /* hero header */
+    .gallery-head {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--space-lg);
+      flex-wrap: wrap;
+      margin-bottom: var(--space-3xl);
+    }
+    .gallery-title {
+      font-family: var(--font-display);
+      font-weight: 700;
+      font-size: var(--display-xl);
+      line-height: 1.0;
+      letter-spacing: -0.03em;
+      color: var(--text-display);
+    }
+    @media (max-width: 720px) {
+      .gallery-title { font-size: var(--display-lg); }
+    }
+    .gallery-sub {
+      font-family: var(--font-mono);
+      font-size: var(--body-sm);
+      letter-spacing: 0.04em;
+      color: var(--text-secondary);
+      margin-top: var(--space-md);
+    }
+
+    /* gallery cards as links */
+    .screen-card {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-sm);
+      min-height: 168px;
+      transition: border-color var(--dur-micro) var(--ease);
+    }
+    .screen-card:hover { border-color: var(--border-visible); }
+    .screen-card .screen-name {
+      font-family: var(--font-ui);
+      font-size: var(--subheading);
+      font-weight: 500;
+      letter-spacing: -0.01em;
+      color: var(--text-display);
+    }
+    .screen-card .screen-route {
+      font-family: var(--font-mono);
+      font-size: var(--label);
+      letter-spacing: 0.1em;
+      color: var(--text-secondary);
+    }
+    .screen-card .screen-desc {
+      font-family: var(--font-ui);
+      font-size: var(--body-sm);
+      color: var(--text-primary);
+      margin-top: auto;
+    }
+    .screen-card .screen-index {
+      font-family: var(--font-mono);
+      font-size: var(--label);
+      letter-spacing: 0.1em;
+      color: var(--text-disabled);
+    }
+    .screen-head {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: var(--space-sm);
+    }
+
+    .gallery-foot {
+      margin-top: var(--space-3xl);
+      padding-top: var(--space-lg);
+      border-top: 1px solid var(--border);
+      font-family: var(--font-mono);
+      font-size: var(--caption);
+      letter-spacing: 0.04em;
+      color: var(--text-secondary);
+      max-width: 70ch;
+      line-height: 1.6;
+    }
+    .gallery-foot .mono-key { color: var(--text-primary); }
+  </style>
+</head>
+<body>
+  <div class="gallery">
+    <header class="gallery-head">
+      <div>
+        <div class="label eyebrow">PROPOSAL&nbsp;/&nbsp;SPEC&nbsp;028</div>
+        <h1 class="gallery-title">AI&nbsp;DEVELOPER&nbsp;HUB</h1>
+        <p class="gallery-sub">Nothing design system — proposed redesign</p>
+      </div>
+      <div class="theme-toggle">
+        <button data-theme="dark" class="active">Dark</button>
+        <button data-theme="light">Light</button>
+      </div>
+    </header>
+
+    <div class="grid grid--kpi">
+      <a class="card screen-card" href="./dashboard.html">
+        <div class="screen-head">
+          <span class="screen-name">Dashboard</span>
+          <span class="screen-index">01</span>
+        </div>
+        <span class="screen-route">/</span>
+        <span class="screen-desc">Annual budget hero, spend progress, and the at-a-glance instrument panel.</span>
+      </a>
+
+      <a class="card screen-card" href="./tools.html">
+        <div class="screen-head">
+          <span class="screen-name">AI Tools</span>
+          <span class="screen-index">02</span>
+        </div>
+        <span class="screen-route">/tools</span>
+        <span class="screen-desc">Catalog of tracked AI tools with vendor, seats, and monthly spend.</span>
+      </a>
+
+      <a class="card screen-card" href="./users.html">
+        <div class="screen-head">
+          <span class="screen-name">Users</span>
+          <span class="screen-index">03</span>
+        </div>
+        <span class="screen-route">/users</span>
+        <span class="screen-desc">Team directory, roles, and invite state across the organization.</span>
+      </a>
+
+      <a class="card screen-card" href="./assignments.html">
+        <div class="screen-head">
+          <span class="screen-name">License Assignments</span>
+          <span class="screen-index">04</span>
+        </div>
+        <span class="screen-route">/assignments</span>
+        <span class="screen-desc">Who holds which seat, mapping licenses to people and tools.</span>
+      </a>
+
+      <a class="card screen-card" href="./requests.html">
+        <div class="screen-head">
+          <span class="screen-name">Access Requests</span>
+          <span class="screen-index">05</span>
+        </div>
+        <span class="screen-route">/requests</span>
+        <span class="screen-desc">Pending seat requests awaiting approve or deny review.</span>
+      </a>
+
+      <a class="card screen-card" href="./budget.html">
+        <div class="screen-head">
+          <span class="screen-name">Budget</span>
+          <span class="screen-index">06</span>
+        </div>
+        <span class="screen-route">/budget</span>
+        <span class="screen-desc">Annual budget vs. billed costs, period by period.</span>
+      </a>
+
+      <a class="card screen-card" href="./reports.html">
+        <div class="screen-head">
+          <span class="screen-name">Reports</span>
+          <span class="screen-index">07</span>
+        </div>
+        <span class="screen-route">/reports</span>
+        <span class="screen-desc">Spend trends, breakdowns, and exportable cost analysis.</span>
+      </a>
+
+      <a class="card screen-card" href="./copilot.html">
+        <div class="screen-head">
+          <span class="screen-name">GitHub Copilot</span>
+          <span class="screen-index">08</span>
+        </div>
+        <span class="screen-route">/copilot</span>
+        <span class="screen-desc">Copilot seat usage, member sync, and billing detail.</span>
+      </a>
+
+      <a class="card screen-card" href="./claude.html">
+        <div class="screen-head">
+          <span class="screen-name">Claude Console</span>
+          <span class="screen-index">09</span>
+        </div>
+        <span class="screen-route">/claude</span>
+        <span class="screen-desc">Anthropic API cost metrics, token usage, and daily estimates.</span>
+      </a>
+
+      <a class="card screen-card" href="./invoices.html">
+        <div class="screen-head">
+          <span class="screen-name">Invoices</span>
+          <span class="screen-index">10</span>
+        </div>
+        <span class="screen-route">/invoices</span>
+        <span class="screen-desc">Ingested invoices linked to budgets, with PDF source records.</span>
+      </a>
+
+      <a class="card screen-card" href="./settings.html">
+        <div class="screen-head">
+          <span class="screen-name">Settings</span>
+          <span class="screen-index">11</span>
+        </div>
+        <span class="screen-route">/settings</span>
+        <span class="screen-desc">Integrations, sync configuration, and account preferences.</span>
+      </a>
+
+      <a class="card screen-card" href="./login.html">
+        <div class="screen-head">
+          <span class="screen-name">Sign In</span>
+          <span class="screen-index">12</span>
+        </div>
+        <span class="screen-route">/login</span>
+        <span class="screen-desc">Chrome-less centered auth — the first impression of the system.</span>
+      </a>
+    </div>
+
+    <footer class="gallery-foot">
+      <span class="mono-key">./styles/nothing.css</span> is the proposed single source of truth — one
+      coherent Nothing system that would replace the current green-primary shadcn theme across every
+      screen above. Flip the toggle: both dark and light are first-class.
+    </footer>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/invoices.html b/specs/028-nothing-design-redesign/mockups/invoices.html
new file mode 100644
index 00000000..722818d9
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/invoices.html
@@ -0,0 +1,269 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Invoices · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item active" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">BILLING&nbsp;/&nbsp;INVOICE ARCHIVE</div>
+          <h1 class="display-md">Invoices</h1>
+        </div>
+        <div class="topbar-actions">
+          <a class="btn btn--secondary btn--sm" href="./invoices.html#bulk">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+            Bulk Upload
+          </a>
+          <a class="btn btn--primary btn--sm" href="./invoices.html#new">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+            Upload Invoice
+          </a>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- HERO METRIC — primary layer -->
+      <div class="metric metric-hero" style="margin-bottom: var(--space-2xl)">
+        <span class="label">ARCHIVED INVOICES</span>
+        <span class="metric-value is-doto">42<span class="metric-unit">invoices</span></span>
+        <span class="metric-trend t-secondary">Total PDF invoices uploaded and archived &middot; admin-only view, sorted newest first</span>
+      </div>
+
+      <!-- PRIMARY SECTION — Invoice Archive Table (heaviest treatment) -->
+      <div class="card card--pad-lg">
+        <div class="row row--between row--wrap" style="margin-bottom: var(--space-lg); gap: var(--space-md)">
+          <div class="stack stack--sm">
+            <span class="label">INVOICE ARCHIVE TABLE</span>
+            <span class="caption">42 archived &middot; showing 1–5 of 42</span>
+          </div>
+          <div class="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+            <input type="text" placeholder="Search invoices..." value="" />
+          </div>
+        </div>
+
+        <table class="table">
+          <thead>
+            <tr>
+              <th>
+                <span class="row" style="gap:6px; display:inline-flex; align-items:center">Invoice Number
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;opacity:.6"><path d="m6 9 6 6 6-6"/></svg>
+                </span>
+              </th>
+              <th>
+                <span class="row" style="gap:6px; display:inline-flex; align-items:center">Date
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;opacity:1"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+                </span>
+              </th>
+              <th class="num">
+                <span class="row" style="gap:6px; display:inline-flex; align-items:center; justify-content:flex-end">Amount
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;opacity:.6"><path d="m6 9 6 6 6-6"/></svg>
+                </span>
+              </th>
+              <th>
+                <span class="row" style="gap:6px; display:inline-flex; align-items:center">Vendor
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;opacity:.6"><path d="m6 9 6 6 6-6"/></svg>
+                </span>
+              </th>
+              <th>Budget Period</th>
+              <th>Uploaded By</th>
+              <th class="num">Download</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="cell-strong">INV-1042</td>
+              <td class="num">Mar 3, 2026</td>
+              <td class="num">$12,480.00</td>
+              <td>Anthropic</td>
+              <td><span class="tag tag--tech">2026-Q1</span></td>
+              <td>Tobias Studer</td>
+              <td class="num">
+                <a class="btn btn--ghost btn--icon" href="./invoices.html#pdf-1042" aria-label="Download invoice INV-1042" title="Download" style="margin-left:auto">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                </a>
+              </td>
+            </tr>
+            <tr>
+              <td class="cell-strong">INV-2087</td>
+              <td class="num">Feb 28, 2026</td>
+              <td class="num">$3,250.50</td>
+              <td>GitHub</td>
+              <td><span class="tag tag--tech">2026-02</span></td>
+              <td>Tobias Studer</td>
+              <td class="num">
+                <a class="btn btn--ghost btn--icon" href="./invoices.html#pdf-2087" aria-label="Download invoice INV-2087" title="Download" style="margin-left:auto">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                </a>
+              </td>
+            </tr>
+            <tr>
+              <td class="cell-strong">INV-9921</td>
+              <td class="num">Feb 14, 2026</td>
+              <td class="num">$899.00</td>
+              <td>Cursor</td>
+              <td><span class="tag tag--tech">2026-Q1</span></td>
+              <td>Admin</td>
+              <td class="num">
+                <a class="btn btn--ghost btn--icon" href="./invoices.html#pdf-9921" aria-label="Download invoice INV-9921" title="Download" style="margin-left:auto">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                </a>
+              </td>
+            </tr>
+            <tr>
+              <td class="cell-strong">INV-1043</td>
+              <td class="num">Jan 31, 2026</td>
+              <td class="num">$12,480.00</td>
+              <td>Anthropic</td>
+              <td><span class="tag tag--tech">2026-01</span></td>
+              <td>Tobias Studer</td>
+              <td class="num">
+                <a class="btn btn--ghost btn--icon" href="./invoices.html#pdf-1043" aria-label="Download invoice INV-1043" title="Download" style="margin-left:auto">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                </a>
+              </td>
+            </tr>
+            <tr>
+              <td class="cell-strong">INV-7755</td>
+              <td class="num">Jan 9, 2026</td>
+              <td class="num">$540.00</td>
+              <td class="t-disabled">&mdash;</td>
+              <td class="t-disabled">&mdash;</td>
+              <td class="t-disabled">&mdash;</td>
+              <td class="num">
+                <a class="btn btn--ghost btn--icon" href="./invoices.html#pdf-7755" aria-label="Download invoice INV-7755" title="Download" style="margin-left:auto">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                </a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- pagination + rows-per-page -->
+        <div class="row row--between row--wrap" style="margin-top: var(--space-lg); gap: var(--space-md)">
+          <div class="row" style="gap: var(--space-sm)">
+            <span class="label">ROWS PER PAGE</span>
+            <div class="segmented">
+              <button class="active">10</button>
+              <button>25</button>
+              <button>50</button>
+              <button>100</button>
+            </div>
+          </div>
+          <div class="period-nav">
+            <a class="nav-arrow" href="./invoices.html#prev" aria-label="Previous page">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+            </a>
+            <span class="period-label">PAGE 1 / 5</span>
+            <a class="nav-arrow" href="./invoices.html#next" aria-label="Next page">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <hr class="divider" />
+
+      <!-- SECONDARY SECTIONS — varied forms -->
+      <div class="grid grid--2">
+
+        <!-- Row Action — Download (stat-list form) -->
+        <div class="card--bare">
+          <span class="label card-label">ROW ACTION &middot; DOWNLOAD</span>
+          <div class="stat-list">
+            <div class="stat-row">
+              <span class="label">CONTROL</span>
+              <span class="value">
+                <span class="row" style="gap:8px; display:inline-flex; align-items:center">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+                  Ghost icon button
+                </span>
+              </span>
+            </div>
+            <div class="stat-row">
+              <span class="label">TOOLTIP</span>
+              <span class="value">Download</span>
+            </div>
+            <div class="stat-row">
+              <span class="label">ARIA-LABEL</span>
+              <span class="value">Download invoice INV-1042</span>
+            </div>
+            <div class="stat-row">
+              <span class="label">TARGET</span>
+              <span class="value t-secondary">/api/invoices/{id}/pdf</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Empty State (no invoices) -->
+        <div class="card">
+          <span class="label card-label">EMPTY STATE &middot; NO INVOICES</span>
+          <div class="empty" style="padding: var(--space-2xl) var(--space-md)">
+            <div class="empty-title">No invoices archived yet.</div>
+            <div class="empty-sub" style="margin-bottom: var(--space-lg)">Shown only when the archive is empty</div>
+            <a class="btn btn--secondary btn--sm" href="./invoices.html#new">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+              Upload your first invoice
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Status / tag legend — extraction states from the upload flows -->
+      <div class="card--bare section-gap">
+        <span class="label card-label">UPLOAD &amp; SYNC STATUS &middot; FROM /invoices/new &amp; /invoices/bulk</span>
+        <div class="row row--wrap" style="gap: var(--space-sm)">
+          <span class="tag tag--success"><span class="led"></span>Synced</span>
+          <span class="tag tag--active"><span class="led"></span>Linked</span>
+          <span class="tag">Unlinked &middot; &mdash;</span>
+          <span class="tag tag--accent"><span class="led"></span>Duplicate</span>
+          <span class="tag tag--warning"><span class="led"></span>Low confidence</span>
+          <span class="tag tag--success">High confidence</span>
+        </div>
+        <p class="caption" style="margin-top: var(--space-md); max-width: 64ch">
+          Single upload runs AI field extraction with confidence highlighting on Invoice Number / Date / Amount / Vendor; a duplicate triggers a "Duplicate Invoice Detected" dialog (Skip vs Overwrite). Bulk upload accepts a ZIP of PDFs and returns a sync-results review.
+        </p>
+      </div>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/login.html b/specs/028-nothing-design-redesign/mockups/login.html
new file mode 100644
index 00000000..79cb313b
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/login.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Sign In · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+  <style>
+    /* Scoped auth layout — tokens only. Two columns on large screens; brand panel
+       hidden below lg, where a Bot avatar sits at the top of the card instead.
+       NOTE: .auth-shell intentionally supersedes the canonical .auth-card here —
+       the contract's .auth-card caps width at 400px (single-column), but this
+       screen needs a wider 920px two-column split. Other single-column auth
+       screens should still use .auth-card. */
+    .auth-shell { width: 100%; max-width: 920px; }
+    .auth-split {
+      display: grid;
+      grid-template-columns: 1fr;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-card);
+      overflow: hidden;
+      background: var(--surface);
+    }
+    @media (min-width: 992px) {
+      .auth-split { grid-template-columns: 1fr 1fr; }
+    }
+
+    /* Decorative left column — large screens only */
+    .brand-panel {
+      display: none;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: var(--space-2xl);
+      padding: var(--space-2xl);
+      background: var(--surface-raised);
+      border-right: 1px solid var(--border);
+    }
+    @media (min-width: 992px) { .brand-panel { display: flex; } }
+
+    .brand-mark { display: inline-flex; align-items: center; gap: var(--space-sm); }
+    .brand-mark .glyph {
+      width: 36px; height: 36px; border-radius: var(--radius-compact);
+      border: 1px solid var(--border-visible);
+      display: grid; place-items: center; color: var(--text-display);
+    }
+    .brand-mark .glyph svg { width: 20px; height: 20px; }
+    .brand-mark .name {
+      font-family: var(--font-mono); font-size: var(--body-sm);
+      letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-display);
+    }
+
+    .brand-quote {
+      font-family: var(--font-ui); font-weight: 300;
+      font-size: var(--subheading); line-height: 1.45;
+      color: var(--text-primary); max-width: 34ch;
+    }
+    .brand-foot { display: flex; flex-direction: column; gap: var(--space-sm); }
+
+    /* Right column — the credentials card */
+    .auth-pane { padding: var(--space-2xl); }
+    @media (max-width: 480px) { .auth-pane, .brand-panel { padding: var(--space-xl); } }
+
+    .mobile-avatar {
+      width: 56px; height: 56px; border-radius: var(--radius-pill);
+      background: var(--surface-raised);
+      border: 1px solid var(--border-visible);
+      display: grid; place-items: center; color: var(--text-display);
+      margin-bottom: var(--space-lg);
+    }
+    .mobile-avatar svg { width: 26px; height: 26px; }
+    @media (min-width: 992px) { .mobile-avatar { display: none; } }
+
+    .auth-form { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-xl); }
+
+    /* destructive Alert — the single red moment */
+    .alert--error {
+      display: flex; align-items: flex-start; gap: var(--space-sm);
+      padding: 12px 14px;
+      border: 1px solid var(--accent);
+      border-radius: var(--radius-compact);
+      background: var(--accent-subtle);
+    }
+    .alert--error svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
+    .alert--error .alert-text {
+      font-family: var(--font-mono); font-size: var(--caption);
+      line-height: 1.4; letter-spacing: 0.02em; color: var(--accent);
+    }
+
+    .auth-foot { margin-top: var(--space-xl); }
+  </style>
+</head>
+<body>
+  <div class="auth-screen">
+    <div class="auth-shell stack stack--lg">
+
+      <div class="auth-split">
+
+        <!-- ===== Brand side panel (lg only) ===== -->
+        <aside class="brand-panel">
+          <div class="brand-mark">
+            <span class="glyph">
+              <!-- bot -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="8" width="16" height="11" rx="3"/><path d="M12 8V4M9 4h6"/><circle cx="9" cy="13.5" r="0.6" fill="currentColor"/><circle cx="15" cy="13.5" r="0.6" fill="currentColor"/><path d="M9.5 16.5h5"/></svg>
+            </span>
+            <span class="name">AI Developer Hub</span>
+          </div>
+
+          <p class="brand-quote">
+            Centralise your AI tool budgets, licences, and usage data in one
+            place &mdash; so your team can focus on building.
+          </p>
+
+          <div class="brand-foot">
+            <span class="label">Budget Tracker &middot; Licence Manager &middot; Usage Reports</span>
+            <span class="caption t-disabled">&copy; 2026 AI Developer Hub</span>
+          </div>
+        </aside>
+
+        <!-- ===== Credentials pane ===== -->
+        <section class="auth-pane">
+
+          <!-- mobile-only avatar (hidden on lg) -->
+          <div class="mobile-avatar">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="8" width="16" height="11" rx="3"/><path d="M12 8V4M9 4h6"/><circle cx="9" cy="13.5" r="0.6" fill="currentColor"/><circle cx="15" cy="13.5" r="0.6" fill="currentColor"/><path d="M9.5 16.5h5"/></svg>
+          </div>
+
+          <div class="stack stack--sm">
+            <span class="label eyebrow">AI DEVELOPER HUB</span>
+            <h1 class="display-md doto">Welcome back</h1>
+            <p class="subheading t-secondary">Sign in to your AI Developer Hub account</p>
+          </div>
+
+          <form class="auth-form" onsubmit="return false">
+
+            <!-- destructive Alert — single red interrupt -->
+            <div class="alert--error" role="alert">
+              <!-- alert-circle -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><circle cx="12" cy="16" r="0.6" fill="currentColor"/></svg>
+              <span class="alert-text">Invalid email or password</span>
+            </div>
+
+            <div class="field">
+              <label class="label" for="email">Email</label>
+              <input class="control" id="email" type="email" placeholder="you@company.com" value="tobias.studer@unic.com" autocomplete="email" />
+            </div>
+
+            <div class="field">
+              <label class="label" for="password">Password</label>
+              <input class="control" id="password" type="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" autocomplete="current-password" />
+            </div>
+
+            <button class="btn btn--primary" type="submit" style="width:100%">Sign In</button>
+          </form>
+
+          <div class="auth-foot stack stack--sm">
+            <span class="caption t-disabled">Access is invite-only. New here? Check your email for an invite link.</span>
+          </div>
+
+        </section>
+      </div>
+
+      <!-- theme toggle below the card -->
+      <div class="row row--between" style="align-items:center">
+        <span class="caption t-disabled">SECURE&nbsp;SESSION&nbsp;&middot;&nbsp;NEXTAUTH</span>
+        <div class="theme-toggle">
+          <button data-theme="dark" class="active">Dark</button>
+          <button data-theme="light">Light</button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/reports.html b/specs/028-nothing-design-redesign/mockups/reports.html
new file mode 100644
index 00000000..466cdcf7
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/reports.html
@@ -0,0 +1,633 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Reports · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+  <style>
+    /* In-content tabs use a neutral underline so red stays the single content
+       interrupt (matches copilot.html / claude.html / settings.html). */
+    .tabs .tab.active::after { background: var(--border-visible); }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item active" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">ANALYTICS</div>
+          <h1 class="display-md">Reports</h1>
+          <p class="caption" style="margin-top:var(--space-sm)">Tool adoption, license utilization, and spending insights</p>
+        </div>
+        <div class="topbar-actions">
+          <a href="./reports.html" class="btn btn--secondary btn--sm">Overview</a>
+          <a href="./budget.html" class="btn btn--ghost btn--sm">Budget&nbsp;report</a>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- TAB BAR — Overview (active) | Budget. The single red moment lives on the active underline. -->
+      <nav class="tabs" role="tablist" style="margin-bottom:var(--space-2xl)">
+        <a class="tab active" href="./reports.html" role="tab" aria-selected="true">Overview</a>
+        <a class="tab" href="./budget.html" role="tab" aria-selected="false">Budget</a>
+      </nav>
+
+      <!-- ============================================================= -->
+      <!-- SECTION 1 — OVERVIEW KPI GRID (4-up)                           -->
+      <!-- ============================================================= -->
+      <div class="grid grid--kpi">
+        <div class="card">
+          <span class="label card-label">ACTIVE USERS</span>
+          <div class="metric">
+            <span class="metric-value" style="font-size:var(--display-md)">142</span>
+          </div>
+        </div>
+
+        <div class="card">
+          <span class="label card-label">ACTIVE TOOLS</span>
+          <div class="metric">
+            <span class="metric-value" style="font-size:var(--display-md)">6</span>
+          </div>
+        </div>
+
+        <div class="card">
+          <span class="label card-label">ACTIVE LICENSES</span>
+          <div class="metric">
+            <span class="metric-value" style="font-size:var(--display-md)">318
+              <span class="metric-trend t-success" style="align-self:center">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M12 19V5M5 12l7-7 7 7"/></svg>12
+              </span>
+            </span>
+          </div>
+          <p class="caption" style="margin-top:var(--space-sm)">vs 306 last month</p>
+        </div>
+
+        <div class="card">
+          <span class="label card-label">EXPECTED MONTHLY</span>
+          <div class="metric">
+            <span class="metric-value" style="font-size:var(--display-md)">$48,920
+              <span class="metric-trend t-success" style="align-self:center">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><path d="M12 19V5M5 12l7-7 7 7"/></svg>6.4%
+              </span>
+            </span>
+          </div>
+          <!-- inline sparkline: last 5 months + Now -->
+          <svg viewBox="0 0 120 32" preserveAspectRatio="none" style="width:100%;height:32px;margin-top:var(--space-md)" fill="none" stroke="var(--text-display)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="2,26 26,22 50,23 74,16 98,12 118,6" />
+            <circle cx="118" cy="6" r="2" fill="var(--text-display)" stroke="none" />
+          </svg>
+          <div class="axis">
+            <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Now</span>
+          </div>
+          <p class="caption" style="margin-top:var(--space-sm)">Licenses only &mdash; API usage not included</p>
+        </div>
+      </div>
+
+      <!-- ============================================================= -->
+      <!-- SECTION 2 — BUDGET HEALTH HERO (on track → no red border)      -->
+      <!-- ============================================================= -->
+      <div class="card card--pad-lg section-gap">
+        <div class="row row--between row--wrap" style="gap:var(--space-2xl);align-items:center">
+          <div class="row" style="gap:var(--space-lg);align-items:flex-start;flex:1;min-width:280px">
+            <!-- status icon: shield -->
+            <span style="color:var(--success);flex-shrink:0;margin-top:4px">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:28px;height:28px"><path d="M12 3 4 6v6c0 4.5 3.2 7.6 8 9 4.8-1.4 8-4.5 8-9V6z"/><path d="m9 12 2 2 4-4"/></svg>
+            </span>
+            <div class="stack stack--md metric-hero" style="flex:1">
+              <div class="row" style="gap:var(--space-md)">
+                <span class="label">BUDGET HEALTH</span>
+                <span class="tag tag--success"><span class="led"></span>Within budget</span>
+              </div>
+              <!-- PRIMARY HERO NUMBER (Doto, the one big number on the screen — display-xl via .metric-hero) -->
+              <span class="metric-value is-doto">$184,200<span class="metric-unit">USD YTD SPEND</span></span>
+              <p class="subheading" style="max-width:64ch;line-height:1.5">
+                YTD spend is <span class="mono t-display">$184,200</span> &mdash; 61.4% of the <span class="mono t-display">$300,000</span> ceiling.
+                Linear trend lands at <span class="mono t-success">$278,400</span> by year-end, within the ceiling.
+                Apr 2026 was <span class="mono t-success">4.2%</span> under plan.
+              </p>
+            </div>
+          </div>
+          <a href="./budget.html" class="btn btn--secondary">
+            Open Budget report
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+          </a>
+        </div>
+      </div>
+
+      <!-- ============================================================= -->
+      <!-- SECTION 3 — WHAT CHANGED THIS MONTH (insight cards, 2-up)      -->
+      <!-- ============================================================= -->
+      <div class="section-gap">
+        <div class="row row--between" style="margin-bottom:var(--space-lg);align-items:baseline">
+          <span class="heading">What changed this month</span>
+          <span class="caption">Auto-generated from license + spend data &middot; static rules (v1)</span>
+        </div>
+        <div class="grid grid--2">
+          <!-- info -->
+          <div class="card">
+            <div class="row" style="gap:var(--space-md);align-items:flex-start">
+              <span style="color:var(--text-secondary);flex-shrink:0;margin-top:2px">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px"><path d="M12 3 4 6v6c0 4.5 3.2 7.6 8 9 4.8-1.4 8-4.5 8-9V6z"/></svg>
+              </span>
+              <div class="stack stack--sm">
+                <span class="t-display" style="font-weight:500">Budget on track</span>
+                <span class="caption" style="line-height:1.6">Projected <span class="mono">$278.4k</span> (93% of <span class="mono">$300.0k</span>).</span>
+              </div>
+            </div>
+          </div>
+          <!-- info / growth (trend-up) -->
+          <div class="card">
+            <div class="row" style="gap:var(--space-md);align-items:flex-start">
+              <span style="color:var(--text-secondary);flex-shrink:0;margin-top:2px">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+              </span>
+              <div class="stack stack--sm">
+                <span class="t-display" style="font-weight:500">GitHub Copilot grew 88 &rarr; 96 seats</span>
+                <span class="caption" style="line-height:1.6"><span class="t-success">&#9650; 8 seats</span> vs last month (9% MoM).</span>
+              </div>
+            </div>
+          </div>
+          <!-- warn (yellow) — trend-up -->
+          <div class="card">
+            <div class="row" style="gap:var(--space-md);align-items:flex-start">
+              <span style="color:var(--warning);flex-shrink:0;margin-top:2px">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+              </span>
+              <div class="stack stack--sm">
+                <span class="t-display" style="font-weight:500">Expected monthly spend rose</span>
+                <span class="caption" style="line-height:1.6"><span class="t-warning">&#9650; 6.4%</span> &mdash; <span class="mono">$46.0k</span> &rarr; <span class="mono">$48.9k</span> vs last month.</span>
+              </div>
+            </div>
+          </div>
+          <!-- info — under plan (trend-down) -->
+          <div class="card">
+            <div class="row" style="gap:var(--space-md);align-items:flex-start">
+              <span style="color:var(--text-secondary);flex-shrink:0;margin-top:2px">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+              </span>
+              <div class="stack stack--sm">
+                <span class="t-display" style="font-weight:500">Apr 2026 was 4.2% under plan</span>
+                <span class="caption" style="line-height:1.6"><span class="t-success">&#9660; 4.2%</span> vs the planned monthly amount.</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ============================================================= -->
+      <!-- SECTION 4 — TOOL ADOPTION TABLE                                -->
+      <!-- ============================================================= -->
+      <div class="card card--pad-lg section-gap">
+        <div class="row row--between" style="margin-bottom:var(--space-lg);align-items:baseline">
+          <span class="heading">Tool adoption</span>
+          <span class="caption">Active assignments and expected monthly cost &middot; MoM license delta</span>
+        </div>
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Tool</th>
+              <th>Vendor</th>
+              <th class="num">Active users</th>
+              <th class="num">MoM</th>
+              <th class="num">Expected monthly</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="cell-strong">GitHub Copilot</td>
+              <td class="t-secondary">GitHub</td>
+              <td class="num">96</td>
+              <td class="num"><span class="tag tag--active">+8</span></td>
+              <td class="num">$1,824.00</td>
+            </tr>
+            <tr>
+              <td class="cell-strong">Cursor</td>
+              <td class="t-secondary">Anysphere</td>
+              <td class="num">74</td>
+              <td class="num"><span class="tag tag--active">+5</span></td>
+              <td class="num">$2,960.00</td>
+            </tr>
+            <tr>
+              <td class="cell-strong">Claude</td>
+              <td class="t-secondary">Anthropic</td>
+              <td class="num">58</td>
+              <td class="num"><span class="tag">&minus;2</span></td>
+              <td class="num">$1,160.00</td>
+            </tr>
+            <tr>
+              <td class="cell-strong">ChatGPT Enterprise</td>
+              <td class="t-secondary">OpenAI</td>
+              <td class="num">42</td>
+              <td class="num"><span class="tag">&plusmn;0</span></td>
+              <td class="num">$2,520.00</td>
+            </tr>
+            <tr>
+              <td class="cell-strong">Gemini</td>
+              <td class="t-secondary">Google</td>
+              <td class="num">26</td>
+              <td class="num"><span class="tag tag--active">+3</span></td>
+              <td class="num">$520.00</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- ============================================================= -->
+      <!-- SECTION 5 — SPEND BY CIRCLE TABLE                              -->
+      <!-- ============================================================= -->
+      <div class="card card--pad-lg section-gap">
+        <div class="row row--between" style="margin-bottom:var(--space-lg);align-items:baseline">
+          <span class="heading">Spend by circle</span>
+          <span class="caption">License distribution and expected cost by team &middot; sorted by monthly cost</span>
+        </div>
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Circle</th>
+              <th class="num">Users</th>
+              <th class="num">Licenses</th>
+              <th class="num">Expected cost</th>
+              <th class="num">$ / user</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="cell-strong">Engineering</td>
+              <td class="num">64</td>
+              <td class="num">142</td>
+              <td class="num">$21,840.00</td>
+              <td class="num">$341.25</td>
+            </tr>
+            <tr>
+              <td class="cell-strong">Product</td>
+              <td class="num">28</td>
+              <td class="num">61</td>
+              <td class="num">$9,120.00</td>
+              <td class="num">$325.71</td>
+            </tr>
+            <tr>
+              <td class="cell-strong">Data &amp; AI</td>
+              <td class="num">19</td>
+              <td class="num">48</td>
+              <td class="num">$7,640.00</td>
+              <td class="num">$402.11</td>
+            </tr>
+            <tr>
+              <td class="cell-strong">Design</td>
+              <td class="num">14</td>
+              <td class="num">27</td>
+              <td class="num">$3,980.00</td>
+              <td class="num">$284.29</td>
+            </tr>
+            <tr>
+              <td class="t-disabled" style="font-style:italic">Unassigned</td>
+              <td class="num">17</td>
+              <td class="num">40</td>
+              <td class="num">$6,340.00</td>
+              <td class="num">$372.94</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- ============================================================= -->
+      <!-- BUDGET TAB PREVIEW — heaviest viz treatment (charts archetype) -->
+      <!-- Shown inline so the mockup demonstrates both tabs' content.    -->
+      <!-- ============================================================= -->
+      <div class="section-gap">
+        <div class="row" style="gap:var(--space-md);margin-bottom:var(--space-lg);align-items:baseline">
+          <span class="label">BUDGET TAB</span>
+          <span class="caption mono">/reports/budget</span>
+        </div>
+
+        <!-- B1 — FY budget at a glance -->
+        <div class="card card--pad-lg">
+          <div class="row row--between" style="margin-bottom:var(--space-lg);align-items:baseline">
+            <div class="stack stack--sm">
+              <span class="heading">FY 2026 budget at a glance</span>
+              <span class="caption">5 of 12 periods complete &middot; Actual = billed + running API</span>
+            </div>
+            <span class="tag tag--success"><span class="led"></span>On track</span>
+          </div>
+
+          <!-- SpendProgressBar — signature segmented viz: actual vs ceiling vs projected -->
+          <div class="seg-head">
+            <span class="label">UTILIZATION &middot; 61.4% OF CEILING CONSUMED YTD</span>
+            <span class="value value--success mono">$184,200 / $300,000</span>
+          </div>
+          <div class="seg-bar seg-bar--hero">
+            <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+            <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+            <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+            <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+            <span class="seg"></span><span class="seg"></span><span class="seg"></span>
+            <span class="seg"></span><span class="seg"></span><span class="seg"></span>
+            <span class="seg"></span><span class="seg"></span>
+          </div>
+          <div class="axis" style="margin-bottom:var(--space-xl)">
+            <span>0</span><span>Projected $278.4k</span><span>Ceiling $300k</span>
+          </div>
+
+          <!-- 4 stat tiles -->
+          <div class="grid grid--4">
+            <div class="card card--raised">
+              <span class="label card-label">ANNUAL CEILING</span>
+              <span class="metric-value" style="font-size:var(--heading)">$300,000</span>
+              <p class="caption" style="margin-top:var(--space-sm)">12 &times; $25,000 planned</p>
+            </div>
+            <div class="card card--raised">
+              <span class="label card-label">ACTUAL YTD</span>
+              <span class="metric-value" style="font-size:var(--heading)">$184,200</span>
+              <p class="caption" style="margin-top:var(--space-sm)">$176,400 billed + $7,800 API</p>
+            </div>
+            <div class="card card--raised">
+              <span class="label card-label">AVG MONTHLY RUN-RATE</span>
+              <span class="metric-value t-warning" style="font-size:var(--heading)">$36,840</span>
+              <p class="caption" style="margin-top:var(--space-sm)">vs $25,000 planned (+47.4%)</p>
+            </div>
+            <div class="card card--raised">
+              <span class="label card-label">PROJECTED YEAR-END</span>
+              <span class="metric-value t-success" style="font-size:var(--heading)">$278,400</span>
+              <p class="caption" style="margin-top:var(--space-sm)">within $300,000 ceiling</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- B2 — Past month spotlight -->
+        <div class="card card--pad-lg section-gap">
+          <div class="stack stack--sm" style="margin-bottom:var(--space-lg)">
+            <span class="label eyebrow">PAST MONTH SPOTLIGHT</span>
+            <span class="heading">May 2026 &mdash; $23,960 actual vs $25,000 planned</span>
+          </div>
+
+          <div class="grid grid--3" style="margin-bottom:var(--space-xl)">
+            <div class="stack stack--sm">
+              <span class="label">PLANNED</span>
+              <span class="metric-value" style="font-size:var(--heading)">$25,000</span>
+              <span class="caption">Allocated monthly</span>
+            </div>
+            <div class="stack stack--sm">
+              <span class="label">ACTUAL</span>
+              <span class="metric-value" style="font-size:var(--heading)">$23,960</span>
+              <span class="caption">$21,200 billed + $2,760 API</span>
+            </div>
+            <div class="stack stack--sm">
+              <span class="label">VARIANCE</span>
+              <span class="metric-value t-success" style="font-size:var(--heading)">&minus;4.2%</span>
+              <span class="caption">&minus;$1,040 vs plan</span>
+            </div>
+          </div>
+
+          <!-- horizontal plan-vs-actual bar (billed + API split) -->
+          <div class="stack stack--sm" style="margin-bottom:var(--space-lg)">
+            <div class="seg-head"><span class="label">PLANNED</span><span class="value mono">$25,000</span></div>
+            <div class="seg-bar">
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span>
+            </div>
+            <div class="seg-head" style="margin-top:var(--space-sm)"><span class="label">BILLED + API</span><span class="value mono">$23,960</span></div>
+            <div class="seg-bar">
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-filled"></span>
+              <span class="seg is-filled"></span><span class="seg is-filled"></span><span class="seg is-good"></span>
+              <span class="seg is-good"></span><span class="seg"></span>
+            </div>
+            <div class="legend" style="margin-top:var(--space-sm)">
+              <span class="legend-item"><span class="swatch" style="background:var(--text-display)"></span>Planned</span>
+              <span class="legend-item"><span class="swatch" style="background:var(--text-primary)"></span>Billed</span>
+              <span class="legend-item"><span class="swatch" style="background:var(--success)"></span>API</span>
+            </div>
+          </div>
+
+          <!-- top per-tool variance drivers -->
+          <span class="label card-label" style="margin-top:var(--space-md)">TOP PER-TOOL CHANGES VS LAST MONTH</span>
+          <div class="stat-list">
+            <div class="stat-row">
+              <span class="label">GITHUB COPILOT</span>
+              <span class="value">$1,680 &rarr; $1,824 <span class="t-warning">&uarr; +$144 (+8.6%)</span></span>
+            </div>
+            <div class="stat-row">
+              <span class="label">CLAUDE</span>
+              <span class="value">$1,240 &rarr; $1,160 <span class="t-success">&darr; &minus;$80 (&minus;6.5%)</span></span>
+            </div>
+          </div>
+        </div>
+
+        <!-- B3 — Plan vs actual chart (HEAVIEST treatment — charts archetype) -->
+        <div class="card card--pad-lg section-gap">
+          <div class="row row--between" style="margin-bottom:var(--space-lg);align-items:baseline">
+            <span class="heading">Plan vs actual &mdash; FY 2026</span>
+            <span class="legend">
+              <span class="legend-item"><span class="swatch" style="background:var(--text-display)"></span>Planned</span>
+              <span class="legend-item"><span class="swatch" style="background:var(--text-primary)"></span>Billed</span>
+              <span class="legend-item"><span class="swatch" style="background:var(--success)"></span>API (running)</span>
+              <span class="legend-item"><span class="swatch" style="background:var(--border-visible)"></span>Forecast</span>
+            </span>
+          </div>
+
+          <!-- stacked / grouped bar chart with dashed planned-average reference line -->
+          <div style="position:relative">
+            <!-- dashed planned-average reference line -->
+            <svg viewBox="0 0 100 4" preserveAspectRatio="none" style="position:absolute;left:0;right:0;top:25%;width:100%;height:2px;z-index:1" fill="none" stroke="var(--text-secondary)" stroke-width="1" stroke-dasharray="3 3"><line x1="0" y1="1" x2="100" y2="1"/></svg>
+            <div class="bars" style="height:180px;gap:10px">
+              <!-- each month: planned (muted) beside billed; May adds API; Jun+ forecast -->
+              <span class="bar is-muted" style="height:62%"></span>
+              <span class="bar" style="height:56%"></span>
+              <span class="bar is-muted" style="height:62%"></span>
+              <span class="bar" style="height:60%"></span>
+              <span class="bar is-muted" style="height:62%"></span>
+              <span class="bar" style="height:59%"></span>
+              <span class="bar is-muted" style="height:62%"></span>
+              <span class="bar" style="height:57%"></span>
+              <span class="bar is-muted" style="height:62%"></span>
+              <span class="bar is-good" style="height:60%"></span>
+              <!-- forecast (Jun+) -->
+              <span class="bar is-muted" style="height:62%"></span>
+              <span class="bar is-muted" style="height:66%;opacity:0.5"></span>
+            </div>
+          </div>
+          <div class="axis">
+            <span>Jan</span><span></span><span>Feb</span><span></span><span>Mar</span><span></span>
+            <span>Apr</span><span></span><span>May</span><span></span><span>Jun</span><span></span>
+          </div>
+          <p class="caption" style="margin-top:var(--space-md)">
+            Y-axis: $25k / $50k&hellip; &middot; dashed line = planned monthly average.
+            Actual bars turn red when over plan &mdash; none over plan this fiscal year.
+          </p>
+        </div>
+
+        <!-- B4 — Forecast cumulative chart -->
+        <div class="card card--pad-lg section-gap">
+          <div class="row row--between" style="margin-bottom:var(--space-lg);align-items:baseline">
+            <span class="heading">Forecast &mdash; cumulative spend</span>
+            <span class="legend">
+              <span class="legend-item"><span class="swatch" style="background:var(--text-display)"></span>Actual cumulative</span>
+              <span class="legend-item"><span class="swatch" style="background:var(--text-secondary)"></span>Forecast cumulative</span>
+            </span>
+          </div>
+
+          <!-- composed line chart: solid actual + dashed forecast + dashed ceiling reference -->
+          <svg viewBox="0 0 600 200" preserveAspectRatio="none" style="width:100%;height:200px" fill="none">
+            <!-- ceiling reference line (dashed) -->
+            <line x1="0" y1="18" x2="600" y2="18" stroke="var(--text-secondary)" stroke-width="1" stroke-dasharray="4 4"/>
+            <!-- solid actual cumulative (Jan→May) -->
+            <polyline points="10,178 128,150 246,116 364,86 482,58" stroke="var(--text-display)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <circle cx="482" cy="58" r="3" fill="var(--text-display)"/>
+            <!-- dashed linear-regression forecast (May→Dec) -->
+            <polyline points="482,58 590,30" stroke="var(--text-secondary)" stroke-width="1.5" stroke-dasharray="5 4" stroke-linecap="round" stroke-linejoin="round"/>
+            <circle cx="590" cy="30" r="3" fill="none" stroke="var(--text-secondary)" stroke-width="1.5"/>
+          </svg>
+          <div class="row row--between" style="margin-top:var(--space-sm)">
+            <span class="caption mono t-secondary">Ceiling $300,000</span>
+            <span class="caption mono">Actual May $184,200 &middot; Forecast Dec $278,400</span>
+          </div>
+          <div class="axis">
+            <span>Jan</span><span>Mar</span><span>May</span><span>Jul</span><span>Sep</span><span>Dec</span>
+          </div>
+          <p class="caption" style="margin-top:var(--space-md)">
+            Solid = actual, dashed = linear-regression forecast. Below 3 completed months this shows:
+            &ldquo;The forecast requires at least 3 months of completed spending.&rdquo;
+          </p>
+        </div>
+
+        <!-- B5 — Per-tool breakdown table (expandable; Anthropic API running) -->
+        <div class="card card--pad-lg section-gap">
+          <div class="row row--between" style="margin-bottom:var(--space-lg);align-items:baseline">
+            <span class="heading">Per-tool breakdown</span>
+            <span class="caption">Sorted by YTD spent &middot; license-derived + running-API attribution</span>
+          </div>
+          <table class="table">
+            <thead>
+              <tr>
+                <th style="width:32px"></th>
+                <th>Tool</th>
+                <th class="num">YTD spent</th>
+                <th class="num">Current monthly</th>
+                <th class="num">Projected EOY</th>
+                <th class="num">Share</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td></td>
+                <td class="cell-strong">Cursor</td>
+                <td class="num">$26,400</td>
+                <td class="num">$2,960</td>
+                <td class="num">$44,160</td>
+                <td class="num">28.4%</td>
+              </tr>
+              <tr>
+                <td></td>
+                <td class="cell-strong">GitHub Copilot</td>
+                <td class="num">$19,920</td>
+                <td class="num">$1,824</td>
+                <td class="num">$31,104</td>
+                <td class="num">21.4%</td>
+              </tr>
+              <tr>
+                <td></td>
+                <td class="cell-strong">ChatGPT Enterprise</td>
+                <td class="num">$17,640</td>
+                <td class="num">$2,520</td>
+                <td class="num">$32,760</td>
+                <td class="num">19.0%</td>
+              </tr>
+              <!-- expandable Anthropic API row (running API) — neutral raised highlight, no red bar -->
+              <tr style="background:var(--surface-raised)">
+                <td class="num" style="color:var(--text-secondary)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="m6 9 6 6 6-6"/></svg>
+                </td>
+                <td>
+                  <span class="row" style="gap:var(--space-sm)">
+                    <span class="cell-strong">Anthropic API</span>
+                    <span class="tag tag--tech">Running API</span>
+                  </span>
+                </td>
+                <td class="num">$7,800</td>
+                <td class="num">$2,760</td>
+                <td class="num">$26,640</td>
+                <td class="num">8.4%</td>
+              </tr>
+              <tr>
+                <td></td>
+                <td class="indent t-secondary">&#8627;&nbsp;Workspace &middot; Production</td>
+                <td class="num">$1,940</td>
+                <td class="num t-disabled">&mdash;</td>
+                <td class="num t-disabled">&mdash;</td>
+                <td class="num t-disabled">&mdash;</td>
+              </tr>
+              <tr>
+                <td></td>
+                <td class="indent t-secondary">&#8627;&nbsp;Workspace &middot; Research</td>
+                <td class="num">$820</td>
+                <td class="num t-disabled">&mdash;</td>
+                <td class="num t-disabled">&mdash;</td>
+                <td class="num t-disabled">&mdash;</td>
+              </tr>
+            </tbody>
+          </table>
+          <p class="caption" style="margin-top:var(--space-lg);line-height:1.6">
+            License-derived rows reflect active seat assignments. The Anthropic API row is metered from running
+            usage and expands to a workspace-level breakdown.
+          </p>
+        </div>
+
+        <!-- EMPTY-STATE reference (no active budget) -->
+        <div class="card card--pad-lg section-gap">
+          <div class="empty" style="padding:var(--space-2xl) var(--space-xl)">
+            <div class="empty-title">No active budget</div>
+            <div class="empty-sub" style="margin-bottom:var(--space-lg)">When no budget exists for the fiscal year, the Budget tab shows this state.</div>
+            <a href="./budget.html" class="btn btn--secondary btn--sm">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+              Create a budget
+            </a>
+          </div>
+        </div>
+      </div>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/requests.html b/specs/028-nothing-design-redesign/mockups/requests.html
new file mode 100644
index 00000000..4295572f
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/requests.html
@@ -0,0 +1,351 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Access Requests · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item active" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">INBOX&nbsp;/&nbsp;APPROVALS</div>
+          <h1 class="display-md">Access Requests</h1>
+        </div>
+        <div class="topbar-actions">
+          <label class="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+            <input type="text" placeholder="Requester name or email…" />
+          </label>
+          <button class="btn btn--secondary btn--sm">
+            Status
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+          </button>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- PRIMARY: the one hero number — pending review queue depth -->
+      <section class="row row--between row--wrap" style="align-items:flex-end;gap:var(--space-2xl)">
+        <div class="metric">
+          <span class="label">PENDING REVIEW</span>
+          <span class="metric-value is-doto t-accent" style="font-size:var(--display-xl)">7<span class="metric-unit">requests</span></span>
+        </div>
+        <p class="caption" style="max-width:48ch;line-height:1.6;text-align:right">
+          Routed from Microsoft Forms via Power Automate. Any admin can claim any request &mdash; first to act wins.
+        </p>
+      </section>
+
+      <hr class="divider" />
+
+      <!-- SECONDARY: faceted status filter, summary, pagination context -->
+      <div class="row row--between row--wrap" style="margin-bottom:var(--space-lg)">
+        <div class="segmented">
+          <button class="active">All</button>
+          <button>Pending review</button>
+          <button>Approved</button>
+          <button>Completed</button>
+          <button>Rejected</button>
+          <button>Cancelled</button>
+        </div>
+        <div class="row" style="gap:var(--space-lg)">
+          <span class="label">ROWS</span>
+          <div class="segmented">
+            <button class="active">10</button>
+            <button>25</button>
+            <button>50</button>
+            <button>100</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- PRIMARY SECTION: the request queue table (heaviest treatment) -->
+      <div class="card card--pad-lg">
+        <div class="row row--between" style="margin-bottom:var(--space-lg)">
+          <span class="label">LICENSE REQUESTS &middot; NEWEST FIRST</span>
+          <span class="caption mono">Showing 1&ndash;10 of 42</span>
+        </div>
+
+        <table class="table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Requester</th>
+              <th>Tool / tier</th>
+              <th>Status</th>
+              <th>Decided by</th>
+              <th class="num">Age</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="is-active">
+              <td class="num"><a href="#" class="cell-strong">REQ-042</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">Mara Holzer</span>
+                  <span class="caption">mara.holzer@unic.com</span>
+                </span>
+              </td>
+              <td>
+                <span class="row" style="gap:var(--space-sm)">
+                  GitHub Copilot
+                  <span class="tag tag--tech">Business</span>
+                </span>
+              </td>
+              <td><span class="tag tag--active"><span class="led"></span>Pending review</span></td>
+              <td class="t-disabled">&mdash;</td>
+              <td class="num">3 hours ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+            <tr>
+              <td class="num"><a href="#" class="cell-strong">REQ-041</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">Tobias Studer</span>
+                  <span class="caption">tobias.studer@unic.com</span>
+                </span>
+              </td>
+              <td>
+                <span class="row" style="gap:var(--space-sm)">
+                  Claude
+                  <span class="tag tag--tech">Team</span>
+                </span>
+              </td>
+              <td><span class="tag">Approved</span></td>
+              <td>Lena Brunner</td>
+              <td class="num">1 day ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+            <tr>
+              <td class="num"><a href="#" class="cell-strong">REQ-039</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">David K&uuml;min</span>
+                  <span class="caption">david.kuemin@unic.com</span>
+                </span>
+              </td>
+              <td>
+                <span class="row" style="gap:var(--space-sm)">
+                  Cursor
+                  <span class="tag tag--tech">Pro</span>
+                </span>
+              </td>
+              <td><span class="tag">Completed</span></td>
+              <td>Lena Brunner</td>
+              <td class="num">4 days ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+            <tr>
+              <td class="num"><a href="#" class="cell-strong">REQ-036</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">Anita Frei</span>
+                  <span class="caption">anita.frei@unic.com</span>
+                </span>
+              </td>
+              <td>
+                <span class="row" style="gap:var(--space-sm)">
+                  ChatGPT Enterprise
+                  <span class="tag tag--tech">Standard</span>
+                </span>
+              </td>
+              <td><span class="tag">Rejected</span></td>
+              <td>Tobias Studer</td>
+              <td class="num">6 days ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+            <tr>
+              <td class="num"><a href="#" class="cell-strong">REQ-031</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">Pascal Meier</span>
+                  <span class="caption">pascal.meier@unic.com</span>
+                </span>
+              </td>
+              <td>GitHub Copilot</td>
+              <td><span class="tag">Cancelled</span></td>
+              <td class="t-disabled">&mdash;</td>
+              <td class="num">2 weeks ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+            <tr>
+              <td class="num"><a href="#" class="cell-strong">REQ-029</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">Sofia Bianchi</span>
+                  <span class="caption">sofia.bianchi@unic.com</span>
+                </span>
+              </td>
+              <td>
+                <span class="row" style="gap:var(--space-sm)">
+                  Claude
+                  <span class="tag tag--tech">Pro</span>
+                </span>
+              </td>
+              <td><span class="tag">Approved</span></td>
+              <td>Tobias Studer</td>
+              <td class="num">2 weeks ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+            <tr>
+              <td class="num"><a href="#" class="cell-strong">REQ-027</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">Jonas Widmer</span>
+                  <span class="caption">jonas.widmer@unic.com</span>
+                </span>
+              </td>
+              <td>
+                <span class="row" style="gap:var(--space-sm)">
+                  GitHub Copilot
+                  <span class="tag tag--tech">Business</span>
+                </span>
+              </td>
+              <td><span class="tag">Completed</span></td>
+              <td>Lena Brunner</td>
+              <td class="num">3 weeks ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+            <tr>
+              <td class="num"><a href="#" class="cell-strong">REQ-024</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">Elena Vogt</span>
+                  <span class="caption">elena.vogt@unic.com</span>
+                </span>
+              </td>
+              <td>
+                <span class="row" style="gap:var(--space-sm)">
+                  Cursor
+                  <span class="tag tag--tech">Pro</span>
+                </span>
+              </td>
+              <td><span class="tag">Completed</span></td>
+              <td>Tobias Studer</td>
+              <td class="num">1 month ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+            <tr>
+              <td class="num"><a href="#" class="cell-strong">REQ-022</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">Marco Steiner</span>
+                  <span class="caption">marco.steiner@unic.com</span>
+                </span>
+              </td>
+              <td>
+                <span class="row" style="gap:var(--space-sm)">
+                  ChatGPT Enterprise
+                  <span class="tag tag--tech">Standard</span>
+                </span>
+              </td>
+              <td><span class="tag">Rejected</span></td>
+              <td>Lena Brunner</td>
+              <td class="num">1 month ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+            <tr>
+              <td class="num"><a href="#" class="cell-strong">REQ-019</a></td>
+              <td>
+                <span class="stack">
+                  <span class="cell-strong">Nadia Keller</span>
+                  <span class="caption">nadia.keller@unic.com</span>
+                </span>
+              </td>
+              <td>GitHub Copilot</td>
+              <td><span class="tag">Cancelled</span></td>
+              <td class="t-disabled">&mdash;</td>
+              <td class="num">2 months ago</td>
+              <td class="num"><a href="#" class="btn btn--ghost btn--sm">Open</a></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- pagination -->
+        <div class="row row--between" style="margin-top:var(--space-lg)">
+          <span class="caption mono">Page 1 of 5</span>
+          <div class="row" style="gap:var(--space-sm)">
+            <button class="btn btn--secondary btn--sm" disabled style="opacity:0.5">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+              Prev
+            </button>
+            <button class="btn btn--secondary btn--sm">
+              Next
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- TERTIARY: drill-in context (varied form — stat-list, not a card grid) -->
+      <div class="section-gap">
+        <div class="row row--between" style="margin-bottom:var(--space-md)">
+          <span class="label">ROW &rarr; DETAIL DRILL-IN</span>
+          <span class="caption mono">/requests/&#123;id&#125;</span>
+        </div>
+        <div class="grid grid--2">
+          <div class="card">
+            <span class="label card-label">WHAT THE DETAIL PAGE SHOWS</span>
+            <div class="stat-list">
+              <div class="stat-row"><span class="label">STATUS BADGE</span><span class="value">Pending review</span></div>
+              <div class="stat-row"><span class="label">REQUESTER CARD</span><span class="value">Name · Email · Hub match · Assignment #</span></div>
+              <div class="stat-row"><span class="label">REQUEST PAYLOAD</span><span class="value">Tool · Tier · Raw Forms fields</span></div>
+              <div class="stat-row"><span class="label">SENT MESSAGES</span><span class="value">Approval · Completion · Rejection (Teams)</span></div>
+            </div>
+          </div>
+          <div class="card">
+            <span class="label card-label">ACTION BAR · FIRST-WRITE-WINS</span>
+            <p class="caption" style="line-height:1.7;margin-bottom:var(--space-lg)">
+              Any admin can act on this request. First-write-wins &mdash; the first decision is recorded and the
+              request leaves the pending queue. Admin-only route (AuthGuard requiredRole&nbsp;=&nbsp;&quot;admin&quot;).
+            </p>
+            <div class="row row--wrap" style="gap:var(--space-sm)">
+              <span class="btn btn--primary btn--sm">Approve</span>
+              <span class="btn btn--secondary btn--sm">Complete</span>
+              <span class="btn btn--secondary btn--sm">Cancel request</span>
+              <span class="btn btn--secondary btn--sm">Reject</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/settings.html b/specs/028-nothing-design-redesign/mockups/settings.html
new file mode 100644
index 00000000..f40edd9d
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/settings.html
@@ -0,0 +1,531 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Settings · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+  <style>
+    /* Scoped layout helpers — tokens only, no new colors/shadows/radii */
+
+    /* In-content tabs use a neutral underline so red stays the single content
+       interrupt (matches copilot.html / reports.html / claude.html). */
+    .tabs .tab.active::after { background: var(--border-visible); }
+
+    /* Two-column split: hero status block + segmented progress readout */
+    .sync-hero {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--space-xl);
+      align-items: center;
+    }
+    @media (min-width: 920px) {
+      .sync-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
+    }
+    .hero-figure { display: flex; flex-direction: column; gap: var(--space-md); }
+    .hero-figure .metric-value { font-size: var(--display-xl); }
+    .hero-fraction { color: var(--text-disabled); }
+
+    /* section heading row */
+    .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; }
+    .sec-head .sec-title { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
+
+    /* counts cell — created/updated/skipped triad */
+    .counts { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: var(--body-sm); }
+    .counts .sep { color: var(--text-disabled); }
+
+    /* live-poll indicator */
+    .poll { display: inline-flex; align-items: center; gap: var(--space-sm); }
+    .poll .led {
+      width: 7px; height: 7px; border-radius: var(--radius-pill);
+      background: var(--success);
+      animation: pulse 1.8s var(--ease) infinite;
+    }
+    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
+    @media (prefers-reduced-motion: reduce) { .poll .led { animation-duration: 1ms; } }
+
+    /* theme picker — three-up toggle grid */
+    .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
+    @media (max-width: 560px) { .theme-grid { grid-template-columns: 1fr; } }
+    .theme-opt {
+      display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md);
+      padding: var(--space-lg);
+      border: 1px solid var(--border-visible);
+      border-radius: var(--radius-compact);
+      color: var(--text-secondary);
+      transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
+    }
+    .theme-opt svg { width: 22px; height: 22px; stroke-width: 1.5; }
+    .theme-opt .opt-name { font-family: var(--font-mono); font-size: var(--body-sm); letter-spacing: 0.06em; text-transform: uppercase; }
+    .theme-opt:hover { border-color: var(--text-primary); color: var(--text-primary); }
+    .theme-opt.is-selected { background: var(--text-display); color: var(--black); border-color: var(--text-display); }
+
+    /* definition-list rows for read-only status cards */
+    .def-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: 12px 0; border-bottom: 1px solid var(--border); }
+    .def-row:last-child { border-bottom: none; }
+    .def-row .def-val { font-family: var(--font-mono); font-size: var(--body-sm); color: var(--text-primary); }
+
+    /* mono code chip for env vars / scopes */
+    .code {
+      font-family: var(--font-mono); font-size: var(--caption);
+      color: var(--text-primary);
+      border: 1px solid var(--border); border-radius: var(--radius-tech);
+      padding: 2px 6px; letter-spacing: 0;
+    }
+
+    /* member-sync sheet overlay */
+    .sheet-wrap { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
+    @media (min-width: 920px) { .sheet-wrap { grid-template-columns: 1fr minmax(360px, 0.62fr); } }
+    .sheet {
+      border: 1px solid var(--border-visible);
+      border-radius: var(--radius-card);
+      background: var(--surface-raised);
+      padding: var(--space-lg);
+      display: flex; flex-direction: column; gap: var(--space-lg);
+    }
+    .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
+    .kpi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
+    .kpi-mini { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-compact); }
+    .kpi-mini .kpi-num { font-family: var(--font-mono); font-size: var(--heading); color: var(--text-display); }
+    .resolution { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-xs); }
+    @media (max-width: 560px) { .resolution { grid-template-columns: repeat(2, 1fr); } .kpi-3 { grid-template-columns: 1fr; } }
+    .res-cell { display: flex; flex-direction: column; gap: var(--space-2xs); padding: 10px var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-tech); text-align: center; align-items: center; }
+    .res-cell .res-num { font-family: var(--font-mono); font-size: var(--subheading); color: var(--text-primary); }
+
+    .nowrap { white-space: nowrap; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item active" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">SETTINGS&nbsp;&middot;&nbsp;SYNC&nbsp;STATUS</div>
+          <h1 class="display-md">Settings</h1>
+        </div>
+        <div class="topbar-actions">
+          <div class="poll">
+            <span class="led"></span>
+            <span class="caption t-secondary nowrap">LIVE&nbsp;&middot;&nbsp;30s&nbsp;POLL</span>
+          </div>
+          <button class="btn btn--secondary btn--sm">
+            <!-- chevron-down -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+            Sync
+          </button>
+          <button class="btn btn--primary btn--sm">
+            <!-- check -->
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+            Sync Now
+          </button>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- Settings tab navigation -->
+      <nav class="tabs" aria-label="Settings sections">
+        <a class="tab" href="#appearance">Appearance</a>
+        <a class="tab" href="#integrations">Integrations</a>
+        <a class="tab active" href="#sync">Sync Status</a>
+        <a class="tab" href="#ingestion">Ingestion</a>
+        <a class="tab" href="#templates">License Templates</a>
+        <a class="tab" href="#api-preview">API Preview</a>
+      </nav>
+
+      <!-- ===== PRIMARY: Sync Status hero ===== -->
+      <section class="section-gap">
+        <div class="sync-hero">
+          <div class="hero-figure">
+            <span class="label">SYNC SOURCES HEALTHY</span>
+            <span class="metric-value is-doto">5<span class="hero-fraction">&thinsp;/&thinsp;6</span><span class="metric-unit">sources</span></span>
+            <span class="caption t-secondary">One source partial after last run &middot; last successful sync 12 minutes ago</span>
+          </div>
+
+          <div class="stack stack--md">
+            <div class="seg-head">
+              <span class="label">SOURCE OUTCOMES · LAST RUN</span>
+              <span class="value mono t-secondary">6 SOURCES</span>
+            </div>
+            <div class="seg-bar seg-bar--hero" aria-hidden="true">
+              <span class="seg is-filled"></span>
+              <span class="seg is-filled"></span>
+              <span class="seg is-filled"></span>
+              <span class="seg is-filled"></span>
+              <span class="seg is-warn"></span>
+              <span class="seg"></span>
+            </div>
+            <div class="legend">
+              <span class="legend-item"><span class="swatch" style="background:var(--text-display)"></span>4 success</span>
+              <span class="legend-item"><span class="swatch" style="background:var(--warning)"></span>1 partial</span>
+              <span class="legend-item"><span class="swatch" style="background:var(--seg-empty)"></span>1 never synced</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <hr class="divider" />
+
+      <!-- ===== SECONDARY: Scheduled Jobs ===== -->
+      <section>
+        <div class="sec-head">
+          <span class="sec-title">Scheduled Jobs</span>
+          <span class="caption t-disabled">Auto-refresh &middot; 5s fast poll while any source is running</span>
+        </div>
+        <div class="card">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Source</th>
+                <th>Schedule</th>
+                <th>Last Run</th>
+                <th>Status</th>
+                <th class="num">Created</th>
+                <th class="num">Updated</th>
+                <th class="num">Skipped</th>
+                <th class="num">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="cell-strong">GitHub Copilot Billing</td>
+                <td class="t-secondary">Daily at 6:00 AM UTC</td>
+                <td class="num t-secondary">12 minutes ago</td>
+                <td><span class="tag"><span class="led"></span>Success</span></td>
+                <td class="num">0</td>
+                <td class="num">84</td>
+                <td class="num t-secondary">3</td>
+                <td class="num"><button class="btn btn--secondary btn--sm">Sync Now</button></td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Anthropic API Usage</td>
+                <td class="t-secondary">Every 6 hours</td>
+                <td class="num t-secondary">1 hour ago</td>
+                <td><span class="tag"><span class="led"></span>Success</span></td>
+                <td class="num">142</td>
+                <td class="num">18</td>
+                <td class="num t-secondary">0</td>
+                <td class="num"><button class="btn btn--secondary btn--sm">Sync Now</button></td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Anthropic API Costs</td>
+                <td class="t-secondary">Daily at 7:00 AM UTC</td>
+                <td class="num t-secondary">1 hour ago</td>
+                <td><span class="tag tag--warning"><span class="led"></span>Partial</span></td>
+                <td class="num">30</td>
+                <td class="num">5</td>
+                <td class="num value--warning">2</td>
+                <td class="num"><button class="btn btn--secondary btn--sm">Sync Now</button></td>
+              </tr>
+              <tr>
+                <td class="cell-strong">GitHub Members</td>
+                <td class="t-secondary">Manual only</td>
+                <td class="num t-secondary">2 days ago</td>
+                <td><span class="tag"><span class="led"></span>Success</span></td>
+                <td class="num">4</td>
+                <td class="num">11</td>
+                <td class="num t-secondary">0</td>
+                <td class="num"><button class="btn btn--secondary btn--sm">Sync Now</button></td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Invoice-Period Matching</td>
+                <td class="t-secondary">Manual only</td>
+                <td class="num t-secondary">3 hours ago</td>
+                <td><span class="tag"><span class="led"></span>Success</span></td>
+                <td class="num">6</td>
+                <td class="num">2</td>
+                <td class="num t-secondary">12</td>
+                <td class="num">
+                  <button class="btn btn--secondary btn--sm">
+                    Sync
+                    <!-- chevron-down -->
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                  </button>
+                </td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Claude Team Invoices</td>
+                <td class="t-secondary">Manual only</td>
+                <td class="num t-disabled">Never synced</td>
+                <td><span class="tag" style="color:var(--text-disabled)">Never</span></td>
+                <td class="num t-disabled">&mdash;</td>
+                <td class="num t-disabled">&mdash;</td>
+                <td class="num t-disabled">&mdash;</td>
+                <td class="num caption t-disabled">Via upload</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- ===== SECONDARY: Sync History ===== -->
+      <section class="section-gap">
+        <div class="sec-head">
+          <span class="sec-title">Sync History</span>
+          <span class="caption t-disabled">20 most recent manual sync events</span>
+        </div>
+        <div class="card">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Source</th>
+                <th>Triggered By</th>
+                <th>Run Time</th>
+                <th>Status</th>
+                <th class="num">Created</th>
+                <th class="num">Updated</th>
+                <th class="num">Skipped</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="cell-strong">GitHub Copilot Billing</td>
+                <td class="t-secondary">Tobias Studer</td>
+                <td class="num t-secondary">Jun 2, 2026, 9:14 AM</td>
+                <td><span class="tag"><span class="led"></span>Success</span></td>
+                <td class="num">0</td>
+                <td class="num">84</td>
+                <td class="num t-secondary">3</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Anthropic API Costs</td>
+                <td class="t-secondary">Tobias Studer</td>
+                <td class="num t-secondary">Jun 2, 2026, 7:02 AM</td>
+                <td><span class="tag tag--warning"><span class="led"></span>Partial</span></td>
+                <td class="num">30</td>
+                <td class="num">5</td>
+                <td class="num value--warning">2</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Invoice-Period Matching</td>
+                <td class="t-secondary">Tobias Studer</td>
+                <td class="num t-secondary">Jun 2, 2026, 6:30 AM</td>
+                <td><span class="tag"><span class="led"></span>Success</span></td>
+                <td class="num">6</td>
+                <td class="num">2</td>
+                <td class="num t-secondary">12</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">GitHub Members</td>
+                <td class="t-secondary">Tobias Studer</td>
+                <td class="num t-secondary">May 31, 2026, 4:48 PM</td>
+                <td><span class="tag"><span class="led"></span>Success</span></td>
+                <td class="num">4</td>
+                <td class="num">11</td>
+                <td class="num t-secondary">0</td>
+              </tr>
+              <tr>
+                <td class="cell-strong">Anthropic API Usage</td>
+                <td class="t-secondary">Tobias Studer</td>
+                <td class="num t-secondary">May 30, 2026, 11:05 AM</td>
+                <td><span class="status-text">[ FAILED ]</span></td>
+                <td class="num t-disabled">0</td>
+                <td class="num t-disabled">0</td>
+                <td class="num t-disabled">0</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <hr class="divider" />
+
+      <!-- ===== TERTIARY: other tab contents (preview) ===== -->
+
+      <!-- Appearance — Theme -->
+      <section>
+        <div class="sec-head">
+          <span class="sec-title">Appearance &middot; Theme</span>
+          <span class="status-text status-text--ok">[ SAVED ]</span>
+        </div>
+        <div class="card card--pad-lg stack stack--lg">
+          <div class="stack stack--sm">
+            <span class="heading">Theme</span>
+            <span class="caption t-secondary">Select your preferred color scheme.</span>
+          </div>
+          <div class="theme-grid">
+            <button class="theme-opt">
+              <!-- sun -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+              <span class="opt-name">Light</span>
+            </button>
+            <button class="theme-opt is-selected">
+              <!-- moon -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>
+              <span class="opt-name">Dark</span>
+            </button>
+            <button class="theme-opt">
+              <!-- monitor -->
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg>
+              <span class="opt-name">System</span>
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <!-- Integrations -->
+      <section class="section-gap">
+        <div class="sec-head">
+          <span class="sec-title">Integrations</span>
+        </div>
+        <div class="grid grid--2">
+
+          <!-- GitHub Organization (connected form) -->
+          <div class="card card--pad-lg stack stack--lg">
+            <div class="row row--between">
+              <div class="stack stack--sm">
+                <span class="label">GITHUB ORGANIZATION</span>
+                <span class="heading">unic-com</span>
+              </div>
+              <span class="tag tag--success"><span class="led"></span>Connected</span>
+            </div>
+
+            <div class="stat-list">
+              <div class="stat-row"><span class="label">CONNECTED</span><span class="value">Mar 12, 2026</span></div>
+              <div class="stat-row"><span class="label">LAST SYNCED</span><span class="value">Jun 2, 2026</span></div>
+              <div class="stat-row"><span class="label">SCOPES REQUIRED</span><span class="value t-secondary">read:org &middot; read:user &middot; manage_billing:copilot</span></div>
+            </div>
+
+            <div class="field">
+              <label class="label" for="pat">PERSONAL ACCESS TOKEN (CLASSIC)</label>
+              <input class="control" id="pat" type="password" placeholder="ghp_..." />
+            </div>
+
+            <div class="row row--wrap" style="gap:var(--space-md)">
+              <button class="btn btn--secondary btn--sm">Update Token</button>
+              <button class="btn btn--destructive btn--sm">Disconnect</button>
+            </div>
+          </div>
+
+          <!-- Claude Code (Anthropic API) — read-only stat rows -->
+          <div class="card card--pad-lg stack stack--lg">
+            <div class="row row--between">
+              <div class="stack stack--sm">
+                <span class="label">CLAUDE CODE</span>
+                <span class="heading">Anthropic API</span>
+              </div>
+              <span class="tag tag--success"><span class="led"></span>Connected</span>
+            </div>
+
+            <div class="stat-list">
+              <div class="stat-row"><span class="label">WORKSPACE</span><span class="value">Unic AI Platform</span></div>
+              <div class="stat-row"><span class="label">LAST CHECKED</span><span class="value">Jun 2, 2026, 8:55 AM</span></div>
+              <div class="stat-row"><span class="label">ADMIN KEY</span><span class="value value--success">ANTHROPIC_ADMIN_API_KEY · set</span></div>
+            </div>
+
+            <p class="caption t-disabled">
+              Status is read-only. When unconfigured, set the
+              <span class="code">ANTHROPIC_ADMIN_API_KEY</span> environment variable
+              to enable Anthropic API cost tracking.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- GitHub Member Sync sheet (overlay preview) -->
+      <section class="section-gap">
+        <div class="sec-head">
+          <span class="sec-title">GitHub Member Sync</span>
+          <span class="caption t-disabled">Overlay &middot; opened from GitHub Members &middot; Sync Now</span>
+        </div>
+
+        <div class="sheet-wrap">
+          <!-- dimmed page context -->
+          <div class="card card--bare" style="opacity:0.55">
+            <div class="stat-list">
+              <div class="stat-row"><span class="label">GITHUB MEMBERS</span><span class="value">56 total</span></div>
+              <div class="stat-row"><span class="label">SYSTEM USERS</span><span class="value">50 total</span></div>
+              <div class="stat-row"><span class="label">LAST MEMBER SYNC</span><span class="value">May 31, 2026, 4:48 PM</span></div>
+              <div class="stat-row"><span class="label">STATUS</span><span class="value value--success">Connected</span></div>
+            </div>
+          </div>
+
+          <!-- side sheet -->
+          <aside class="sheet" role="dialog" aria-label="GitHub member sync">
+            <div class="sheet-head">
+              <div class="stack stack--sm">
+                <span class="label">MEMBER SYNC</span>
+                <span class="subheading">Reconcile GitHub &amp; system users</span>
+              </div>
+              <button class="back-btn" aria-label="Close">
+                <!-- close -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+              </button>
+            </div>
+
+            <div class="kpi-3">
+              <div class="kpi-mini"><span class="label">MATCHED</span><span class="kpi-num">47</span></div>
+              <div class="kpi-mini"><span class="label">UNMATCHED GH</span><span class="kpi-num value--warning">6</span></div>
+              <div class="kpi-mini"><span class="label">UNMATCHED SYS</span><span class="kpi-num value--warning">3</span></div>
+            </div>
+
+            <div class="def-row" role="status">
+              <span class="label">CONFLICTS DETECTED</span>
+              <span class="def-val" style="color:var(--warning)">2</span>
+            </div>
+
+            <div class="tabs" aria-label="Member sync results">
+              <button class="tab active">Matched</button>
+              <button class="tab">Unmatched GitHub</button>
+              <button class="tab">Unmatched System</button>
+            </div>
+
+            <div class="stack stack--sm">
+              <span class="label">RESOLUTION SUMMARY</span>
+              <div class="resolution">
+                <div class="res-cell"><span class="label">Import</span><span class="res-num">5</span></div>
+                <div class="res-cell"><span class="label">Matched</span><span class="res-num">47</span></div>
+                <div class="res-cell"><span class="label">New User</span><span class="res-num">1</span></div>
+                <div class="res-cell"><span class="label">Skipped</span><span class="res-num">1</span></div>
+                <div class="res-cell"><span class="label">Unresolved</span><span class="res-num value--warning">2</span></div>
+              </div>
+            </div>
+
+            <div class="row row--between">
+              <span class="status-text">9 changes staged</span>
+              <button class="btn btn--primary btn--sm">
+                <!-- check -->
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                Confirm Sync
+              </button>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/styles/nothing.css b/specs/028-nothing-design-redesign/mockups/styles/nothing.css
new file mode 100644
index 00000000..9598fd07
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/styles/nothing.css
@@ -0,0 +1,463 @@
+/* =============================================================================
+   NOTHING DESIGN SYSTEM — AI Developer Hub redesign
+   Single source of truth for all mockups. Dark + light, monochrome + one red.
+   Fonts: Doto (hero/display), Space Grotesk (UI/body), Space Mono (data/labels).
+   ============================================================================= */
+
+@import url('https://fonts.googleapis.com/css2?family=Doto:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap');
+
+/* ---------------------------------------------------------------------------
+   1. TOKENS — dark is the default canvas; light is a first-class override
+   --------------------------------------------------------------------------- */
+:root {
+  /* greyscale (dark) */
+  --black: #000000;
+  --surface: #111111;
+  --surface-raised: #1a1a1a;
+  --border: #222222;
+  --border-visible: #333333;
+  --text-disabled: #666666;
+  --text-secondary: #999999;
+  --text-primary: #e8e8e8;
+  --text-display: #ffffff;
+
+  /* accent + status (identical across modes) */
+  --accent: #d71921;
+  --accent-subtle: rgba(215, 25, 33, 0.15);
+  --success: #4a9e5c;
+  --warning: #d4a843;
+  --error: #d71921;
+  --info: #999999;
+  --interactive: #5b9bf6;
+
+  /* segmented-bar empty track */
+  --seg-empty: #222222;
+
+  /* fonts */
+  --font-display: "Doto", "Space Mono", monospace;
+  --font-ui: "Space Grotesk", "DM Sans", system-ui, sans-serif;
+  --font-mono: "Space Mono", "JetBrains Mono", "SF Mono", monospace;
+
+  /* type scale */
+  --display-xl: 72px;
+  --display-lg: 48px;
+  --display-md: 36px;
+  --heading: 24px;
+  --subheading: 18px;
+  --body: 16px;
+  --body-sm: 14px;
+  --caption: 12px;
+  --label: 11px;
+
+  /* spacing (8px base) */
+  --space-2xs: 2px;
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-2xl: 48px;
+  --space-3xl: 64px;
+  --space-4xl: 96px;
+
+  /* radii */
+  --radius-tech: 4px;
+  --radius-compact: 8px;
+  --radius-card: 14px;
+  --radius-pill: 999px;
+
+  /* motion */
+  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --dur-micro: 180ms;
+  --dur-trans: 320ms;
+
+  --sidebar-w: 248px;
+}
+
+:root[data-theme="light"] {
+  --black: #f5f5f5;
+  --surface: #ffffff;
+  --surface-raised: #f0f0f0;
+  --border: #e8e8e8;
+  --border-visible: #cccccc;
+  --text-disabled: #999999;
+  --text-secondary: #666666;
+  --text-primary: #1a1a1a;
+  --text-display: #000000;
+  --interactive: #007aff;
+  --seg-empty: #e0e0e0;
+  --accent-subtle: rgba(215, 25, 33, 0.10);
+}
+
+/* ---------------------------------------------------------------------------
+   2. RESET + BASE
+   --------------------------------------------------------------------------- */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+
+body {
+  background: var(--black);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0;
+  transition: background var(--dur-trans) var(--ease), color var(--dur-trans) var(--ease);
+}
+
+a { color: inherit; text-decoration: none; }
+button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
+ul { list-style: none; }
+svg { display: block; }
+
+::selection { background: var(--accent); color: #fff; }
+
+/* ---------------------------------------------------------------------------
+   3. TYPOGRAPHY UTILITIES
+   --------------------------------------------------------------------------- */
+.doto { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
+.mono { font-family: var(--font-mono); }
+.ui   { font-family: var(--font-ui); }
+
+/* instrument-panel label: Space Mono, ALL CAPS, tracked out */
+.label {
+  font-family: var(--font-mono);
+  font-size: var(--label);
+  line-height: 1.2;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+.caption {
+  font-family: var(--font-mono);
+  font-size: var(--caption);
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+}
+
+/* display hero numbers */
+.display-xl { font-family: var(--font-display); font-size: var(--display-xl); line-height: 1.0; letter-spacing: -0.03em; color: var(--text-display); }
+.display-lg { font-family: var(--font-display); font-size: var(--display-lg); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-display); }
+.display-md { font-family: var(--font-ui);      font-size: var(--display-md); line-height: 1.1;  letter-spacing: -0.02em; font-weight: 500; color: var(--text-display); }
+.heading    { font-family: var(--font-ui);      font-size: var(--heading);    line-height: 1.2;  letter-spacing: -0.01em; font-weight: 500; color: var(--text-display); }
+.subheading { font-family: var(--font-ui);      font-size: var(--subheading); line-height: 1.3;  font-weight: 400; color: var(--text-primary); }
+
+/* text-color helpers */
+.t-display   { color: var(--text-display); }
+.t-primary   { color: var(--text-primary); }
+.t-secondary { color: var(--text-secondary); }
+.t-disabled  { color: var(--text-disabled); }
+.t-accent    { color: var(--accent); }
+.t-success   { color: var(--success); }
+.t-warning   { color: var(--warning); }
+
+/* ---------------------------------------------------------------------------
+   4. APP SHELL — sidebar + main
+   --------------------------------------------------------------------------- */
+.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
+
+.sidebar {
+  position: sticky; top: 0; align-self: start;
+  height: 100vh;
+  display: flex; flex-direction: column;
+  border-right: 1px solid var(--border);
+  padding: var(--space-xl) var(--space-lg);
+  background: var(--black);
+}
+
+.brand {
+  display: flex; align-items: center; gap: var(--space-sm);
+  margin-bottom: var(--space-2xl);
+}
+.brand .dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--accent); }
+.brand .wordmark {
+  font-family: var(--font-mono);
+  font-size: var(--body-sm);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-display);
+}
+
+.nav { display: flex; flex-direction: column; gap: var(--space-2xs); }
+.nav-section { margin-top: var(--space-lg); margin-bottom: var(--space-xs); padding-left: var(--space-sm); }
+.nav-item {
+  position: relative;
+  display: flex; align-items: center; gap: var(--space-sm);
+  padding: 10px var(--space-sm);
+  font-family: var(--font-mono);
+  font-size: var(--label);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-disabled);
+  border-radius: var(--radius-tech);
+  transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
+}
+.nav-item svg { width: 16px; height: 16px; stroke-width: 1.5; opacity: 0.7; }
+.nav-item:hover { color: var(--text-primary); }
+.nav-item.active { color: var(--text-display); }
+.nav-item.active::before {
+  content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
+  width: 2px; height: 18px; background: var(--accent);
+}
+.nav-item.active svg { opacity: 1; }
+
+.sidebar-footer { margin-top: auto; padding-top: var(--space-lg); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-xs); }
+.user-chip { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); }
+.avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); border: 1px solid var(--border-visible); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--caption); color: var(--text-primary); }
+
+/* main scroll area */
+.main { min-width: 0; padding: var(--space-2xl) var(--space-2xl) var(--space-4xl); max-width: 1280px; }
+
+/* topbar: page title + actions */
+.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
+.topbar .eyebrow { margin-bottom: var(--space-sm); }
+.topbar-actions { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; }
+
+/* ---------------------------------------------------------------------------
+   5. THEME TOGGLE (segmented [ DARK | LIGHT ])
+   --------------------------------------------------------------------------- */
+.theme-toggle { display: inline-flex; border: 1px solid var(--border-visible); border-radius: var(--radius-pill); overflow: hidden; }
+.theme-toggle button {
+  padding: 8px 16px;
+  font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase;
+  color: var(--text-secondary);
+  transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
+}
+.theme-toggle button.active { background: var(--text-display); color: var(--black); }
+
+/* ---------------------------------------------------------------------------
+   6. CARDS / SURFACES
+   --------------------------------------------------------------------------- */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+  padding: var(--space-lg);
+}
+.card--raised { background: var(--surface-raised); }
+.card--bare { background: transparent; border: none; padding: 0; }
+.card--pad-lg { padding: var(--space-xl); }
+.card-label { display: block; margin-bottom: var(--space-md); }
+
+.grid { display: grid; gap: var(--space-md); }
+.grid--2 { grid-template-columns: repeat(2, 1fr); }
+.grid--3 { grid-template-columns: repeat(3, 1fr); }
+.grid--4 { grid-template-columns: repeat(4, 1fr); }
+.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+@media (max-width: 1080px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 720px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
+
+/* ---------------------------------------------------------------------------
+   7. METRIC / HERO NUMBER
+   --------------------------------------------------------------------------- */
+.metric { display: flex; flex-direction: column; gap: var(--space-sm); }
+.metric-value { font-family: var(--font-mono); font-size: var(--display-lg); line-height: 1; letter-spacing: -0.02em; color: var(--text-display); display: flex; align-items: baseline; gap: var(--space-xs); }
+.metric-value.is-doto { font-family: var(--font-display); }
+.metric-unit { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
+.metric-trend { font-family: var(--font-mono); font-size: var(--caption); display: inline-flex; align-items: center; gap: 4px; }
+.metric-hero .metric-value { font-size: var(--display-xl); }
+
+/* ---------------------------------------------------------------------------
+   8. STAT ROWS / LISTS
+   --------------------------------------------------------------------------- */
+.stat-list { display: flex; flex-direction: column; }
+.stat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 14px 0; border-bottom: 1px solid var(--border); }
+.stat-row:last-child { border-bottom: none; }
+.stat-row .label { color: var(--text-secondary); }
+.stat-row .value { font-family: var(--font-mono); font-size: var(--body-sm); color: var(--text-primary); display: inline-flex; align-items: baseline; gap: 4px; }
+.value--success { color: var(--success); }
+.value--warning { color: var(--warning); }
+.value--accent  { color: var(--accent); }
+.value--display { color: var(--text-display); }
+.indent { padding-left: var(--space-lg); }
+
+/* ---------------------------------------------------------------------------
+   9. SEGMENTED PROGRESS BAR (signature viz)
+   --------------------------------------------------------------------------- */
+.seg-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-sm); }
+.seg-bar { display: flex; gap: 2px; height: 10px; width: 100%; }
+.seg-bar--hero { height: 18px; }
+.seg-bar--compact { height: 5px; }
+.seg { flex: 1; background: var(--seg-empty); }
+.seg.is-filled { background: var(--text-display); }
+.seg.is-good   { background: var(--success); }
+.seg.is-warn   { background: var(--warning); }
+.seg.is-over   { background: var(--accent); }
+
+/* ---------------------------------------------------------------------------
+   10. BUTTONS
+   --------------------------------------------------------------------------- */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
+  min-height: 44px; padding: 12px 24px;
+  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
+  border-radius: var(--radius-pill);
+  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
+}
+.btn svg { width: 16px; height: 16px; stroke-width: 1.5; }
+.btn--primary { background: var(--text-display); color: var(--black); }
+.btn--primary:hover { background: var(--text-primary); }
+.btn--secondary { border: 1px solid var(--border-visible); color: var(--text-primary); }
+.btn--secondary:hover { border-color: var(--text-primary); }
+.btn--ghost { color: var(--text-secondary); border-radius: 0; padding: 12px 0; }
+.btn--ghost:hover { color: var(--text-primary); }
+.btn--destructive { border: 1px solid var(--accent); color: var(--accent); }
+.btn--destructive:hover { background: var(--accent-subtle); }
+.btn--sm { min-height: 36px; padding: 8px 16px; font-size: var(--label); }
+.btn--icon { padding: 0; width: 44px; height: 44px; }
+
+/* circular back button */
+.back-btn { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--border-visible); display: grid; place-items: center; color: var(--text-primary); transition: border-color var(--dur-micro) var(--ease); }
+.back-btn:hover { border-color: var(--text-primary); }
+
+/* ---------------------------------------------------------------------------
+   11. TAGS / CHIPS / STATUS
+   --------------------------------------------------------------------------- */
+.tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 12px;
+  border: 1px solid var(--border-visible); border-radius: var(--radius-pill);
+  font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.06em; text-transform: uppercase;
+  color: var(--text-secondary);
+}
+.tag--tech { border-radius: var(--radius-tech); }
+.tag--active { border-color: var(--text-display); color: var(--text-display); }
+.tag--success { border-color: var(--success); color: var(--success); }
+.tag--warning { border-color: var(--warning); color: var(--warning); }
+.tag--accent  { border-color: var(--accent);  color: var(--accent); }
+.tag .led { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
+
+/* inline status text [SAVED] */
+.status-text { font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.06em; color: var(--text-secondary); }
+.status-text--ok { color: var(--success); }
+.status-text--err { color: var(--accent); }
+
+/* ---------------------------------------------------------------------------
+   12. TABLES
+   --------------------------------------------------------------------------- */
+.table { width: 100%; border-collapse: collapse; }
+.table thead th {
+  text-align: left; padding: 0 16px 12px;
+  font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase;
+  color: var(--text-secondary); font-weight: 400;
+  border-bottom: 1px solid var(--border-visible);
+}
+.table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: var(--body-sm); color: var(--text-primary); vertical-align: middle; }
+.table tbody tr:last-child td { border-bottom: none; }
+.table .num { text-align: right; font-family: var(--font-mono); }
+.table th.num { text-align: right; }
+.table tr--active td, .table tr.is-active td { background: var(--surface-raised); }
+.table tr.is-active td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
+.table tbody tr { transition: background var(--dur-micro) var(--ease); }
+.table tbody tr:hover td { background: var(--surface); }
+[data-theme="light"] .table tbody tr:hover td { background: var(--surface-raised); }
+.cell-strong { color: var(--text-display); font-family: var(--font-ui); }
+
+/* ---------------------------------------------------------------------------
+   13. SEGMENTED CONTROL / TABS
+   --------------------------------------------------------------------------- */
+.segmented { display: inline-flex; border: 1px solid var(--border-visible); border-radius: var(--radius-compact); overflow: hidden; }
+.segmented button { padding: 9px 18px; font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
+.segmented button.active { background: var(--text-display); color: var(--black); }
+
+/* text tab bar */
+.tabs { display: flex; gap: var(--space-xl); border-bottom: 1px solid var(--border); }
+.tab { position: relative; padding: 0 0 14px; font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-disabled); transition: color var(--dur-micro) var(--ease); }
+.tab:hover { color: var(--text-primary); }
+.tab.active { color: var(--text-display); }
+.tab.active::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--accent); }
+
+/* period nav  < LABEL > */
+.period-nav { display: inline-flex; align-items: center; gap: var(--space-md); }
+.period-nav .nav-arrow { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-secondary); }
+.period-nav .nav-arrow:hover { color: var(--text-primary); }
+.period-nav .period-label { font-family: var(--font-mono); font-size: var(--body-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-display); min-width: 140px; text-align: center; }
+
+/* ---------------------------------------------------------------------------
+   14. TOGGLES / SWITCHES
+   --------------------------------------------------------------------------- */
+.switch { position: relative; width: 46px; height: 26px; border-radius: var(--radius-pill); background: var(--border-visible); transition: background var(--dur-micro) var(--ease); flex-shrink: 0; }
+.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--text-disabled); transition: transform var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); }
+.switch.on { background: var(--text-display); }
+.switch.on::after { transform: translateX(20px); background: var(--black); }
+
+/* ---------------------------------------------------------------------------
+   15. INPUTS / FIELDS
+   --------------------------------------------------------------------------- */
+.field { display: flex; flex-direction: column; gap: var(--space-sm); }
+.field > label { color: var(--text-secondary); }
+.field .control {
+  width: 100%; padding: 10px 0; background: transparent;
+  border: none; border-bottom: 1px solid var(--border-visible);
+  color: var(--text-display); font-family: var(--font-mono); font-size: var(--body);
+  transition: border-color var(--dur-micro) var(--ease);
+}
+.field .control::placeholder { color: var(--text-disabled); }
+.field .control:focus { outline: none; border-bottom-color: var(--text-primary); }
+.field.is-error .control { border-bottom-color: var(--accent); }
+.field .error-msg { font-family: var(--font-mono); font-size: var(--caption); color: var(--accent); }
+.field--boxed .control { border: 1px solid var(--border-visible); border-radius: var(--radius-compact); padding: 12px 14px; }
+
+/* select / search */
+.search { display: inline-flex; align-items: center; gap: var(--space-sm); border: 1px solid var(--border-visible); border-radius: var(--radius-pill); padding: 8px 16px; color: var(--text-secondary); }
+.search input { background: none; border: none; outline: none; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--body-sm); min-width: 180px; }
+.search svg { width: 16px; height: 16px; stroke-width: 1.5; }
+
+/* ---------------------------------------------------------------------------
+   16. DIVIDERS / MISC LAYOUT
+   --------------------------------------------------------------------------- */
+.divider { height: 1px; background: var(--border); border: none; margin: var(--space-xl) 0; }
+.section-gap { margin-top: var(--space-2xl); }
+.row { display: flex; align-items: center; gap: var(--space-md); }
+.row--between { justify-content: space-between; }
+.row--wrap { flex-wrap: wrap; }
+.stack { display: flex; flex-direction: column; }
+.stack--sm { gap: var(--space-sm); }
+.stack--md { gap: var(--space-md); }
+.stack--lg { gap: var(--space-lg); }
+.spacer { flex: 1; }
+
+/* ---------------------------------------------------------------------------
+   17. DOT-MATRIX MOTIF
+   --------------------------------------------------------------------------- */
+.dot-grid { background-image: radial-gradient(circle, var(--border-visible) 1px, transparent 1px); background-size: 16px 16px; }
+.dot-grid-subtle { background-image: radial-gradient(circle, var(--border) 0.5px, transparent 0.5px); background-size: 12px 12px; }
+
+/* ---------------------------------------------------------------------------
+   18. CHART HELPERS (mockup-scale; designers use inline SVG for lines)
+   --------------------------------------------------------------------------- */
+.bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
+.bars .bar { flex: 1; background: var(--text-display); min-height: 2px; }
+.bars .bar.is-muted { background: var(--border-visible); }
+.bars .bar.is-accent { background: var(--accent); }
+.axis { display: flex; justify-content: space-between; margin-top: var(--space-sm); }
+.axis span { font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-disabled); }
+
+.gauge-num { font-family: var(--font-mono); color: var(--text-display); }
+
+/* concentric ring legend dot */
+.legend { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
+.legend-item { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.04em; color: var(--text-secondary); }
+.legend-item .swatch { width: 10px; height: 10px; }
+
+/* ---------------------------------------------------------------------------
+   19. EMPTY / LOADING
+   --------------------------------------------------------------------------- */
+.empty { text-align: center; padding: var(--space-4xl) var(--space-xl); }
+.empty .empty-title { font-family: var(--font-ui); font-size: var(--subheading); color: var(--text-secondary); margin-bottom: var(--space-sm); }
+.empty .empty-sub { font-family: var(--font-mono); font-size: var(--caption); color: var(--text-disabled); }
+.loading-text { font-family: var(--font-mono); font-size: var(--caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
+
+/* ---------------------------------------------------------------------------
+   20. AUTH (centered, chrome-less)
+   --------------------------------------------------------------------------- */
+.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: var(--space-xl); }
+.auth-card { width: 100%; max-width: 400px; }
+
+/* ---------------------------------------------------------------------------
+   21. REDUCED MOTION
+   --------------------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
+}
diff --git a/specs/028-nothing-design-redesign/mockups/styles/theme.js b/specs/028-nothing-design-redesign/mockups/styles/theme.js
new file mode 100644
index 00000000..088cf5df
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/styles/theme.js
@@ -0,0 +1,31 @@
+/* Nothing redesign mockups — dark/light theme toggle.
+   Dark is the default canvas. Choice persists across mockup pages via localStorage. */
+(function () {
+  var KEY = "nd-mock-theme";
+  var root = document.documentElement;
+
+  function apply(theme) {
+    if (theme === "light") root.setAttribute("data-theme", "light");
+    else root.removeAttribute("data-theme"); // dark = absence of attribute
+    try { localStorage.setItem(KEY, theme); } catch (e) {}
+    document.querySelectorAll(".theme-toggle button").forEach(function (b) {
+      b.classList.toggle("active", b.dataset.theme === theme);
+    });
+  }
+
+  // restore before paint
+  var saved = "dark";
+  try { saved = localStorage.getItem(KEY) || "dark"; } catch (e) {}
+  apply(saved);
+
+  document.addEventListener("click", function (e) {
+    var btn = e.target.closest(".theme-toggle button");
+    if (btn) apply(btn.dataset.theme);
+  });
+
+  // re-sync toggle button state once DOM is ready (script may load in <head>)
+  document.addEventListener("DOMContentLoaded", function () {
+    var current = root.getAttribute("data-theme") === "light" ? "light" : "dark";
+    apply(current);
+  });
+})();
diff --git a/specs/028-nothing-design-redesign/mockups/tools.html b/specs/028-nothing-design-redesign/mockups/tools.html
new file mode 100644
index 00000000..ac063ae0
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/tools.html
@@ -0,0 +1,370 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — AI Tools · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item active" href="./tools.html">Tools</a>
+        <a class="nav-item" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">AI TOOL REGISTRY</div>
+          <h1 class="display-md">AI Tools</h1>
+          <p class="caption" style="margin-top:var(--space-sm)">Manage your AI tool registry</p>
+        </div>
+        <div class="topbar-actions">
+          <a class="btn btn--primary btn--sm" href="./tools-new.html">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+            Add Tool
+          </a>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- Hero strip: the registry is the hero — primary number is the count, secondary is active licenses across rows -->
+      <div class="row row--between row--wrap" style="align-items:flex-end; margin-bottom:var(--space-xl)">
+        <div class="metric">
+          <span class="label">TOOLS IN REGISTRY</span>
+          <span class="metric-value is-doto" style="font-size:var(--display-xl)">6<span class="metric-unit">tools</span></span>
+        </div>
+        <div class="stack stack--sm" style="text-align:right">
+          <span class="label">ACTIVE LICENSES IN USE</span>
+          <span class="mono" style="font-size:var(--heading); color:var(--text-display)">122</span>
+        </div>
+      </div>
+
+      <!-- Filter bar: search + faceted filters, above the table -->
+      <div class="row row--between row--wrap" style="margin-bottom:var(--space-md)">
+        <label class="search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+          <input type="text" placeholder="Search tools..." />
+        </label>
+        <div class="row row--wrap" style="gap:var(--space-sm)">
+          <span class="label" style="align-self:center">STATUS</span>
+          <div class="segmented">
+            <button class="active">All</button>
+            <button>Active</button>
+            <button>Archived</button>
+          </div>
+          <span class="label" style="align-self:center; margin-left:var(--space-md)">VENDOR</span>
+          <button class="btn btn--secondary btn--sm">
+            All vendors
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- ===== PRIMARY SECTION: the data table (heaviest treatment) ===== -->
+      <div class="card card--pad-lg">
+        <div class="row row--between" style="margin-bottom:var(--space-md)">
+          <span class="label">AI TOOLS TABLE</span>
+          <span class="caption">6 of 6</span>
+        </div>
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Vendor</th>
+              <th class="num">Active Licenses</th>
+              <th>Status</th>
+              <th class="num">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><a class="cell-strong" href="./tools-detail.html">GitHub Copilot</a></td>
+              <td class="t-secondary">GitHub</td>
+              <td class="num">42</td>
+              <td><span class="tag tag--success"><span class="led"></span>Active</span></td>
+              <td class="num">
+                <div class="row" style="justify-content:flex-end; gap:var(--space-xs)">
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="View">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                  </a>
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="Edit">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                  </a>
+                  <button class="btn btn--ghost btn--icon" title="More actions">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td><a class="cell-strong" href="./tools-detail.html">Claude API</a></td>
+              <td class="t-secondary">Anthropic</td>
+              <td class="num">30</td>
+              <td><span class="tag tag--success"><span class="led"></span>Active</span></td>
+              <td class="num">
+                <div class="row" style="justify-content:flex-end; gap:var(--space-xs)">
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="View">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                  </a>
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="Edit">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                  </a>
+                  <button class="btn btn--ghost btn--icon" title="More actions">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td><a class="cell-strong" href="./tools-detail.html">Cursor</a></td>
+              <td class="t-secondary">Anysphere</td>
+              <td class="num">25</td>
+              <td><span class="tag tag--success"><span class="led"></span>Active</span></td>
+              <td class="num">
+                <div class="row" style="justify-content:flex-end; gap:var(--space-xs)">
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="View">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                  </a>
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="Edit">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                  </a>
+                  <button class="btn btn--ghost btn--icon" title="More actions">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td><a class="cell-strong" href="./tools-detail.html">ChatGPT Enterprise</a></td>
+              <td class="t-secondary">OpenAI</td>
+              <td class="num">18</td>
+              <td><span class="tag tag--success"><span class="led"></span>Active</span></td>
+              <td class="num">
+                <div class="row" style="justify-content:flex-end; gap:var(--space-xs)">
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="View">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                  </a>
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="Edit">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                  </a>
+                  <button class="btn btn--ghost btn--icon" title="More actions">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td><a class="cell-strong" href="./tools-detail.html">Gemini Code Assist</a></td>
+              <td class="t-secondary">Google</td>
+              <td class="num">7</td>
+              <td><span class="tag tag--success"><span class="led"></span>Active</span></td>
+              <td class="num">
+                <div class="row" style="justify-content:flex-end; gap:var(--space-xs)">
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="View">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                  </a>
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="Edit">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                  </a>
+                  <button class="btn btn--ghost btn--icon" title="More actions">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td><a class="cell-strong" href="./tools-detail.html">Tabnine</a></td>
+              <td class="t-secondary">Tabnine</td>
+              <td class="num t-disabled">0</td>
+              <td><span class="tag">Archived</span></td>
+              <td class="num">
+                <div class="row" style="justify-content:flex-end; gap:var(--space-xs)">
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="View">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+                  </a>
+                  <a class="btn btn--ghost btn--icon" href="./tools-detail.html" title="Edit">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                  </a>
+                  <!-- Archived rows show no archive option -->
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <!-- Table footer: page-size select + Previous / Next -->
+        <div class="row row--between row--wrap" style="margin-top:var(--space-lg); padding-top:var(--space-md); border-top:1px solid var(--border)">
+          <div class="row" style="gap:var(--space-sm)">
+            <span class="label">ROWS PER PAGE</span>
+            <button class="btn btn--secondary btn--sm">
+              25
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+            </button>
+          </div>
+          <div class="row" style="gap:var(--space-sm)">
+            <span class="caption">Page 1 of 1</span>
+            <button class="btn btn--secondary btn--sm" disabled>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+              Previous
+            </button>
+            <button class="btn btn--secondary btn--sm" disabled>
+              Next
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- ===== SECONDARY: archive confirmation (varied form — bordered notice, not a card) ===== -->
+      <div class="section-gap">
+        <span class="label">ROW ACTION — ARCHIVE CONFIRMATION</span>
+        <div class="grid grid--2" style="margin-top:var(--space-md)">
+          <!-- Case 1: tool has active licenses → blocked (the single red moment: the urgent license count) -->
+          <div class="card card--raised">
+            <div class="stack stack--sm">
+              <span class="heading">Archive GitHub Copilot?</span>
+              <p class="subheading t-secondary">
+                This tool has <span class="mono t-accent">42</span> active license(s). Revoke them before archiving.
+              </p>
+            </div>
+            <div class="row" style="justify-content:flex-end; gap:var(--space-sm); margin-top:var(--space-lg)">
+              <button class="btn btn--secondary btn--sm">Cancel</button>
+              <button class="btn btn--secondary btn--sm" disabled>Archive</button>
+            </div>
+          </div>
+          <!-- Case 2: no active licenses → confirm -->
+          <div class="card card--raised">
+            <div class="stack stack--sm">
+              <span class="heading">Archive Tabnine?</span>
+              <p class="subheading t-secondary">
+                This will archive the tool and make it unavailable for new assignments.
+              </p>
+            </div>
+            <div class="row row--between" style="margin-top:var(--space-lg)">
+              <span class="status-text status-text--ok">[ TOOL ARCHIVED ]</span>
+              <div class="row" style="gap:var(--space-sm)">
+                <button class="btn btn--secondary btn--sm">Cancel</button>
+                <button class="btn btn--secondary btn--sm">Archive</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ===== SECONDARY: add new tool form (varied form — fields + repeatable tiers) ===== -->
+      <div class="section-gap">
+        <div class="row row--between">
+          <span class="label">ADD NEW TOOL · /TOOLS/NEW</span>
+          <span class="caption t-disabled">Admin only</span>
+        </div>
+
+        <div class="grid grid--2" style="margin-top:var(--space-md); align-items:start">
+          <!-- Tool Details card -->
+          <div class="card">
+            <span class="label card-label">TOOL DETAILS</span>
+            <div class="stack stack--lg">
+              <div class="field">
+                <label class="label">NAME</label>
+                <input class="control" placeholder="GitHub Copilot" />
+              </div>
+              <div class="field">
+                <label class="label">VENDOR</label>
+                <input class="control" placeholder="GitHub" />
+              </div>
+              <div class="field">
+                <label class="label">DESCRIPTION</label>
+                <input class="control" placeholder="AI-powered code completion..." />
+              </div>
+              <div class="field">
+                <label class="label">MAX LICENSES <span class="t-disabled">· optional</span></label>
+                <input class="control" placeholder="Unlimited" />
+              </div>
+            </div>
+          </div>
+
+          <!-- Access Tiers card (repeatable, at least one) -->
+          <div class="card">
+            <div class="row row--between" style="margin-bottom:var(--space-md)">
+              <span class="label">ACCESS TIERS</span>
+              <button class="btn btn--ghost btn--sm">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+                Add tier
+              </button>
+            </div>
+            <div class="stack stack--lg">
+              <div class="row row--between">
+                <span class="caption">TIER 1</span>
+                <span class="caption t-disabled">at least one required</span>
+              </div>
+              <div class="field">
+                <label class="label">TIER NAME</label>
+                <input class="control" placeholder="Pro" value="Pro" />
+              </div>
+              <div class="grid grid--2">
+                <div class="field">
+                  <label class="label">MONTHLY COST ($)</label>
+                  <input class="control" placeholder="0.00" value="19.00" />
+                </div>
+                <div class="field">
+                  <label class="label">DESCRIPTION</label>
+                  <input class="control" placeholder="Full IDE integration..." />
+                </div>
+              </div>
+            </div>
+            <div class="divider"></div>
+            <div class="row" style="justify-content:flex-end; gap:var(--space-sm)">
+              <a class="btn btn--secondary btn--sm" href="./tools.html">Cancel</a>
+              <button class="btn btn--primary btn--sm">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                Create Tool
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ===== TERTIARY: empty / no-results state (varied form) ===== -->
+      <div class="section-gap">
+        <span class="label">NO-RESULTS STATE</span>
+        <div class="card" style="margin-top:var(--space-md)">
+          <div class="empty">
+            <div class="empty-title">No results.</div>
+            <div class="empty-sub">No tools match the active search and filters.</div>
+          </div>
+        </div>
+      </div>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/specs/028-nothing-design-redesign/mockups/users.html b/specs/028-nothing-design-redesign/mockups/users.html
new file mode 100644
index 00000000..904535d6
--- /dev/null
+++ b/specs/028-nothing-design-redesign/mockups/users.html
@@ -0,0 +1,290 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AI Developer Hub — Users · Nothing</title>
+  <link rel="stylesheet" href="./styles/nothing.css" />
+  <script src="./styles/theme.js"></script>
+  <style>
+    /* scoped layout helpers — tokens only */
+    .users-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2xl); flex-wrap: wrap; }
+    .pending-count { display: flex; flex-direction: column; gap: var(--space-xs); }
+    .pending-count .pending-num { font-family: var(--font-display); font-size: var(--display-xl); line-height: 0.95; letter-spacing: -0.03em; color: var(--accent); }
+    .pending-count .pending-num .metric-unit { color: var(--text-secondary); }
+    .invite-cta { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-end; text-align: right; max-width: 360px; }
+    .filter-bar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
+    .filter-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-visible); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); transition: color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
+    .filter-chip:hover { color: var(--text-primary); border-color: var(--text-primary); }
+    .filter-chip svg { width: 14px; height: 14px; stroke-width: 1.5; }
+    .filter-bar .search { flex: 1; min-width: 240px; }
+    .filter-bar .search input { width: 100%; }
+    .disc { display: inline-flex; align-items: center; gap: 8px; }
+    .disc svg { width: 15px; height: 15px; stroke-width: 1.5; color: var(--text-secondary); flex-shrink: 0; }
+    .row-actions { display: inline-flex; align-items: center; gap: var(--space-xs); justify-content: flex-end; }
+    .icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-tech); color: var(--text-secondary); transition: color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); }
+    .icon-btn:hover { color: var(--text-primary); background: var(--surface-raised); }
+    .icon-btn svg { width: 17px; height: 17px; stroke-width: 1.5; }
+    .em { color: var(--text-disabled); font-family: var(--font-mono); }
+    .pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); flex-wrap: wrap; }
+    .pager-meta { display: inline-flex; align-items: center; gap: var(--space-md); }
+    .th-sort { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: default; }
+    .th-sort svg { width: 13px; height: 13px; stroke-width: 1.5; opacity: 0.8; }
+    .banner-detail { font-family: var(--font-mono); font-size: var(--caption); color: var(--text-disabled); letter-spacing: 0.02em; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar">
+      <div class="brand"><span class="dot"></span><span class="wordmark">AI&middot;HUB</span></div>
+      <nav class="nav">
+        <a class="nav-item" href="./dashboard.html">Dashboard</a>
+        <a class="nav-item" href="./tools.html">Tools</a>
+        <a class="nav-item active" href="./users.html">Users</a>
+        <a class="nav-item" href="./assignments.html">Assignments</a>
+        <a class="nav-item" href="./requests.html">Requests</a>
+        <a class="nav-item" href="./budget.html">Budget</a>
+        <a class="nav-item" href="./reports.html">Reports</a>
+        <a class="nav-item" href="./copilot.html">Copilot</a>
+        <a class="nav-item" href="./claude.html">Claude Console</a>
+        <a class="nav-item" href="./invoices.html">Invoices</a>
+        <a class="nav-item" href="./settings.html">Settings</a>
+      </nav>
+      <div class="sidebar-footer">
+        <div class="user-chip">
+          <span class="avatar">TS</span>
+          <span class="stack">
+            <span class="t-primary" style="font-size:13px">Tobias Studer</span>
+            <span class="label">Admin</span>
+          </span>
+        </div>
+        <a class="nav-item" href="./login.html">Sign Out</a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <header class="topbar">
+        <div>
+          <div class="label eyebrow">DIRECTORY</div>
+          <h1 class="display-md">Users</h1>
+          <p class="caption" style="margin-top:var(--space-sm)">Manage company user directory</p>
+        </div>
+        <div class="topbar-actions">
+          <a class="btn btn--secondary btn--sm" href="#">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+            Export CSV
+          </a>
+          <a class="btn btn--secondary btn--sm" href="./users-import.html">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
+            Bulk Import
+          </a>
+          <a class="btn btn--primary btn--sm" href="./users-new.html">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
+            Add User
+          </a>
+          <div class="theme-toggle">
+            <button data-theme="dark" class="active">Dark</button>
+            <button data-theme="light">Light</button>
+          </div>
+        </div>
+      </header>
+
+      <!-- ===== SCREEN CONTENT ===== -->
+
+      <!-- PRIMARY: the single urgent number — users blocked from working -->
+      <section class="users-hero">
+        <div class="pending-count">
+          <span class="label">USERS PENDING SETUP</span>
+          <span class="pending-num">4<span class="metric-unit">&nbsp;users</span></span>
+          <span class="caption">Have not set a password yet · invite links valid 72h</span>
+        </div>
+        <div class="invite-cta">
+          <a class="btn btn--secondary" href="#confirm-invite-all">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16v12H4z"/><path d="m4 7 8 6 8-6"/></svg>
+            Send Invites to All Pending (4)
+          </a>
+          <span class="banner-detail">Sends invite emails to 4 user(s) who have not yet set up their password.</span>
+        </div>
+      </section>
+
+      <hr class="divider" />
+
+      <!-- SECONDARY: search + faceted filters above the table -->
+      <div class="filter-bar">
+        <div class="search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+          <input type="text" placeholder="Search users..." />
+        </div>
+        <button class="filter-chip">Circle<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
+        <button class="filter-chip">Discipline<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
+        <button class="filter-chip">Profile<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
+        <button class="filter-chip">Role<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
+        <button class="filter-chip">Setup Status<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
+        <button class="filter-chip">Status<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
+      </div>
+
+      <!-- TERTIARY (heaviest treatment — data table archetype) -->
+      <section class="section-gap">
+        <div class="card card--pad-lg">
+          <table class="table">
+            <thead>
+              <tr>
+                <th><span class="th-sort">Name<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span></th>
+                <th>Email</th>
+                <th>Circle</th>
+                <th>Discipline</th>
+                <th>Role</th>
+                <th>Profile</th>
+                <th>Setup Status</th>
+                <th>Status</th>
+                <th class="num">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- Anna Keller -->
+              <tr>
+                <td class="cell-strong"><a href="./users-detail.html">Anna Keller</a></td>
+                <td class="mono t-secondary">anna.keller@unic.com</td>
+                <td>Zurich Digital</td>
+                <td><span class="disc"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg>Developer</span></td>
+                <td class="mono t-secondary">viewer</td>
+                <td class="mono t-secondary">boost</td>
+                <td><span class="status-text">Pending</span></td>
+                <td><span class="tag tag--active"><span class="led"></span>Active</span></td>
+                <td class="num">
+                  <span class="row-actions">
+                    <a class="icon-btn" href="./users-detail.html" title="View"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></a>
+                    <a class="icon-btn" href="./users-edit.html" title="Edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></a>
+                    <button class="icon-btn" title="More actions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
+                  </span>
+                </td>
+              </tr>
+              <!-- Marco Brunner -->
+              <tr>
+                <td class="cell-strong"><a href="./users-detail.html">Marco Brunner</a></td>
+                <td class="mono t-secondary">marco.brunner@unic.com</td>
+                <td>Bern Platform</td>
+                <td><span class="disc"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 22h4M15 2a7 7 0 0 0-5 11.9c.6.6 1 1.4 1 2.1h2c0-.7.4-1.5 1-2.1A7 7 0 0 0 15 2Z"/></svg>Conception</span></td>
+                <td class="mono t-secondary">admin</td>
+                <td class="mono t-secondary">maxed</td>
+                <td><span class="status-text">Pending</span></td>
+                <td><span class="tag tag--active"><span class="led"></span>Active</span></td>
+                <td class="num">
+                  <span class="row-actions">
+                    <a class="icon-btn" href="./users-detail.html" title="View"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></a>
+                    <a class="icon-btn" href="./users-edit.html" title="Edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></a>
+                    <button class="icon-btn" title="More actions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
+                  </span>
+                </td>
+              </tr>
+              <!-- Sophie Vogel (pending setup) -->
+              <tr>
+                <td class="cell-strong"><a href="./users-detail.html">Sophie Vogel</a></td>
+                <td class="mono t-secondary">sophie.vogel@unic.com</td>
+                <td>Lausanne Cloud</td>
+                <td><span class="disc"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 22h-8a2 2 0 0 1-2-2v-12a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2ZM9 7h6M9 11h6M9 2v4M15 2v4"/></svg>Business</span></td>
+                <td class="mono t-secondary">viewer</td>
+                <td class="mono t-secondary">indie</td>
+                <td><span class="status-text">Pending</span></td>
+                <td><span class="tag tag--active"><span class="led"></span>Active</span></td>
+                <td class="num">
+                  <span class="row-actions">
+                    <a class="icon-btn" href="./users-detail.html" title="View"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></a>
+                    <a class="icon-btn" href="./users-edit.html" title="Edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></a>
+                    <button class="icon-btn" title="More actions: Send Invite · Reset Password · Deactivate"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
+                  </span>
+                </td>
+              </tr>
+              <!-- Tobias Studer (no profile) -->
+              <tr>
+                <td class="cell-strong"><a href="./users-detail.html">Tobias Studer</a></td>
+                <td class="mono t-secondary">tobias.studer@unic.com</td>
+                <td>Zurich Digital</td>
+                <td><span class="disc"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg>Developer</span></td>
+                <td class="mono t-secondary">admin</td>
+                <td><span class="em">&mdash;</span></td>
+                <td><span class="status-text">Pending</span></td>
+                <td><span class="tag tag--active"><span class="led"></span>Active</span></td>
+                <td class="num">
+                  <span class="row-actions">
+                    <a class="icon-btn" href="./users-detail.html" title="View"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></a>
+                    <a class="icon-btn" href="./users-edit.html" title="Edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></a>
+                    <button class="icon-btn" title="More actions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
+                  </span>
+                </td>
+              </tr>
+              <!-- Lukas Meier (no circle, no profile, inactive — no Edit/More) -->
+              <tr>
+                <td class="cell-strong"><a href="./users-detail.html">Lukas Meier</a></td>
+                <td class="mono t-secondary">lukas.meier@unic.com</td>
+                <td><span class="em">&mdash;</span></td>
+                <td><span class="disc"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg>Developer</span></td>
+                <td class="mono t-secondary">viewer</td>
+                <td><span class="em">&mdash;</span></td>
+                <td><span class="status-text status-text--ok">Active</span></td>
+                <td><span class="tag">Inactive</span></td>
+                <td class="num">
+                  <span class="row-actions">
+                    <a class="icon-btn" href="./users-detail.html" title="View"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></a>
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div class="pager">
+            <span class="caption">5 of 5 users</span>
+            <div class="pager-meta">
+              <span class="label">ROWS</span>
+              <div class="segmented">
+                <button class="active">10</button>
+                <button>25</button>
+                <button>50</button>
+                <button>100</button>
+              </div>
+              <div class="period-nav">
+                <button class="nav-arrow" title="Previous page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>
+                <span class="period-label">Page 1 / 1</span>
+                <button class="nav-arrow" title="Next page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ROW ACTIONS / DIALOG REFERENCE (tertiary — quiet stat list, varied form) -->
+      <section class="section-gap">
+        <div class="row row--between" style="margin-bottom:var(--space-md)">
+          <span class="label">CONFIRMATION DIALOGS</span>
+          <span class="caption">admin-only · destructive actions require confirm</span>
+        </div>
+        <div class="grid grid--2">
+          <div class="card">
+            <span class="label card-label">SEND INVITES TO ALL PENDING</span>
+            <div class="stack stack--sm">
+              <span class="subheading">Send invites to all pending users?</span>
+              <span class="caption">This will send invite emails to 4 user(s) who have not yet set up their password. Each user receives a unique invite link valid for 72 hours.</span>
+              <div class="row" style="margin-top:var(--space-sm)">
+                <button class="btn btn--secondary btn--sm">Send Invites</button>
+                <button class="btn btn--ghost btn--sm">Cancel</button>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <span class="label card-label">DEACTIVATE USER</span>
+            <div class="stack stack--sm">
+              <span class="subheading">Deactivate this user?</span>
+              <span class="caption">Deactivating revokes all active license assignments. Reset Password sends a fresh setup link. Both actions open a confirmation dialog first.</span>
+              <div class="row" style="margin-top:var(--space-sm)">
+                <button class="btn btn--secondary btn--sm">Deactivate</button>
+                <button class="btn btn--ghost btn--sm">Cancel</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </main>
+  </div>
+</body>
+</html>
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index 69e9f292..98f0afc2 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -1,5 +1,3 @@
-import { Bot } from "lucide-react";
-
 export default function AuthLayout({
   children,
 }: {
@@ -7,23 +5,25 @@ export default function AuthLayout({
 }) {
   return (
     <div className="grid min-h-screen lg:grid-cols-2">
-      {/* Decorative side panel — visible on large screens */}
-      <div className="hidden lg:flex flex-col justify-between bg-primary p-10 text-primary-foreground">
-        <div className="flex items-center gap-2 text-lg font-semibold">
-          <Bot className="size-6" />
-          <span>AI Developer Hub</span>
+      {/* Decorative side panel — neutral surface + dot-matrix, NOT an accent fill */}
+      <div className="nd-dot-grid hidden flex-col justify-between border-r border-border bg-card p-10 lg:flex">
+        <div className="flex items-center gap-2">
+          <span className="size-2.5 rounded-full bg-destructive" aria-hidden="true" />
+          <span className="font-mono text-sm tracking-[0.14em] uppercase text-ink">
+            AI·HUB
+          </span>
         </div>
-        <blockquote className="space-y-2">
-          <p className="text-lg leading-relaxed">
+        <blockquote className="space-y-3">
+          <p className="text-lg leading-relaxed text-foreground">
             &ldquo;Centralise your AI tool budgets, licences, and usage data in
             one place — so your team can focus on building.&rdquo;
           </p>
-          <footer className="text-sm text-primary-foreground/70">
-            Budget Tracker &middot; Licence Manager &middot; Usage Reports
+          <footer className="font-mono text-[11px] tracking-[0.1em] uppercase text-muted-foreground">
+            Budget Tracker · Licence Manager · Usage Reports
           </footer>
         </blockquote>
-        <p className="text-xs text-primary-foreground/50">
-          &copy; {new Date().getFullYear()} AI Developer Hub
+        <p className="font-mono text-[11px] tracking-[0.1em] uppercase text-faint">
+          © {new Date().getFullYear()} AI Developer Hub
         </p>
       </div>
 
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index 54439069..c6750555 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -16,13 +16,13 @@ export default async function LoginPage({
   const { callbackUrl } = await searchParams;
 
   return (
-    <Card className="border-none shadow-lg">
+    <Card className="border-none">
       <CardHeader className="space-y-3 text-center">
         <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-primary/10 lg:hidden">
           <Bot className="size-6 text-primary" />
         </div>
         <div className="space-y-1.5">
-          <CardTitle className="text-2xl font-bold tracking-tight">
+          <CardTitle className="text-2xl font-medium tracking-tight text-ink">
             Welcome back
           </CardTitle>
           <CardDescription className="text-balance">
diff --git a/src/app/(auth)/setup-password/[token]/page.tsx b/src/app/(auth)/setup-password/[token]/page.tsx
index cdb8cdb4..66428844 100644
--- a/src/app/(auth)/setup-password/[token]/page.tsx
+++ b/src/app/(auth)/setup-password/[token]/page.tsx
@@ -21,13 +21,13 @@ export default async function SetupPasswordPage({
 
   if (!result.success) {
     return (
-      <Card className="border-none shadow-lg">
+      <Card className="border-none">
         <CardHeader className="space-y-3 text-center">
           <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-primary/10 lg:hidden">
             <Bot className="size-6 text-primary" />
           </div>
           <div className="space-y-1.5">
-            <CardTitle className="text-2xl font-bold tracking-tight">
+            <CardTitle className="text-2xl font-medium tracking-tight">
               AI Developer Hub
             </CardTitle>
           </div>
@@ -73,13 +73,13 @@ export default async function SetupPasswordPage({
   }
 
   return (
-    <Card className="border-none shadow-lg">
+    <Card className="border-none">
       <CardHeader className="space-y-3 text-center">
         <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-primary/10 lg:hidden">
           <Bot className="size-6 text-primary" />
         </div>
         <div className="space-y-1.5">
-          <CardTitle className="text-2xl font-bold tracking-tight">
+          <CardTitle className="text-2xl font-medium tracking-tight">
             Set your password
           </CardTitle>
           <CardDescription className="text-balance">
diff --git a/src/app/(auth)/setup-password/[token]/setup-password-form.tsx b/src/app/(auth)/setup-password/[token]/setup-password-form.tsx
index 7d2db20a..3d0d37a7 100644
--- a/src/app/(auth)/setup-password/[token]/setup-password-form.tsx
+++ b/src/app/(auth)/setup-password/[token]/setup-password-form.tsx
@@ -6,7 +6,7 @@ import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { AlertCircle, Loader2 } from "lucide-react";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { setupPasswordSchema } from "@/lib/validators";
 import { setupPassword } from "@/actions/invite";
 import { Button } from "@/components/ui/button";
@@ -28,6 +28,7 @@ interface SetupPasswordFormProps {
 
 export function SetupPasswordForm({ token, userName }: SetupPasswordFormProps) {
   const router = useRouter();
+  const status = useInlineStatus();
   const [error, setError] = useState<string | null>(null);
 
   const form = useForm({
@@ -56,15 +57,15 @@ export function SetupPasswordForm({ token, userName }: SetupPasswordFormProps) {
       });
 
       if (signInResult?.ok) {
-        toast.success("Password set successfully. Redirecting...");
+        // Navigation is the feedback for the success path.
         router.push("/");
         router.refresh();
       } else {
         // Fallback: send to login page if auto-sign-in fails
-        toast.success("Password set successfully. Please sign in.");
         router.push("/login");
       }
     } else {
+      status.error(result.error);
       setError(result.error);
     }
   }
@@ -138,6 +139,9 @@ export function SetupPasswordForm({ token, userName }: SetupPasswordFormProps) {
             "Set Password"
           )}
         </Button>
+        <div className="flex justify-center">
+          <StatusText status={status.status} />
+        </div>
       </form>
     </Form>
   );
diff --git a/src/app/assignments/[id]/assignment-detail-client.tsx b/src/app/assignments/[id]/assignment-detail-client.tsx
index c80e5611..139f40fb 100644
--- a/src/app/assignments/[id]/assignment-detail-client.tsx
+++ b/src/app/assignments/[id]/assignment-detail-client.tsx
@@ -3,7 +3,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { toast } from "sonner";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format, parseISO } from "date-fns";
@@ -32,6 +31,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Separator } from "@/components/ui/separator";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   Form,
   FormControl,
@@ -96,6 +96,8 @@ export function AssignmentDetailClient({
   isAdmin,
 }: Props) {
   const router = useRouter();
+  const detailStatus = useInlineStatus();
+  const commentStatus = useInlineStatus();
   const [revealedKey, setRevealedKey] = useState<string | null>(null);
   const [revealing, setRevealing] = useState(false);
   const [commentBody, setCommentBody] = useState("");
@@ -126,11 +128,14 @@ export function AssignmentDetailClient({
       const tool = await getToolWithTiers(assignment.tool.id);
       setTiers(tool?.accessTiers.filter((t) => t.isActive) ?? []);
     } catch {
-      toast.error("Failed to load tiers");
+      detailStatus.error("Failed to load tiers");
     } finally {
       setLoadingTiers(false);
     }
-  }, [assignment.tool.id]);
+    // detailStatus is now a memoized object (stable unless its status changes),
+    // so this callback no longer churns every render and the mount effect runs
+    // once instead of looping.
+  }, [assignment.tool.id, detailStatus]);
 
   useEffect(() => {
     if (isAdmin && assignment.status === "active") {
@@ -153,14 +158,14 @@ export function AssignmentDetailClient({
     const result = await updateAssignment(payload);
     if (result.success) {
       if (result.warning) {
-        toast.warning(result.warning);
+        detailStatus.info(result.warning);
       } else {
-        toast.success("Assignment updated");
+        detailStatus.ok("Saved");
       }
       form.reset({ ...payload, apiKey: "" });
       router.refresh();
     } else {
-      toast.error(result.error);
+      detailStatus.error(result.error);
     }
   }
 
@@ -176,10 +181,10 @@ export function AssignmentDetailClient({
       if (result.success) {
         setRevealedKey(result.data.plaintext);
       } else {
-        toast.error(result.error);
+        detailStatus.error(result.error);
       }
     } catch {
-      toast.error("Failed to reveal API key");
+      detailStatus.error("Failed to reveal API key");
     } finally {
       setRevealing(false);
     }
@@ -188,14 +193,14 @@ export function AssignmentDetailClient({
   async function handleCopyApiKey() {
     const key = revealedKey;
     if (!key) {
-      toast.error("Reveal the API key first to copy it");
+      detailStatus.error("Reveal the key first");
       return;
     }
     try {
       await navigator.clipboard.writeText(key);
-      toast.success("API key copied to clipboard");
+      detailStatus.ok("Copied");
     } catch {
-      toast.error("Failed to copy to clipboard");
+      detailStatus.error("Copy failed");
     }
   }
 
@@ -209,14 +214,14 @@ export function AssignmentDetailClient({
         body: commentBody.trim(),
       });
       if (result.success) {
-        toast.success("Comment added");
+        commentStatus.ok("Added");
         setCommentBody("");
         router.refresh();
       } else {
-        toast.error(result.error);
+        commentStatus.error(result.error);
       }
     } catch {
-      toast.error("Failed to add comment");
+      commentStatus.error("Failed to add comment");
     } finally {
       setSubmittingComment(false);
     }
@@ -234,7 +239,7 @@ export function AssignmentDetailClient({
             Back to Assignments
           </Link>
         </Button>
-        <h1 className="text-3xl font-bold">
+        <h1 className="text-3xl font-medium tracking-tight text-ink">
           <Link
             href={`/users/${assignment.user.id}`}
             className="hover:underline"
@@ -506,14 +511,17 @@ export function AssignmentDetailClient({
                   />
                 </div>
 
-                <Button
-                  type="submit"
-                  disabled={form.formState.isSubmitting}
-                >
-                  {form.formState.isSubmitting
-                    ? "Saving..."
-                    : "Save Changes"}
-                </Button>
+                <div className="flex items-center gap-3">
+                  <Button
+                    type="submit"
+                    disabled={form.formState.isSubmitting}
+                  >
+                    {form.formState.isSubmitting
+                      ? "Saving..."
+                      : "Save Changes"}
+                  </Button>
+                  <StatusText status={detailStatus.status} />
+                </div>
               </form>
             </Form>
           ) : (
@@ -635,6 +643,7 @@ export function AssignmentDetailClient({
                         </>
                       )}
                     </div>
+                    {isAdmin && <StatusText status={detailStatus.status} />}
                   </div>
                 </>
               )}
@@ -697,14 +706,17 @@ export function AssignmentDetailClient({
                   <p className="text-xs text-muted-foreground">
                     {commentBody.length}/2000 characters
                   </p>
-                  <Button
-                    onClick={handleAddComment}
-                    disabled={
-                      !commentBody.trim() || submittingComment
-                    }
-                  >
-                    {submittingComment ? "Adding..." : "Add Comment"}
-                  </Button>
+                  <div className="flex items-center gap-3">
+                    <StatusText status={commentStatus.status} />
+                    <Button
+                      onClick={handleAddComment}
+                      disabled={
+                        !commentBody.trim() || submittingComment
+                      }
+                    >
+                      {submittingComment ? "Adding..." : "Add Comment"}
+                    </Button>
+                  </div>
                 </div>
               </div>
             </>
diff --git a/src/app/assignments/assignments-client.tsx b/src/app/assignments/assignments-client.tsx
index 9865fe9b..97c7fc65 100644
--- a/src/app/assignments/assignments-client.tsx
+++ b/src/app/assignments/assignments-client.tsx
@@ -3,7 +3,6 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ColumnDef } from "@tanstack/react-table";
@@ -17,6 +16,7 @@ import { getToolWithTiers } from "@/actions/tools";
 import { updateAssignmentSchema } from "@/lib/validators";
 import type { UpdateAssignmentInput } from "@/lib/validators";
 import { DataTable, arrayIncludesFilterFn } from "@/components/data-table";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { UserCombobox } from "@/components/user-combobox";
 import { formatCurrency, formatDate, cn, formatDateOnly, NO_WORKSPACE_SENTINEL } from "@/lib/utils";
 import type { AiTool, User, AccessTier } from "@/types";
@@ -119,6 +119,7 @@ function EditAssignmentDialog({
   const [saving, setSaving] = useState(false);
   const [showApiKey, setShowApiKey] = useState(false);
   const [datePickerOpen, setDatePickerOpen] = useState(false);
+  const status = useInlineStatus();
 
   const form = useForm<UpdateAssignmentInput>({
     resolver: zodResolver(updateAssignmentSchema),
@@ -151,11 +152,11 @@ function EditAssignmentDialog({
       const tool = await getToolWithTiers(assignment.tool.id);
       setTiers(tool?.accessTiers.filter((t) => t.isActive) ?? []);
     } catch {
-      toast.error("Failed to load tiers");
+      status.error("Tiers load failed");
     } finally {
       setLoadingTiers(false);
     }
-  }, [assignment.tool.id]);
+  }, [assignment.tool.id, status]);
 
   useEffect(() => {
     if (open) {
@@ -189,17 +190,17 @@ function EditAssignmentDialog({
       const result = await updateAssignment(payload);
       if (result.success) {
         if (result.warning) {
-          toast.warning(result.warning);
+          status.info(result.warning);
         } else {
-          toast.success("Assignment updated");
+          status.ok("Updated");
         }
         setOpen(false);
         onSaved();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("An unexpected error occurred");
+      status.error("Unexpected error");
     } finally {
       setSaving(false);
     }
@@ -210,9 +211,9 @@ function EditAssignmentDialog({
     if (value) {
       try {
         await navigator.clipboard.writeText(value);
-        toast.success("Copied to clipboard");
+        status.ok("Copied");
       } catch {
-        toast.error("Failed to copy to clipboard");
+        status.error("Copy failed");
       }
     }
   }
@@ -400,7 +401,8 @@ function EditAssignmentDialog({
               )}
             />
 
-            <DialogFooter>
+            <DialogFooter className="items-center">
+              <StatusText status={status.status} className="mr-auto" />
               <Button
                 type="button"
                 variant="outline"
@@ -662,6 +664,7 @@ export function AssignmentsClient({
   isAdmin,
 }: Props) {
   const router = useRouter();
+  const status = useInlineStatus();
   const [dialogOpen, setDialogOpen] = useState(false);
   const [selectedUserId, setSelectedUserId] = useState<string>("");
   const [selectedToolId, setSelectedToolId] = useState<string>("");
@@ -673,12 +676,12 @@ export function AssignmentsClient({
   const handleRevoke = useCallback(async (id: number) => {
     const result = await revokeLicense({ id });
     if (result.success) {
-      toast.success("License revoked");
+      status.ok("Revoked");
       router.refresh();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
-  }, [router]);
+  }, [router, status]);
   const columns = useMemo(
     () => getColumns(isAdmin, handleRevoke, handleRefresh),
     [isAdmin, handleRevoke, handleRefresh]
@@ -736,14 +739,14 @@ export function AssignmentsClient({
     });
     setAssigning(false);
     if (result.success) {
-      toast.success("License assigned");
+      status.ok("Assigned");
       setDialogOpen(false);
       setSelectedUserId("");
       setSelectedToolId("");
       setSelectedTierId("");
       router.refresh();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
@@ -751,13 +754,14 @@ export function AssignmentsClient({
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold">License Assignments</h1>
+          <h1 className="text-3xl font-medium tracking-tight text-ink">License Assignments</h1>
           <p className="text-muted-foreground">
             Track user-to-tool license assignments
           </p>
         </div>
         {isAdmin && (
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
+            <StatusText status={status.status} />
             <Button asChild variant="outline">
               <Link href="/assignments/import">Bulk Import</Link>
             </Button>
diff --git a/src/app/assignments/import/bulk-assignment-import-form.tsx b/src/app/assignments/import/bulk-assignment-import-form.tsx
index 9dc62472..585d2946 100644
--- a/src/app/assignments/import/bulk-assignment-import-form.tsx
+++ b/src/app/assignments/import/bulk-assignment-import-form.tsx
@@ -2,8 +2,8 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { bulkImportAssignments } from "@/actions/assignments";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -84,6 +84,7 @@ function parseCSV(text: string): ParsedAssignment[] {
 
 export function BulkAssignmentImportForm() {
   const router = useRouter();
+  const status = useInlineStatus();
   const [rows, setRows] = useState<ParsedAssignment[]>([]);
   const [importing, setImporting] = useState(false);
   const [serverErrors, setServerErrors] = useState<ServerRowError[]>([]);
@@ -123,19 +124,17 @@ export function BulkAssignmentImportForm() {
       if (result.success) {
         const imported = result.data?.imported ?? 0;
         const failed = result.data?.failed ?? 0;
-        toast.success(
-          `Import complete: ${imported} imported, ${failed} failed`
-        );
         if (failed > 0 && result.data?.errors) {
           setServerErrors(result.data.errors);
+          status.error(`${imported} imported, ${failed} failed`);
         } else {
           router.push("/assignments");
         }
       } else {
-        toast.error(result.error ?? "Import failed");
+        status.error(result.error ?? "Import failed");
       }
     } catch {
-      toast.error("An unexpected error occurred");
+      status.error("Unexpected error");
     } finally {
       setImporting(false);
     }
@@ -145,7 +144,7 @@ export function BulkAssignmentImportForm() {
     <div className="space-y-6">
       <div className="flex items-start justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold">Bulk Import Assignments</h1>
+          <h1 className="text-3xl font-medium tracking-tight text-ink">Bulk Import Assignments</h1>
           <p className="text-muted-foreground">
             Upload a CSV file to import license assignments in bulk.
           </p>
@@ -255,6 +254,7 @@ export function BulkAssignmentImportForm() {
                     >
                       Cancel
                     </Button>
+                    <StatusText status={status.status} />
                   </>
                 )}
               </div>
diff --git a/src/app/assignments/loading.tsx b/src/app/assignments/loading.tsx
index bba60c28..fdddf935 100644
--- a/src/app/assignments/loading.tsx
+++ b/src/app/assignments/loading.tsx
@@ -1,29 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function AssignmentsLoading() {
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <Skeleton className="h-9 w-40" />
-          <Skeleton className="mt-2 h-5 w-64" />
-        </div>
-        <Skeleton className="h-10 w-36" />
-      </div>
-
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-10 w-full max-w-sm" />
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <Skeleton key={i} className="h-12 w-full" />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING ASSIGNMENTS" />;
 }
diff --git a/src/app/budget/[id]/loading.tsx b/src/app/budget/[id]/loading.tsx
index e1f0ca3c..f6f51c70 100644
--- a/src/app/budget/[id]/loading.tsx
+++ b/src/app/budget/[id]/loading.tsx
@@ -1,37 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function BudgetDetailLoading() {
-  return (
-    <div className="space-y-6">
-      <div>
-        <Skeleton className="h-9 w-48" />
-        <Skeleton className="mt-2 h-5 w-32" />
-      </div>
-
-      <div className="grid gap-4 sm:grid-cols-3">
-        {Array.from({ length: 3 }).map((_, i) => (
-          <Card key={i}>
-            <CardContent className="pt-6">
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="mt-2 h-8 w-28" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-40" />
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <Skeleton key={i} className="h-12 w-full" />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING BUDGET" />;
 }
diff --git a/src/app/budget/budget-list-actions.tsx b/src/app/budget/budget-list-actions.tsx
index fbac0b33..0dd23f10 100644
--- a/src/app/budget/budget-list-actions.tsx
+++ b/src/app/budget/budget-list-actions.tsx
@@ -3,8 +3,8 @@
 import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -38,6 +38,7 @@ interface BudgetListActionsProps {
 export function BudgetListActions({ id, fiscalYear, status }: BudgetListActionsProps) {
   const router = useRouter();
   const [showArchiveDialog, setShowArchiveDialog] = useState(false);
+  const archiveStatus = useInlineStatus();
 
   return (
     <div className="flex items-center justify-end gap-1">
@@ -80,19 +81,19 @@ export function BudgetListActions({ id, fiscalYear, status }: BudgetListActionsP
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>
+                <StatusText status={archiveStatus.status} />
                 <AlertDialogCancel>Cancel</AlertDialogCancel>
                 <AlertDialogAction
                   onClick={async () => {
                     try {
                       const result = await archiveBudget({ id });
                       if (result.success) {
-                        toast.success("Budget archived");
                         router.refresh();
                       } else {
-                        toast.error(result.error);
+                        archiveStatus.error(result.error);
                       }
                     } catch {
-                      toast.error("An unexpected error occurred");
+                      archiveStatus.error("Unexpected error");
                     }
                   }}
                 >
diff --git a/src/app/budget/components/budget-detail-client.tsx b/src/app/budget/components/budget-detail-client.tsx
index e455ebe1..1b49b57c 100644
--- a/src/app/budget/components/budget-detail-client.tsx
+++ b/src/app/budget/components/budget-detail-client.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   createBilledCost,
   deleteBilledCost,
@@ -45,6 +45,9 @@ export function BudgetDetailClient({
   showBreadcrumb = true,
 }: Props) {
   const router = useRouter();
+  const allocStatus = useInlineStatus();
+  const billedStatus = useInlineStatus();
+  const deleteStatus = useInlineStatus();
   const periods = budget.periods;
   const isArchived = budget.status === "archived";
 
@@ -83,10 +86,10 @@ export function BudgetDetailClient({
     setSaving(false);
 
     if (result.success) {
-      toast.success("Allocations saved");
+      allocStatus.ok("Saved");
       router.refresh();
     } else {
-      toast.error(result.error);
+      allocStatus.error(result.error);
     }
   }
 
@@ -101,7 +104,7 @@ export function BudgetDetailClient({
     setAddSaving(true);
     const amountCents = Math.round(parseFloat(addForm.amountDollars) * 100);
     if (isNaN(amountCents) || amountCents <= 0) {
-      toast.error("Please enter a valid amount");
+      billedStatus.error("Invalid amount");
       setAddSaving(false);
       return;
     }
@@ -114,11 +117,10 @@ export function BudgetDetailClient({
     });
     setAddSaving(false);
     if (result.success) {
-      toast.success("Billed cost added");
       setAddDialogOpen(false);
       router.refresh();
     } else {
-      toast.error(result.error);
+      billedStatus.error(result.error);
     }
   }
 
@@ -138,7 +140,7 @@ export function BudgetDetailClient({
     setEditSaving(true);
     const amountCents = Math.round(parseFloat(editForm.amountDollars) * 100);
     if (isNaN(amountCents) || amountCents <= 0) {
-      toast.error("Please enter a valid amount");
+      billedStatus.error("Invalid amount");
       setEditSaving(false);
       return;
     }
@@ -151,11 +153,10 @@ export function BudgetDetailClient({
     });
     setEditSaving(false);
     if (result.success) {
-      toast.success("Billed cost updated");
       setEditDialogOpen(false);
       router.refresh();
     } else {
-      toast.error(result.error);
+      billedStatus.error(result.error);
     }
   }
 
@@ -170,11 +171,10 @@ export function BudgetDetailClient({
     const result = await deleteBilledCost({ id: deleteEntry.id });
     setDeleteSaving(false);
     if (result.success) {
-      toast.success("Billed cost deleted");
       setDeleteDialogOpen(false);
       router.refresh();
     } else {
-      toast.error(result.error);
+      deleteStatus.error(result.error);
     }
   }
 
@@ -202,7 +202,10 @@ export function BudgetDetailClient({
 
       <Card>
         <CardHeader>
-          <CardTitle>Period allocations &amp; billed costs</CardTitle>
+          <div className="flex items-center justify-between gap-3">
+            <CardTitle>Period allocations &amp; billed costs</CardTitle>
+            <StatusText status={allocStatus.status} />
+          </div>
         </CardHeader>
         <CardContent>
           <PeriodAllocationsTable
@@ -221,6 +224,11 @@ export function BudgetDetailClient({
         </CardContent>
       </Card>
 
+      <div className="flex items-center justify-end gap-4">
+        <StatusText status={billedStatus.status} />
+        <StatusText status={deleteStatus.status} />
+      </div>
+
       <BilledCostDialog
         mode="add"
         open={addDialogOpen}
diff --git a/src/app/budget/components/budget-detail-header.tsx b/src/app/budget/components/budget-detail-header.tsx
index ca76d36d..aef3ff08 100644
--- a/src/app/budget/components/budget-detail-header.tsx
+++ b/src/app/budget/components/budget-detail-header.tsx
@@ -45,7 +45,7 @@ export function BudgetDetailHeader({
 
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="flex flex-wrap items-center gap-3">
-          <h1 className="text-3xl font-bold">FY {budget.fiscalYear} Budget</h1>
+          <h1 className="text-3xl font-medium tracking-tight text-ink">FY {budget.fiscalYear} Budget</h1>
           <Badge variant={isArchived ? "secondary" : "default"}>
             {budget.status}
           </Badge>
diff --git a/src/app/budget/components/budget-health-hero.tsx b/src/app/budget/components/budget-health-hero.tsx
index 48ed4f9d..5227bbe1 100644
--- a/src/app/budget/components/budget-health-hero.tsx
+++ b/src/app/budget/components/budget-health-hero.tsx
@@ -392,7 +392,7 @@ function MultiMarkerBar({
         {lastClosedLabel && (
           <div
             aria-hidden
-            className="absolute inset-y-0 w-px bg-blue-500"
+            className="absolute inset-y-0 w-px bg-muted-foreground"
             style={{ left: `${closedExpectedPct}%` }}
             title={`Expected through ${lastClosedLabel}`}
           />
@@ -404,7 +404,7 @@ function MultiMarkerBar({
         <LegendTick className="bg-foreground/70" label="Planned YTD" />
         {lastClosedLabel && (
           <LegendTick
-            className="bg-blue-500"
+            className="bg-muted-foreground"
             label={`Expected through ${lastClosedLabel}`}
           />
         )}
diff --git a/src/app/budget/components/period-allocations-table.tsx b/src/app/budget/components/period-allocations-table.tsx
index f6a8c0ae..5a03c885 100644
--- a/src/app/budget/components/period-allocations-table.tsx
+++ b/src/app/budget/components/period-allocations-table.tsx
@@ -44,9 +44,9 @@ function rowClassFor(args: {
   isUnderExpected: boolean;
   isFuture: boolean;
 }): string {
-  if (args.isCurrent) return "border-l-4 border-primary bg-primary/5";
-  if (args.isOverExpected) return "bg-destructive/10";
-  if (args.isUnderExpected) return "bg-emerald-500/5";
+  if (args.isCurrent) return "border-l-4 border-primary";
+  if (args.isOverExpected) return "border-l-4 border-destructive";
+  if (args.isUnderExpected) return "border-l-4 border-success";
   if (args.isFuture) return "text-muted-foreground";
   return "";
 }
@@ -207,7 +207,7 @@ export function PeriodAllocationsTable({
                     <TableCell>{formatCurrency(expected)}</TableCell>
                     <TableCell
                       className={
-                        runningCents > 0 ? "text-sky-700 dark:text-sky-300" : ""
+                        runningCents > 0 ? "text-foreground" : ""
                       }
                     >
                       {formatCurrency(actualCents)}
@@ -310,15 +310,15 @@ export function PeriodAllocationsTable({
                       {periodRunning && (
                         <TableRow
                           key={`running-${period.id}`}
-                          className="bg-sky-500/5 dark:bg-sky-500/10"
+                          className="bg-muted/30"
                         >
                           <TableCell />
                           <TableCell colSpan={2} className="text-sm pl-8">
-                            <span className="inline-flex items-center gap-2 font-medium text-sky-700 dark:text-sky-300">
+                            <span className="inline-flex items-center gap-2 font-medium text-foreground">
                               Anthropic API
                               <Badge
                                 variant="outline"
-                                className="h-5 border-sky-400/40 px-1.5 text-[10px] text-sky-700 dark:text-sky-300"
+                                className="h-5 px-1.5 text-[10px] text-muted-foreground"
                               >
                                 live
                               </Badge>
@@ -330,7 +330,7 @@ export function PeriodAllocationsTable({
                               </span>
                             )}
                           </TableCell>
-                          <TableCell className="text-sm text-sky-700 dark:text-sky-300">
+                          <TableCell className="text-sm text-foreground">
                             {formatCurrency(periodRunning.runningCostCents)}
                           </TableCell>
                           <TableCell />
@@ -346,7 +346,7 @@ export function PeriodAllocationsTable({
                                 ? `ws-${period.id}-${ws.workspaceId}`
                                 : `ws-${period.id}-idx-${index}`
                             }
-                            className="bg-sky-500/[0.03] dark:bg-sky-500/5"
+                            className="bg-muted/20"
                           >
                             <TableCell />
                             <TableCell
diff --git a/src/app/budget/components/stat-tile.tsx b/src/app/budget/components/stat-tile.tsx
index 5ec539f5..ed34525d 100644
--- a/src/app/budget/components/stat-tile.tsx
+++ b/src/app/budget/components/stat-tile.tsx
@@ -10,10 +10,10 @@ export function StatTile({ label, value, sub, tone = "default" }: Props) {
     tone === "danger"
       ? "text-destructive"
       : tone === "success"
-        ? "text-primary"
+        ? "text-success"
         : "";
   return (
-    <div className="rounded-lg border bg-card/60 p-4">
+    <div className="rounded-[14px] border bg-card/60 p-4">
       <p className="text-xs uppercase tracking-wide text-muted-foreground">
         {label}
       </p>
diff --git a/src/app/budget/history/page.tsx b/src/app/budget/history/page.tsx
index 0a45c421..1eaf7e34 100644
--- a/src/app/budget/history/page.tsx
+++ b/src/app/budget/history/page.tsx
@@ -29,7 +29,7 @@ export default async function BudgetHistoryPage() {
           </Button>
           <div className="flex flex-wrap items-center justify-between gap-3">
             <div>
-              <h1 className="text-3xl font-bold">Budget history</h1>
+              <h1 className="text-3xl font-medium tracking-tight text-ink">Budget history</h1>
               <p className="text-muted-foreground">
                 Every fiscal year — active and archived.
               </p>
diff --git a/src/app/budget/loading.tsx b/src/app/budget/loading.tsx
index bfd4a83f..8a614a73 100644
--- a/src/app/budget/loading.tsx
+++ b/src/app/budget/loading.tsx
@@ -1,34 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function BudgetLoading() {
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <Skeleton className="h-9 w-32" />
-          <Skeleton className="mt-2 h-5 w-56" />
-        </div>
-        <Skeleton className="h-10 w-32" />
-      </div>
-
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-24" />
-          <Skeleton className="mt-1 h-4 w-40" />
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="grid gap-4 sm:grid-cols-3">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i}>
-                <Skeleton className="h-4 w-24" />
-                <Skeleton className="mt-2 h-8 w-28" />
-              </div>
-            ))}
-          </div>
-          <Skeleton className="h-10 w-28" />
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING BUDGET" />;
 }
diff --git a/src/app/budget/new/new-budget-form.tsx b/src/app/budget/new/new-budget-form.tsx
index 5bab84c0..27735e52 100644
--- a/src/app/budget/new/new-budget-form.tsx
+++ b/src/app/budget/new/new-budget-form.tsx
@@ -4,8 +4,8 @@ import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { toast } from "sonner";
 import { createBudget } from "@/actions/budget";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -41,6 +41,7 @@ type NewBudgetInput = z.infer<typeof newBudgetSchema>;
 
 export function NewBudgetForm() {
   const router = useRouter();
+  const status = useInlineStatus();
   const currentYear = new Date().getFullYear();
 
   const form = useForm<NewBudgetInput>({
@@ -60,17 +61,16 @@ export function NewBudgetForm() {
     });
 
     if (result.success) {
-      toast.success("Budget created");
       router.push(`/budget/${result.data.id}`);
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
   return (
     <div className="mx-auto max-w-2xl space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Create Annual Budget</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Create Annual Budget</h1>
         <p className="text-muted-foreground">
           Set up a new fiscal year budget for AI tools
         </p>
@@ -162,6 +162,7 @@ export function NewBudgetForm() {
                 >
                   Cancel
                 </Button>
+                <StatusText status={status.status} />
               </div>
             </form>
           </Form>
diff --git a/src/app/budget/page.tsx b/src/app/budget/page.tsx
index 3c46f19c..45e2af5c 100644
--- a/src/app/budget/page.tsx
+++ b/src/app/budget/page.tsx
@@ -58,7 +58,7 @@ function EmptyBudgetState({ isAdmin }: { isAdmin: boolean }) {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Budget</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Budget</h1>
         <p className="text-muted-foreground">
           Annual AI tool budget planning.
         </p>
diff --git a/src/app/claude/page.tsx b/src/app/claude/page.tsx
index 17325f61..766b633b 100644
--- a/src/app/claude/page.tsx
+++ b/src/app/claude/page.tsx
@@ -21,6 +21,7 @@ import { HistoricalTrendCard } from "@/components/claude/historical-trend-card";
 import { SyncButton } from "@/components/claude/sync-button";
 import { ClaudeTabs } from "@/components/claude/claude-tabs";
 import { getCurrentMonth, getUtcDaysInMonth } from "@/lib/utils";
+import { LoadingState } from "@/components/ui/loading-state";
 import { Bot } from "lucide-react";
 
 export const metadata: Metadata = { title: "Claude API Spending" };
@@ -69,7 +70,7 @@ export default async function ClaudePage() {
     <div className="space-y-6">
       <div className="flex items-start justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">Claude API Spending</h1>
+          <h1 className="text-2xl font-medium tracking-tight text-ink">Claude API Spending</h1>
           <p className="text-muted-foreground">
             Org-wide usage, budgets, and Anthropic sync status.
           </p>
@@ -79,7 +80,7 @@ export default async function ClaudePage() {
 
       <ClaudeTabs />
 
-      <Suspense fallback={<div className="h-96 animate-pulse rounded-lg bg-muted" />}>
+      <Suspense fallback={<LoadingState label="LOADING" />}>
         <GlobalMetricsClient
           initialKpis={kpis}
           initialDaily={daily}
diff --git a/src/app/claude/users/[userId]/page.tsx b/src/app/claude/users/[userId]/page.tsx
index 469f1e71..5d799463 100644
--- a/src/app/claude/users/[userId]/page.tsx
+++ b/src/app/claude/users/[userId]/page.tsx
@@ -67,7 +67,7 @@ export default async function ClaudeUserDetailPage({ params }: PageProps) {
       </nav>
 
       <div className="flex flex-wrap items-center gap-3">
-        <h1 className="text-2xl font-bold tracking-tight">
+        <h1 className="text-2xl font-medium tracking-tight text-ink">
           {detail.user.name || detail.user.email}
         </h1>
         {detail.user.name && (
diff --git a/src/app/claude/users/[userId]/user-detail-client.tsx b/src/app/claude/users/[userId]/user-detail-client.tsx
index 48b1c672..7f4f05e9 100644
--- a/src/app/claude/users/[userId]/user-detail-client.tsx
+++ b/src/app/claude/users/[userId]/user-detail-client.tsx
@@ -12,6 +12,7 @@ import { getUserDetail } from "@/actions/anthropic-users";
 import { Badge } from "@/components/ui/badge";
 import { AlertTriangle, TrendingDown, TrendingUp } from "lucide-react";
 import { formatCurrency } from "@/lib/utils";
+import { InlineSpinner } from "@/components/ui/loading-state";
 import type { UserDetail } from "@/types";
 
 type Props = {
@@ -45,11 +46,11 @@ export function UserDetailClient({ userId, initial }: Props) {
       detail.momDeltaPct === null ? (
         <span className="text-muted-foreground">— no spend last month</span>
       ) : detail.momDeltaPct >= 0 ? (
-        <span className="inline-flex items-center gap-1 text-emerald-500">
+        <span className="inline-flex items-center gap-1 text-foreground">
           <TrendingUp className="size-3" /> +{detail.momDeltaPct}% vs prior month
         </span>
       ) : (
-        <span className="inline-flex items-center gap-1 text-destructive">
+        <span className="inline-flex items-center gap-1 text-foreground">
           <TrendingDown className="size-3" /> {detail.momDeltaPct}% vs prior
           month
         </span>
@@ -73,12 +74,7 @@ export function UserDetailClient({ userId, initial }: Props) {
             ? `+${formatCurrency(detail.momDeltaCents)}`
             : `-${formatCurrency(Math.abs(detail.momDeltaCents))}`,
         caption: momCaption,
-        tone:
-          detail.momDeltaPct === null
-            ? "default"
-            : detail.momDeltaPct >= 0
-            ? "success"
-            : "danger",
+        tone: "default",
       },
       {
         label: "Projected Month-End",
@@ -110,17 +106,10 @@ export function UserDetailClient({ userId, initial }: Props) {
               detail.availableMonths.length > 0 ? detail.availableMonths : [month]
             }
           />
-          {isPending && (
-            <span className="text-sm text-muted-foreground animate-pulse">
-              Loading…
-            </span>
-          )}
+          {isPending && <InlineSpinner />}
         </div>
         {detail.hasUnresolvedPricing && (
-          <Badge
-            variant="outline"
-            className="border-amber-500/40 bg-amber-500/5 text-amber-600 dark:text-amber-400"
-          >
+          <Badge variant="warning">
             <AlertTriangle className="mr-1 size-3" />
             Some pricing unresolved
           </Badge>
@@ -136,11 +125,7 @@ export function UserDetailClient({ userId, initial }: Props) {
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <WorkspaceDailyChart
-            dailyTotals={detail.dailyTotals}
-            color={detail.workspace.displayColor}
-            limitCents={null}
-          />
+          <WorkspaceDailyChart dailyTotals={detail.dailyTotals} limitCents={null} />
         </CardContent>
       </Card>
 
diff --git a/src/app/claude/users/page.tsx b/src/app/claude/users/page.tsx
index beaf189e..4273a1dc 100644
--- a/src/app/claude/users/page.tsx
+++ b/src/app/claude/users/page.tsx
@@ -16,7 +16,7 @@ import { SyncButton } from "@/components/claude/sync-button";
 import { SyncStatusPill } from "@/components/claude/sync-status-pill";
 import { UsersMonthPicker } from "@/components/claude/users-month-picker";
 import { UserKpiStrip } from "@/components/claude/user-kpi-strip";
-import { TopUsersBarChart } from "@/components/claude/top-users-bar-chart";
+import { TopUsersCard } from "@/components/claude/top-users-card";
 import { CostDistributionHistogram } from "@/components/claude/cost-distribution-histogram";
 import { DailyByUserChart } from "@/components/claude/daily-by-user-chart";
 import { UsersTable } from "@/components/claude/users-table";
@@ -77,7 +77,7 @@ export default async function ClaudeUsersPage({
       <div className="space-y-6">
         <div className="flex items-start justify-between gap-4">
           <div>
-            <h1 className="text-2xl font-bold tracking-tight">
+            <h1 className="text-2xl font-medium tracking-tight text-ink">
               Claude API Spending
             </h1>
             <p className="text-muted-foreground">
@@ -96,7 +96,7 @@ export default async function ClaudeUsersPage({
     <div className="space-y-6">
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">
+          <h1 className="text-2xl font-medium tracking-tight text-ink">
             Claude API Spending
           </h1>
           <p className="text-muted-foreground">
@@ -118,14 +118,7 @@ export default async function ClaudeUsersPage({
           Top 10 moves below it. */}
       <DailyByUserChart data={daily} />
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Top 10 Users by Cost</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <TopUsersBarChart users={list.users} />
-        </CardContent>
-      </Card>
+      <TopUsersCard users={list.users} />
 
       <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
         <CostDistributionHistogram buckets={distribution} />
diff --git a/src/app/claude/workspaces/[workspaceId]/page.tsx b/src/app/claude/workspaces/[workspaceId]/page.tsx
index 5c831681..e1a1ebf3 100644
--- a/src/app/claude/workspaces/[workspaceId]/page.tsx
+++ b/src/app/claude/workspaces/[workspaceId]/page.tsx
@@ -54,7 +54,7 @@ export default async function WorkspaceDetailPage({ params }: PageProps) {
           }}
           aria-hidden
         />
-        <h1 className="text-2xl font-bold tracking-tight">{detail.workspace.name}</h1>
+        <h1 className="text-2xl font-medium tracking-tight text-ink">{detail.workspace.name}</h1>
         {detail.workspace.isDefault && (
           <Badge variant="secondary">Default</Badge>
         )}
diff --git a/src/app/claude/workspaces/[workspaceId]/workspace-detail-client.tsx b/src/app/claude/workspaces/[workspaceId]/workspace-detail-client.tsx
index dd9ac701..d94d002a 100644
--- a/src/app/claude/workspaces/[workspaceId]/workspace-detail-client.tsx
+++ b/src/app/claude/workspaces/[workspaceId]/workspace-detail-client.tsx
@@ -13,12 +13,13 @@ import {
   getWorkspaceDetail,
   setWorkspaceLimit,
 } from "@/actions/anthropic-global";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import type { WorkspaceDetail } from "@/types";
 import { AlertTriangle, TrendingDown, TrendingUp } from "lucide-react";
 import { formatCurrency } from "@/lib/utils";
 import { getDaysInMonth, parseISO } from "date-fns";
 import { totalTileCaption } from "@/components/claude/today-estimate";
+import { InlineSpinner } from "@/components/ui/loading-state";
 
 type Props = {
   workspaceIdParam: string;
@@ -34,6 +35,7 @@ export function WorkspaceDetailClient({ workspaceIdParam, initial }: Props) {
     detail.limitCents != null ? String(detail.limitCents / 100) : ""
   );
   const [savingLimit, savingTransition] = useTransition();
+  const status = useInlineStatus();
 
   function handleMonthChange(next: string) {
     setMonth(next);
@@ -52,12 +54,12 @@ export function WorkspaceDetailClient({ workspaceIdParam, initial }: Props) {
           : Math.round(dollars * 100);
       const r = await setWorkspaceLimit(detail.workspace.id, cents);
       if (r.success) {
-        toast.success("Limit updated.");
+        status.ok("Limit updated");
         setEditing(false);
         const refreshed = await getWorkspaceDetail(workspaceIdParam, month);
         if (refreshed) setDetail(refreshed);
       } else {
-        toast.error(`Failed: ${r.error}`);
+        status.error(r.error);
       }
     });
   }
@@ -75,11 +77,11 @@ export function WorkspaceDetailClient({ workspaceIdParam, initial }: Props) {
       detail.momDeltaPct === null ? (
         <span className="text-muted-foreground">— no spend last month</span>
       ) : detail.momDeltaPct >= 0 ? (
-        <span className="inline-flex items-center gap-1 text-emerald-500">
+        <span className="inline-flex items-center gap-1 text-foreground">
           <TrendingUp className="size-3" /> +{detail.momDeltaPct}% vs prior month
         </span>
       ) : (
-        <span className="inline-flex items-center gap-1 text-destructive">
+        <span className="inline-flex items-center gap-1 text-muted-foreground">
           <TrendingDown className="size-3" /> {detail.momDeltaPct}% vs prior month
         </span>
       );
@@ -165,11 +167,7 @@ export function WorkspaceDetailClient({ workspaceIdParam, initial }: Props) {
             onChange={handleMonthChange}
             months={detail.availableMonths.length > 0 ? detail.availableMonths : [month]}
           />
-          {isPending && (
-            <span className="text-sm text-muted-foreground animate-pulse">
-              Loading…
-            </span>
-          )}
+          {isPending && <InlineSpinner />}
         </div>
         {editing ? (
           <div className="flex flex-col items-end gap-1">
@@ -190,6 +188,7 @@ export function WorkspaceDetailClient({ workspaceIdParam, initial }: Props) {
               <Button size="sm" variant="ghost" onClick={() => setEditing(false)} disabled={savingLimit}>
                 Cancel
               </Button>
+              <StatusText status={status.status} />
             </div>
             {detail.workspace.isDefault && (
               <p className="text-xs text-muted-foreground">
@@ -213,7 +212,6 @@ export function WorkspaceDetailClient({ workspaceIdParam, initial }: Props) {
         <CardContent>
           <WorkspaceDailyChart
             dailyTotals={detail.dailyTotals}
-            color={detail.workspace.displayColor}
             limitCents={detail.limitCents}
             daysInMonth={getDaysInMonth(parseISO(`${month}-01`))}
             estimatedTodayCents={detail.todayEstimate?.cents ?? null}
diff --git a/src/app/copilot/analytics/loading.tsx b/src/app/copilot/analytics/loading.tsx
index 55a4237e..8759a2af 100644
--- a/src/app/copilot/analytics/loading.tsx
+++ b/src/app/copilot/analytics/loading.tsx
@@ -1,40 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function CopilotAnalyticsLoading() {
-  return (
-    <div className="space-y-6">
-      {/* Language + Editor charts side by side */}
-      <div className="grid gap-6 lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <Skeleton className="h-6 w-36" />
-            <Skeleton className="mt-1 h-4 w-56" />
-          </CardHeader>
-          <CardContent>
-            <Skeleton className="min-h-[300px] w-full rounded-md" />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <Skeleton className="h-6 w-32" />
-            <Skeleton className="mt-1 h-4 w-48" />
-          </CardHeader>
-          <CardContent>
-            <Skeleton className="min-h-[300px] w-full rounded-md" />
-          </CardContent>
-        </Card>
-      </div>
-      {/* Activity distribution chart */}
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-44" />
-          <Skeleton className="mt-1 h-4 w-64" />
-        </CardHeader>
-        <CardContent>
-          <Skeleton className="min-h-[300px] w-full rounded-md" />
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING ANALYTICS" />;
 }
diff --git a/src/app/copilot/billing/loading.tsx b/src/app/copilot/billing/loading.tsx
index b9f846e3..ec8c7fd6 100644
--- a/src/app/copilot/billing/loading.tsx
+++ b/src/app/copilot/billing/loading.tsx
@@ -1,42 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function CopilotBillingLoading() {
-  return (
-    <div className="space-y-6">
-      {/* KPI cards skeleton */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <Card key={i}>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <Skeleton className="h-4 w-28" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-8 w-20" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-      {/* Billing trend chart skeleton */}
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-36" />
-          <Skeleton className="mt-1 h-4 w-64" />
-        </CardHeader>
-        <CardContent>
-          <Skeleton className="min-h-[300px] w-full rounded-md" />
-        </CardContent>
-      </Card>
-      {/* Cost utilization chart skeleton */}
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-40" />
-          <Skeleton className="mt-1 h-4 w-56" />
-        </CardHeader>
-        <CardContent>
-          <Skeleton className="min-h-[300px] w-full rounded-md" />
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING BILLING" />;
 }
diff --git a/src/app/copilot/billing/page.tsx b/src/app/copilot/billing/page.tsx
index a302ae16..feaf91df 100644
--- a/src/app/copilot/billing/page.tsx
+++ b/src/app/copilot/billing/page.tsx
@@ -42,7 +42,7 @@ export default async function CopilotBillingPage() {
     <div className="space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold">Billing Overview</h2>
+        <h2 className="text-lg font-medium">Billing Overview</h2>
       </div>
 
       {/* KPI Cards */}
@@ -51,25 +51,25 @@ export default async function CopilotBillingPage() {
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Current Month Cost</CardTitle>
           </CardHeader>
-          <CardContent><div className="text-2xl font-bold">{formatCurrency(currentMonth.totalCostCents)}</div></CardContent>
+          <CardContent><div className="text-2xl font-mono">{formatCurrency(currentMonth.totalCostCents)}</div></CardContent>
         </Card>
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Cumulative Cost</CardTitle>
           </CardHeader>
-          <CardContent><div className="text-2xl font-bold">{formatCurrency(data.cumulativeCostCents)}</div></CardContent>
+          <CardContent><div className="text-2xl font-mono">{formatCurrency(data.cumulativeCostCents)}</div></CardContent>
         </Card>
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Cost / Active User</CardTitle>
           </CardHeader>
-          <CardContent><div className="text-2xl font-bold">{formatCurrency(currentMonth.costPerActiveUserCents)}</div></CardContent>
+          <CardContent><div className="text-2xl font-mono">{formatCurrency(currentMonth.costPerActiveUserCents)}</div></CardContent>
         </Card>
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">Plan</CardTitle>
           </CardHeader>
-          <CardContent><div className="text-2xl font-bold capitalize">{currentMonth.planType}</div><p className="text-xs text-muted-foreground">{currentMonth.totalSeats} total / {currentMonth.activeSeats} active seats</p></CardContent>
+          <CardContent><div className="text-2xl font-mono capitalize">{currentMonth.planType}</div><p className="text-xs text-muted-foreground">{currentMonth.totalSeats} total / {currentMonth.activeSeats} active seats</p></CardContent>
         </Card>
       </div>
 
diff --git a/src/app/copilot/layout.tsx b/src/app/copilot/layout.tsx
index b91f8993..e2c9baa6 100644
--- a/src/app/copilot/layout.tsx
+++ b/src/app/copilot/layout.tsx
@@ -15,7 +15,7 @@ export default async function CopilotLayout({
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold tracking-tight">Copilot</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Copilot</h1>
         <p className="text-muted-foreground">
           GitHub Copilot usage analytics, seat management, and billing insights.
         </p>
diff --git a/src/app/copilot/loading.tsx b/src/app/copilot/loading.tsx
index 5787ef21..60d15c69 100644
--- a/src/app/copilot/loading.tsx
+++ b/src/app/copilot/loading.tsx
@@ -1,32 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function CopilotOverviewLoading() {
-  return (
-    <div className="space-y-6">
-      {/* KPI cards skeleton */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
-        {Array.from({ length: 5 }).map((_, i) => (
-          <Card key={i}>
-            <CardHeader className="pb-2">
-              <Skeleton className="h-4 w-24" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-8 w-16" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-      {/* Chart skeleton */}
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-32" />
-          <Skeleton className="mt-1 h-4 w-64" />
-        </CardHeader>
-        <CardContent>
-          <Skeleton className="min-h-[300px] w-full rounded-md" />
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING COPILOT" />;
 }
diff --git a/src/app/copilot/seats/[userId]/page.tsx b/src/app/copilot/seats/[userId]/page.tsx
index ec675c9d..27997674 100644
--- a/src/app/copilot/seats/[userId]/page.tsx
+++ b/src/app/copilot/seats/[userId]/page.tsx
@@ -62,7 +62,7 @@ export default async function CopilotSeatDetailPage({
                     <Link href={`/users`} className="underline">{seat.matchedUserName}</Link>
                   </span>
                 ) : (
-                  <span className="text-sm text-amber-600">Unmatched</span>
+                  <span className="text-sm text-warning">Unmatched</span>
                 )}
               </div>
             </div>
diff --git a/src/app/copilot/seats/loading.tsx b/src/app/copilot/seats/loading.tsx
index 120db6fe..004f52b3 100644
--- a/src/app/copilot/seats/loading.tsx
+++ b/src/app/copilot/seats/loading.tsx
@@ -1,33 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function CopilotSeatsLoading() {
-  return (
-    <Card>
-      <CardHeader>
-        <Skeleton className="h-6 w-40" />
-        <Skeleton className="mt-1 h-4 w-64" />
-      </CardHeader>
-      <CardContent>
-        {/* Table header */}
-        <div className="flex gap-4 border-b pb-3">
-          <Skeleton className="h-4 w-32" />
-          <Skeleton className="h-4 w-24" />
-          <Skeleton className="h-4 w-28" />
-          <Skeleton className="h-4 w-20" />
-          <Skeleton className="h-4 w-24" />
-        </div>
-        {/* Table rows */}
-        {Array.from({ length: 5 }).map((_, i) => (
-          <div key={i} className="flex gap-4 border-b py-3">
-            <Skeleton className="h-4 w-32" />
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-4 w-28" />
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-4 w-24" />
-          </div>
-        ))}
-      </CardContent>
-    </Card>
-  );
+  return <LoadingState label="LOADING SEATS" />;
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 9ed3eef4..685d5b92 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,6 +4,17 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* =============================================================================
+   NOTHING DESIGN SYSTEM — token layer for AI Developer Hub (spec 028).
+   shadcn semantic var names are kept and re-pointed onto Nothing values so every
+   primitive keeps resolving. Light is the :root default (printed-manual canvas),
+   dark is the .dark override (instrument panel) — next-themes attribute="class".
+
+   Collision note: shadcn's --accent is a NEUTRAL hover background, NOT the loud
+   Nothing red. The single red interrupt + all error/destructive states route
+   through --destructive (#d71921). Status greens/ambers are value-text-only.
+   ============================================================================= */
+
 @theme inline {
     --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);
@@ -12,6 +23,13 @@
     --radius-2xl: calc(var(--radius) + 8px);
     --radius-3xl: calc(var(--radius) + 12px);
     --radius-4xl: calc(var(--radius) + 16px);
+
+    /* Three-family Nothing stack, chained to the next/font-injected variables
+       (font-specific names dodge a circular --font-sans: var(--font-sans)). */
+    --font-sans: var(--font-space-grotesk), "DM Sans", system-ui, sans-serif;
+    --font-mono: var(--font-space-mono), "JetBrains Mono", "SF Mono", ui-monospace, monospace;
+    --font-display: var(--font-doto), var(--font-space-mono), monospace;
+
     --color-background: var(--background);
     --color-foreground: var(--foreground);
     --color-card: var(--card);
@@ -27,6 +45,7 @@
     --color-accent: var(--accent);
     --color-accent-foreground: var(--accent-foreground);
     --color-destructive: var(--destructive);
+    --color-destructive-subtle: var(--destructive-subtle);
     --color-border: var(--border);
     --color-input: var(--input);
     --color-ring: var(--ring);
@@ -43,75 +62,113 @@
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
+
+    /* Nothing extras shadcn lacks: 100% ink, 40% faint, status, segmented track. */
+    --color-ink: var(--ink);
+    --color-faint: var(--faint);
+    --color-success: var(--success);
+    --color-warning: var(--warning);
+    --color-seg-empty: var(--seg-empty);
+    --color-border-strong: var(--input);
+    --color-interactive: var(--interactive);
 }
 
+/* ---------------------------------------------------------------------------
+   LIGHT — :root default. Nothing "printed manual".
+   --------------------------------------------------------------------------- */
 :root {
-    --radius: 0.625rem;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.78 0.19 120);
-    --primary-foreground: oklch(0.18 0 0);
-    --secondary: oklch(0.96 0 0);
-    --secondary-foreground: oklch(0.20 0 0);
-    --muted: oklch(0.96 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.95 0.03 120);
-    --accent-foreground: oklch(0.20 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.91 0 0);
-    --input: oklch(0.91 0 0);
-    --ring: oklch(0.78 0.19 120);
-    --chart-1: oklch(0.78 0.19 120);
-    --chart-2: oklch(0.55 0.15 250);
-    --chart-3: oklch(0.65 0.18 45);
-    --chart-4: oklch(0.50 0.15 300);
-    --chart-5: oklch(0.60 0.12 180);
-    --sidebar: oklch(0.98 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.78 0.19 120);
-    --sidebar-primary-foreground: oklch(0.18 0 0);
-    --sidebar-accent: oklch(0.96 0 0);
-    --sidebar-accent-foreground: oklch(0.20 0 0);
-    --sidebar-border: oklch(0.91 0 0);
-    --sidebar-ring: oklch(0.78 0.19 120);
+    --radius: 0.5rem; /* technical scale; cards override to 14px in card.tsx */
+
+    --background: #f5f5f5;          /* Nothing --black (light canvas) */
+    --foreground: #1a1a1a;          /* --text-primary */
+    --card: #ffffff;                /* --surface */
+    --card-foreground: #1a1a1a;
+    --popover: #f0f0f0;             /* --surface-raised (dropdowns/popovers) */
+    --popover-foreground: #1a1a1a;
+    --primary: #000000;             /* --text-display — greyscale fill, NOT a hue */
+    --primary-foreground: #f5f5f5;  /* --black */
+    --secondary: #f0f0f0;           /* --surface-raised */
+    --secondary-foreground: #1a1a1a;
+    --muted: #ffffff;               /* --surface */
+    --muted-foreground: #666666;    /* --text-secondary */
+    --accent: #f0f0f0;              /* shadcn hover bg — NEUTRAL surface-raised */
+    --accent-foreground: #1a1a1a;
+    --destructive: #d71921;         /* THE one interrupt + all errors */
+    --border: #e8e8e8;              /* --border (dividers) */
+    --input: #cccccc;               /* --border-visible (interactive edges) */
+    --ring: #d71921;                /* focus = red, passes both modes */
+    --chart-1: #1a1a1a;
+    --chart-2: #555555;
+    --chart-3: #888888;
+    --chart-4: #aaaaaa;
+    --chart-5: #c8c8c8;
+    --sidebar: #f5f5f5;             /* sidebar == canvas */
+    --sidebar-foreground: #1a1a1a;
+    --sidebar-primary: #000000;
+    --sidebar-primary-foreground: #f5f5f5;
+    --sidebar-accent: #f0f0f0;
+    --sidebar-accent-foreground: #000000;
+    --sidebar-border: #e8e8e8;
+    --sidebar-ring: #d71921;
+
+    /* Nothing extras */
+    --ink: #000000;                 /* --text-display (100%) */
+    --faint: #999999;               /* --text-disabled (40%) */
+    --success: #2e7d32;             /* darkened for ≥4.5:1 value text on light (see notes) */
+    --warning: #835f00;             /* darkened for ≥4.5:1 value text on light canvas (see notes) */
+    --seg-empty: #e0e0e0;
+    --destructive-subtle: rgba(215, 25, 33, 0.10);
+    --accent-subtle: rgba(215, 25, 33, 0.10);
+    --interactive: #007aff;
+
+    --font-ui: var(--font-sans);    /* mockup-vocabulary alias */
 }
 
+/* ---------------------------------------------------------------------------
+   DARK — .dark override. Nothing "instrument panel" (OLED black).
+   --------------------------------------------------------------------------- */
 .dark {
-    --background: oklch(0.16 0 0);
-    --foreground: oklch(0.97 0 0);
-    --card: oklch(0.21 0 0);
-    --card-foreground: oklch(0.98 0 0);
-    --popover: oklch(0.21 0 0);
-    --popover-foreground: oklch(0.98 0 0);
-    --primary: oklch(0.78 0.19 120);
-    --primary-foreground: oklch(0.18 0 0);
-    --secondary: oklch(0.25 0 0);
-    --secondary-foreground: oklch(0.98 0 0);
-    --muted: oklch(0.25 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.25 0.03 120);
-    --accent-foreground: oklch(0.98 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.78 0.19 120);
-    --chart-1: oklch(0.80 0.19 120);
-    --chart-2: oklch(0.65 0.17 250);
-    --chart-3: oklch(0.72 0.18 45);
-    --chart-4: oklch(0.62 0.16 300);
-    --chart-5: oklch(0.68 0.14 180);
-    --sidebar: oklch(0.21 0 0);
-    --sidebar-foreground: oklch(0.98 0 0);
-    --sidebar-primary: oklch(0.78 0.19 120);
-    --sidebar-primary-foreground: oklch(0.18 0 0);
-    --sidebar-accent: oklch(0.25 0 0);
-    --sidebar-accent-foreground: oklch(0.98 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.78 0.19 120);
+    --background: #000000;
+    --foreground: #e8e8e8;
+    --card: #111111;
+    --card-foreground: #e8e8e8;
+    --popover: #1a1a1a;
+    --popover-foreground: #e8e8e8;
+    --primary: #ffffff;
+    --primary-foreground: #000000;
+    --secondary: #1a1a1a;
+    --secondary-foreground: #e8e8e8;
+    --muted: #111111;
+    --muted-foreground: #999999;
+    --accent: #1a1a1a;              /* neutral hover */
+    --accent-foreground: #e8e8e8;
+    --destructive: #d71921;
+    --border: #222222;
+    --input: #333333;
+    --ring: #d71921;
+    --chart-1: #ffffff;
+    --chart-2: #cccccc;
+    --chart-3: #999999;
+    --chart-4: #666666;
+    --chart-5: #444444;
+    --sidebar: #000000;
+    --sidebar-foreground: #e8e8e8;
+    --sidebar-primary: #ffffff;
+    --sidebar-primary-foreground: #000000;
+    --sidebar-accent: #1a1a1a;
+    --sidebar-accent-foreground: #ffffff;
+    --sidebar-border: #222222;
+    --sidebar-ring: #d71921;
+
+    /* Nothing extras (spec values pass on black) */
+    --ink: #ffffff;
+    --faint: #666666;
+    --success: #4a9e5c;
+    --warning: #d4a843;
+    --seg-empty: #222222;
+    --destructive-subtle: rgba(215, 25, 33, 0.15);
+    --accent-subtle: rgba(215, 25, 33, 0.15);
+    --interactive: #5b9bf6;
 }
 
 @layer base {
@@ -119,10 +176,50 @@
     @apply border-border outline-ring/50;
     }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans antialiased;
     }
 }
 
+/* ---------------------------------------------------------------------------
+   Namespaced Nothing helpers (nd-*) — collision-safe globals for idioms that
+   are awkward as pure Tailwind utilities. Component classes live as React
+   components; only these few mechanical bits are global.
+   --------------------------------------------------------------------------- */
+@layer components {
+  /* Dot-matrix motif — subtle background texture for empty/auth/hero surfaces. */
+  .nd-dot-grid {
+    background-image: radial-gradient(
+      circle,
+      var(--input) 1px,
+      transparent 1px
+    );
+    background-size: 16px 16px;
+  }
+
+  /* Hardware-style segmented spinner — replaces skeleton shimmer / animate-pulse. */
+  .nd-seg-spinner {
+    display: inline-flex;
+    gap: 3px;
+    align-items: center;
+  }
+  .nd-seg-spinner > i {
+    width: 4px;
+    height: 12px;
+    background: var(--ink);
+    opacity: 0.2;
+    animation: nd-seg-pulse 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
+  }
+  .nd-seg-spinner > i:nth-child(2) { animation-delay: 0.12s; }
+  .nd-seg-spinner > i:nth-child(3) { animation-delay: 0.24s; }
+  .nd-seg-spinner > i:nth-child(4) { animation-delay: 0.36s; }
+  .nd-seg-spinner > i:nth-child(5) { animation-delay: 0.48s; }
+}
+
+@keyframes nd-seg-pulse {
+  0%, 100% { opacity: 0.18; }
+  45% { opacity: 1; }
+}
+
 /* ── Reduced Motion Kill-Switch ── */
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/src/app/invoices/bulk/bulk-upload-form.tsx b/src/app/invoices/bulk/bulk-upload-form.tsx
index 5038015a..4016e056 100644
--- a/src/app/invoices/bulk/bulk-upload-form.tsx
+++ b/src/app/invoices/bulk/bulk-upload-form.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useRef, useMemo, useCallback } from "react";
-import { toast } from "sonner";
 import { Loader2, Upload, ArrowLeft, AlertTriangle } from "lucide-react";
 import {
   useReactTable,
@@ -27,6 +26,7 @@ import {
   type BulkSaveOutcome,
 } from "@/actions/invoices";
 import { cn } from "@/lib/utils";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -121,6 +121,7 @@ export function BulkUploadForm() {
   const [rows, setRows] = useState<EditableRow[]>([]);
   const [outcomes, setOutcomes] = useState<BulkSaveOutcome[]>([]);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const status = useInlineStatus();
 
   // ---- row mutation helper ----
   const updateRow = useCallback(
@@ -154,7 +155,7 @@ export function BulkUploadForm() {
           const dup = row.original.duplicateType;
           if (dup === "db-duplicate") {
             return (
-              <Badge variant="outline" className="text-amber-600">
+              <Badge variant="outline" className="text-warning">
                 <AlertTriangle className="mr-1 size-3" />
                 Duplicate — will be skipped
               </Badge>
@@ -162,7 +163,7 @@ export function BulkUploadForm() {
           }
           if (dup === "within-batch-duplicate") {
             return (
-              <Badge variant="outline" className="text-amber-600">
+              <Badge variant="outline" className="text-warning">
                 <AlertTriangle className="mr-1 size-3" />
                 Within-batch duplicate — will be skipped
               </Badge>
@@ -183,7 +184,7 @@ export function BulkUploadForm() {
               onChange={(e) =>
                 updateRow(row.index, "invoiceNumber", e.target.value)
               }
-              className={cn(lowConf && "border-amber-500")}
+              className={cn(lowConf && "border-warning")}
               aria-label={`Invoice number for ${row.original.filename}`}
               disabled={isDuplicate}
             />
@@ -202,7 +203,7 @@ export function BulkUploadForm() {
               onChange={(e) =>
                 updateRow(row.index, "invoiceDate", e.target.value)
               }
-              className={cn(lowConf && "border-amber-500")}
+              className={cn(lowConf && "border-warning")}
               aria-label={`Invoice date for ${row.original.filename}`}
               disabled={isDuplicate}
             />
@@ -224,7 +225,7 @@ export function BulkUploadForm() {
               onChange={(e) =>
                 updateRow(row.index, "amountDollars", e.target.value)
               }
-              className={cn(lowConf && "border-amber-500")}
+              className={cn(lowConf && "border-warning")}
               aria-label={`Amount in dollars for ${row.original.filename}`}
               disabled={isDuplicate}
             />
@@ -242,7 +243,7 @@ export function BulkUploadForm() {
             <Input
               value={row.original.vendor}
               onChange={(e) => updateRow(row.index, "vendor", e.target.value)}
-              className={cn(lowOrNull && "border-amber-500")}
+              className={cn(lowOrNull && "border-warning")}
               aria-label={`Vendor for ${row.original.filename}`}
               disabled={isDuplicate}
             />
@@ -270,7 +271,7 @@ export function BulkUploadForm() {
   // ---- upload handler ----
   async function handleUpload(file: File) {
     if (file.size > MAX_FILE_SIZE) {
-      toast.error("File too large. Maximum size is 50 MB.");
+      status.error("File too large (max 50 MB)");
       return;
     }
 
@@ -342,14 +343,12 @@ export function BulkUploadForm() {
         skipped.length > 0
           ? ` (${skipped.length} non-PDF files skipped)`
           : "";
-      toast.success(
-        `Extracted ${drafts.length} invoice(s). Please review.${skippedMsg}`,
-      );
+      status.ok(`Extracted ${drafts.length} — review${skippedMsg}`);
     } catch (err) {
       const message = err instanceof Error ? err.message : "Upload failed";
       setErrorMessage(message);
       setState("error");
-      toast.error(message);
+      status.error(message);
     }
   }
 
@@ -366,9 +365,7 @@ export function BulkUploadForm() {
           (!r.invoiceNumber || !r.invoiceDate || !r.amountDollars),
       );
       if (incomplete.length > 0) {
-        toast.error(
-          `${incomplete.length} row(s) have missing required fields.`,
-        );
+        status.error(`${incomplete.length} row(s) missing fields`);
         setState("reviewing");
         return;
       }
@@ -394,12 +391,12 @@ export function BulkUploadForm() {
 
       setOutcomes(result.data);
       setState("done");
-      toast.success("Invoices saved successfully.");
+      status.ok("Saved");
     } catch (err) {
       const message = err instanceof Error ? err.message : "Save failed";
       setErrorMessage(message);
       setState("error");
-      toast.error(message);
+      status.error(message);
     }
   }
 
@@ -442,6 +439,7 @@ export function BulkUploadForm() {
             <Upload className="mr-2 size-4" />
             Upload Zip
           </Button>
+          <StatusText status={status.status} />
         </div>
       )}
 
@@ -507,7 +505,10 @@ export function BulkUploadForm() {
             </Table>
           </div>
 
-          <Button onClick={handleSave}>Save All</Button>
+          <div className="flex items-center gap-3">
+            <Button onClick={handleSave}>Save All</Button>
+            <StatusText status={status.status} />
+          </div>
         </div>
       )}
 
@@ -528,7 +529,7 @@ export function BulkUploadForm() {
               {savedOutcomes.length} invoice(s) saved
             </Badge>
             {skippedOutcomes.length > 0 && (
-              <Badge variant="outline" className="text-amber-600">
+              <Badge variant="outline" className="text-warning">
                 {skippedOutcomes.length} invoice(s) skipped (duplicate)
               </Badge>
             )}
@@ -580,7 +581,7 @@ export function BulkUploadForm() {
                     <TableCell>—</TableCell>
                     <TableCell>—</TableCell>
                     <TableCell>
-                      <Badge variant="outline" className="text-amber-600">
+                      <Badge variant="outline" className="text-warning">
                         <AlertTriangle className="mr-1 size-3" />
                         Skipped — {outcome.skipReason === "within-batch-duplicate"
                           ? "within-batch duplicate"
diff --git a/src/app/invoices/bulk/page.tsx b/src/app/invoices/bulk/page.tsx
index b1461589..b31b9d22 100644
--- a/src/app/invoices/bulk/page.tsx
+++ b/src/app/invoices/bulk/page.tsx
@@ -8,7 +8,7 @@ export default async function BulkUploadPage() {
 
   return (
     <div className="space-y-6">
-      <h1 className="text-3xl font-bold tracking-tight">Bulk Upload</h1>
+      <h1 className="text-3xl font-medium tracking-tight text-ink">Bulk Upload</h1>
       <p className="text-muted-foreground">
         Upload a ZIP file containing PDF invoices. Each PDF will be extracted
         and parsed automatically so you can review the results before saving.
diff --git a/src/app/invoices/loading.tsx b/src/app/invoices/loading.tsx
index 9011da02..fc3e0c42 100644
--- a/src/app/invoices/loading.tsx
+++ b/src/app/invoices/loading.tsx
@@ -1,37 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function InvoicesLoading() {
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <Skeleton className="h-9 w-24" />
-        <Skeleton className="h-10 w-36" />
-      </div>
-      <Card>
-        <CardHeader>
-          <div className="grid grid-cols-5 gap-4">
-            <Skeleton className="h-5 w-28" />
-            <Skeleton className="h-5 w-16" />
-            <Skeleton className="h-5 w-20" />
-            <Skeleton className="h-5 w-24" />
-            <Skeleton className="h-5 w-20" />
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="grid grid-cols-5 gap-4">
-                <Skeleton className="h-8 w-full" />
-                <Skeleton className="h-8 w-full" />
-                <Skeleton className="h-8 w-full" />
-                <Skeleton className="h-8 w-full" />
-                <Skeleton className="h-8 w-8" />
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING INVOICES" />;
 }
diff --git a/src/app/invoices/new/invoice-upload-form.tsx b/src/app/invoices/new/invoice-upload-form.tsx
index 2127e1d1..dbf64cd2 100644
--- a/src/app/invoices/new/invoice-upload-form.tsx
+++ b/src/app/invoices/new/invoice-upload-form.tsx
@@ -4,7 +4,6 @@ import { useState, useRef, useCallback } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { Upload, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -35,6 +34,7 @@ import {
   overwriteInvoice,
 } from "@/actions/invoices";
 import { cn, formatCurrency } from "@/lib/utils";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import type { UseFormRegisterReturn } from "react-hook-form";
 
 type UploadState = "idle" | "uploading" | "extracting" | "extracted" | "error";
@@ -118,7 +118,7 @@ function ConfidenceInput({
               id={id}
               type={type}
               {...mergedRegisterProps}
-              className={cn(low ? "border-amber-400" : "")}
+              className={cn(low ? "border-warning" : "")}
               placeholder={placeholder}
               step={step}
               min={min}
@@ -141,6 +141,8 @@ export function InvoiceUploadForm() {
   const [duplicateInfo, setDuplicateInfo] = useState<DuplicateInfo | null>(null);
   const [duplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
   const [isOverwriting, setIsOverwriting] = useState(false);
+  const status = useInlineStatus();
+  const dupStatus = useInlineStatus();
 
   const {
     register,
@@ -177,7 +179,7 @@ export function InvoiceUploadForm() {
     if (!file) return;
 
     if (file.type !== "application/pdf") {
-      toast.error("Only PDF files are accepted.");
+      status.error("PDF only");
       return;
     }
 
@@ -207,7 +209,7 @@ export function InvoiceUploadForm() {
       const result = await extractInvoiceFieldsAction({ objectKey });
       if (!result.success) {
         setUploadState("error");
-        toast.error(result.error);
+        status.error(result.error);
         return;
       }
 
@@ -233,7 +235,7 @@ export function InvoiceUploadForm() {
     } catch (err) {
       const message = err instanceof Error ? err.message : "Upload failed";
       setUploadState("error");
-      toast.error(message);
+      status.error(message);
     }
   };
 
@@ -249,7 +251,8 @@ export function InvoiceUploadForm() {
     setExtractionResult(null);
     setDuplicateInfo(null);
     setDuplicateDialogOpen(false);
-    toast.info("Upload skipped — duplicate invoice cancelled.");
+    dupStatus.clear();
+    status.info("Skipped");
   };
 
   // T009: Overwrite existing action
@@ -261,7 +264,7 @@ export function InvoiceUploadForm() {
       const formValues = watch();
       const parsedAmount = parseFloat(amountDollars);
       if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) {
-        toast.error("Please enter a valid positive amount before overwriting.");
+        dupStatus.error("Invalid amount");
         setIsOverwriting(false);
         return;
       }
@@ -278,20 +281,20 @@ export function InvoiceUploadForm() {
       });
 
       if (!result.success) {
-        toast.error(result.error);
+        dupStatus.error(result.error);
         return;
       }
 
+      // Surface the budget-link caveat on the page-level status (the dialog is
+      // closing in `finally`) rather than losing it on navigation.
       if (result.linkWarning) {
-        toast.warning("Invoice overwritten.", { description: result.linkWarning });
-      } else if (result.linkedPeriodLabel) {
-        toast.success(`Invoice overwritten. Linked to ${result.linkedPeriodLabel}.`);
-      } else {
-        toast.success("Invoice overwritten successfully.");
+        status.set("info", result.linkWarning, { autoClearMs: 0 });
+        return;
       }
+      // Clean overwrite navigates to /invoices — navigation is the feedback.
       router.push("/invoices");
     } catch {
-      toast.error("Failed to overwrite invoice.");
+      dupStatus.error("Overwrite failed");
     } finally {
       setIsOverwriting(false);
       setDuplicateDialogOpen(false);
@@ -313,15 +316,17 @@ export function InvoiceUploadForm() {
 
     const result = await saveInvoice(submitData);
     if (!result.success) {
-      toast.error(result.error);
+      status.error(result.error);
       return;
     }
-    if (result.linkWarning) {
-      toast.warning("Invoice saved.", { description: result.linkWarning });
-    } else if (result.linkedPeriodLabel) {
-      toast.success(`Invoice saved. Linked to ${result.linkedPeriodLabel}.`);
-    } else {
-      toast.success("Invoice saved to archive.");
+    // Surface budget-link / filter caveats inline (the toast that used to carry
+    // these was removed in the redesign) and stay on the page so the notice is
+    // read instead of lost on navigation. A clean save navigates — navigation
+    // is the feedback.
+    const notice = result.linkWarning ?? result.filterWarning;
+    if (notice) {
+      status.set("info", notice, { autoClearMs: 0 });
+      return;
     }
     router.push("/invoices");
   };
@@ -365,6 +370,7 @@ export function InvoiceUploadForm() {
             className="hidden"
             onChange={handleFileChange}
           />
+          {!showForm && <StatusText status={status.status} />}
         </div>
       </div>
 
@@ -419,7 +425,7 @@ export function InvoiceUploadForm() {
                         confidence?.amountCents,
                         amountDollars || undefined
                       )
-                        ? "border-amber-400"
+                        ? "border-warning"
                         : ""
                     )}
                   />
@@ -447,16 +453,19 @@ export function InvoiceUploadForm() {
             error={errors.vendor?.message}
           />
 
-          <Button type="submit" disabled={isSubmitting || !blobPathname || !!duplicateInfo?.isDuplicate}>
-            {isSubmitting ? (
-              <>
-                <Loader2 className="mr-2 size-4 animate-spin" />
-                Saving…
-              </>
-            ) : (
-              "Save to Archive"
-            )}
-          </Button>
+          <div className="flex items-center gap-3">
+            <Button type="submit" disabled={isSubmitting || !blobPathname || !!duplicateInfo?.isDuplicate}>
+              {isSubmitting ? (
+                <>
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  Saving…
+                </>
+              ) : (
+                "Save to Archive"
+              )}
+            </Button>
+            <StatusText status={status.status} />
+          </div>
         </form>
       )}
 
@@ -489,7 +498,8 @@ export function InvoiceUploadForm() {
               </div>
             </AlertDialogDescription>
           </AlertDialogHeader>
-          <AlertDialogFooter>
+          <AlertDialogFooter className="items-center">
+            <StatusText status={dupStatus.status} className="mr-auto" />
             <AlertDialogCancel onClick={handleSkipDuplicate} disabled={isOverwriting}>
               Skip (Cancel Upload)
             </AlertDialogCancel>
diff --git a/src/app/invoices/new/page.tsx b/src/app/invoices/new/page.tsx
index f1c948e4..1ad118f7 100644
--- a/src/app/invoices/new/page.tsx
+++ b/src/app/invoices/new/page.tsx
@@ -9,7 +9,7 @@ export default async function InvoicesNewPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold tracking-tight">Upload Invoice</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Upload Invoice</h1>
         <p className="text-muted-foreground">
           Upload a PDF invoice to auto-extract and archive it.
         </p>
diff --git a/src/app/invoices/page.tsx b/src/app/invoices/page.tsx
index 953e0fad..b3a463ec 100644
--- a/src/app/invoices/page.tsx
+++ b/src/app/invoices/page.tsx
@@ -30,7 +30,7 @@ export default async function InvoicesPage() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-3xl font-bold tracking-tight">Invoices</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Invoices</h1>
         <div className="flex items-center gap-2">
           <Button variant="outline" asChild>
             <Link href="/invoices/bulk">Bulk Upload</Link>
diff --git a/src/app/invoices/sync-results-dialog.tsx b/src/app/invoices/sync-results-dialog.tsx
index 1e151c26..bfb9a25d 100644
--- a/src/app/invoices/sync-results-dialog.tsx
+++ b/src/app/invoices/sync-results-dialog.tsx
@@ -35,24 +35,23 @@ const outcomeBadgeConfig: Record<
 > = {
   verified: {
     label: "Verified",
-    className: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+    className: "border-success text-success",
   },
   newly_linked: {
     label: "Newly Linked",
-    className: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
+    className: "border-border text-foreground",
   },
   corrected: {
     label: "Corrected",
-    className: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200",
+    className: "border-warning text-warning",
   },
   unresolvable: {
     label: "Unresolvable",
-    className: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+    className: "border-warning text-warning",
   },
   error: {
     label: "Error",
-    className:
-      "bg-destructive text-white dark:bg-destructive/60",
+    className: "border-destructive text-destructive",
   },
 };
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1c60e9ae..f29397b5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,22 +1,39 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Space_Grotesk, Space_Mono, Doto } from "next/font/google";
 import { headers } from "next/headers";
 import { auth } from "@/lib/auth";
 import { isPublicPath } from "@/lib/routes";
-import {
-  SidebarProvider,
-  SidebarInset,
-  SidebarTrigger,
-} from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/app-sidebar";
 import { ThemeProvider } from "@/components/theme-provider";
 import { SessionProvider } from "@/components/session-provider";
-import { Toaster } from "@/components/ui/sonner";
 import { getActiveAlerts } from "@/actions/alerts";
 import { AlertBanner } from "@/components/alert-banner";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+// Nothing three-family stack — self-hosted via next/font (auto fallback metrics),
+// NOT the mockup's render-blocking Google @import. Space Grotesk is the UI/body
+// default and the only preloaded family; Space Mono (data/labels) and Doto
+// (36px+ hero only) are loaded but not preloaded.
+const spaceGrotesk = Space_Grotesk({
+  subsets: ["latin"],
+  variable: "--font-space-grotesk",
+  display: "swap",
+  preload: true,
+});
+const spaceMono = Space_Mono({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  variable: "--font-space-mono",
+  display: "swap",
+  preload: false,
+});
+const doto = Doto({
+  subsets: ["latin"],
+  variable: "--font-doto",
+  display: "swap",
+  preload: false,
+});
+
 export const metadata: Metadata = {
   title: "AI Developer Hub",
   description: "AI Tool Access & Budget Tracker",
@@ -37,7 +54,9 @@ export default async function RootLayout({
 
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body
+        className={`${spaceGrotesk.variable} ${spaceMono.variable} ${doto.variable} font-sans antialiased`}
+      >
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
@@ -46,23 +65,21 @@ export default async function RootLayout({
         >
           <SessionProvider session={session}>
             {showSidebar ? (
-              <SidebarProvider>
+              <div className="min-h-screen md:grid md:grid-cols-[248px_1fr]">
                 <AppSidebar
                   userName={session?.user?.name ?? null}
                   userRole={session?.user?.role ?? null}
                 />
-                <SidebarInset>
-                  <header className="flex h-14 items-center gap-2 border-b px-4">
-                    <SidebarTrigger />
-                  </header>
+                <div className="flex min-w-0 flex-col">
                   <AlertBanner alerts={alerts} />
-                  <main className="flex-1 p-4 sm:p-6">{children}</main>
-                </SidebarInset>
-              </SidebarProvider>
+                  <main className="mx-auto w-full max-w-[1280px] flex-1 px-5 py-6 sm:px-8 sm:py-10">
+                    {children}
+                  </main>
+                </div>
+              </div>
             ) : (
               children
             )}
-            <Toaster />
           </SessionProvider>
         </ThemeProvider>
       </body>
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index f5d3bc42..d566cd60 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -1,35 +1,5 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function DashboardLoading() {
-  return (
-    <div className="space-y-6">
-      <div>
-        <Skeleton className="h-9 w-48" />
-        <Skeleton className="mt-2 h-5 w-72" />
-      </div>
-
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
-        {Array.from({ length: 5 }).map((_, i) => (
-          <Card key={i}>
-            <CardContent className="pt-6">
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="mt-2 h-8 w-16" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Card key={i}>
-            <CardContent className="pt-6">
-              <Skeleton className="h-5 w-32" />
-              <Skeleton className="mt-2 h-4 w-48" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
+  return <LoadingState label="LOADING DASHBOARD" />;
 }
diff --git a/src/app/profile/profile-client.tsx b/src/app/profile/profile-client.tsx
index 2d3f0a3f..6eb36534 100644
--- a/src/app/profile/profile-client.tsx
+++ b/src/app/profile/profile-client.tsx
@@ -14,7 +14,7 @@ export function ProfileClient({ data, availableMonths }: ProfileClientProps) {
   return (
     <div className="mx-auto max-w-4xl space-y-6 p-6">
       <div>
-        <h1 className="text-2xl font-bold tracking-tight">My Profile</h1>
+        <h1 className="text-2xl font-medium tracking-tight text-ink">My Profile</h1>
         <p className="text-muted-foreground">
           Your personal information, assigned tools, and API costs.
         </p>
diff --git a/src/app/reports/layout.tsx b/src/app/reports/layout.tsx
index 15043d42..1b8b0bf2 100644
--- a/src/app/reports/layout.tsx
+++ b/src/app/reports/layout.tsx
@@ -15,7 +15,7 @@ export default async function ReportsLayout({
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Reports</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Reports</h1>
         <p className="text-muted-foreground">
           Tool adoption, license utilization, and spending insights
         </p>
diff --git a/src/app/reports/loading.tsx b/src/app/reports/loading.tsx
index 270f36f9..08b79c26 100644
--- a/src/app/reports/loading.tsx
+++ b/src/app/reports/loading.tsx
@@ -1,43 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function ReportsLoading() {
-  return (
-    <div className="space-y-6">
-      <div>
-        <Skeleton className="h-9 w-32" />
-        <Skeleton className="mt-2 h-5 w-64" />
-      </div>
-
-      {/* Tab navigation skeleton */}
-      <div className="flex gap-1">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <Skeleton key={i} className="h-9 w-24 rounded-md" />
-        ))}
-      </div>
-
-      {/* Summary cards skeleton */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <Card key={i}>
-            <CardContent className="pt-6">
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="mt-2 h-8 w-16" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {/* Chart placeholder skeleton */}
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-48" />
-          <Skeleton className="mt-1 h-4 w-64" />
-        </CardHeader>
-        <CardContent>
-          <Skeleton className="min-h-[300px] w-full rounded-md" />
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING REPORTS" />;
 }
diff --git a/src/app/requests/[id]/approval-dialog.tsx b/src/app/requests/[id]/approval-dialog.tsx
index 9cd12969..7ae59c33 100644
--- a/src/app/requests/[id]/approval-dialog.tsx
+++ b/src/app/requests/[id]/approval-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useState, useTransition } from "react";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   Dialog,
   DialogContent,
@@ -45,6 +45,7 @@ export function ApprovalDialog({
 
   const [bodyMd, setBodyMd] = useState(initialBody);
   const [pending, startTransition] = useTransition();
+  const status = useInlineStatus();
   const previewHtml = markdownToTeamsHtml(bodyMd);
 
   // Reset to the freshly-rendered template every time the dialog opens —
@@ -60,11 +61,10 @@ export function ApprovalDialog({
         bodyMd,
       });
       if (result.success) {
-        toast.success("Approval sent");
         onOpenChange(false);
         onSuccess();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -113,6 +113,7 @@ export function ApprovalDialog({
           <p className="mr-auto text-xs text-muted-foreground">
             Posts to channel thread + group chat.
           </p>
+          <StatusText status={status.status} />
           <Button variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>
             Cancel
           </Button>
diff --git a/src/app/requests/[id]/completion-dialog.tsx b/src/app/requests/[id]/completion-dialog.tsx
index fcb7802d..19cd4c1f 100644
--- a/src/app/requests/[id]/completion-dialog.tsx
+++ b/src/app/requests/[id]/completion-dialog.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState, useTransition } from "react";
 import { format } from "date-fns";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   Dialog,
   DialogContent,
@@ -57,6 +57,7 @@ export function CompletionDialog({
   const [assignedAt, setAssignedAt] = useState(today);
   const [bodyMd, setBodyMd] = useState("");
   const [pending, startTransition] = useTransition();
+  const status = useInlineStatus();
 
   // Reset when dialog opens
   useEffect(() => {
@@ -73,7 +74,7 @@ export function CompletionDialog({
 
   function handleAdvance() {
     if (!selectedTier) {
-      toast.error("Select a tier");
+      status.error("Select a tier");
       return;
     }
     // Render the template with the just-entered values bound.
@@ -94,11 +95,10 @@ export function CompletionDialog({
         bodyMd,
       });
       if (result.success) {
-        toast.success("Completion sent — assignment created");
         onOpenChange(false);
         onSuccess();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -202,6 +202,7 @@ export function CompletionDialog({
               ? "An assignment row will be created on send."
               : "Posts to channel + group chat. Completion is terminal."}
           </p>
+          <StatusText status={status.status} />
           {step === 1 ? (
             <>
               <Button variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>
diff --git a/src/app/requests/[id]/rejection-dialog.tsx b/src/app/requests/[id]/rejection-dialog.tsx
index ff259d51..01fa4254 100644
--- a/src/app/requests/[id]/rejection-dialog.tsx
+++ b/src/app/requests/[id]/rejection-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState, useTransition } from "react";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   Dialog,
   DialogContent,
@@ -25,6 +25,7 @@ interface Props {
 export function RejectionDialog({ open, onOpenChange, detail, onSuccess }: Props) {
   const [note, setNote] = useState("");
   const [pending, startTransition] = useTransition();
+  const status = useInlineStatus();
 
   // Clear the draft note every time the dialog opens — matches the
   // reset-on-open behavior of CompletionDialog and ApprovalDialog.
@@ -39,11 +40,10 @@ export function RejectionDialog({ open, onOpenChange, detail, onSuccess }: Props
         decisionNote: note.trim(),
       });
       if (result.success) {
-        toast.success("Rejection sent");
         onOpenChange(false);
         onSuccess();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -75,6 +75,7 @@ export function RejectionDialog({ open, onOpenChange, detail, onSuccess }: Props
           </p>
         </div>
         <DialogFooter>
+          <StatusText status={status.status} />
           <Button variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>
             Cancel
           </Button>
diff --git a/src/app/requests/[id]/request-detail-client.tsx b/src/app/requests/[id]/request-detail-client.tsx
index 5aa6d4e1..aaeede35 100644
--- a/src/app/requests/[id]/request-detail-client.tsx
+++ b/src/app/requests/[id]/request-detail-client.tsx
@@ -3,11 +3,20 @@
 import { Fragment, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { formatDistanceToNow, format } from "date-fns";
 import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   Card,
   CardContent,
@@ -58,22 +67,23 @@ export function RequestDetailClient({
   approver,
 }: Props) {
   const router = useRouter();
+  const status = useInlineStatus();
   const [approveOpen, setApproveOpen] = useState(false);
   const [completeOpen, setCompleteOpen] = useState(false);
   const [rejectOpen, setRejectOpen] = useState(false);
+  const [cancelOpen, setCancelOpen] = useState(false);
 
   const isPending = detail.status === "pending_review";
   const isApproved = detail.status === "approved";
   const canCancel = isPending || isApproved;
 
   async function handleCancel() {
-    if (!confirm("Cancel this request? Any pending approver activity will be discarded.")) return;
     const result = await cancelRequest({ requestId: detail.id });
     if (result.success) {
-      toast.success("Request cancelled");
+      setCancelOpen(false);
       router.refresh();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
@@ -87,7 +97,7 @@ export function RequestDetailClient({
           <ArrowLeft className="size-3" /> Back to requests
         </Link>
         <div className="flex items-center gap-3 mt-2">
-          <h1 className="text-3xl font-bold">
+          <h1 className="text-3xl font-medium tracking-tight text-ink">
             Request REQ-{String(detail.id).padStart(3, "0")}
           </h1>
           <Badge variant={STATUS_VARIANT[detail.status]}>
@@ -199,9 +209,10 @@ export function RequestDetailClient({
           <p className="text-sm text-muted-foreground">
             Any admin can act on this request. First-write-wins.
           </p>
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
+            <StatusText status={status.status} />
             {canCancel && (
-              <Button variant="ghost" onClick={handleCancel}>
+              <Button variant="ghost" onClick={() => setCancelOpen(true)}>
                 Cancel request
               </Button>
             )}
@@ -220,6 +231,24 @@ export function RequestDetailClient({
         </div>
       )}
 
+      <AlertDialog open={cancelOpen} onOpenChange={setCancelOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Cancel this request?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Any pending approver activity will be discarded.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <StatusText status={status.status} />
+            <AlertDialogCancel>Keep request</AlertDialogCancel>
+            <Button variant="destructive" onClick={handleCancel}>
+              Cancel request
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       {isPending && (
         <>
           <ApprovalDialog
diff --git a/src/app/requests/page.tsx b/src/app/requests/page.tsx
index bce0a756..32c51aab 100644
--- a/src/app/requests/page.tsx
+++ b/src/app/requests/page.tsx
@@ -9,7 +9,7 @@ export default async function RequestsPage() {
     <AuthGuard requiredRole="admin">
       <div className="space-y-6">
         <div>
-          <h1 className="text-3xl font-bold">License requests</h1>
+          <h1 className="text-3xl font-medium tracking-tight text-ink">License requests</h1>
           <p className="text-muted-foreground">
             Review and action license requests routed from Microsoft Forms via Power Automate.
             Any admin can claim any request — first to act wins.
diff --git a/src/app/settings/api-preview/page.tsx b/src/app/settings/api-preview/page.tsx
index 7763b5ad..606f3931 100644
--- a/src/app/settings/api-preview/page.tsx
+++ b/src/app/settings/api-preview/page.tsx
@@ -12,7 +12,7 @@ export default async function ApiPreviewPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-2xl font-semibold tracking-tight">API Preview</h2>
+        <h2 className="text-3xl font-medium tracking-tight text-ink">API Preview</h2>
         <p className="text-muted-foreground">
           Test the profile API endpoint and inspect responses.
         </p>
diff --git a/src/app/settings/appearance/page.tsx b/src/app/settings/appearance/page.tsx
index e0ab1efc..0e43a57b 100644
--- a/src/app/settings/appearance/page.tsx
+++ b/src/app/settings/appearance/page.tsx
@@ -23,7 +23,7 @@ export default function AppearancePage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Appearance</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Appearance</h1>
         <p className="text-muted-foreground">
           Customize the look and feel of the application.
         </p>
diff --git a/src/app/settings/ingestion/ingestion-filters-section.tsx b/src/app/settings/ingestion/ingestion-filters-section.tsx
index 186cec3b..577c6c01 100644
--- a/src/app/settings/ingestion/ingestion-filters-section.tsx
+++ b/src/app/settings/ingestion/ingestion-filters-section.tsx
@@ -2,8 +2,8 @@
 
 import { useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { Plus, Trash2, Pencil, Filter } from "lucide-react";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -24,6 +24,15 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   Table,
   TableBody,
@@ -101,6 +110,11 @@ export function IngestionFiltersSection({
   const [form, setForm] = useState<FormState>(defaultForm);
   const [isPending, startTransition] = useTransition();
   const [patternError, setPatternError] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<{
+    id: number;
+    name: string;
+  } | null>(null);
+  const status = useInlineStatus();
 
   function openCreate() {
     setEditingId(null);
@@ -154,11 +168,10 @@ export function IngestionFiltersSection({
           });
 
       if (result.success) {
-        toast.success(editingId ? "Filter updated" : "Filter created");
         setDialogOpen(false);
         router.refresh();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -169,22 +182,21 @@ export function IngestionFiltersSection({
       if (result.success) {
         router.refresh();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
 
-  function handleDelete(id: number, name: string) {
-    if (!confirm(`Delete filter "${name}"? Previously filtered invoices will remain unchanged.`)) {
-      return;
-    }
+  function confirmDelete() {
+    if (!deleteTarget) return;
     startTransition(async () => {
-      const result = await deleteIngestionFilter(id);
+      const result = await deleteIngestionFilter(deleteTarget.id);
       if (result.success) {
-        toast.success("Filter deleted");
+        status.ok("Deleted");
+        setDeleteTarget(null);
         router.refresh();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -198,10 +210,13 @@ export function IngestionFiltersSection({
             Rules that control which invoices are linked to budget periods.
           </p>
         </div>
-        <Button onClick={openCreate} size="sm">
-          <Plus className="mr-2 size-4" />
-          New Filter
-        </Button>
+        <div className="flex items-center gap-3">
+          <StatusText status={status.status} />
+          <Button onClick={openCreate} size="sm">
+            <Plus className="mr-2 size-4" />
+            New Filter
+          </Button>
+        </div>
       </div>
 
       {filters.length === 0 ? (
@@ -274,7 +289,7 @@ export function IngestionFiltersSection({
                         variant="ghost"
                         size="icon"
                         className="size-8 text-destructive"
-                        onClick={() => handleDelete(f.id, f.name)}
+                        onClick={() => setDeleteTarget({ id: f.id, name: f.name })}
                         disabled={isPending}
                       >
                         <Trash2 className="size-4" />
@@ -411,7 +426,8 @@ export function IngestionFiltersSection({
             </div>
           </div>
 
-          <DialogFooter>
+          <DialogFooter className="items-center">
+            <StatusText status={status.status} className="mr-auto" />
             <Button
               variant="outline"
               onClick={() => setDialogOpen(false)}
@@ -428,6 +444,35 @@ export function IngestionFiltersSection({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <AlertDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Delete filter &quot;{deleteTarget?.name}&quot;?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              Previously filtered invoices will remain unchanged.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="items-center">
+            <StatusText status={status.status} className="mr-auto" />
+            <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+            <Button
+              variant="destructive"
+              onClick={confirmDelete}
+              disabled={isPending}
+            >
+              {isPending ? "Deleting..." : "Delete"}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/src/app/settings/ingestion/page.tsx b/src/app/settings/ingestion/page.tsx
index fe61b67c..1dd78126 100644
--- a/src/app/settings/ingestion/page.tsx
+++ b/src/app/settings/ingestion/page.tsx
@@ -21,7 +21,7 @@ export default async function IngestionSettingsPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-2xl font-semibold tracking-tight">Ingestion</h2>
+        <h2 className="text-3xl font-medium tracking-tight text-ink">Ingestion</h2>
         <p className="text-muted-foreground">
           Manage filter rules and view the history of all ingested billing
           documents.
diff --git a/src/app/settings/integrations/github-integration-client.tsx b/src/app/settings/integrations/github-integration-client.tsx
index 84af13f5..aec290a7 100644
--- a/src/app/settings/integrations/github-integration-client.tsx
+++ b/src/app/settings/integrations/github-integration-client.tsx
@@ -2,8 +2,8 @@
 
 import { useState, useTransition } from "react";
 import { Github, Unplug, KeyRound } from "lucide-react";
-import { toast } from "sonner";
 import { formatDate } from "@/lib/utils";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -57,6 +57,7 @@ interface Props {
 export function GitHubIntegrationClient({ initialConnection }: Props) {
   const [connection, setConnection] = useState(initialConnection);
   const [isPending, startTransition] = useTransition();
+  const status = useInlineStatus();
 
   // Token validation state
   const [token, setToken] = useState("");
@@ -79,9 +80,9 @@ export function GitHubIntegrationClient({ initialConnection }: Props) {
         if (result.data.organizations.length === 1) {
           setSelectedOrg(result.data.organizations[0].login);
         }
-        toast.success(`Token valid. Found ${result.data.organizations.length} organization(s).`);
+        status.ok(`Token valid · ${result.data.organizations.length} org(s)`);
       } else {
-        toast.error(result.error);
+        status.error(result.error);
         setIsValidated(false);
         setOrgs([]);
       }
@@ -110,9 +111,9 @@ export function GitHubIntegrationClient({ initialConnection }: Props) {
         setToken("");
         setIsValidated(false);
         setOrgs([]);
-        toast.success(`Connected to ${org.login}`);
+        status.ok(`Connected to ${org.login}`);
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -122,9 +123,9 @@ export function GitHubIntegrationClient({ initialConnection }: Props) {
       const result = await disconnectGitHubOrg();
       if (result.success) {
         setConnection(null);
-        toast.success("Disconnected. Enriched user data has been retained.");
+        status.ok("Disconnected");
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -135,9 +136,9 @@ export function GitHubIntegrationClient({ initialConnection }: Props) {
       if (result.success) {
         setShowUpdateToken(false);
         setUpdateTokenValue("");
-        toast.success("Token updated successfully");
+        status.ok("Token updated");
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -179,13 +180,16 @@ export function GitHubIntegrationClient({ initialConnection }: Props) {
             </p>
           </div>
 
-          <Button
-            onClick={handleValidateToken}
-            disabled={!token || isPending}
-            variant="outline"
-          >
-            {isPending ? "Validating..." : "Validate Token"}
-          </Button>
+          <div className="flex items-center gap-3">
+            <Button
+              onClick={handleValidateToken}
+              disabled={!token || isPending}
+              variant="outline"
+            >
+              {isPending ? "Validating..." : "Validate Token"}
+            </Button>
+            <StatusText status={status.status} />
+          </div>
 
           {isValidated && orgs.length > 0 && (
             <div className="space-y-3 pt-2 border-t">
@@ -281,6 +285,7 @@ export function GitHubIntegrationClient({ initialConnection }: Props) {
               </AlertDialogFooter>
             </AlertDialogContent>
           </AlertDialog>
+          <StatusText status={status.status} />
         </div>
 
         {/* Update Token Form */}
diff --git a/src/app/settings/integrations/page.tsx b/src/app/settings/integrations/page.tsx
index 1a7e1287..5660cc8e 100644
--- a/src/app/settings/integrations/page.tsx
+++ b/src/app/settings/integrations/page.tsx
@@ -25,7 +25,7 @@ export default async function IntegrationsPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Integrations</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Integrations</h1>
         <p className="text-muted-foreground">
           Connect external services to enrich user data.
         </p>
diff --git a/src/app/settings/license-templates/page.tsx b/src/app/settings/license-templates/page.tsx
index a1e656eb..53b23b79 100644
--- a/src/app/settings/license-templates/page.tsx
+++ b/src/app/settings/license-templates/page.tsx
@@ -15,7 +15,7 @@ export default async function LicenseTemplatesPage() {
     <AuthGuard requiredRole="admin">
       <div className="space-y-6">
         <div>
-          <h1 className="text-3xl font-bold">License Templates</h1>
+          <h1 className="text-3xl font-medium tracking-tight text-ink">License Templates</h1>
           <p className="text-muted-foreground">
             Approval and completion messages, customizable per tool and per tier.
             Tool defaults are inherited unless a tier override exists.
diff --git a/src/app/settings/license-templates/template-editor-dialog.tsx b/src/app/settings/license-templates/template-editor-dialog.tsx
index 5996dc43..384fc9df 100644
--- a/src/app/settings/license-templates/template-editor-dialog.tsx
+++ b/src/app/settings/license-templates/template-editor-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useTransition, useMemo } from "react";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   Dialog,
   DialogContent,
@@ -59,6 +59,7 @@ const SAMPLE_CONTEXT: TemplateContext = {
 export function TemplateEditorDialog({ open, onOpenChange, state }: Props) {
   const [bodyMd, setBodyMd] = useState(state.bodyMd);
   const [pending, startTransition] = useTransition();
+  const status = useInlineStatus();
 
   // Build the actual sample context for THIS template (tool / tier names match).
   const ctx: TemplateContext = useMemo(
@@ -83,10 +84,9 @@ export function TemplateEditorDialog({ open, onOpenChange, state }: Props) {
         bodyMd,
       });
       if (result.success) {
-        toast.success("Template saved");
         onOpenChange(false);
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -96,10 +96,9 @@ export function TemplateEditorDialog({ open, onOpenChange, state }: Props) {
     startTransition(async () => {
       const result = await deleteMessageTemplate({ id: state.existingId! });
       if (result.success) {
-        toast.success("Template deleted");
         onOpenChange(false);
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     });
   }
@@ -169,10 +168,10 @@ export function TemplateEditorDialog({ open, onOpenChange, state }: Props) {
         </div>
 
         {missingVariables.length > 0 && (
-          <div className="flex items-start gap-2 rounded-md border border-amber-500/40 bg-amber-500/5 p-3 text-sm">
-            <AlertTriangle className="size-4 text-amber-600 mt-0.5 shrink-0" />
+          <div className="flex items-start gap-2 rounded-md border border-warning p-3 text-sm">
+            <AlertTriangle className="size-4 text-warning mt-0.5 shrink-0" />
             <div>
-              <p className="font-medium text-amber-700 dark:text-amber-400">
+              <p className="font-medium text-warning">
                 Unknown variable{missingVariables.length === 1 ? "" : "s"}
               </p>
               <p className="text-muted-foreground text-xs mt-1">
@@ -201,7 +200,8 @@ export function TemplateEditorDialog({ open, onOpenChange, state }: Props) {
               </Button>
             )}
           </div>
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
+            <StatusText status={status.status} />
             <Button variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>
               Cancel
             </Button>
diff --git a/src/app/settings/sync/github-member-sync-sheet.tsx b/src/app/settings/sync/github-member-sync-sheet.tsx
index 0332397c..fcfa6133 100644
--- a/src/app/settings/sync/github-member-sync-sheet.tsx
+++ b/src/app/settings/sync/github-member-sync-sheet.tsx
@@ -34,7 +34,7 @@ import {
   UserPlus,
   SkipForward,
 } from "lucide-react";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   fetchGitHubSyncPreview,
   confirmGitHubSync,
@@ -65,6 +65,7 @@ export function GitHubMemberSyncSheet({
   const [loading, setLoading] = useState(false);
   const [confirming, setConfirming] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const status = useInlineStatus();
 
   // Resolution state: keyed by githubLogin
   const [resolutions, setResolutions] = useState<
@@ -217,21 +218,13 @@ export function GitHubMemberSyncSheet({
         newUsers,
       });
       if (result.success) {
-        const d = result.data;
-        const parts: string[] = [];
-        if (d.enrichedCount > 0) parts.push(`${d.enrichedCount} enriched`);
-        if (d.importedCount > 0) parts.push(`${d.importedCount} imported`);
-        if (d.manuallyMatchedCount > 0)
-          parts.push(`${d.manuallyMatchedCount} matched`);
-        if (d.createdCount > 0) parts.push(`${d.createdCount} created`);
-        if (d.skippedCount > 0) parts.push(`${d.skippedCount} skipped`);
-        toast.success(`Sync complete: ${parts.join(", ")}`);
+        // Success closes the sheet — the navigation is the feedback.
         onOpenChange(false);
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("Failed to confirm sync");
+      status.error("Sync failed");
     } finally {
       setConfirming(false);
     }
@@ -354,7 +347,8 @@ export function GitHubMemberSyncSheet({
               )}
 
               {/* Confirm / Cancel */}
-              <div className="flex justify-end gap-2 pt-2 border-t">
+              <div className="flex items-center justify-end gap-2 pt-2 border-t">
+                <StatusText status={status.status} />
                 <Button
                   variant="outline"
                   onClick={() => onOpenChange(false)}
@@ -397,11 +391,11 @@ function SummaryCard({
 }) {
   return (
     <div className="rounded-md border p-3 text-center">
-      <p className="text-2xl font-bold tabular-nums">{count}</p>
+      <p className="text-2xl font-mono tabular-nums">{count}</p>
       <p
         className={`text-xs ${
           variant === "warning" && count > 0
-            ? "text-amber-600 dark:text-amber-400 font-medium"
+            ? "text-warning font-medium"
             : "text-muted-foreground"
         }`}
       >
@@ -430,35 +424,35 @@ function ResolutionSummaryPanel({
       <p className="text-sm font-medium">Resolution Summary</p>
       <div className="grid grid-cols-5 gap-2 text-center">
         <div>
-          <p className="text-lg font-bold tabular-nums">{summary.imported}</p>
+          <p className="text-lg font-mono tabular-nums">{summary.imported}</p>
           <p className="text-[10px] text-muted-foreground">
             <Download className="size-3 inline mr-0.5" />
             Import
           </p>
         </div>
         <div>
-          <p className="text-lg font-bold tabular-nums">{summary.matched}</p>
+          <p className="text-lg font-mono tabular-nums">{summary.matched}</p>
           <p className="text-[10px] text-muted-foreground">
             <UserCheck className="size-3 inline mr-0.5" />
             Matched
           </p>
         </div>
         <div>
-          <p className="text-lg font-bold tabular-nums">{summary.created}</p>
+          <p className="text-lg font-mono tabular-nums">{summary.created}</p>
           <p className="text-[10px] text-muted-foreground">
             <UserPlus className="size-3 inline mr-0.5" />
             New User
           </p>
         </div>
         <div>
-          <p className="text-lg font-bold tabular-nums">{summary.skipped}</p>
+          <p className="text-lg font-mono tabular-nums">{summary.skipped}</p>
           <p className="text-[10px] text-muted-foreground">
             <SkipForward className="size-3 inline mr-0.5" />
             Skipped
           </p>
         </div>
         <div>
-          <p className="text-lg font-bold tabular-nums">
+          <p className="text-lg font-mono tabular-nums">
             {summary.unresolved}
           </p>
           <p className="text-[10px] text-muted-foreground">Unresolved</p>
diff --git a/src/app/settings/sync/page.tsx b/src/app/settings/sync/page.tsx
index a5c3de44..dc3f33b2 100644
--- a/src/app/settings/sync/page.tsx
+++ b/src/app/settings/sync/page.tsx
@@ -3,6 +3,7 @@ import { getSyncStatus, getSyncHistory } from "@/actions/sync";
 import { requireAdmin } from "@/lib/auth-helpers";
 import { redirect } from "next/navigation";
 import { SyncDashboard } from "./sync-dashboard";
+import { LoadingState, InlineSpinner } from "@/components/ui/loading-state";
 
 export default async function SyncSettingsPage() {
   const admin = await requireAdmin();
@@ -26,14 +27,12 @@ export default async function SyncSettingsPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-2xl font-semibold tracking-tight">Sync Status</h2>
+        <h2 className="text-3xl font-medium tracking-tight text-ink">Sync Status</h2>
         <p className="text-muted-foreground">
           Monitor and manage all data synchronization sources.
         </p>
       </div>
-      <Suspense
-        fallback={<div className="animate-pulse h-64 bg-muted rounded-md" />}
-      >
+      <Suspense fallback={<LoadingState label="LOADING" />}>
         <SyncDashboard
           initialSources={statusResult.data}
           initialManualEvents={historyResult.data}
diff --git a/src/app/settings/sync/scheduled-jobs-table.tsx b/src/app/settings/sync/scheduled-jobs-table.tsx
index 4c04bd07..45c23824 100644
--- a/src/app/settings/sync/scheduled-jobs-table.tsx
+++ b/src/app/settings/sync/scheduled-jobs-table.tsx
@@ -28,7 +28,7 @@ import { BACKFILL_SOURCES, SOURCE_LABELS, type SyncSourceType } from "@/lib/sync
 import type { SyncSourceWithLastEvent } from "@/lib/sync/registry";
 import type { SyncResult } from "@/types";
 import { ChevronDown, Eye, RefreshCw, Users } from "lucide-react";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { useRouter } from "next/navigation";
 import { formatDistanceToNow } from "date-fns";
 
@@ -92,23 +92,22 @@ export function ScheduledJobsTable({ sources }: ScheduledJobsTableProps) {
   const [applyLoading, setApplyLoading] = useState(false);
   const [memberSyncOpen, setMemberSyncOpen] = useState(false);
   const router = useRouter();
+  const status = useInlineStatus();
 
   async function handleDryRun() {
     setDryRunLoading(true);
-    toast.info("Running invoice sync preview...");
+    status.pending("Previewing");
     try {
       const result = await syncInvoices({ dryRun: true });
       if (result.success) {
         setDryRunResult(result.data);
         setDryRunDialogOpen(true);
-        toast.success(
-          `Preview complete: ${result.data.totalProcessed} invoices analyzed`
-        );
+        status.ok(`${result.data.totalProcessed} analyzed`);
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("Failed to run dry run");
+      status.error("Dry run failed");
     } finally {
       setDryRunLoading(false);
     }
@@ -116,19 +115,19 @@ export function ScheduledJobsTable({ sources }: ScheduledJobsTableProps) {
 
   async function handleApplyFromDryRun() {
     setApplyLoading(true);
-    toast.info("Starting Invoice-Period Matching sync...");
+    status.pending("Starting sync");
     try {
       const result = await triggerSync("invoice_period_matching");
       if (result.success) {
-        toast.success("Invoice-Period Matching sync started");
+        status.ok("Sync started");
         setDryRunDialogOpen(false);
         setDryRunResult(null);
         router.refresh();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("Failed to apply changes");
+      status.error("Apply failed");
     } finally {
       setApplyLoading(false);
     }
@@ -136,6 +135,9 @@ export function ScheduledJobsTable({ sources }: ScheduledJobsTableProps) {
 
   return (
     <>
+      <div className="flex justify-end">
+        <StatusText status={status.status} />
+      </div>
       <div className="rounded-md border">
         <Table>
           <TableHeader>
@@ -266,20 +268,21 @@ function InvoiceSyncDropdown({
 }) {
   const [syncLoading, setSyncLoading] = useState(false);
   const router = useRouter();
+  const status = useInlineStatus();
 
   async function handleSync() {
     setSyncLoading(true);
-    toast.info("Starting Invoice-Period Matching sync...");
+    status.pending("Starting sync");
     try {
       const result = await triggerSync("invoice_period_matching");
       if (result.success) {
-        toast.success("Invoice-Period Matching sync started");
+        status.ok("Sync started");
         router.refresh();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("Failed to trigger sync");
+      status.error("Trigger failed");
     } finally {
       setSyncLoading(false);
     }
@@ -288,26 +291,29 @@ function InvoiceSyncDropdown({
   const loading = syncLoading || dryRunLoading;
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" disabled={disabled || loading}>
-          <RefreshCw
-            className={`h-3 w-3 mr-1 ${loading ? "animate-spin" : ""}`}
-          />
-          Sync
-          <ChevronDown className="h-3 w-3 ml-1" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={handleSync} disabled={loading}>
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Sync Now
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={onDryRun} disabled={loading}>
-          <Eye className="h-4 w-4 mr-2" />
-          Preview Changes (Dry Run)
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <div className="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm" disabled={disabled || loading}>
+            <RefreshCw
+              className={`h-3 w-3 mr-1 ${loading ? "animate-spin" : ""}`}
+            />
+            Sync
+            <ChevronDown className="h-3 w-3 ml-1" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={handleSync} disabled={loading}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Sync Now
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={onDryRun} disabled={loading}>
+            <Eye className="h-4 w-4 mr-2" />
+            Preview Changes (Dry Run)
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <StatusText status={status.status} />
+    </div>
   );
 }
diff --git a/src/app/settings/sync/sync-dashboard.tsx b/src/app/settings/sync/sync-dashboard.tsx
index a9b2dbfe..9cf2a26a 100644
--- a/src/app/settings/sync/sync-dashboard.tsx
+++ b/src/app/settings/sync/sync-dashboard.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { getSyncStatus } from "@/actions/sync";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { ScheduledJobsTable } from "./scheduled-jobs-table";
 import { ManualJobsTable } from "./manual-jobs-table";
 import type { SyncSourceWithLastEvent } from "@/lib/sync/registry";
@@ -34,6 +34,7 @@ export function SyncDashboard({
   initialManualEvents,
 }: SyncDashboardProps) {
   const router = useRouter();
+  const status = useInlineStatus();
   const manualEvents = initialManualEvents;
   const sourcesRef = useRef(initialSources);
   const [sources, setSources] = useState(initialSources);
@@ -85,7 +86,7 @@ export function SyncDashboard({
         sourcesRef.current.map((s) => [s.sourceType, s])
       );
 
-      // Show toasts for completion transitions
+      // Show inline status for completion transitions
       for (const source of updated) {
         const prev = prevMap.get(source.sourceType);
         const prevOutcome = prev?.lastEvent?.outcome ?? null;
@@ -95,13 +96,11 @@ export function SyncDashboard({
           const label = source.sourceType;
           if (curOutcome === "success" || curOutcome === "partial") {
             const ev = source.lastEvent;
-            toast.success(
-              `${label} complete: ${ev?.createdCount ?? 0} created, ${ev?.updatedCount ?? 0} updated`
+            status.ok(
+              `${label} done: ${ev?.createdCount ?? 0} new, ${ev?.updatedCount ?? 0} updated`
             );
           } else if (curOutcome === "failed") {
-            toast.error(
-              `${label} failed: ${source.lastEvent?.errorMessage ?? "Unknown error"}`
-            );
+            status.error(`${label} failed`);
           }
         }
       }
@@ -118,12 +117,15 @@ export function SyncDashboard({
     }, 5000);
 
     return () => clearInterval(intervalId);
-  }, [isPolling, router]);
+  }, [isPolling, router, status]);
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6">
       <div>
-        <h3 className="text-lg font-semibold mb-3">Scheduled Jobs</h3>
+        <div className="mb-3 flex items-center gap-3">
+          <h3 className="text-lg font-semibold">Scheduled Jobs</h3>
+          <StatusText status={status.status} />
+        </div>
         <ScheduledJobsTable sources={sources} />
       </div>
 
diff --git a/src/app/tools/[id]/loading.tsx b/src/app/tools/[id]/loading.tsx
index 9995864f..67d7c02f 100644
--- a/src/app/tools/[id]/loading.tsx
+++ b/src/app/tools/[id]/loading.tsx
@@ -1,40 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function ToolDetailLoading() {
-  return (
-    <div className="space-y-6">
-      <div>
-        <Skeleton className="h-9 w-48" />
-        <Skeleton className="mt-2 h-5 w-32" />
-      </div>
-
-      <div className="grid gap-6 lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <Skeleton className="h-6 w-32" />
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="space-y-2">
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-10 w-full" />
-              </div>
-            ))}
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <Skeleton className="h-6 w-32" />
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <Skeleton key={i} className="h-16 w-full rounded-lg" />
-            ))}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
+  return <LoadingState label="LOADING TOOL" />;
 }
diff --git a/src/app/tools/[id]/tool-detail-client.tsx b/src/app/tools/[id]/tool-detail-client.tsx
index 8bc5f7e3..cea7e956 100644
--- a/src/app/tools/[id]/tool-detail-client.tsx
+++ b/src/app/tools/[id]/tool-detail-client.tsx
@@ -4,7 +4,6 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "sonner";
 import { updateTool, archiveTool, createTier, updateTier } from "@/actions/tools";
 import { toolSchema, updateTierSchema, type ToolInput } from "@/lib/validators";
 import { formatCurrency, formatDate } from "@/lib/utils";
@@ -50,6 +49,7 @@ import {
 } from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { Pencil, Plus } from "lucide-react";
 
 interface Props {
@@ -70,6 +70,7 @@ function EditTierDialog({
 }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const status = useInlineStatus();
 
   const tierForm = useForm({
     resolver: zodResolver(
@@ -115,11 +116,10 @@ function EditTierDialog({
       isActive: data.isActive,
     });
     if (result.success) {
-      toast.success("Tier updated");
       setOpen(false);
       router.refresh();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
@@ -216,7 +216,8 @@ function EditTierDialog({
                 </FormItem>
               )}
             />
-            <DialogFooter>
+            <DialogFooter className="items-center">
+              <StatusText status={status.status} />
               <Button
                 type="button"
                 variant="outline"
@@ -248,6 +249,8 @@ export function ToolDetailClient({
 }: Props) {
   const router = useRouter();
   const [addTierOpen, setAddTierOpen] = useState(false);
+  const status = useInlineStatus();
+  const addTierStatus = useInlineStatus();
 
   const form = useForm<ToolInput>({
     resolver: zodResolver(toolSchema),
@@ -262,20 +265,19 @@ export function ToolDetailClient({
   async function onSubmit(data: ToolInput) {
     const result = await updateTool({ id: tool.id, ...data });
     if (result.success) {
-      toast.success("Tool updated");
+      status.ok("Saved");
       router.refresh();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
   async function handleArchive() {
     const result = await archiveTool({ id: tool.id });
     if (result.success) {
-      toast.success("Tool archived");
       router.push("/tools");
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
@@ -289,11 +291,10 @@ export function ToolDetailClient({
       ),
     });
     if (result.success) {
-      toast.success("Tier added");
       setAddTierOpen(false);
       router.refresh();
     } else {
-      toast.error(result.error);
+      addTierStatus.error(result.error);
     }
   }
 
@@ -301,7 +302,7 @@ export function ToolDetailClient({
     <div className="mx-auto max-w-3xl space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold">{tool.name}</h1>
+          <h1 className="text-3xl font-medium tracking-tight text-ink">{tool.name}</h1>
           <p className="text-muted-foreground">{tool.vendor}</p>
         </div>
         <Badge variant={tool.status === "active" ? "default" : "secondary"}>
@@ -377,10 +378,11 @@ export function ToolDetailClient({
                     </FormItem>
                   )}
                 />
-                <div className="flex gap-3">
+                <div className="flex items-center gap-3">
                   <Button type="submit" disabled={form.formState.isSubmitting}>
                     Save Changes
                   </Button>
+                  <StatusText status={status.status} />
                   <AlertDialog>
                     <AlertDialogTrigger asChild>
                       <Button variant="destructive">Archive Tool</Button>
@@ -453,7 +455,10 @@ export function ToolDetailClient({
                     <label className="text-sm font-medium">Description</label>
                     <Input name="tierDescription" />
                   </div>
-                  <Button type="submit">Add Tier</Button>
+                  <div className="flex items-center gap-3">
+                    <Button type="submit">Add Tier</Button>
+                    <StatusText status={addTierStatus.status} />
+                  </div>
                 </form>
               </DialogContent>
             </Dialog>
@@ -485,7 +490,7 @@ export function ToolDetailClient({
                   </div>
                   <div className="flex items-center gap-2">
                     <div className="text-right">
-                      <p className="font-medium">
+                      <p className="font-mono">
                         {formatCurrency(tier.monthlyCostCents)}/mo
                       </p>
                       <p className="text-sm text-muted-foreground">
diff --git a/src/app/tools/loading.tsx b/src/app/tools/loading.tsx
index 638ea924..33dbeebb 100644
--- a/src/app/tools/loading.tsx
+++ b/src/app/tools/loading.tsx
@@ -1,29 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function ToolsLoading() {
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <Skeleton className="h-9 w-32" />
-          <Skeleton className="mt-2 h-5 w-56" />
-        </div>
-        <Skeleton className="h-10 w-32" />
-      </div>
-
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-10 w-full max-w-sm" />
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <Skeleton key={i} className="h-12 w-full" />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING TOOLS" />;
 }
diff --git a/src/app/tools/new/new-tool-form.tsx b/src/app/tools/new/new-tool-form.tsx
index eed06a5d..682beaac 100644
--- a/src/app/tools/new/new-tool-form.tsx
+++ b/src/app/tools/new/new-tool-form.tsx
@@ -4,7 +4,6 @@ import { useRouter } from "next/navigation";
 import { useFieldArray, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { toast } from "sonner";
 import { createTool, createTier } from "@/actions/tools";
 import { toolSchema } from "@/lib/validators";
 import { Button } from "@/components/ui/button";
@@ -25,6 +24,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { Plus, Trash2 } from "lucide-react";
 
 const newToolSchema = toolSchema.extend({
@@ -43,6 +43,7 @@ type NewToolInput = z.infer<typeof newToolSchema>;
 
 export function NewToolForm() {
   const router = useRouter();
+  const status = useInlineStatus();
 
   const form = useForm<NewToolInput>({
     resolver: zodResolver(newToolSchema),
@@ -68,7 +69,7 @@ export function NewToolForm() {
     });
 
     if (!toolResult.success) {
-      toast.error(toolResult.error);
+      status.error(toolResult.error);
       return;
     }
 
@@ -82,18 +83,17 @@ export function NewToolForm() {
       });
 
       if (!tierResult.success) {
-        toast.error(`Failed to create tier "${tier.name}": ${tierResult.error}`);
+        status.error(`Tier "${tier.name}" failed`);
       }
     }
 
-    toast.success("Tool created successfully");
     router.push("/tools");
   }
 
   return (
     <div className="mx-auto max-w-2xl space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Add New Tool</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Add New Tool</h1>
         <p className="text-muted-foreground">
           Register a new AI tool with pricing tiers
         </p>
@@ -264,7 +264,7 @@ export function NewToolForm() {
             </CardContent>
           </Card>
 
-          <div className="flex gap-3">
+          <div className="flex items-center gap-3">
             <Button
               type="submit"
               disabled={form.formState.isSubmitting}
@@ -278,6 +278,7 @@ export function NewToolForm() {
             >
               Cancel
             </Button>
+            <StatusText status={status.status} />
           </div>
         </form>
       </Form>
diff --git a/src/app/tools/page.tsx b/src/app/tools/page.tsx
index 69809e71..a8fa70f2 100644
--- a/src/app/tools/page.tsx
+++ b/src/app/tools/page.tsx
@@ -26,7 +26,7 @@ export default async function ToolsPage() {
       <div className="space-y-6">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-3xl font-bold">AI Tools</h1>
+            <h1 className="text-3xl font-medium tracking-tight text-ink">AI Tools</h1>
             <p className="text-muted-foreground">
               {isAdmin
                 ? "Manage your AI tool registry"
diff --git a/src/app/tools/tools-table.tsx b/src/app/tools/tools-table.tsx
index 3f7c4ae7..b52bfbff 100644
--- a/src/app/tools/tools-table.tsx
+++ b/src/app/tools/tools-table.tsx
@@ -4,7 +4,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { ColumnDef } from "@tanstack/react-table";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { DataTable, arrayIncludesFilterFn } from "@/components/data-table";
 import { DataTableColumnHeader } from "@/components/data-table-column-header";
 import { Badge } from "@/components/ui/badge";
@@ -46,6 +46,7 @@ function ToolRowActions({
   onArchived: () => void;
 }) {
   const [showArchiveDialog, setShowArchiveDialog] = useState(false);
+  const status = useInlineStatus();
 
   // Viewers have no tool-detail access (page is admin-guarded) and no actions
   // to take here, so the entire actions column is hidden for them.
@@ -107,6 +108,7 @@ function ToolRowActions({
                 </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>
+                <StatusText status={status.status} />
                 <AlertDialogCancel>Cancel</AlertDialogCancel>
                 <AlertDialogAction
                   disabled={row.activeLicenses > 0}
@@ -114,13 +116,13 @@ function ToolRowActions({
                     try {
                       const result = await archiveTool({ id: row.id });
                       if (result.success) {
-                        toast.success("Tool archived");
+                        status.ok("Archived");
                         onArchived();
                       } else {
-                        toast.error(result.error);
+                        status.error(result.error);
                       }
                     } catch {
-                      toast.error("An unexpected error occurred");
+                      status.error("Unexpected error");
                     }
                   }}
                 >
diff --git a/src/app/users/[id]/loading.tsx b/src/app/users/[id]/loading.tsx
index 23b9dbc8..061de451 100644
--- a/src/app/users/[id]/loading.tsx
+++ b/src/app/users/[id]/loading.tsx
@@ -1,40 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function UserDetailLoading() {
-  return (
-    <div className="space-y-6">
-      <div>
-        <Skeleton className="h-9 w-48" />
-        <Skeleton className="mt-2 h-5 w-32" />
-      </div>
-
-      <div className="grid gap-6 lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <Skeleton className="h-6 w-32" />
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="space-y-2">
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-10 w-full" />
-              </div>
-            ))}
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <Skeleton className="h-6 w-40" />
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <Skeleton key={i} className="h-14 w-full rounded-lg" />
-            ))}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
+  return <LoadingState label="LOADING USER" />;
 }
diff --git a/src/app/users/[id]/user-detail-client.tsx b/src/app/users/[id]/user-detail-client.tsx
index 83861fde..0fa3c1ae 100644
--- a/src/app/users/[id]/user-detail-client.tsx
+++ b/src/app/users/[id]/user-detail-client.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { updateUser, deactivateUser } from "@/actions/users";
 import { ResetPasswordDialog } from "@/components/reset-password-dialog";
 import { updateUserSchema, type UpdateUserInput } from "@/lib/validators";
@@ -104,6 +104,8 @@ export function UserDetailClient({
   costAvailableMonths,
 }: Props) {
   const router = useRouter();
+  const status = useInlineStatus();
+  const assignStatus = useInlineStatus();
   const [showResetDialog, setShowResetDialog] = useState(false);
   const [assignDialogOpen, setAssignDialogOpen] = useState(false);
   const [tools, setTools] = useState<AiTool[]>([]);
@@ -136,32 +138,30 @@ export function UserDetailClient({
   async function onSubmit(data: EditUserInput) {
     const result = await updateUser({ id: user.id, ...data });
     if (result.success) {
-      toast.success("User updated");
+      status.ok("Saved");
       router.refresh();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
   async function handleDeactivate() {
     const result = await deactivateUser({ id: user.id });
     if (result.success) {
-      toast.success(
-        `User deactivated. ${result.data.revokedCount} license(s) revoked.`
-      );
+      status.ok(`Deactivated · ${result.data.revokedCount} revoked`);
       router.refresh();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
   async function handleRevoke(assignmentId: number) {
     const result = await revokeLicense({ id: assignmentId });
     if (result.success) {
-      toast.success("License revoked");
+      status.ok("Revoked");
       router.refresh();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
@@ -202,11 +202,10 @@ export function UserDetailClient({
     });
     setAssigning(false);
     if (result.success) {
-      toast.success("License assigned");
       closeAssignDialog();
       router.refresh();
     } else {
-      toast.error(result.error);
+      assignStatus.error(result.error);
     }
   }
 
@@ -219,10 +218,10 @@ export function UserDetailClient({
     });
     setReactivatingId(null);
     if (result.success) {
-      toast.success("License reactivated");
+      status.ok("Reactivated");
       router.refresh();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
@@ -230,7 +229,7 @@ export function UserDetailClient({
     <div className="mx-auto max-w-3xl space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold">{user.name}</h1>
+          <h1 className="text-3xl font-medium tracking-tight text-ink">{user.name}</h1>
           <p className="text-muted-foreground">{user.email}</p>
         </div>
         <div className="flex gap-2">
@@ -493,6 +492,7 @@ export function UserDetailClient({
                       </AlertDialogFooter>
                     </AlertDialogContent>
                   </AlertDialog>
+                  <StatusText status={status.status} className="self-center" />
                 </div>
                 <ResetPasswordDialog
                   user={user}
@@ -703,6 +703,7 @@ export function UserDetailClient({
             </div>
           </div>
           <DialogFooter>
+            <StatusText status={assignStatus.status} className="mr-auto self-center" />
             <Button
               variant="outline"
               onClick={closeAssignDialog}
diff --git a/src/app/users/import/bulk-import-form.tsx b/src/app/users/import/bulk-import-form.tsx
index bd7ef84a..f3b5cfbf 100644
--- a/src/app/users/import/bulk-import-form.tsx
+++ b/src/app/users/import/bulk-import-form.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { bulkImportUsers, checkExistingUsers } from "@/actions/users";
 import type { ExistingUserFields } from "@/types";
 import { getChangedUserFields } from "@/lib/utils";
@@ -24,6 +23,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { Download } from "lucide-react";
 import { toCsv } from "@/lib/csv";
 import { DISCIPLINES, DISCIPLINE_LABEL } from "@/lib/disciplines";
@@ -119,6 +119,7 @@ function enrichRows(
 
 export function BulkImportForm() {
   const router = useRouter();
+  const status = useInlineStatus();
   const [parsedUsers, setParsedUsers] = useState<ParsedUser[]>([]);
   const [importing, setImporting] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -143,9 +144,9 @@ export function BulkImportForm() {
             setParsedUsers(enrichRows(rows, result.data));
             return;
           }
-          toast.error("Failed to check existing users");
+          status.error("Check failed");
         } catch {
-          toast.error("Failed to check existing users");
+          status.error("Check failed");
         } finally {
           setLoading(false);
         }
@@ -171,7 +172,7 @@ export function BulkImportForm() {
       }));
 
     if (validUsers.length === 0) {
-      toast.error("No valid users to import");
+      status.error("No valid users");
       return;
     }
 
@@ -186,14 +187,16 @@ export function BulkImportForm() {
       if (updated > 0) parts.push(`${updated} updated`);
       if (skipped > 0) parts.push(`${skipped} skipped`);
       if (failed > 0) parts.push(`${failed} failed`);
-      toast.success(parts.join(", ") || "No changes");
       if (result.data.inviteLinks && result.data.inviteLinks.length > 0) {
+        status.ok("Imported");
         setInviteLinks(result.data.inviteLinks);
       } else if (created > 0 || updated > 0) {
         router.push("/users");
+      } else {
+        status.ok(parts.join(", ") || "No changes");
       }
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
@@ -204,7 +207,7 @@ export function BulkImportForm() {
     <div className="mx-auto max-w-4xl space-y-6">
       <div className="flex items-start justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold">Bulk Import Users</h1>
+          <h1 className="text-3xl font-medium tracking-tight text-ink">Bulk Import Users</h1>
           <p className="text-muted-foreground">
             Upload a CSV file with columns: name, email (required); circle (or
             department), discipline, role, github_username, profile (optional).
@@ -303,11 +306,11 @@ export function BulkImportForm() {
                 <TableBody>
                   {parsedUsers.map((user, i) => {
                     const changed = user.changes ?? [];
-                    const hl = "font-semibold text-primary";
+                    const hl = "font-semibold text-ink";
                     return (
                       <TableRow
                         key={i}
-                        className={!user.valid ? "bg-destructive/10" : ""}
+                        className=""
                       >
                         <TableCell>
                           {user.action === "update" ? (
@@ -359,6 +362,7 @@ export function BulkImportForm() {
               >
                 Cancel
               </Button>
+              <StatusText status={status.status} />
             </div>
           </CardContent>
         </Card>
diff --git a/src/app/users/loading.tsx b/src/app/users/loading.tsx
index a957e607..2c0af2b0 100644
--- a/src/app/users/loading.tsx
+++ b/src/app/users/loading.tsx
@@ -1,32 +1,5 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState } from "@/components/ui/loading-state";
 
 export default function UsersLoading() {
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <Skeleton className="h-9 w-32" />
-          <Skeleton className="mt-2 h-5 w-56" />
-        </div>
-        <div className="flex gap-2">
-          <Skeleton className="h-10 w-28" />
-          <Skeleton className="h-10 w-28" />
-        </div>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-10 w-full max-w-sm" />
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            {Array.from({ length: 8 }).map((_, i) => (
-              <Skeleton key={i} className="h-12 w-full" />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <LoadingState label="LOADING USERS" />;
 }
diff --git a/src/app/users/new/new-user-form.tsx b/src/app/users/new/new-user-form.tsx
index 521c7120..9e886ccc 100644
--- a/src/app/users/new/new-user-form.tsx
+++ b/src/app/users/new/new-user-form.tsx
@@ -4,8 +4,8 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "sonner";
 import { createUser } from "@/actions/users";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { userSchema, type UserInput } from "@/lib/validators";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -35,6 +35,7 @@ import { DISCIPLINES, DISCIPLINE_LABEL } from "@/lib/disciplines";
 
 export function NewUserForm() {
   const router = useRouter();
+  const status = useInlineStatus();
   const [inviteDialog, setInviteDialog] = useState<{
     open: boolean;
     inviteUrl: string;
@@ -59,21 +60,21 @@ export function NewUserForm() {
   async function onSubmit(data: UserInput) {
     const result = await createUser(data);
     if (result.success) {
-      toast.success("User created successfully");
+      // Success opens the invite dialog — that is the feedback.
       setInviteDialog({
         open: true,
         inviteUrl: result.data.inviteUrl,
         userId: result.data.id,
       });
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
   return (
     <div className="mx-auto max-w-2xl space-y-6">
       <div>
-        <h1 className="text-3xl font-bold">Add New User</h1>
+        <h1 className="text-3xl font-medium tracking-tight text-ink">Add New User</h1>
         <p className="text-muted-foreground">
           Create a new company user account
         </p>
@@ -220,7 +221,7 @@ export function NewUserForm() {
                   </FormItem>
                 )}
               />
-              <div className="flex gap-3">
+              <div className="flex items-center gap-3">
                 <Button type="submit" disabled={form.formState.isSubmitting}>
                   {form.formState.isSubmitting ? "Creating..." : "Create User"}
                 </Button>
@@ -231,6 +232,7 @@ export function NewUserForm() {
                 >
                   Cancel
                 </Button>
+                <StatusText status={status.status} />
               </div>
             </form>
           </Form>
diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
index 805515f9..b2748a7c 100644
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
@@ -19,7 +19,7 @@ export default async function UsersPage() {
         <div className="flex items-center justify-between">
           <div>
             <div className="flex items-center gap-3">
-              <h1 className="text-3xl font-bold">Users</h1>
+              <h1 className="text-3xl font-medium tracking-tight text-ink">Users</h1>
               {pendingCount > 0 && (
                 <Badge variant="secondary">
                   {pendingCount} user{pendingCount !== 1 ? "s" : ""} pending setup
diff --git a/src/app/users/users-table.tsx b/src/app/users/users-table.tsx
index 5e875ed4..d8a6fe88 100644
--- a/src/app/users/users-table.tsx
+++ b/src/app/users/users-table.tsx
@@ -3,7 +3,6 @@
 import { useState, useMemo, useCallback } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { ColumnDef } from "@tanstack/react-table";
 import { DataTable, arrayIncludesFilterFn } from "@/components/data-table";
 import { DataTableColumnHeader } from "@/components/data-table-column-header";
@@ -36,6 +35,7 @@ import { Eye, MoreHorizontal, Pencil, UserX, Mail, KeyRound } from "lucide-react
 import { deactivateUser } from "@/actions/users";
 import { sendInviteEmail, sendBatchInviteEmails } from "@/actions/invite";
 import { ResetPasswordDialog } from "@/components/reset-password-dialog";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   DISCIPLINES,
   DISCIPLINE_ICON,
@@ -57,22 +57,24 @@ function UserRowActions({
 }) {
   const [showDeactivateDialog, setShowDeactivateDialog] = useState(false);
   const [showResetDialog, setShowResetDialog] = useState(false);
+  const status = useInlineStatus();
 
   async function handleSendInvite() {
     try {
       const result = await sendInviteEmail(row.id);
       if (result.success) {
-        toast.success("Invite email sent");
+        status.ok("Invite sent");
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("Failed to send invite email");
+      status.error("Invite failed");
     }
   }
 
   return (
     <div className="flex items-center gap-1">
+      <StatusText status={status.status} />
       <Tooltip>
         <TooltipTrigger asChild>
           <Button size="sm" variant="ghost" aria-label={`View ${row.name}`} asChild>
@@ -140,17 +142,18 @@ function UserRowActions({
                   try {
                     const result = await deactivateUser({ id: row.id });
                     if (result.success) {
-                      toast.success(`User deactivated. ${result.data.revokedCount} license(s) revoked.`);
+                      status.ok("Deactivated");
                       onDeactivated();
                     } else {
-                      toast.error(result.error);
+                      status.error(result.error);
                     }
                   } catch {
-                    toast.error("An unexpected error occurred");
+                    status.error("Unexpected error");
                   }
                 }}>
                   Deactivate
                 </AlertDialogAction>
+                <StatusText status={status.status} />
               </AlertDialogFooter>
             </AlertDialogContent>
           </AlertDialog>
@@ -325,6 +328,7 @@ export function UsersTable({
   const [editingUser, setEditingUser] = useState<User | null>(null);
   const [showBatchDialog, setShowBatchDialog] = useState(false);
   const [batchSending, setBatchSending] = useState(false);
+  const batchStatus = useInlineStatus();
 
   const handleRefresh = useCallback(() => router.refresh(), [router]);
   const handleEditUser = useCallback((user: User) => {
@@ -342,16 +346,16 @@ export function UsersTable({
       if (result.success) {
         const { sent, failed, total } = result.data;
         if (failed > 0) {
-          toast.warning(`Sent ${sent} of ${total} invite emails. ${failed} failed.`);
+          batchStatus.info(`Sent ${sent}/${total}, ${failed} failed`);
         } else {
-          toast.success(`Sent ${sent} invite email(s) to all pending users.`);
+          batchStatus.ok(`Sent ${sent}`);
         }
         handleRefresh();
       } else {
-        toast.error(result.error);
+        batchStatus.error(result.error);
       }
     } catch {
-      toast.error("An unexpected error occurred");
+      batchStatus.error("Unexpected error");
     } finally {
       setBatchSending(false);
       setShowBatchDialog(false);
@@ -398,6 +402,7 @@ export function UsersTable({
             <Mail className="mr-2 size-4" />
             Send Invites to All Pending ({pendingCount})
           </Button>
+          <StatusText status={batchStatus.status} />
         </div>
       )}
       <DataTable
@@ -420,6 +425,7 @@ export function UsersTable({
             <AlertDialogAction onClick={handleBatchInvite} disabled={batchSending}>
               {batchSending ? "Sending..." : "Send Invites"}
             </AlertDialogAction>
+            <StatusText status={batchStatus.status} />
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
diff --git a/src/components/alert-banner.tsx b/src/components/alert-banner.tsx
index dc74c6b1..7d45bd51 100644
--- a/src/components/alert-banner.tsx
+++ b/src/components/alert-banner.tsx
@@ -1,9 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { AlertTriangle, X } from "lucide-react";
+import { cn } from "@/lib/utils";
 import type { ActiveAlertsData } from "@/types";
 
 const STORAGE_KEY = "alert-banner-dismissed";
@@ -15,6 +13,9 @@ function computeFingerprint(alerts: ActiveAlertsData): string {
     .join("|");
 }
 
+// Nothing alert: a FLAT bordered status box — no red background fill. The border
+// carries severity (destructive critical / warning approaching); status color is
+// on the value text only. Keeps the localStorage fingerprint dismiss + aria-live.
 export function AlertBanner({ alerts }: { alerts: ActiveAlertsData | null }) {
   const [dismissed, setDismissed] = useState<string | null>(null);
   const [announced, setAnnounced] = useState(false);
@@ -26,10 +27,12 @@ export function AlertBanner({ alerts }: { alerts: ActiveAlertsData | null }) {
     setAnnounced(true);
   }, []);
 
-  if (!alerts || alerts.workspaceAlerts.length === 0) return null;
-
-  const fingerprint = computeFingerprint(alerts);
-  if (dismissed === fingerprint) return null;
+  const hasAlerts = !!alerts && alerts.workspaceAlerts.length > 0;
+  const fingerprint = hasAlerts ? computeFingerprint(alerts) : "";
+  const showBanner = hasAlerts && dismissed !== fingerprint;
+  const count = hasAlerts ? alerts.workspaceAlerts.length : 0;
+  const hasCritical =
+    hasAlerts && alerts.workspaceAlerts.some((a) => a.severity === "critical");
 
   const handleDismiss = () => {
     localStorage.setItem(STORAGE_KEY, fingerprint);
@@ -37,36 +40,58 @@ export function AlertBanner({ alerts }: { alerts: ActiveAlertsData | null }) {
   };
 
   return (
-    <div role="region" aria-label="Budget alerts" className="border-b bg-background px-4 py-2">
+    <>
+      {/* Always-mounted live region: keeping it in the DOM means a
+          none→alerts transition reads as a content change (the initial content
+          of a freshly inserted live region isn't reliably announced). */}
       <div aria-live="polite" className="sr-only">
-        {announced && `${alerts.workspaceAlerts.length} budget alert${alerts.workspaceAlerts.length > 1 ? "s" : ""}`}
+        {announced && showBanner
+          ? `${count} budget alert${count > 1 ? "s" : ""}`
+          : ""}
       </div>
-      <Alert variant="destructive" className="relative border-0 bg-transparent py-2">
-        <AlertTriangle className="size-4" />
-        <AlertTitle>Budget Alert</AlertTitle>
-        <AlertDescription>
-          <ul className="mt-1 space-y-0.5 text-sm">
-            {alerts.workspaceAlerts.map((a, i) => (
-              <li key={i}>
-                <span className={a.severity === "critical" ? "font-semibold text-destructive" : "text-yellow-600 dark:text-yellow-500"}>
-                  {a.name}
-                </span>
-                {" "}is at {a.utilizationPct}% of monthly budget
-                {a.severity === "critical" ? " — limit exceeded!" : " — approaching limit"}
-              </li>
-            ))}
-          </ul>
-        </AlertDescription>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="absolute right-2 top-2 size-6"
-          onClick={handleDismiss}
-          aria-label="Dismiss budget alerts"
-        >
-          <X className="size-3" />
-        </Button>
-      </Alert>
-    </div>
+      {showBanner && alerts ? (
+        <div role="region" aria-label="Budget alerts" className="px-5 pt-6 sm:px-8">
+          <div
+            className={cn(
+              "relative rounded-lg border bg-transparent px-4 py-3",
+              hasCritical ? "border-destructive" : "border-warning"
+            )}
+          >
+            <span className="font-mono text-[11px] tracking-[0.1em] uppercase text-muted-foreground">
+              Budget Alert
+            </span>
+            <ul className="mt-2 space-y-1">
+              {alerts.workspaceAlerts.map((a, i) => (
+                <li key={i} className="font-mono text-xs">
+                  <span
+                    className={
+                      a.severity === "critical"
+                        ? "text-destructive"
+                        : "text-warning"
+                    }
+                  >
+                    {a.name}
+                  </span>{" "}
+                  <span className="text-muted-foreground">
+                    is at {a.utilizationPct}% of monthly budget
+                    {a.severity === "critical"
+                      ? " — limit exceeded"
+                      : " — approaching limit"}
+                  </span>
+                </li>
+              ))}
+            </ul>
+            <button
+              type="button"
+              onClick={handleDismiss}
+              aria-label="Dismiss budget alerts"
+              className="absolute right-2 top-2 rounded-[4px] px-2 py-1 font-mono text-[11px] tracking-[0.1em] uppercase text-faint transition-colors hover:text-foreground"
+            >
+              [ X ]
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </>
   );
 }
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
index eb75e771..f8496026 100644
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@@ -1,67 +1,138 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import {
-  LayoutDashboard,
-  Wrench,
-  Users,
-  KeyRound,
-  DollarSign,
-  BarChart3,
-  Bot,
-  FileText,
-  Inbox,
-  Settings,
-  LogOut,
-  LogIn,
-  UserCircle,
-} from "lucide-react";
+import { Menu, X } from "lucide-react";
 import { signOut } from "next-auth/react";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/components/ui/sidebar";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+
 import { ThemeToggle } from "@/components/theme-toggle";
+import { cn } from "@/lib/utils";
 import type { UserRole } from "@/types";
 
 type NavItem = {
   title: string;
   href: string;
-  icon: React.ComponentType<{ className?: string }>;
   roles: UserRole[];
 };
 
 const navItems: NavItem[] = [
-  { title: "Dashboard", href: "/", icon: LayoutDashboard, roles: ["admin", "viewer"] },
-  { title: "Tools", href: "/tools", icon: Wrench, roles: ["admin", "viewer"] },
-  { title: "Users", href: "/users", icon: Users, roles: ["admin"] },
-  { title: "Assignments", href: "/assignments", icon: KeyRound, roles: ["admin", "viewer"] },
-  { title: "Requests", href: "/requests", icon: Inbox, roles: ["admin"] },
-  { title: "Budget", href: "/budget", icon: DollarSign, roles: ["admin"] },
-  { title: "Reports", href: "/reports", icon: BarChart3, roles: ["admin"] },
-  { title: "Copilot", href: "/copilot", icon: Bot, roles: ["admin"] },
-  { title: "Claude Console", href: "/claude", icon: Bot, roles: ["admin"] },
-  { title: "Invoices", href: "/invoices", icon: FileText, roles: ["admin"] },
-  { title: "Settings", href: "/settings/appearance", icon: Settings, roles: ["admin", "viewer"] },
+  { title: "Dashboard", href: "/", roles: ["admin", "viewer"] },
+  { title: "Tools", href: "/tools", roles: ["admin", "viewer"] },
+  { title: "Users", href: "/users", roles: ["admin"] },
+  { title: "Assignments", href: "/assignments", roles: ["admin", "viewer"] },
+  { title: "Requests", href: "/requests", roles: ["admin"] },
+  { title: "Budget", href: "/budget", roles: ["admin"] },
+  { title: "Reports", href: "/reports", roles: ["admin"] },
+  { title: "Copilot", href: "/copilot", roles: ["admin"] },
+  { title: "Claude Console", href: "/claude", roles: ["admin"] },
+  { title: "Invoices", href: "/invoices", roles: ["admin"] },
+  { title: "Settings", href: "/settings/appearance", roles: ["admin", "viewer"] },
 ];
 
+function initialsOf(name: string | null): string {
+  if (!name) return "?";
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((p) => p[0]?.toUpperCase() ?? "")
+    .join("");
+}
+
+function isItemActive(pathname: string, href: string): boolean {
+  if (href === "/") return pathname === "/";
+  // Settings nav points at /settings/appearance; treat any /settings/* as active.
+  if (href.startsWith("/settings")) return pathname.startsWith("/settings");
+  return pathname === href || pathname.startsWith(href + "/");
+}
+
+function Brand() {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="size-2.5 rounded-full bg-destructive" aria-hidden="true" />
+      <span className="font-mono text-sm tracking-[0.14em] uppercase text-ink">
+        AI·HUB
+      </span>
+    </div>
+  );
+}
+
+function NavLinks({
+  items,
+  pathname,
+  onNavigate,
+}: {
+  items: NavItem[];
+  pathname: string;
+  onNavigate?: () => void;
+}) {
+  return (
+    <nav className="flex flex-col gap-0.5">
+      {items.map((item) => {
+        const active = isItemActive(pathname, item.href);
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            onClick={onNavigate}
+            aria-current={active ? "page" : undefined}
+            className={cn(
+              "relative rounded-[4px] px-2 py-2.5 font-mono text-xs tracking-[0.1em] uppercase transition-colors",
+              active
+                ? "text-ink"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {active ? (
+              <span
+                className="absolute -left-px top-1/2 h-[18px] w-0.5 -translate-y-1/2 bg-destructive"
+                aria-hidden="true"
+              />
+            ) : null}
+            {item.title}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+
+function Footer({
+  userName,
+  userRole,
+}: {
+  userName: string | null;
+  userRole: string | null;
+}) {
+  return (
+    <div className="mt-auto flex flex-col gap-1 border-t border-border pt-6">
+      <Link
+        href="/profile"
+        className="flex items-center gap-2 rounded-[4px] px-2 py-2 transition-colors hover:bg-accent"
+      >
+        <span className="grid size-8 shrink-0 place-items-center rounded-full border border-input font-mono text-xs text-foreground">
+          {initialsOf(userName)}
+        </span>
+        <span className="flex min-w-0 flex-col">
+          <span className="truncate text-[13px] text-foreground">{userName}</span>
+          <span className="font-mono text-[11px] tracking-[0.1em] uppercase text-muted-foreground capitalize">
+            {userRole}
+          </span>
+        </span>
+      </Link>
+      <button
+        type="button"
+        onClick={() => signOut({ callbackUrl: "/login" })}
+        className="rounded-[4px] px-2 py-2.5 text-left font-mono text-xs tracking-[0.1em] uppercase text-muted-foreground transition-colors hover:text-foreground"
+      >
+        Sign Out
+      </button>
+      <ThemeToggle className="mt-2 self-start" />
+    </div>
+  );
+}
+
 export function AppSidebar({
   userName,
   userRole,
@@ -70,89 +141,81 @@ export function AppSidebar({
   userRole: string | null;
 }) {
   const pathname = usePathname();
+  const [mobileOpen, setMobileOpen] = useState(false);
   const isAuthenticated = userName !== null && userRole !== null;
-  const filteredNavItems = isAuthenticated
+  const items = isAuthenticated
     ? navItems.filter((item) => item.roles.includes(userRole as UserRole))
     : [];
 
   return (
-    <Sidebar>
-      <SidebarHeader className="border-b px-4 py-3">
-        <h2 className="text-lg font-semibold">AI Developer Hub</h2>
-      </SidebarHeader>
-      <SidebarContent>
+    <>
+      {/* Desktop fixed rail */}
+      <aside className="sticky top-0 hidden h-screen flex-col border-r border-border bg-sidebar px-6 py-8 md:flex">
+        <div className="mb-12">
+          <Brand />
+        </div>
         {isAuthenticated ? (
-          <SidebarGroup>
-            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {filteredNavItems.map((item) => {
-                  const isActive =
-                    pathname === item.href ||
-                    (item.href !== "/" && pathname.startsWith(item.href));
-                  return (
-                    <SidebarMenuItem key={item.href}>
-                      <SidebarMenuButton asChild isActive={isActive}>
-                        <Link href={item.href}>
-                          <item.icon className="size-4" />
-                          <span>{item.title}</span>
-                        </Link>
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  );
-                })}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
+          <>
+            <NavLinks items={items} pathname={pathname} />
+            <Footer userName={userName} userRole={userRole} />
+          </>
         ) : (
-          <SidebarGroup>
-            <SidebarGroupContent>
-              <div className="px-4 py-6">
-                <p className="text-sm text-muted-foreground">
-                  Sign in to access the application.
-                </p>
-              </div>
-            </SidebarGroupContent>
-          </SidebarGroup>
+          <Link
+            href="/login"
+            className="mt-auto rounded-full bg-primary px-6 py-3 text-center font-mono text-[13px] tracking-[0.06em] uppercase text-primary-foreground"
+          >
+            Sign In
+          </Link>
         )}
-      </SidebarContent>
-      <SidebarFooter className="border-t p-4">
-        {isAuthenticated ? (
-          <div className="flex items-center justify-between">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="h-auto min-w-0 flex-1 justify-start gap-2 px-2 py-1.5 text-left">
-                  <div className="min-w-0">
-                    <p className="truncate text-sm font-medium">{userName}</p>
-                    <p className="text-xs text-muted-foreground capitalize">{userRole}</p>
-                  </div>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="w-48">
-                <DropdownMenuItem asChild>
-                  <Link href="/profile">
-                    <UserCircle className="mr-2 size-4" />
-                    My Profile
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
-                  <LogOut className="mr-2 size-4" />
-                  Sign Out
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <ThemeToggle />
-          </div>
-        ) : (
-          <Button asChild className="w-full">
-            <Link href="/login">
-              <LogIn className="mr-2 size-4" />
-              Sign In
-            </Link>
-          </Button>
-        )}
-      </SidebarFooter>
-    </Sidebar>
+      </aside>
+
+      {/* Mobile top bar */}
+      <div className="flex items-center justify-between border-b border-border bg-sidebar px-5 py-4 md:hidden">
+        <Brand />
+        <button
+          type="button"
+          onClick={() => setMobileOpen(true)}
+          aria-label="Open navigation"
+          className="grid size-9 place-items-center rounded-[4px] text-foreground"
+        >
+          <Menu className="size-5" strokeWidth={1.5} />
+        </button>
+      </div>
+
+      {/* Mobile drawer */}
+      {mobileOpen ? (
+        <div className="fixed inset-0 z-50 md:hidden" role="dialog" aria-modal="true">
+          <button
+            type="button"
+            aria-label="Close navigation"
+            className="absolute inset-0 bg-black/80"
+            onClick={() => setMobileOpen(false)}
+          />
+          <aside className="absolute inset-y-0 left-0 flex w-[248px] max-w-[80%] flex-col border-r border-border bg-sidebar px-6 py-8">
+            <div className="mb-8 flex items-center justify-between">
+              <Brand />
+              <button
+                type="button"
+                onClick={() => setMobileOpen(false)}
+                aria-label="Close navigation"
+                className="grid size-9 place-items-center rounded-[4px] text-foreground"
+              >
+                <X className="size-5" strokeWidth={1.5} />
+              </button>
+            </div>
+            {isAuthenticated ? (
+              <>
+                <NavLinks
+                  items={items}
+                  pathname={pathname}
+                  onNavigate={() => setMobileOpen(false)}
+                />
+                <Footer userName={userName} userRole={userRole} />
+              </>
+            ) : null}
+          </aside>
+        </div>
+      ) : null}
+    </>
   );
 }
diff --git a/src/components/claude/cumulative-pacing-chart.tsx b/src/components/claude/cumulative-pacing-chart.tsx
index 5347691d..97d54668 100644
--- a/src/components/claude/cumulative-pacing-chart.tsx
+++ b/src/components/claude/cumulative-pacing-chart.tsx
@@ -13,9 +13,9 @@ import { cn, formatCurrency } from "@/lib/utils";
 const config: ChartConfig = {
   current: { label: "Current month", color: "var(--chart-1)" },
   currentProjected: { label: "Projected", color: "var(--chart-1)" },
-  m1: { label: "1 month ago", color: "#a1a1aa" },
-  m2: { label: "2 months ago", color: "#71717a" },
-  m3: { label: "3 months ago", color: "#52525b" },
+  m1: { label: "1 month ago", color: "var(--chart-3)" },
+  m2: { label: "2 months ago", color: "var(--chart-4)" },
+  m3: { label: "3 months ago", color: "var(--chart-5)" },
 };
 
 function monthLabelOffset(offset: number): string {
@@ -218,7 +218,7 @@ export function CumulativePacingChart({
           <Line
             dataKey="m3"
             type="monotone"
-            stroke="#52525b"
+            stroke="var(--chart-5)"
             strokeWidth={1.5}
             dot={false}
             connectNulls
@@ -226,7 +226,7 @@ export function CumulativePacingChart({
           <Line
             dataKey="m2"
             type="monotone"
-            stroke="#71717a"
+            stroke="var(--chart-4)"
             strokeWidth={1.5}
             dot={false}
             connectNulls
@@ -234,7 +234,7 @@ export function CumulativePacingChart({
           <Line
             dataKey="m1"
             type="monotone"
-            stroke="#a1a1aa"
+            stroke="var(--chart-3)"
             strokeWidth={1.5}
             dot={false}
             connectNulls
@@ -267,14 +267,14 @@ export function CumulativePacingChart({
             label={hasEstimate ? "projection · incl. est. today" : "projection"}
             dashed
           />
-          <LineSwatch color="#a1a1aa" label={`${monthLabelOffset(1)} (prior)`} />
-          <LineSwatch color="#71717a" label={monthLabelOffset(2)} />
-          <LineSwatch color="#52525b" label={monthLabelOffset(3)} />
+          <LineSwatch color="var(--chart-3)" label={`${monthLabelOffset(1)} (prior)`} />
+          <LineSwatch color="var(--chart-4)" label={monthLabelOffset(2)} />
+          <LineSwatch color="var(--chart-5)" label={monthLabelOffset(3)} />
         </ul>
         <span
           className={cn(
             "font-medium",
-            trackingTone === "warn" ? "text-amber-400" : "text-muted-foreground"
+            trackingTone === "warn" ? "text-warning" : "text-muted-foreground"
           )}
         >
           {trackingLabel}
diff --git a/src/components/claude/daily-by-user-chart.tsx b/src/components/claude/daily-by-user-chart.tsx
index 38ecad01..852b776f 100644
--- a/src/components/claude/daily-by-user-chart.tsx
+++ b/src/components/claude/daily-by-user-chart.tsx
@@ -15,61 +15,83 @@ import type { DailyByUserResult } from "@/types";
 
 const OTHER_KEY = "__other__";
 
-/**
- * Spectral palette by rank — mirrors `FALLBACK_PALETTE` in
- * `global-metrics-client.tsx` and `top-users-bar-chart.tsx` so the workspace
- * tab and the users tab feel like the same family of visuals. No per-user
- * `display_color` exists on the Anthropic side, so we always paint by rank.
- */
-const PALETTE = [
-  "#d4f057",
-  "#86efac",
-  "#67e8f9",
-  "#93c5fd",
-  "#c4b5fd",
-  "#f9a8d4",
-  "#fcd34d",
-  "#fdba74",
+// Cap distinct stacked segments — greyscale has only ~4-5 perceptually-distinct
+// steps, so lower-ranked users fold into "Other". Full detail stays in the
+// tooltip + the users table below. Mirrors the workspace tab's daily chart.
+const MAX_STACK = 4;
+
+// Monotonic greyscale ramp by rank (no repeats) → distinguishable adjacent
+// segments + a legend that reads as a rank gradient.
+const MONO_RAMP = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
 ];
 
-function colorForSeries(key: string, idx: number): string {
-  if (key === OTHER_KEY) return "#71717a";
-  return PALETTE[idx % PALETTE.length];
-}
+type RenderSeries = {
+  key: string;
+  name: string;
+  color: string;
+  overflowKeys: string[];
+};
 
 export function DailyByUserChart({ data }: { data: DailyByUserResult }) {
-  const seriesWithColors = useMemo(
-    () =>
-      data.topUsers.map((s, idx) => ({
-        ...s,
-        color: colorForSeries(s.key, idx),
-      })),
-    [data.topUsers]
-  );
+  // Top MAX_STACK users + an aggregated "Other" (overflow ranks + the server's
+  // existing Other bucket); colour by stack position via the monotonic ramp.
+  const stackedSeries = useMemo<RenderSeries[]>(() => {
+    const real = data.topUsers.filter((s) => s.key !== OTHER_KEY);
+    const top = real.slice(0, MAX_STACK);
+    const overflowKeys = real.slice(MAX_STACK).map((s) => s.key);
+    const hasOtherBucket =
+      overflowKeys.length > 0 || data.topUsers.some((s) => s.key === OTHER_KEY);
+    const out: RenderSeries[] = top.map((s, i) => ({
+      key: s.key,
+      name: s.name,
+      color: MONO_RAMP[Math.min(i, MONO_RAMP.length - 1)],
+      overflowKeys: [],
+    }));
+    if (hasOtherBucket) {
+      out.push({
+        key: OTHER_KEY,
+        name: "Other",
+        color: MONO_RAMP[Math.min(out.length, MONO_RAMP.length - 1)],
+        overflowKeys,
+      });
+    }
+    return out;
+  }, [data.topUsers]);
 
   const chartConfig = useMemo<ChartConfig>(() => {
     const out: ChartConfig = {};
-    for (const s of seriesWithColors) {
+    for (const s of stackedSeries) {
       out[s.key] = { label: s.name, color: s.color };
     }
     return out;
-  }, [seriesWithColors]);
+  }, [stackedSeries]);
 
   const chartData = useMemo(
     () =>
       data.days.map((d) => {
         const row: Record<string, number | string> = { date: d.date };
-        for (const s of seriesWithColors) {
-          row[s.key] = (d.perUser[s.key] ?? 0) / 100;
+        for (const s of stackedSeries) {
+          if (s.key === OTHER_KEY) {
+            let sum = d.perUser[OTHER_KEY] ?? 0;
+            for (const k of s.overflowKeys) sum += d.perUser[k] ?? 0;
+            row[OTHER_KEY] = sum / 100;
+          } else {
+            row[s.key] = (d.perUser[s.key] ?? 0) / 100;
+          }
         }
         return row;
       }),
-    [data.days, seriesWithColors]
+    [data.days, stackedSeries]
   );
 
   const periodTotal = data.topUsers.reduce((s, u) => s + u.totalCents, 0);
-  const topCount = seriesWithColors.filter((s) => s.key !== OTHER_KEY).length;
-  const hasOther = seriesWithColors.some((s) => s.key === OTHER_KEY);
+  const topCount = stackedSeries.filter((s) => s.key !== OTHER_KEY).length;
+  const hasOther = stackedSeries.some((s) => s.key === OTHER_KEY);
 
   return (
     <Card>
@@ -94,7 +116,7 @@ export function DailyByUserChart({ data }: { data: DailyByUserResult }) {
         ) : (
           <ChartContainer config={chartConfig} className="min-h-[320px] w-full">
             <BarChart data={chartData} accessibilityLayer>
-              <CartesianGrid strokeDasharray="3 3" />
+              <CartesianGrid strokeDasharray="3 3" vertical={false} />
               <XAxis
                 dataKey="date"
                 tickLine={false}
@@ -126,18 +148,16 @@ export function DailyByUserChart({ data }: { data: DailyByUserResult }) {
                 }
               />
               <Legend wrapperStyle={{ paddingTop: 8 }} verticalAlign="top" />
-              {seriesWithColors.map((s, idx) => (
+              {stackedSeries.map((s) => (
                 <Bar
                   key={s.key}
                   dataKey={s.key}
                   stackId="users"
                   fill={s.color}
                   name={s.name}
-                  radius={
-                    idx === seriesWithColors.length - 1
-                      ? [4, 4, 0, 0]
-                      : [0, 0, 0, 0]
-                  }
+                  radius={[0, 0, 0, 0]}
+                  stroke="var(--card)"
+                  strokeWidth={1}
                 />
               ))}
             </BarChart>
diff --git a/src/components/claude/global-metrics-client.tsx b/src/components/claude/global-metrics-client.tsx
index abc64f56..a5de83d3 100644
--- a/src/components/claude/global-metrics-client.tsx
+++ b/src/components/claude/global-metrics-client.tsx
@@ -33,31 +33,38 @@ import { formatCurrency } from "@/lib/utils";
 import { formatDateLong, shareOfTotalFormatter } from "@/lib/chart-format";
 import { KpiStrip, buildOrgKpiTiles } from "@/components/claude/kpi-strip";
 import { SyncStatusPill } from "@/components/claude/sync-status-pill";
+import { InlineSpinner } from "@/components/ui/loading-state";
 
-// Deterministic palette fallback when workspace.displayColor is null.
-const FALLBACK_PALETTE = [
-  "#d4f057",
-  "#86efac",
-  "#67e8f9",
-  "#93c5fd",
-  "#c4b5fd",
-  "#f9a8d4",
-  "#fcd34d",
-  "#fdba74",
+// Max distinct workspace segments stacked in the "all workspaces" view. Beyond
+// this, lower-ranked workspaces fold into "Other" — greyscale only has ~4-5
+// perceptually-distinct steps, so a 9-deep grey stack is unreadable. Full
+// per-workspace detail stays in the tooltip and the workspace budget list below.
+const MAX_STACK = 4;
+
+// Monotonic greyscale ramp by rank — one clean luminance step per segment (no
+// repeats), so adjacent stacked segments stay distinguishable and the legend
+// swatches read as a rank gradient. Paired with 1px surface-coloured separators
+// on each bar (see the <Bar stroke=…> below).
+const MONO_RAMP = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
 ];
 
-function resolveSeriesColor(
+function seriesColor(
   key: string,
   displayColor: string | null,
-  idx: number,
+  stackIdx: number,
   useDbColors: boolean
 ): string {
-  if (key === OTHER_KEY) return "#71717a";
-  if (useDbColors && displayColor && displayColor.trim()) return displayColor;
-  // Spectral assignment by rank: top-spend workspace gets palette[0], next
-  // gets palette[1], etc. Trade-off: a workspace's color follows its rank,
-  // so it can shift when spend ordering changes. Worth it for the visual.
-  return FALLBACK_PALETTE[idx % FALLBACK_PALETTE.length];
+  // "Use workspace colors" on → the workspace's own hue (still capped at ≤5
+  // stacked segments, so even the colour mode stays legible).
+  if (useDbColors && key !== OTHER_KEY && displayColor && displayColor.trim()) {
+    return displayColor;
+  }
+  return MONO_RAMP[Math.min(stackIdx, MONO_RAMP.length - 1)];
 }
 
 type StackedSeries = {
@@ -156,31 +163,15 @@ export function GlobalMetricsClient({
     [kpis, orgBudgetCents, selectedMonth]
   );
 
-  const seriesWithColors = useMemo(
-    () =>
-      daily.topWorkspaces.map((s, idx) => ({
-        ...s,
-        color: resolveSeriesColor(s.key, s.displayColor, idx, useDbColors),
-      })),
-    [daily.topWorkspaces, useDbColors]
+  // Full server-provided series (top N + "Other") — used for the dropdown's
+  // filter options so any top workspace can still be isolated.
+  const allSeries = useMemo(
+    () => daily.topWorkspaces.map((s) => ({ ...s })),
+    [daily.topWorkspaces]
   );
-
-  const chartConfig = useMemo<ChartConfig>(() => {
-    const out: ChartConfig = {};
-    for (const s of seriesWithColors) {
-      out[s.key] = { label: s.name, color: s.color };
-    }
-    out[ESTIMATE_KEY] = { label: "Today (est.)", color: "var(--chart-1)" };
-    return out;
-  }, [seriesWithColors]);
-
-  // The daily chart's series come from `topWorkspaces` (top 8 + "Other"), so
-  // restrict the dropdown to keys that actually have a series — otherwise
-  // selecting a non-top workspace renders an empty chart. Workspaces outside
-  // the top 8 still show up in the workspace budget list and sparklines below.
   const seriesKeys = useMemo(
-    () => new Set(seriesWithColors.map((s) => s.key)),
-    [seriesWithColors]
+    () => new Set(allSeries.map((s) => s.key)),
+    [allSeries]
   );
   const filterableOptions = useMemo(
     () => workspaceOptions.filter((w) => seriesKeys.has(w.key)),
@@ -188,7 +179,7 @@ export function GlobalMetricsClient({
   );
 
   // Fall back to "All workspaces" if a previously-selected workspace dropped
-  // out of the top 8 between renders (e.g., a month switch reshuffles ranks).
+  // out of the top set between renders (e.g., a month switch reshuffles ranks).
   useEffect(() => {
     if (
       selectedWorkspace !== ALL_WORKSPACES &&
@@ -198,14 +189,70 @@ export function GlobalMetricsClient({
     }
   }, [selectedWorkspace, seriesKeys]);
 
-  const visibleSeries = useMemo(
-    () =>
-      selectedWorkspace === ALL_WORKSPACES
-        ? seriesWithColors
-        : seriesWithColors.filter((s) => s.key === selectedWorkspace),
-    [seriesWithColors, selectedWorkspace]
+  // Rendered stack: a single workspace when filtered; otherwise the top
+  // MAX_STACK workspaces + an aggregated "Other" (overflow ranks + the server's
+  // existing Other bucket). Colours assigned by stack position → monotonic grey
+  // ramp (or the workspace hue when "Use workspace colors" is on).
+  type RenderSeries = {
+    key: string;
+    name: string;
+    color: string;
+    overflowKeys: string[];
+  };
+  const stackedSeries = useMemo<RenderSeries[]>(() => {
+    if (selectedWorkspace !== ALL_WORKSPACES) {
+      const s = allSeries.find((x) => x.key === selectedWorkspace);
+      return s
+        ? [
+            {
+              key: s.key,
+              name: s.name,
+              color: seriesColor(s.key, s.displayColor, 0, useDbColors),
+              overflowKeys: [],
+            },
+          ]
+        : [];
+    }
+    const real = allSeries.filter((s) => s.key !== OTHER_KEY);
+    const top = real.slice(0, MAX_STACK);
+    const overflowKeys = real.slice(MAX_STACK).map((s) => s.key);
+    const hasOther =
+      overflowKeys.length > 0 || allSeries.some((s) => s.key === OTHER_KEY);
+    const out: RenderSeries[] = top.map((s, i) => ({
+      key: s.key,
+      name: s.name,
+      color: seriesColor(s.key, s.displayColor, i, useDbColors),
+      overflowKeys: [],
+    }));
+    if (hasOther) {
+      out.push({
+        key: OTHER_KEY,
+        name: "Other",
+        color: MONO_RAMP[Math.min(out.length, MONO_RAMP.length - 1)],
+        overflowKeys,
+      });
+    }
+    return out;
+  }, [allSeries, selectedWorkspace, useDbColors]);
+
+  const stackedTopCount = useMemo(
+    () => stackedSeries.filter((s) => s.key !== OTHER_KEY).length,
+    [stackedSeries]
+  );
+  const stackedHasOther = useMemo(
+    () => stackedSeries.some((s) => s.key === OTHER_KEY),
+    [stackedSeries]
   );
 
+  const chartConfig = useMemo<ChartConfig>(() => {
+    const out: ChartConfig = {};
+    for (const s of stackedSeries) {
+      out[s.key] = { label: s.name, color: s.color };
+    }
+    out[ESTIMATE_KEY] = { label: "Today (est.)", color: "var(--chart-1)" };
+    return out;
+  }, [stackedSeries]);
+
   // Spec 033 — the server appends one trailing "today (est.)" row carrying the
   // estimate under ESTIMATE_KEY. Render its ghost bar only in the org-wide view
   // (the estimate is a single org/total figure, not per-workspace here).
@@ -216,15 +263,22 @@ export function GlobalMetricsClient({
     () =>
       daily.rows.map((d) => {
         const row: Record<string, number | string> = { date: d.date };
-        for (const s of visibleSeries) {
-          row[s.key] = (d.perWorkspace[s.key] ?? 0) / 100;
+        for (const s of stackedSeries) {
+          if (s.key === OTHER_KEY) {
+            // Aggregate the server's Other bucket + any overflow workspaces.
+            let sum = d.perWorkspace[OTHER_KEY] ?? 0;
+            for (const k of s.overflowKeys) sum += d.perWorkspace[k] ?? 0;
+            row[OTHER_KEY] = sum / 100;
+          } else {
+            row[s.key] = (d.perWorkspace[s.key] ?? 0) / 100;
+          }
         }
         if (showEstimate) {
           row[ESTIMATE_KEY] = (d.perWorkspace[ESTIMATE_KEY] ?? 0) / 100;
         }
         return row;
       }),
-    [daily.rows, visibleSeries, showEstimate]
+    [daily.rows, stackedSeries, showEstimate]
   );
 
   return (
@@ -253,8 +307,8 @@ export function GlobalMetricsClient({
             </SelectContent>
           </Select>
           {isPending && (
-            <span className="text-sm text-muted-foreground animate-pulse">
-              Loading…
+            <span className="flex items-center gap-2 text-sm text-muted-foreground">
+              <InlineSpinner /> Loading…
             </span>
           )}
         </div>
@@ -270,11 +324,11 @@ export function GlobalMetricsClient({
               <CardTitle className="text-base">
                 {selectedWorkspace === ALL_WORKSPACES
                   ? "Daily spend by workspace"
-                  : `Daily spend · ${visibleSeries[0]?.name ?? "Workspace"}`}
+                  : `Daily spend · ${stackedSeries[0]?.name ?? "Workspace"}`}
               </CardTitle>
               <p className="text-sm text-muted-foreground">
                 {selectedWorkspace === ALL_WORKSPACES
-                  ? `Stacked · top ${seriesWithColors.filter((s) => s.key !== OTHER_KEY).length} workspaces${seriesWithColors.some((s) => s.key === OTHER_KEY) ? " + Other" : ""}`
+                  ? `Stacked · top ${stackedTopCount} workspaces${stackedHasOther ? " + Other" : ""}`
                   : "Single workspace · filtered view"}
                 {" · "}
                 <span className="tabular-nums">{formatCurrency(kpis.totalCents)}</span>{" "}
@@ -304,7 +358,7 @@ export function GlobalMetricsClient({
           ) : (
             <ChartContainer config={chartConfig} className="min-h-[320px] w-full">
               <BarChart data={chartData} accessibilityLayer>
-                <CartesianGrid strokeDasharray="3 3" />
+                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                 <XAxis
                   dataKey="date"
                   tickLine={false}
@@ -336,18 +390,18 @@ export function GlobalMetricsClient({
                   }
                 />
                 <Legend wrapperStyle={{ paddingTop: 8 }} />
-                {visibleSeries.map((s) => (
+                {stackedSeries.map((s) => (
                   <Bar
                     key={s.key}
                     dataKey={s.key}
                     stackId="costs"
                     fill={s.color}
                     name={s.name}
-                    radius={
-                      s.key === visibleSeries[visibleSeries.length - 1]?.key
-                        ? [4, 4, 0, 0]
-                        : [0, 0, 0, 0]
-                    }
+                    radius={[0, 0, 0, 0]}
+                    // 1px surface-coloured separator so adjacent stacked
+                    // greys (or hues) keep crisp edges.
+                    stroke="var(--card)"
+                    strokeWidth={1}
                   />
                 ))}
                 {showEstimate && (
@@ -360,7 +414,7 @@ export function GlobalMetricsClient({
                     stroke="var(--chart-1)"
                     strokeOpacity={0.6}
                     strokeDasharray="3 3"
-                    radius={[4, 4, 0, 0]}
+                    radius={[0, 0, 0, 0]}
                   />
                 )}
               </BarChart>
diff --git a/src/components/claude/kpi-strip.tsx b/src/components/claude/kpi-strip.tsx
index 1718bb6a..70838034 100644
--- a/src/components/claude/kpi-strip.tsx
+++ b/src/components/claude/kpi-strip.tsx
@@ -45,7 +45,7 @@ function KpiTileCard({ tile }: { tile: KpiTile }) {
           {tile.icon}
         </div>
         <p
-          className="mt-2 text-2xl font-bold tabular-nums tracking-tight"
+          className="mt-2 text-2xl font-mono tabular-nums tracking-tight"
           aria-describedby={captionId}
         >
           {tile.value}
@@ -58,9 +58,9 @@ function KpiTileCard({ tile }: { tile: KpiTile }) {
               tile.tone === "danger"
                 ? "text-destructive"
                 : tile.tone === "warn"
-                ? "text-amber-500"
+                ? "text-warning"
                 : tile.tone === "success"
-                ? "text-emerald-500"
+                ? "text-success"
                 : "text-muted-foreground"
             )}
           >
@@ -114,7 +114,7 @@ export function buildOrgKpiTiles(args: {
     momDeltaPct === null ? (
       <span className="text-muted-foreground">— no spend last month</span>
     ) : momDeltaPct >= 0 ? (
-      <span className="inline-flex items-center gap-1 text-emerald-500">
+      <span className="inline-flex items-center gap-1 text-success">
         <TrendingUp className="size-3" /> +{momDeltaPct}% vs prior month
       </span>
     ) : (
diff --git a/src/components/claude/org-credits-panel.tsx b/src/components/claude/org-credits-panel.tsx
index a5e0d2f2..a568078d 100644
--- a/src/components/claude/org-credits-panel.tsx
+++ b/src/components/claude/org-credits-panel.tsx
@@ -11,7 +11,8 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { setOrgBillingBudget } from "@/actions/anthropic-global";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
+import { SegmentedBar } from "@/components/ui/segmented-bar";
 import { formatCurrency } from "@/lib/utils";
 import type { TodayEstimate } from "@/lib/anthropic/estimate-today";
 import { EstChip } from "@/components/claude/today-estimate";
@@ -37,6 +38,7 @@ export function OrgBillingBudgetCard({
       : ""
   );
   const [isPending, startTransition] = useTransition();
+  const status = useInlineStatus();
 
   function handleSave() {
     startTransition(async () => {
@@ -47,10 +49,10 @@ export function OrgBillingBudgetCard({
           : Math.round(dollars * 100);
       const result = await setOrgBillingBudget(limitCents);
       if (result.success) {
-        toast.success("Billing budget updated.");
+        status.ok("Saved");
         setEditing(false);
       } else {
-        toast.error(`Failed to update: ${result.error}`);
+        status.error(result.error);
       }
     });
   }
@@ -112,7 +114,7 @@ export function OrgBillingBudgetCard({
                 projectedPct != null && projectedPct >= 100
                   ? "text-destructive"
                   : projectedPct != null && projectedPct >= 80
-                  ? "text-amber-500"
+                  ? "text-warning"
                   : ""
               }`}
             >
@@ -163,6 +165,7 @@ export function OrgBillingBudgetCard({
                   >
                     Cancel
                   </Button>
+                  <StatusText status={status.status} />
                 </div>
               </>
             ) : (
@@ -179,19 +182,18 @@ export function OrgBillingBudgetCard({
         </div>
 
         {limitCents != null && (
-          <div className="mt-4 space-y-1">
-            <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
-              <div
-                className={`h-full rounded-full transition-all ${
-                  (utilizationPct ?? 0) >= 100
-                    ? "bg-destructive"
-                    : (utilizationPct ?? 0) >= 80
-                    ? "bg-amber-500"
-                    : "bg-primary"
-                }`}
-                style={{ width: `${Math.min(utilizationPct ?? 0, 100)}%` }}
-              />
-            </div>
+          <div className="mt-4">
+            <SegmentedBar
+              value={Math.min(utilizationPct ?? 0, 100) / 100}
+              tone={
+                (utilizationPct ?? 0) >= 100
+                  ? "over"
+                  : (utilizationPct ?? 0) >= 80
+                    ? "warn"
+                    : "filled"
+              }
+              ariaLabel={`${utilizationPct ?? 0}% of monthly budget used`}
+            />
           </div>
         )}
       </CardContent>
diff --git a/src/components/claude/sync-button.tsx b/src/components/claude/sync-button.tsx
index 6e605374..551dedc0 100644
--- a/src/components/claude/sync-button.tsx
+++ b/src/components/claude/sync-button.tsx
@@ -4,29 +4,34 @@ import { useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { syncWorkspacesManual } from "@/actions/anthropic-global";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { RefreshCw } from "lucide-react";
 
 export function SyncButton() {
   const [isPending, startTransition] = useTransition();
   const router = useRouter();
+  const status = useInlineStatus();
 
   function handleSync() {
     startTransition(async () => {
       const result = await syncWorkspacesManual();
       if (result.success) {
-        toast.success("Sync complete.");
         router.refresh();
       } else {
-        toast.error(`Sync failed: ${result.error}`);
+        status.error("Sync failed");
       }
     });
   }
 
   return (
-    <Button onClick={handleSync} disabled={isPending}>
-      <RefreshCw className={`mr-2 size-4 ${isPending ? "animate-spin" : ""}`} />
-      {isPending ? "Syncing…" : "Trigger Sync"}
-    </Button>
+    <div className="flex items-center gap-3">
+      <Button onClick={handleSync} disabled={isPending}>
+        <RefreshCw
+          className={`mr-2 size-4 ${isPending ? "animate-spin" : ""}`}
+        />
+        {isPending ? "Syncing…" : "Trigger Sync"}
+      </Button>
+      <StatusText status={status.status} />
+    </div>
   );
 }
diff --git a/src/components/claude/sync-status-pill.tsx b/src/components/claude/sync-status-pill.tsx
index b9724e2d..3d1dc8bf 100644
--- a/src/components/claude/sync-status-pill.tsx
+++ b/src/components/claude/sync-status-pill.tsx
@@ -30,16 +30,16 @@ export function SyncStatusPill({ status, className }: SyncStatusPillProps) {
 
   const toneClass =
     tone === "green"
-      ? "bg-emerald-950/40 text-emerald-400 border-emerald-800"
+      ? "bg-transparent text-success border-success"
       : tone === "amber"
-      ? "bg-amber-950/40 text-amber-400 border-amber-800"
-      : "bg-muted text-muted-foreground border-muted-foreground/20";
+      ? "bg-transparent text-warning border-warning"
+      : "bg-transparent text-muted-foreground border-muted-foreground/20";
 
   const dotClass =
     tone === "green"
-      ? "bg-emerald-500"
+      ? "bg-success"
       : tone === "amber"
-      ? "bg-amber-500"
+      ? "bg-warning"
       : "bg-muted-foreground";
 
   return (
diff --git a/src/components/claude/top-users-bar-chart.tsx b/src/components/claude/top-users-bar-chart.tsx
index 4e654a01..a3d4c079 100644
--- a/src/components/claude/top-users-bar-chart.tsx
+++ b/src/components/claude/top-users-bar-chart.tsx
@@ -14,14 +14,14 @@ import type { UserListRow } from "@/types";
 // mirrors `FALLBACK_PALETTE` in global-metrics-client.tsx so the two
 // dashboards feel like the same family of visuals.
 const FALLBACK_PALETTE = [
-  "#d4f057",
-  "#86efac",
-  "#67e8f9",
-  "#93c5fd",
-  "#c4b5fd",
-  "#f9a8d4",
-  "#fcd34d",
-  "#fdba74",
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
 ];
 
 const MUTED_GREY = "var(--muted-foreground)";
@@ -33,12 +33,19 @@ const config: ChartConfig = {
 /**
  * Horizontal Top-10 users by cost bar chart.
  *
- * - Bar colour: user's resolved workspace `display_color` when available,
- *   otherwise a spectral palette colour indexed by rank, otherwise muted grey
- *   for users without a workspace at all.
+ * - Bar colour: monochrome ink by default (Nothing — rank is already encoded by
+ *   length + order). When `useDbColors` is on (the card's "Use workspace colors"
+ *   toggle), bars use the user's resolved workspace `display_color`, falling back
+ *   to a greyscale rank ramp / muted grey.
  * - Click navigates to the per-user drill page at `/claude/users/N`.
  */
-export function TopUsersBarChart({ users }: { users: UserListRow[] }) {
+export function TopUsersBarChart({
+  users,
+  useDbColors = false,
+}: {
+  users: UserListRow[];
+  useDbColors?: boolean;
+}) {
   const router = useRouter();
   const top = users.filter((u) => u.costCents > 0).slice(0, 10);
 
@@ -54,7 +61,7 @@ export function TopUsersBarChart({ users }: { users: UserListRow[] }) {
     userId: u.userId,
     label: u.name || u.email,
     cost: u.costCents / 100,
-    fill: resolveBarColor(u, idx),
+    fill: resolveBarColor(u, idx, useDbColors),
   }));
 
   // Match the chart height to the bar count for readable horizontal layout.
@@ -93,7 +100,7 @@ export function TopUsersBarChart({ users }: { users: UserListRow[] }) {
         />
         <Bar
           dataKey="cost"
-          radius={[0, 4, 4, 0]}
+          radius={[0, 0, 0, 0]}
           maxBarSize={28}
           cursor="pointer"
         >
@@ -110,7 +117,13 @@ export function TopUsersBarChart({ users }: { users: UserListRow[] }) {
   );
 }
 
-function resolveBarColor(user: UserListRow, idx: number): string {
+function resolveBarColor(
+  user: UserListRow,
+  idx: number,
+  useDbColors: boolean
+): string {
+  // Monochrome default — uniform ink; rank is already shown by bar length/order.
+  if (!useDbColors) return "var(--chart-1)";
   if (user.workspaceColor && user.workspaceColor.trim()) {
     return user.workspaceColor;
   }
diff --git a/src/components/claude/top-users-card.tsx b/src/components/claude/top-users-card.tsx
new file mode 100644
index 00000000..f2fa7431
--- /dev/null
+++ b/src/components/claude/top-users-card.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { TopUsersBarChart } from "@/components/claude/top-users-bar-chart";
+import type { UserListRow } from "@/types";
+
+/**
+ * Client wrapper for the Top-10 users chart that owns the "Use workspace colors"
+ * toggle (mirrors the Workspaces tab). Default is monochrome; the preference is
+ * persisted under the SAME localStorage key as the workspace daily chart, so
+ * flipping it on either Claude tab keeps both in sync.
+ */
+export function TopUsersCard({ users }: { users: UserListRow[] }) {
+  const [useDbColors, setUseDbColors] = useState(false);
+
+  useEffect(() => {
+    if (localStorage.getItem("claude-dashboard:useDbColors") === "true") {
+      setUseDbColors(true);
+    }
+  }, []);
+  useEffect(() => {
+    localStorage.setItem("claude-dashboard:useDbColors", String(useDbColors));
+  }, [useDbColors]);
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <CardTitle className="text-base">Top 10 Users by Cost</CardTitle>
+          <div className="flex items-center gap-2">
+            <Switch
+              id="top-users-db-colors"
+              checked={useDbColors}
+              onCheckedChange={setUseDbColors}
+            />
+            <Label
+              htmlFor="top-users-db-colors"
+              className="cursor-pointer text-xs text-muted-foreground"
+            >
+              Use workspace colors
+            </Label>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <TopUsersBarChart users={users} useDbColors={useDbColors} />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/claude/user-kpi-strip.tsx b/src/components/claude/user-kpi-strip.tsx
index 7f3f5e30..687e6c8f 100644
--- a/src/components/claude/user-kpi-strip.tsx
+++ b/src/components/claude/user-kpi-strip.tsx
@@ -18,12 +18,7 @@ export function UserKpiStrip({ kpis }: { kpis: UsersDashboardKpis }) {
       label: "Active Users",
       value: <span className="tabular-nums">{kpis.activeUsersCurrent}</span>,
       caption: <ActiveUsersDeltaCaption kpis={kpis} />,
-      tone:
-        kpis.activeUsersDeltaPct === null
-          ? "default"
-          : kpis.activeUsersDeltaPct >= 0
-          ? "success"
-          : "danger",
+      tone: "default",
       icon: <Users className="size-3 text-muted-foreground" aria-hidden />,
     },
     {
@@ -114,13 +109,13 @@ function ActiveUsersDeltaCaption({ kpis }: { kpis: UsersDashboardKpis }) {
   }
   if (pct > 0) {
     return (
-      <span className="inline-flex items-center gap-1 text-emerald-500">
+      <span className="inline-flex items-center gap-1 text-foreground">
         <TrendingUp className="size-3" /> +{pct}% vs prior month
       </span>
     );
   }
   return (
-    <span className="inline-flex items-center gap-1 text-destructive">
+    <span className="inline-flex items-center gap-1 text-foreground">
       <TrendingDown className="size-3" /> {pct}% vs prior month
     </span>
   );
diff --git a/src/components/claude/users-month-picker.tsx b/src/components/claude/users-month-picker.tsx
index 9f9cd013..7ef92785 100644
--- a/src/components/claude/users-month-picker.tsx
+++ b/src/components/claude/users-month-picker.tsx
@@ -3,6 +3,7 @@
 import { useTransition } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { MonthPicker } from "@/components/profile/month-picker";
+import { InlineSpinner } from "@/components/ui/loading-state";
 
 type UsersMonthPickerProps = {
   value: string;
@@ -31,11 +32,7 @@ export function UsersMonthPicker({ value, months }: UsersMonthPickerProps) {
   return (
     <div className="flex items-center gap-3">
       <MonthPicker value={value} onChange={handleChange} months={months} />
-      {isPending && (
-        <span className="animate-pulse text-sm text-muted-foreground">
-          Loading…
-        </span>
-      )}
+      {isPending && <InlineSpinner />}
     </div>
   );
 }
diff --git a/src/components/claude/workspace-budget-list.tsx b/src/components/claude/workspace-budget-list.tsx
index 621b8985..908edf53 100644
--- a/src/components/claude/workspace-budget-list.tsx
+++ b/src/components/claude/workspace-budget-list.tsx
@@ -15,7 +15,8 @@ import { Switch } from "@/components/ui/switch";
 import { ChevronRight } from "lucide-react";
 import { setWorkspaceLimit } from "@/actions/anthropic-global";
 import { Sparkline } from "@/components/ui/sparkline";
-import { toast } from "sonner";
+import { SegmentedBar } from "@/components/ui/segmented-bar";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import type { WorkspaceListItem, WorkspaceSparkline } from "@/types";
 import {
   cn,
@@ -89,7 +90,7 @@ function SparklineDeltaLabel({
     <span
       className={cn(
         "text-[10px]",
-        big ? "text-amber-500 font-medium" : "text-muted-foreground"
+        big ? "text-warning font-medium" : "text-muted-foreground"
       )}
     >
       {big ? "▲ " : ""}
@@ -110,6 +111,7 @@ function WorkspaceBudgetRow({ workspace, sparkline }: WorkspaceBudgetRowProps) {
     workspace.limitCents != null ? String(workspace.limitCents / 100) : ""
   );
   const [isPending, startTransition] = useTransition();
+  const status = useInlineStatus();
 
   function handleSave() {
     startTransition(async () => {
@@ -121,13 +123,13 @@ function WorkspaceBudgetRow({ workspace, sparkline }: WorkspaceBudgetRowProps) {
       try {
         const result = await setWorkspaceLimit(workspace.workspaceId, limitCents);
         if (result.success) {
-          toast.success("Budget limit updated.");
+          status.ok("Saved");
           setEditing(false);
         } else {
-          toast.error(`Failed to update limit: ${result.error}`);
+          status.error(result.error);
         }
       } catch {
-        toast.error("Failed to update limit: network error.");
+        status.error("Network error");
       }
     });
   }
@@ -135,11 +137,6 @@ function WorkspaceBudgetRow({ workspace, sparkline }: WorkspaceBudgetRowProps) {
   const pct = workspace.utilizationPct;
   const isOver = pct != null && pct >= 100;
   const isWarn = pct != null && pct >= 80 && pct < 100;
-  const barClass = isOver
-    ? "bg-destructive"
-    : isWarn
-    ? "bg-amber-500"
-    : "bg-primary";
 
   return (
     <div className="group flex items-center justify-between gap-4 py-3">
@@ -169,7 +166,7 @@ function WorkspaceBudgetRow({ workspace, sparkline }: WorkspaceBudgetRowProps) {
           {isWarn && (
             <Badge
               variant="outline"
-              className="shrink-0 border-amber-500 text-amber-500 text-xs"
+              className="shrink-0 border-warning text-warning text-xs"
             >
               {pct}%
             </Badge>
@@ -196,12 +193,12 @@ function WorkspaceBudgetRow({ workspace, sparkline }: WorkspaceBudgetRowProps) {
         </div>
         {workspace.limitCents != null && (
           <div className="mt-1.5 space-y-1">
-            <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
-              <div
-                className={cn("h-full rounded-full transition-all", barClass)}
-                style={{ width: `${Math.min(workspace.utilizationPct ?? 0, 100)}%` }}
-              />
-            </div>
+            <SegmentedBar
+              value={Math.min(workspace.utilizationPct ?? 0, 100) / 100}
+              tone={isOver ? "over" : isWarn ? "warn" : "filled"}
+              size="compact"
+              ariaLabel={`${workspace.utilizationPct ?? 0}% of limit used`}
+            />
             <PaceLabel workspace={workspace} />
           </div>
         )}
@@ -245,11 +242,15 @@ function WorkspaceBudgetRow({ workspace, sparkline }: WorkspaceBudgetRowProps) {
             >
               Cancel
             </Button>
+            <StatusText status={status.status} />
           </>
         ) : (
-          <Button size="sm" variant="outline" onClick={() => setEditing(true)}>
-            {workspace.limitCents != null ? "Edit limit" : "Set limit"}
-          </Button>
+          <>
+            <Button size="sm" variant="outline" onClick={() => setEditing(true)}>
+              {workspace.limitCents != null ? "Edit limit" : "Set limit"}
+            </Button>
+            <StatusText status={status.status} />
+          </>
         )}
       </div>
     </div>
diff --git a/src/components/claude/workspace-daily-chart.tsx b/src/components/claude/workspace-daily-chart.tsx
index 42466072..c9f15439 100644
--- a/src/components/claude/workspace-daily-chart.tsx
+++ b/src/components/claude/workspace-daily-chart.tsx
@@ -17,13 +17,11 @@ const config: ChartConfig = {
 
 export function WorkspaceDailyChart({
   dailyTotals,
-  color,
   limitCents,
   daysInMonth,
   estimatedTodayCents,
 }: {
   dailyTotals: { date: string; costCents: number }[];
-  color?: string | null;
   /** Monthly limit in cents — drives the per-day prorated cap reference line. */
   limitCents?: number | null;
   /** Days in the selected month, used to prorate the monthly limit. */
@@ -71,7 +69,7 @@ export function WorkspaceDailyChart({
   return (
     <ChartContainer config={config} className="h-[260px] w-full">
       <BarChart data={data} accessibilityLayer>
-        <CartesianGrid strokeDasharray="3 3" />
+        <CartesianGrid strokeDasharray="3 3" vertical={false} />
         <XAxis
           dataKey="date"
           tickLine={false}
@@ -122,8 +120,8 @@ export function WorkspaceDailyChart({
         />
         <Bar
           dataKey="cost"
-          fill={color ?? "var(--chart-1)"}
-          radius={[4, 4, 0, 0]}
+          fill="var(--chart-1)"
+          radius={[0, 0, 0, 0]}
           maxBarSize={56}
         />
         {data.some((d) => d.estimated != null) && (
@@ -135,7 +133,7 @@ export function WorkspaceDailyChart({
             stroke="var(--chart-1)"
             strokeOpacity={0.6}
             strokeDasharray="3 3"
-            radius={[4, 4, 0, 0]}
+            radius={[0, 0, 0, 0]}
             maxBarSize={56}
           />
         )}
diff --git a/src/components/claude/workspace-model-breakdown.tsx b/src/components/claude/workspace-model-breakdown.tsx
index a8869f03..751f33b9 100644
--- a/src/components/claude/workspace-model-breakdown.tsx
+++ b/src/components/claude/workspace-model-breakdown.tsx
@@ -9,13 +9,15 @@ import {
 import type { ModelBreakdownRow } from "@/types";
 import { formatCurrency } from "@/lib/utils";
 
+// Monochrome ramp by rank (rows arrive cost-desc) — one luminance step per
+// model, so the proportion bar + legend dots read as a greyscale gradient
+// instead of a rainbow. Mirrors the other Claude charts.
 const PALETTE = [
-  "#c084fc",
-  "#67e8f9",
-  "#86efac",
-  "#fcd34d",
-  "#f9a8d4",
-  "#93c5fd",
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
 ];
 
 /**
@@ -55,6 +57,11 @@ export function WorkspaceModelBreakdown({
               style={{
                 width: `${widthPct}%`,
                 backgroundColor: PALETTE[i % PALETTE.length],
+                // 1.5px surface separator so adjacent greys stay distinct.
+                boxShadow:
+                  i < rows.length - 1
+                    ? "inset -1.5px 0 0 var(--card)"
+                    : undefined,
               }}
               title={`${r.modelName} · ${formatCurrency(r.costCents)} · ${r.pct}%`}
             />
diff --git a/src/components/copilot/activity-distribution.tsx b/src/components/copilot/activity-distribution.tsx
index 57231124..1aaeaab1 100644
--- a/src/components/copilot/activity-distribution.tsx
+++ b/src/components/copilot/activity-distribution.tsx
@@ -1,14 +1,6 @@
 "use client";
 
-import { PieChart, Pie, Cell } from "recharts";
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-} from "@/components/ui/chart";
-import type { ChartConfig } from "@/components/ui/chart";
+import { SegmentedBar } from "@/components/ui/segmented-bar";
 import {
   Card,
   CardContent,
@@ -16,7 +8,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { shareOfTotalFormatter } from "@/lib/chart-format";
 
 interface ActivityDistributionProps {
   data: {
@@ -27,31 +18,12 @@ interface ActivityDistributionProps {
   };
 }
 
-const chartConfig = {
-  powerUsers: {
-    label: "Power Users (20+ days)",
-    color: "var(--chart-1)",
-  },
-  regularUsers: {
-    label: "Regular (5-19 days)",
-    color: "var(--chart-2)",
-  },
-  occasionalUsers: {
-    label: "Occasional (1-4 days)",
-    color: "var(--chart-3)",
-  },
-  inactiveUsers: {
-    label: "Inactive",
-    color: "var(--chart-4)",
-  },
-} satisfies ChartConfig;
-
-const COLORS = [
-  "var(--chart-1)",
-  "var(--chart-2)",
-  "var(--chart-3)",
-  "var(--chart-4)",
-];
+const SEGMENT_LABELS: Record<string, string> = {
+  powerUsers: "Power Users (20+ days)",
+  regularUsers: "Regular (5-19 days)",
+  occasionalUsers: "Occasional (1-4 days)",
+  inactiveUsers: "Inactive",
+};
 
 export function ActivityDistribution({ data }: ActivityDistributionProps) {
   const total =
@@ -80,40 +52,31 @@ export function ActivityDistribution({ data }: ActivityDistributionProps) {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <ChartContainer
-          config={chartConfig}
-          className="mx-auto aspect-square max-h-[300px]"
-        >
-          <PieChart accessibilityLayer>
-            <ChartTooltip
-              content={
-                <ChartTooltipContent
-                  nameKey="name"
-                  numberFormat="integer"
-                  secondaryFormatter={shareOfTotalFormatter("of seats")}
-                />
-              }
-            />
-            <ChartLegend
-              content={<ChartLegendContent nameKey="name" />}
-            />
-            <Pie
-              data={pieData}
-              dataKey="value"
-              nameKey="name"
-              innerRadius={60}
-              outerRadius={100}
-              paddingAngle={2}
-            >
-              {pieData.map((entry, index) => (
-                <Cell
-                  key={entry.name}
-                  fill={COLORS[index % COLORS.length]}
+        <div className="flex flex-col gap-5">
+          {pieData.map((entry) => {
+            const fraction = entry.value / total;
+            const pct = Math.round(fraction * 100);
+            const label = SEGMENT_LABELS[entry.name] ?? entry.name;
+            return (
+              <div key={entry.name} className="flex flex-col gap-1.5">
+                <div className="flex items-baseline justify-between gap-3">
+                  <span className="font-mono text-xs uppercase tracking-wider text-muted-foreground">
+                    {label}
+                  </span>
+                  <span className="font-mono text-sm tabular-nums">
+                    {entry.value.toLocaleString()}
+                    <span className="ml-2 text-muted-foreground">{pct}%</span>
+                  </span>
+                </div>
+                <SegmentedBar
+                  size="compact"
+                  value={fraction}
+                  ariaLabel={`${label}: ${entry.value} of ${total} seats (${pct}%)`}
                 />
-              ))}
-            </Pie>
-          </PieChart>
-        </ChartContainer>
+              </div>
+            );
+          })}
+        </div>
       </CardContent>
     </Card>
   );
diff --git a/src/components/copilot/metrics-freshness-card.tsx b/src/components/copilot/metrics-freshness-card.tsx
index cc5a5c3c..eb279505 100644
--- a/src/components/copilot/metrics-freshness-card.tsx
+++ b/src/components/copilot/metrics-freshness-card.tsx
@@ -7,9 +7,9 @@ export function MetricsFreshnessCard({ freshness }: { freshness: CopilotFreshnes
   if (!freshness.stale || freshness.daysBehind == null) return null;
 
   return (
-    <Card className="border-amber-500/40 bg-amber-500/5">
+    <Card className="border-warning">
       <CardContent className="flex items-start gap-3 py-4">
-        <AlertTriangle className="size-5 mt-0.5 text-amber-500 shrink-0" />
+        <AlertTriangle className="size-5 mt-0.5 text-warning shrink-0" />
         <div className="space-y-1 text-sm">
           <p className="font-medium">
             Copilot metrics are stale — last data {freshness.daysBehind} days ago
diff --git a/src/components/copilot/overview-cards.tsx b/src/components/copilot/overview-cards.tsx
index 7632ae83..e06a4ce0 100644
--- a/src/components/copilot/overview-cards.tsx
+++ b/src/components/copilot/overview-cards.tsx
@@ -63,7 +63,7 @@ export function OverviewCards({
             <card.icon className="size-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{card.value}</div>
+            <div className="text-2xl font-mono">{card.value}</div>
             {card.description && (
               <p className="text-xs text-muted-foreground">
                 {card.description}
diff --git a/src/components/dashboard/admin/activity-timeline.tsx b/src/components/dashboard/admin/activity-timeline.tsx
index 3262150c..48a5c535 100644
--- a/src/components/dashboard/admin/activity-timeline.tsx
+++ b/src/components/dashboard/admin/activity-timeline.tsx
@@ -15,8 +15,8 @@ interface ActivityTimelineProps {
 
 const DOT_CLASSES: Record<DashboardActivityItem["severity"], string> = {
   info: "bg-muted-foreground",
-  success: "bg-green-500 dark:bg-green-400",
-  warn: "bg-yellow-500 dark:bg-yellow-400",
+  success: "bg-success",
+  warn: "bg-warning",
   danger: "bg-destructive",
 };
 
diff --git a/src/components/dashboard/admin/admin-dashboard.tsx b/src/components/dashboard/admin/admin-dashboard.tsx
index 24c64f76..82216074 100644
--- a/src/components/dashboard/admin/admin-dashboard.tsx
+++ b/src/components/dashboard/admin/admin-dashboard.tsx
@@ -111,12 +111,12 @@ function SyncChip({
   return (
     <span
       className={`inline-flex items-center gap-2 rounded-full border bg-card/60 px-3 py-1 text-[11px] ${
-        isStale ? "text-yellow-500 dark:text-yellow-400" : "text-muted-foreground"
+        isStale ? "text-warning" : "text-muted-foreground"
       }`}
     >
       <span
         className={`size-2 rounded-full ${
-          isStale ? "bg-yellow-500" : "bg-green-500 dark:bg-green-400"
+          isStale ? "bg-warning" : "bg-success"
         }`}
       />
       {isStale ? "Sync data is stale" : "All sources synced"} ·{" "}
diff --git a/src/components/dashboard/viewer/identity-card.tsx b/src/components/dashboard/viewer/identity-card.tsx
index 972fbd81..bb32dabd 100644
--- a/src/components/dashboard/viewer/identity-card.tsx
+++ b/src/components/dashboard/viewer/identity-card.tsx
@@ -113,7 +113,7 @@ function SyncCallout({
 
   if (sync.isStale) {
     return (
-      <div className="flex items-start gap-2 rounded-md border border-yellow-500/30 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-700 dark:text-yellow-300">
+      <div className="flex items-start gap-2 rounded-md border border-warning px-3 py-2 text-xs text-warning">
         <AlertCircle className="mt-[2px] size-4 shrink-0" aria-hidden />
         <p>
           Anthropic data is stale — last sync{" "}
@@ -125,7 +125,7 @@ function SyncCallout({
   }
 
   return (
-    <div className="flex items-start gap-2 rounded-md border border-green-500/30 bg-green-500/10 px-3 py-2 text-xs text-green-700 dark:text-green-300">
+    <div className="flex items-start gap-2 rounded-md border border-success px-3 py-2 text-xs text-success">
       <Check className="mt-[2px] size-4 shrink-0" aria-hidden />
       <p>
         Claude API key configured · Anthropic data synced{" "}
diff --git a/src/components/dashboard/viewer/my-usage-card.tsx b/src/components/dashboard/viewer/my-usage-card.tsx
index 7f8d442e..35372700 100644
--- a/src/components/dashboard/viewer/my-usage-card.tsx
+++ b/src/components/dashboard/viewer/my-usage-card.tsx
@@ -21,6 +21,7 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@/components/ui/chart";
+import { SegmentedBar } from "@/components/ui/segmented-bar";
 import { formatCurrency } from "@/lib/utils";
 import type { CostData } from "@/types";
 import type { ViewerModelTotal } from "@/actions/dashboard";
@@ -182,14 +183,8 @@ export function MyUsageCard({
                       {formatCurrency(m.costCents)}
                     </span>
                   </div>
-                  <div className="mt-1 h-1 overflow-hidden rounded-full bg-muted">
-                    <div
-                      className="h-full"
-                      style={{
-                        width: `${m.pct}%`,
-                        background: `var(--chart-${(i % 4) + 1})`,
-                      }}
-                    />
+                  <div className="mt-1">
+                    <SegmentedBar value={m.pct / 100} size="compact" />
                   </div>
                   <p className="mt-0.5 text-[10px] text-muted-foreground tabular-nums">
                     {m.pct}%
@@ -208,7 +203,7 @@ export function MyUsageCard({
                   <>
                     {" "}
                     · saved{" "}
-                    <span className="text-green-700 dark:text-green-400 tabular-nums">
+                    <span className="text-success tabular-nums">
                       ~{formatCurrency(cacheSavingsCents)}
                     </span>
                   </>
diff --git a/src/components/data-table-column-header.tsx b/src/components/data-table-column-header.tsx
index 6f409d11..fc80f53e 100644
--- a/src/components/data-table-column-header.tsx
+++ b/src/components/data-table-column-header.tsx
@@ -2,7 +2,6 @@
 
 import { Column } from "@tanstack/react-table";
 import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 interface DataTableColumnHeaderProps<TData, TValue> {
@@ -20,26 +19,35 @@ export function DataTableColumnHeader<TData, TValue>({
     return <div className={cn(className)}>{title}</div>;
   }
 
+  const sorted = column.getIsSorted();
+
   return (
-    <Button
-      variant="ghost"
+    <button
+      type="button"
       onClick={() => {
-        if (column.getIsSorted() === "desc") {
+        if (sorted === "desc") {
           column.clearSorting();
         } else {
-          column.toggleSorting(column.getIsSorted() === "asc");
+          column.toggleSorting(sorted === "asc");
         }
       }}
-      className={cn("-ml-3 h-8", className)}
+      // Matches the <th> label treatment (a <button> does NOT inherit
+      // text-transform/font reliably) and carries no padding/height of its own,
+      // so the label stays flush with the column's cells.
+      className={cn(
+        "inline-flex items-center gap-1.5 font-mono text-[11px] tracking-[0.1em] uppercase text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:text-foreground",
+        sorted && "text-foreground",
+        className
+      )}
     >
       {title}
-      {column.getIsSorted() === "desc" ? (
-        <ArrowDown className="ml-2 size-4" />
-      ) : column.getIsSorted() === "asc" ? (
-        <ArrowUp className="ml-2 size-4" />
+      {sorted === "desc" ? (
+        <ArrowDown className="size-3.5" />
+      ) : sorted === "asc" ? (
+        <ArrowUp className="size-3.5" />
       ) : (
-        <ArrowUpDown className="ml-2 size-4" />
+        <ArrowUpDown className="size-3.5 opacity-50" />
       )}
-    </Button>
+    </button>
   );
 }
diff --git a/src/components/data-table.tsx b/src/components/data-table.tsx
index 7bae1927..5023be27 100644
--- a/src/components/data-table.tsx
+++ b/src/components/data-table.tsx
@@ -46,6 +46,7 @@ import {
 import {
   TooltipProvider,
 } from "@/components/ui/tooltip";
+import { Search } from "lucide-react";
 import { DataTableFacetedFilter } from "@/components/data-table-faceted-filter";
 
 interface FacetedFilterConfig {
@@ -95,22 +96,28 @@ export function DataTable<TData, TValue>({
     <TooltipProvider>
     <div className="space-y-4">
       <div className="flex flex-wrap items-center gap-2">
-        <Input
-          placeholder={searchPlaceholder}
-          value={
-            searchKey
-              ? (table.getColumn(searchKey)?.getFilterValue() as string) ?? ""
-              : globalFilter
-          }
-          onChange={(e) => {
-            if (searchKey) {
-              table.getColumn(searchKey)?.setFilterValue(e.target.value);
-            } else {
-              setGlobalFilter(e.target.value);
+        <div className="relative w-full max-w-xs">
+          <Search
+            className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+            strokeWidth={1.5}
+          />
+          <Input
+            placeholder={searchPlaceholder}
+            value={
+              searchKey
+                ? (table.getColumn(searchKey)?.getFilterValue() as string) ?? ""
+                : globalFilter
             }
-          }}
-          className="max-w-sm"
-        />
+            onChange={(e) => {
+              if (searchKey) {
+                table.getColumn(searchKey)?.setFilterValue(e.target.value);
+              } else {
+                setGlobalFilter(e.target.value);
+              }
+            }}
+            className="rounded-full pl-9"
+          />
+        </div>
         {facetedFilters?.map((filter) => {
           const column = table.getColumn(filter.columnId);
           if (!column) return null;
@@ -124,7 +131,7 @@ export function DataTable<TData, TValue>({
           );
         })}
       </div>
-      <div className="overflow-x-auto rounded-md border">
+      <div className="overflow-x-auto rounded-[14px] border border-border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -160,16 +167,16 @@ export function DataTable<TData, TValue>({
               <TableRow>
                 <TableCell
                   colSpan={columns.length}
-                  className="h-24 text-center"
+                  className="h-24 text-center font-mono text-xs tracking-[0.1em] uppercase text-muted-foreground"
                 >
-                  No results.
+                  [ No results ]
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
       </div>
-      <div className="flex items-center justify-end gap-2">
+      <div className="flex items-center justify-between gap-4">
         <Select
           value={String(table.getState().pagination.pageSize)}
           onValueChange={(value) => {
@@ -177,7 +184,7 @@ export function DataTable<TData, TValue>({
             table.setPageIndex(0);
           }}
         >
-          <SelectTrigger className="h-8 w-[70px]">
+          <SelectTrigger size="sm" className="w-[88px]">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -187,22 +194,30 @@ export function DataTable<TData, TValue>({
             <SelectItem value="100">100</SelectItem>
           </SelectContent>
         </Select>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-        >
-          Previous
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-        >
-          Next
-        </Button>
+        <div className="flex items-center gap-4">
+          <span className="font-mono text-[11px] tracking-[0.1em] uppercase text-muted-foreground">
+            Page {table.getState().pagination.pageIndex + 1} /{" "}
+            {Math.max(1, table.getPageCount())}
+          </span>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              Prev
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
     </TooltipProvider>
diff --git a/src/components/edit-user-dialog.tsx b/src/components/edit-user-dialog.tsx
index 3cb95ed0..cb5cb4bf 100644
--- a/src/components/edit-user-dialog.tsx
+++ b/src/components/edit-user-dialog.tsx
@@ -3,12 +3,12 @@
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "sonner";
 import { updateUser } from "@/actions/users";
 import { updateUserSchema, type UpdateUserInput } from "@/lib/validators";
 import type { User } from "@/types";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import {
   Dialog,
   DialogContent,
@@ -51,6 +51,7 @@ export function EditUserDialog({
   onOpenChange,
   onSaved,
 }: EditUserDialogProps) {
+  const status = useInlineStatus();
   const form = useForm<EditUserInput>({
     resolver: zodResolver(editUserSchema),
     defaultValues: {
@@ -82,11 +83,10 @@ export function EditUserDialog({
   async function onSubmit(data: EditUserInput) {
     const result = await updateUser({ id: user.id, ...data });
     if (result.success) {
-      toast.success("User updated");
       onOpenChange(false);
       onSaved();
     } else {
-      toast.error(result.error);
+      status.error(result.error);
     }
   }
 
@@ -239,6 +239,7 @@ export function EditUserDialog({
             />
 
             <DialogFooter>
+              <StatusText status={status.status} />
               <Button
                 type="button"
                 variant="outline"
diff --git a/src/components/invite-link-dialog.tsx b/src/components/invite-link-dialog.tsx
index 58cd6a93..373954fe 100644
--- a/src/components/invite-link-dialog.tsx
+++ b/src/components/invite-link-dialog.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useEffect } from "react";
 import { Copy, Mail, Check } from "lucide-react";
-import { toast } from "sonner";
 import {
   Dialog,
   DialogContent,
@@ -12,6 +11,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { sendInviteEmail } from "@/actions/invite";
 
 interface InviteLinkDialogProps {
@@ -32,6 +32,7 @@ export function InviteLinkDialog({
   const [currentUrl, setCurrentUrl] = useState(inviteUrl);
   const [copied, setCopied] = useState(false);
   const [sending, setSending] = useState(false);
+  const status = useInlineStatus();
 
   // Sync with parent when the prop changes (e.g. token generated after mount)
   useEffect(() => {
@@ -42,10 +43,10 @@ export function InviteLinkDialog({
     try {
       await navigator.clipboard.writeText(currentUrl);
       setCopied(true);
-      toast.success("Invite link copied to clipboard");
+      status.ok("Copied");
       setTimeout(() => setCopied(false), 2000);
     } catch {
-      toast.error("Failed to copy link");
+      status.error("Copy failed");
     }
   }
 
@@ -54,13 +55,13 @@ export function InviteLinkDialog({
     try {
       const result = await sendInviteEmail(userId);
       if (result.success) {
-        toast.success("Invite email sent successfully");
+        status.ok("Invite sent");
         if (result.data?.inviteUrl) setCurrentUrl(result.data.inviteUrl);
       } else {
-        toast.error(result.error ?? "Failed to send invite email");
+        status.error(result.error ?? "Send failed");
       }
     } catch {
-      toast.error("Failed to send invite email");
+      status.error("Send failed");
     } finally {
       setSending(false);
     }
@@ -114,6 +115,10 @@ export function InviteLinkDialog({
             {sending ? "Sending..." : "Send Invite Email"}
           </Button>
         )}
+
+        <div className="flex justify-end">
+          <StatusText status={status.status} />
+        </div>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/components/profile/admin-cost-section.tsx b/src/components/profile/admin-cost-section.tsx
index b08a1100..d232b8dd 100644
--- a/src/components/profile/admin-cost-section.tsx
+++ b/src/components/profile/admin-cost-section.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { CostTrackingSection } from "./cost-tracking-section";
 import { syncAnthropicUsage } from "@/actions/anthropic-usage";
 import { RefreshCw } from "lucide-react";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import type { CostData } from "@/types";
 
 type AdminCostSectionProps = {
@@ -21,22 +21,22 @@ export function AdminCostSection({
 }: AdminCostSectionProps) {
   const [isSyncing, setIsSyncing] = useState(false);
   const refreshRef = useRef<(() => void) | null>(null);
+  const status = useInlineStatus();
 
   async function handleSync() {
     setIsSyncing(true);
+    status.pending("Syncing");
     try {
       const result = await syncAnthropicUsage(userId);
       if (result.success) {
-        toast.success(
-          `Synced ${result.data.syncedDays} days of usage data.`
-        );
+        status.ok(`Synced ${result.data.syncedDays} days`);
         // Refresh cost data after successful sync
         refreshRef.current?.();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("Failed to sync usage data.");
+      status.error("Sync failed");
     } finally {
       setIsSyncing(false);
     }
@@ -51,17 +51,20 @@ export function AdminCostSection({
       headerActions={(onRefresh) => {
         refreshRef.current = onRefresh;
         return (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleSync}
-            disabled={isSyncing}
-          >
-            <RefreshCw
-              className={`mr-1 size-4 ${isSyncing ? "animate-spin" : ""}`}
-            />
-            Sync
-          </Button>
+          <div className="flex items-center gap-2">
+            <StatusText status={status.status} />
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSync}
+              disabled={isSyncing}
+            >
+              <RefreshCw
+                className={`mr-1 size-4 ${isSyncing ? "animate-spin" : ""}`}
+              />
+              Sync
+            </Button>
+          </div>
         );
       }}
     />
diff --git a/src/components/profile/cost-tracking-section.tsx b/src/components/profile/cost-tracking-section.tsx
index 480f0bf9..e99a91d7 100644
--- a/src/components/profile/cost-tracking-section.tsx
+++ b/src/components/profile/cost-tracking-section.tsx
@@ -8,7 +8,7 @@ import { formatCurrency, getCurrentMonth } from "@/lib/utils";
 import { getUserCostData } from "@/actions/anthropic-usage";
 import { CostChart } from "@/components/cost-chart";
 import { DollarSign, Info, AlertTriangle } from "lucide-react";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import type { CostData } from "@/types";
 
 type CostTrackingSectionProps = {
@@ -31,6 +31,7 @@ export function CostTrackingSection({
   const [selectedMonth, setSelectedMonth] = useState(getCurrentMonth());
   const [costData, setCostData] = useState<CostData>(initialData);
   const [isPending, startTransition] = useTransition();
+  const status = useInlineStatus();
 
   const topModelName = useMemo(() => {
     if (costData.dailyBreakdown.length === 0) return "—";
@@ -62,7 +63,7 @@ export function CostTrackingSection({
         const data = await getUserCostData(userId, month);
         setCostData(data);
       } catch {
-        toast.error("Failed to load cost data. Please try again.");
+        status.error("Load failed");
       }
     });
   }
@@ -74,7 +75,7 @@ export function CostTrackingSection({
         const data = await getUserCostData(userId, selectedMonth);
         setCostData(data);
       } catch {
-        toast.error("Failed to refresh cost data.");
+        status.error("Refresh failed");
       }
     });
   }
@@ -111,6 +112,7 @@ export function CostTrackingSection({
             Claude API Costs
           </CardTitle>
           <div className="flex items-center gap-2">
+            <StatusText status={status.status} />
             <MonthPicker
               value={selectedMonth}
               onChange={handleMonthChange}
@@ -135,7 +137,7 @@ export function CostTrackingSection({
         {/* Monthly total */}
         <div className="rounded-lg border p-4">
           <p className="text-sm text-muted-foreground">Monthly Total</p>
-          <p className={`text-3xl font-bold ${isPending ? "opacity-50" : ""}`}>
+          <p className={`text-3xl font-mono ${isPending ? "opacity-50" : ""}`}>
             {formatCurrency(costData.monthlyTotalCents)}
           </p>
           {costData.latestDataDate && (
diff --git a/src/components/reports/budget/at-a-glance.tsx b/src/components/reports/budget/at-a-glance.tsx
index ada2a86c..3ed2f62a 100644
--- a/src/components/reports/budget/at-a-glance.tsx
+++ b/src/components/reports/budget/at-a-glance.tsx
@@ -135,7 +135,7 @@ function StatTile({
         {label}
       </p>
       <p
-        className={`mt-1 text-2xl font-semibold tabular-nums ${
+        className={`mt-1 text-2xl font-mono tabular-nums ${
           highlight ? "text-destructive" : ""
         }`}
       >
diff --git a/src/components/reports/budget/budget-report.tsx b/src/components/reports/budget/budget-report.tsx
index 0a3bc0b8..fc0599d2 100644
--- a/src/components/reports/budget/budget-report.tsx
+++ b/src/components/reports/budget/budget-report.tsx
@@ -9,7 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { LoadingState, InlineSpinner } from "@/components/ui/loading-state";
 import { Button } from "@/components/ui/button";
 import { AtAGlance } from "./at-a-glance";
 import { PastMonthSpotlight } from "./past-month-spotlight";
@@ -18,14 +18,14 @@ import type { BudgetReportData } from "@/types";
 
 const PlanVsActualChart = dynamic(
   () => import("./plan-vs-actual-chart").then((m) => m.PlanVsActualChart),
-  { ssr: false, loading: () => <Skeleton className="h-[340px] w-full" /> }
+  { ssr: false, loading: () => <LoadingState label="LOADING" /> }
 );
 const ForecastCumulativeChart = dynamic(
   () =>
     import("./forecast-cumulative-chart").then(
       (m) => m.ForecastCumulativeChart
     ),
-  { ssr: false, loading: () => <Skeleton className="h-[300px] w-full" /> }
+  { ssr: false, loading: () => <LoadingState label="LOADING" /> }
 );
 
 interface BudgetReportProps {
diff --git a/src/components/reports/budget/past-month-spotlight.tsx b/src/components/reports/budget/past-month-spotlight.tsx
index b5301df1..85d27d96 100644
--- a/src/components/reports/budget/past-month-spotlight.tsx
+++ b/src/components/reports/budget/past-month-spotlight.tsx
@@ -98,7 +98,7 @@ function SpotlightTile({
       <p className="text-xs uppercase tracking-wide text-muted-foreground">
         {label}
       </p>
-      <p className={`mt-1 text-2xl font-semibold tabular-nums ${toneClass}`}>
+      <p className={`mt-1 text-2xl font-mono tabular-nums ${toneClass}`}>
         {value}
       </p>
       {sub && <p className="mt-1 text-xs text-muted-foreground">{sub}</p>}
diff --git a/src/components/reports/overview/kpi-with-mom.tsx b/src/components/reports/overview/kpi-with-mom.tsx
index 19bcccce..1126ce2d 100644
--- a/src/components/reports/overview/kpi-with-mom.tsx
+++ b/src/components/reports/overview/kpi-with-mom.tsx
@@ -40,16 +40,10 @@ export function KpiWithMom({
           <div className="min-w-0">
             <p className="text-sm text-muted-foreground">{label}</p>
             <div className="mt-1 flex items-baseline gap-2">
-              <p className="text-2xl font-bold tabular-nums">{value}</p>
+              <p className="font-mono text-2xl tabular-nums text-ink">{value}</p>
               {delta && (
                 <Badge
-                  variant={
-                    delta.variant === "up"
-                      ? "destructive"
-                      : delta.variant === "down"
-                        ? "default"
-                        : "secondary"
-                  }
+                  variant={delta.variant === "up" ? "active" : "secondary"}
                   className="font-mono text-[11px]"
                 >
                   {delta.label}
diff --git a/src/components/reports/overview/what-changed.tsx b/src/components/reports/overview/what-changed.tsx
index b2ef8321..0fc139c1 100644
--- a/src/components/reports/overview/what-changed.tsx
+++ b/src/components/reports/overview/what-changed.tsx
@@ -23,9 +23,9 @@ const ICON_MAP: Record<InsightIcon, typeof TrendingUp> = {
 };
 
 const SEVERITY_CLASSES: Record<Insight["severity"], string> = {
-  info: "bg-muted text-muted-foreground",
-  warn: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
-  danger: "bg-destructive/10 text-destructive",
+  info: "border border-border text-muted-foreground",
+  warn: "border border-warning text-warning",
+  danger: "border border-destructive text-destructive",
 };
 
 interface WhatChangedProps {
diff --git a/src/components/reset-password-dialog.tsx b/src/components/reset-password-dialog.tsx
index 4d42cd14..9a735ba6 100644
--- a/src/components/reset-password-dialog.tsx
+++ b/src/components/reset-password-dialog.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import { toast } from "sonner";
 import { resetUserPassword } from "@/actions/invite";
 import { InviteLinkDialog } from "@/components/invite-link-dialog";
 import {
@@ -16,6 +15,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 
 interface ResetPasswordDialogProps {
   user: { id: number; name: string; email: string };
@@ -34,6 +34,7 @@ export function ResetPasswordDialog({
   const [showInviteLink, setShowInviteLink] = useState(false);
   const [inviteUrl, setInviteUrl] = useState("");
   const [emailSent, setEmailSent] = useState(false);
+  const status = useInlineStatus();
 
   async function handleResetPassword() {
     try {
@@ -43,17 +44,12 @@ export function ResetPasswordDialog({
         setInviteUrl(result.data.inviteUrl);
         setEmailSent(result.data.emailSent);
         setShowInviteLink(true);
-        if (result.data.emailSent) {
-          toast.success("Password reset. Invite email sent.");
-        } else {
-          toast.success("Password reset. Share the invite link with the user.");
-        }
         onSuccess?.();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("An unexpected error occurred");
+      status.error("Unexpected error");
     }
   }
 
@@ -86,6 +82,7 @@ export function ResetPasswordDialog({
             </Label>
           </div>
           <AlertDialogFooter>
+            <StatusText status={status.status} />
             <AlertDialogCancel>Cancel</AlertDialogCancel>
             <AlertDialogAction onClick={handleResetPassword}>
               Reset Password
diff --git a/src/components/settings/api-preview-client.tsx b/src/components/settings/api-preview-client.tsx
index 7ee24823..61176936 100644
--- a/src/components/settings/api-preview-client.tsx
+++ b/src/components/settings/api-preview-client.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { Loader2, Send, Copy, Check, AlertTriangle } from "lucide-react";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -24,6 +24,7 @@ export function ApiPreviewClient({ isConfigured }: { isConfigured: boolean }) {
   const [loading, setLoading] = useState(false);
   const [response, setResponse] = useState<ApiPreviewResponse | null>(null);
   const [copied, setCopied] = useState(false);
+  const status = useInlineStatus();
 
   function validateEmail(value: string) {
     if (!value) {
@@ -61,10 +62,10 @@ export function ApiPreviewClient({ isConfigured }: { isConfigured: boolean }) {
       if (result.success) {
         setResponse(result.data);
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("Failed to send request");
+      status.error("Request failed");
     } finally {
       setLoading(false);
     }
@@ -77,10 +78,10 @@ export function ApiPreviewClient({ isConfigured }: { isConfigured: boolean }) {
         JSON.stringify(response.body, null, 2)
       );
       setCopied(true);
-      toast.success("JSON copied to clipboard");
+      status.ok("Copied");
       setTimeout(() => setCopied(false), 2000);
     } catch {
-      toast.error("Failed to copy to clipboard");
+      status.error("Copy failed");
     }
   }
 
@@ -152,14 +153,17 @@ export function ApiPreviewClient({ isConfigured }: { isConfigured: boolean }) {
               )}
             </div>
           </div>
-          <Button type="submit" disabled={!isConfigured || loading}>
-            {loading ? (
-              <Loader2 className="mr-2 size-4 animate-spin" />
-            ) : (
-              <Send className="mr-2 size-4" />
-            )}
-            {loading ? "Sending..." : "Send Request"}
-          </Button>
+          <div className="flex items-center gap-3">
+            <Button type="submit" disabled={!isConfigured || loading}>
+              {loading ? (
+                <Loader2 className="mr-2 size-4 animate-spin" />
+              ) : (
+                <Send className="mr-2 size-4" />
+              )}
+              {loading ? "Sending..." : "Send Request"}
+            </Button>
+            <StatusText status={status.status} />
+          </div>
         </form>
 
         {response && (
diff --git a/src/components/shared/spend-progress-bar.tsx b/src/components/shared/spend-progress-bar.tsx
index 7fda142c..b84160da 100644
--- a/src/components/shared/spend-progress-bar.tsx
+++ b/src/components/shared/spend-progress-bar.tsx
@@ -1,4 +1,5 @@
 import { formatCurrency } from "@/lib/utils";
+import { SegmentedBar, type SegState } from "@/components/ui/segmented-bar";
 
 interface SpendProgressBarProps {
   actualYtd: number;
@@ -8,11 +9,14 @@ interface SpendProgressBarProps {
   hideAxisLabels?: boolean;
 }
 
+const SEGMENTS = 24;
+
 /**
- * Stacked progress bar used by the Budget report's At-a-Glance card and by the
- * admin dashboard's Budget Health hero. When projected exceeds the ceiling,
- * the bar scales to the projected total so the overage stays inside the card
- * and the ceiling becomes a tick mark inside the bar.
+ * Budget spend as a Nothing segmented bar (replaces the continuous fill).
+ * Segments up to actual YTD are filled (ink); when projected exceeds the
+ * ceiling, segments from the ceiling up to the projected total turn red
+ * (over). The ceiling is marked with a tick. Same API as before, so the Budget
+ * report At-a-Glance card and the admin Budget Health hero keep working.
  */
 export function SpendProgressBar({
   actualYtd,
@@ -22,52 +26,44 @@ export function SpendProgressBar({
 }: SpendProgressBarProps) {
   if (ceiling === 0) return null;
   const scale = Math.max(ceiling, projectedAnnualTotal);
-  const actualPct = (actualYtd / scale) * 100;
-  const projectedPct = (projectedAnnualTotal / scale) * 100;
-  const ceilingPct = (ceiling / scale) * 100;
   const over = projectedAnnualTotal > ceiling;
+  const ceilingPct = (ceiling / scale) * 100;
+
+  const states: SegState[] = Array.from({ length: SEGMENTS }, (_, i) => {
+    const segMid = ((i + 0.5) / SEGMENTS) * scale;
+    if (segMid <= actualYtd) return "filled";
+    if (over && segMid > ceiling && segMid <= projectedAnnualTotal) return "over";
+    return "empty";
+  });
 
   return (
     <div>
       {!hideAxisLabels && (
-        <div className="flex items-baseline justify-between text-xs text-muted-foreground">
+        <div className="flex items-baseline justify-between font-mono text-xs text-muted-foreground">
           <span>$0</span>
           <span>
-            <span className="font-medium text-foreground">
-              {formatCurrency(scale)}
-            </span>{" "}
+            <span className="text-ink">{formatCurrency(scale)}</span>{" "}
             {over ? "projected" : "ceiling"}
           </span>
         </div>
       )}
-      <div className="relative mt-2 pt-4">
-        <div className="relative h-3 overflow-hidden rounded-full bg-muted">
-          {over && (
-            <div
-              className="absolute inset-y-0 left-0 bg-destructive/40"
-              style={{ width: `${projectedPct}%` }}
-              aria-hidden
-            />
-          )}
-          <div
-            className="absolute inset-y-0 left-0 rounded-full bg-primary"
-            style={{ width: `${actualPct}%` }}
-            aria-label={`Actual ${((actualYtd / ceiling) * 100).toFixed(1)}% of ceiling`}
-          />
+      <div className="relative mt-3">
+        <SegmentedBar
+          states={states}
+          size="hero"
+          ariaLabel={`Actual ${((actualYtd / ceiling) * 100).toFixed(1)}% of ceiling`}
+        />
+        <div
+          className="pointer-events-none absolute -top-3 bottom-0 flex flex-col items-center"
+          style={{ left: `${ceilingPct}%`, transform: "translateX(-50%)" }}
+          aria-hidden
+          title={`Ceiling ${formatCurrency(ceiling)}`}
+        >
+          <span className="mb-0.5 whitespace-nowrap rounded-[4px] bg-ink px-1.5 py-px font-mono text-[10px] leading-none text-background">
+            ceiling {formatCurrency(ceiling)}
+          </span>
+          <div className="w-px flex-1 bg-ink" />
         </div>
-        {over && (
-          <div
-            className="pointer-events-none absolute -top-1 bottom-0 flex flex-col items-center"
-            style={{ left: `${ceilingPct}%`, transform: "translateX(-50%)" }}
-            aria-hidden
-            title={`Ceiling ${formatCurrency(ceiling)}`}
-          >
-            <span className="mb-0.5 whitespace-nowrap rounded bg-foreground px-1.5 py-px text-[10px] font-medium leading-none text-background">
-              ceiling {formatCurrency(ceiling)}
-            </span>
-            <div className="w-0.5 flex-1 bg-foreground" />
-          </div>
-        )}
       </div>
     </div>
   );
diff --git a/src/components/sync/backfill-dialog.tsx b/src/components/sync/backfill-dialog.tsx
index ad849322..0ef10344 100644
--- a/src/components/sync/backfill-dialog.tsx
+++ b/src/components/sync/backfill-dialog.tsx
@@ -16,7 +16,7 @@ import { Label } from "@/components/ui/label";
 import { History } from "lucide-react";
 import { triggerBackfill } from "@/actions/sync";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import type { SyncSourceType } from "@/lib/sync/framework";
 
 interface BackfillDialogProps {
@@ -29,6 +29,7 @@ export function BackfillDialog({ sourceType, disabled }: BackfillDialogProps) {
   const [startDate, setStartDate] = useState("");
   const [loading, setLoading] = useState(false);
   const router = useRouter();
+  const status = useInlineStatus();
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -38,14 +39,13 @@ export function BackfillDialog({ sourceType, disabled }: BackfillDialogProps) {
     try {
       const result = await triggerBackfill(sourceType, startDate);
       if (result.success) {
-        toast.success("Backfill started");
         setOpen(false);
         router.refresh();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("Failed to trigger backfill");
+      status.error("Failed to trigger backfill");
     } finally {
       setLoading(false);
     }
@@ -80,6 +80,7 @@ export function BackfillDialog({ sourceType, disabled }: BackfillDialogProps) {
             />
           </div>
           <DialogFooter>
+            <StatusText status={status.status} />
             <Button
               type="button"
               variant="outline"
diff --git a/src/components/sync/sync-now-button.tsx b/src/components/sync/sync-now-button.tsx
index 255f3cf6..4e239acd 100644
--- a/src/components/sync/sync-now-button.tsx
+++ b/src/components/sync/sync-now-button.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { RefreshCw } from "lucide-react";
 import { triggerSync } from "@/actions/sync";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
+import { StatusText, useInlineStatus } from "@/components/ui/status-text";
 import type { SyncSourceType } from "@/lib/sync/framework";
 
 interface SyncNowButtonProps {
@@ -16,33 +16,37 @@ interface SyncNowButtonProps {
 export function SyncNowButton({ sourceType, disabled }: SyncNowButtonProps) {
   const [loading, setLoading] = useState(false);
   const router = useRouter();
+  const status = useInlineStatus();
 
   async function handleClick() {
     setLoading(true);
     try {
       const result = await triggerSync(sourceType);
       if (result.success) {
-        toast.success("Sync started");
+        status.ok("Sync started");
         router.refresh();
       } else {
-        toast.error(result.error);
+        status.error(result.error);
       }
     } catch {
-      toast.error("Failed to trigger sync");
+      status.error("Sync failed");
     } finally {
       setLoading(false);
     }
   }
 
   return (
-    <Button
-      variant="outline"
-      size="sm"
-      onClick={handleClick}
-      disabled={disabled || loading}
-    >
-      <RefreshCw className={`h-3 w-3 mr-1 ${loading ? "animate-spin" : ""}`} />
-      Sync
-    </Button>
+    <div className="inline-flex items-center gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleClick}
+        disabled={disabled || loading}
+      >
+        <RefreshCw className={`h-3 w-3 mr-1 ${loading ? "animate-spin" : ""}`} />
+        Sync
+      </Button>
+      <StatusText status={status.status} />
+    </div>
   );
 }
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index 5ca58909..f164948a 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -1,53 +1,51 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Moon, Sun } from "lucide-react";
 import { useThemePreference } from "@/hooks/use-theme-preference";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
 
-export function ThemeToggle() {
-  const [mounted, setMounted] = useState(false);
-  const { setTheme } = useThemePreference();
+const OPTIONS = [
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+  { value: "system", label: "Auto" },
+] as const;
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+// Nothing segmented theme toggle wired to next-themes (via useThemePreference,
+// which persists to the DB). Three states retained: light / dark / system.
+export function ThemeToggle({ className }: { className?: string }) {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useThemePreference();
 
-  if (!mounted) {
-    return (
-      <Button variant="ghost" size="icon" aria-label="Toggle theme">
-        <Sun className="size-4" />
-        <span className="sr-only">Toggle theme</span>
-      </Button>
-    );
-  }
+  useEffect(() => setMounted(true), []);
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" aria-label="Toggle theme">
-          <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <div
+      role="group"
+      aria-label="Theme"
+      className={cn(
+        "inline-flex items-center rounded-full border border-input p-0.5",
+        className
+      )}
+    >
+      {OPTIONS.map((opt) => {
+        const active = mounted && theme === opt.value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => setTheme(opt.value)}
+            aria-pressed={active}
+            className={cn(
+              "rounded-full px-3 py-1.5 font-mono text-[11px] tracking-[0.1em] uppercase transition-colors",
+              active
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
   );
 }
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index dad32734..d3a35a26 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -36,7 +36,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border border-input bg-card p-6 text-card-foreground duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[size=default]:sm:max-w-lg",
           className
         )}
         {...props}
@@ -107,7 +107,7 @@ function AlertDialogTitle({
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
       className={cn(
-        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        "text-lg font-medium text-ink sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
         className
       )}
       {...props}
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index f99164ed..db81382e 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -4,13 +4,14 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border bg-transparent px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5",
   {
     variants: {
       variant: {
-        default: "bg-card text-card-foreground",
+        default: "border-input text-foreground [&>svg]:text-muted-foreground",
         destructive:
-          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+          "border-destructive text-destructive *:data-[slot=alert-description]:text-destructive [&>svg]:text-destructive",
+        warning: "border-warning text-warning [&>svg]:text-warning",
       },
     },
     defaultVariants: {
@@ -39,7 +40,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight text-ink",
         className
       )}
       {...props}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 6eb2a057..cc19e275 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -4,20 +4,25 @@ import { Slot } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
+// Nothing tags: border-only (never filled), Space Mono ALL CAPS, pill. The core
+// inversion fill→border. `default` reads as the strong/active tag (ink border).
+// Status variants (success/warning) color the border + text only. Destructive
+// uses the shared --destructive red. Add a `<span className="led" />`-style dot
+// in consumers when a status LED is wanted.
 const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-full border bg-transparent px-3 py-0.5 font-mono text-[11px] tracking-[0.06em] uppercase whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-ring [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-        outline:
-          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline",
+        default: "border-ink text-ink",
+        secondary: "border-input text-muted-foreground",
+        destructive: "border-destructive text-destructive",
+        outline: "border-input text-foreground",
+        ghost: "border-transparent text-muted-foreground",
+        link: "border-transparent text-foreground underline-offset-4 [a&]:hover:underline",
+        success: "border-success text-success",
+        warning: "border-warning text-warning",
+        active: "border-ink text-ink",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 4d38506c..8f741dce 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -4,31 +4,33 @@ import { Slot } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 
+// Nothing buttons: pill, Space Mono, ALL CAPS, flat (no shadow). Primary is a
+// GREYSCALE fill (white/black), never the red. Destructive is an outline in the
+// shared --destructive red. Secondary/outline collapse onto one bordered variant.
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-full font-mono text-[13px] font-normal tracking-[0.06em] uppercase whitespace-nowrap transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+          "border border-destructive bg-transparent text-destructive hover:bg-destructive-subtle",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border border-input bg-transparent text-foreground hover:border-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          "border border-input bg-transparent text-foreground hover:border-foreground",
+        ghost: "text-muted-foreground hover:text-foreground",
+        link: "font-sans text-[14px] tracking-normal normal-case text-foreground underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        default: "h-11 px-6 has-[>svg]:px-5",
+        xs: "h-8 gap-1.5 px-4 text-[11px] has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3.5",
+        sm: "h-9 gap-1.5 px-4 text-[11px] has-[>svg]:px-3",
+        lg: "h-11 px-8 has-[>svg]:px-6",
+        icon: "size-11",
+        "icon-xs": "size-8 [&_svg:not([class*='size-'])]:size-3.5",
+        "icon-sm": "size-9",
+        "icon-lg": "size-11",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 47551459..28f2df92 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -74,7 +74,7 @@ function Calendar({
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          "relative rounded-md border border-input has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
@@ -91,7 +91,7 @@ function Calendar({
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
+          "flex-1 rounded-md font-mono text-[11px] uppercase tracking-[0.1em] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
         week: cn("mt-2 flex w-full", defaultClassNames.week),
@@ -100,7 +100,7 @@ function Calendar({
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] text-muted-foreground select-none",
+          "font-mono text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
@@ -117,15 +117,15 @@ function Calendar({
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
-          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
+          "rounded-md border border-input data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
+          "text-faint aria-selected:text-faint",
           defaultClassNames.outside
         ),
         disabled: cn(
-          "text-muted-foreground opacity-50",
+          "text-faint opacity-50",
           defaultClassNames.disabled
         ),
         hidden: cn("invisible", defaultClassNames.hidden),
@@ -208,7 +208,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 font-mono leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index acf57dc5..48f5a03b 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        "flex flex-col gap-6 rounded-[14px] border border-border bg-card py-6 text-card-foreground",
         className
       )}
       {...props}
@@ -32,7 +32,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn("leading-tight font-medium text-ink", className)}
       {...props}
     />
   )
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 2a81ed9f..fe5d2e36 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -56,7 +56,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-axis-tick_text]:font-mono [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -276,7 +276,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-input bg-popover px-2.5 py-2 font-mono text-xs",
         className
       )}
     >
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index f5a7e433..95cd99f1 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+        "peer size-5 shrink-0 rounded-[4px] border border-input bg-transparent outline-none transition-[color,box-shadow] focus-visible:border-foreground focus-visible:ring-[3px] focus-visible:ring-foreground/15 disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
         className
       )}
       {...props}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 8fe3ccb4..6b1f0396 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -21,7 +21,7 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        "flex h-full w-full flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ function CommandDialog({
         className={cn("overflow-hidden p-0", className)}
         showCloseButton={showCloseButton}
       >
-        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-mono [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -67,13 +67,13 @@ function CommandInput({
   return (
     <div
       data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
+      className="flex h-9 items-center gap-2 border-b border-input px-3"
     >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md bg-transparent py-3 font-mono text-sm outline-none placeholder:text-faint disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}
@@ -104,7 +104,7 @@ function CommandEmpty({
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className="py-6 text-center text-sm"
+      className="py-6 text-center text-sm text-muted-foreground"
       {...props}
     />
   )
@@ -118,7 +118,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-mono [&_[cmdk-group-heading]]:text-[11px] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-muted-foreground",
         className
       )}
       {...props}
@@ -147,7 +147,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "relative flex cursor-default items-center gap-2 rounded-md px-2 py-2.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground before:content-[''] data-[selected=true]:before:absolute data-[selected=true]:before:left-0 data-[selected=true]:before:top-1/2 data-[selected=true]:before:h-5 data-[selected=true]:before:w-0.5 data-[selected=true]:before:-translate-y-1/2 data-[selected=true]:before:bg-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )}
       {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 84bdef4b..6d3c7681 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -39,7 +39,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -61,7 +61,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border border-input bg-card p-6 text-card-foreground duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 sm:max-w-lg",
           className
         )}
         {...props}
@@ -70,7 +70,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>
@@ -125,7 +125,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn("text-lg font-medium text-ink", className)}
       {...props}
     />
   )
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index ae1fcf62..271207dc 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-input bg-popover p-1 text-popover-foreground data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
           className
         )}
         {...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-md px-2 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive-subtle data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-md py-2 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-md py-2 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        "px-2 py-1.5 font-mono text-[11px] uppercase tracking-[0.1em] text-muted-foreground data-[inset]:pl-8",
         className
       )}
       {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex cursor-default items-center gap-2 rounded-md px-2 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )}
       {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg border border-input bg-popover p-1 text-popover-foreground data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       )}
       {...props}
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index f371fea1..02cee126 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -97,7 +97,10 @@ function FormLabel({
     <Label
       data-slot="form-label"
       data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
+      className={cn(
+        "font-mono text-[11px] tracking-[0.1em] uppercase text-muted-foreground data-[error=true]:text-destructive",
+        className
+      )}
       htmlFor={formItemId}
       {...props}
     />
@@ -147,7 +150,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="form-message"
       id={formMessageId}
-      className={cn("text-sm text-destructive", className)}
+      className={cn("text-sm font-medium text-destructive", className)}
       {...props}
     >
       {body}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index f1124aea..8055bc1a 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,9 +8,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
-        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        "h-11 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 font-mono text-base text-foreground transition-[color,box-shadow] outline-none selection:bg-destructive selection:text-white file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-mono file:text-sm file:text-foreground placeholder:text-faint placeholder:tracking-normal disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40 md:text-sm",
+        "focus-visible:border-foreground focus-visible:ring-[3px] focus-visible:ring-foreground/15",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
         className
       )}
       {...props}
diff --git a/src/components/ui/json-viewer.tsx b/src/components/ui/json-viewer.tsx
index 29de7b75..e9abc3ba 100644
--- a/src/components/ui/json-viewer.tsx
+++ b/src/components/ui/json-viewer.tsx
@@ -11,13 +11,13 @@ function JsonValue({ value, depth }: { value: unknown; depth: number }) {
     return <span className="text-muted-foreground italic">null</span>;
   }
   if (typeof value === "boolean") {
-    return <span className="text-purple-600 dark:text-purple-400">{String(value)}</span>;
+    return <span className="text-ink font-medium">{String(value)}</span>;
   }
   if (typeof value === "number") {
-    return <span className="text-blue-600 dark:text-blue-400">{String(value)}</span>;
+    return <span className="text-foreground font-medium">{String(value)}</span>;
   }
   if (typeof value === "string") {
-    return <span className="text-green-700 dark:text-green-400">&quot;{value}&quot;</span>;
+    return <span className="text-muted-foreground">&quot;{value}&quot;</span>;
   }
   if (Array.isArray(value)) {
     return <JsonArray items={value} depth={depth} />;
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 1ac80f70..224c0b81 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -13,7 +13,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-medium text-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/src/components/ui/loading-state.tsx b/src/components/ui/loading-state.tsx
new file mode 100644
index 00000000..1867f88a
--- /dev/null
+++ b/src/components/ui/loading-state.tsx
@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * Nothing loading indicator — replaces skeleton shimmer. A hardware-style
+ * segmented spinner + bracketed `[LOADING…]` mono text. Used in route
+ * `loading.tsx` files and inline async regions.
+ */
+export function LoadingState({
+  label = "LOADING",
+  className,
+  inline = false,
+}: {
+  label?: string;
+  className?: string;
+  inline?: boolean;
+}) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn(
+        inline
+          ? "inline-flex items-center gap-3"
+          : "flex min-h-[40vh] flex-col items-center justify-center gap-4",
+        className
+      )}
+    >
+      <span className="nd-seg-spinner" aria-hidden="true">
+        <i />
+        <i />
+        <i />
+        <i />
+        <i />
+      </span>
+      <span className="font-mono text-xs tracking-[0.1em] uppercase text-muted-foreground">
+        [{label}…]
+      </span>
+    </div>
+  );
+}
+
+/** Compact inline spinner without text, for buttons / tight rows. */
+export function InlineSpinner({ className }: { className?: string }) {
+  return (
+    <span className={cn("nd-seg-spinner", className)} aria-hidden="true">
+      <i />
+      <i />
+      <i />
+    </span>
+  );
+}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 188f67f3..d40a25f7 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -30,7 +30,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 w-72 rounded-lg border border-input bg-popover p-4 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
           className
         )}
         {...props}
diff --git a/src/components/ui/segmented-bar.tsx b/src/components/ui/segmented-bar.tsx
new file mode 100644
index 00000000..bdcc1524
--- /dev/null
+++ b/src/components/ui/segmented-bar.tsx
@@ -0,0 +1,75 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * The signature Nothing data viz — a bar of ~20 discrete segments rather than a
+ * smooth fill. Mechanical, instrument-like. Always pair with a numeric readout.
+ *
+ * Fill tones map to status: neutral=ink (within range), good=success,
+ * warn=warning, over=destructive (overflow past the limit). Empty = seg-empty.
+ */
+export type SegState = "empty" | "filled" | "good" | "warn" | "over";
+
+const SEG_CLASS: Record<SegState, string> = {
+  empty: "bg-seg-empty",
+  filled: "bg-ink",
+  good: "bg-success",
+  warn: "bg-warning",
+  over: "bg-destructive",
+};
+
+const SIZE_CLASS = {
+  hero: "h-[18px]",
+  default: "h-2.5",
+  compact: "h-[5px]",
+} as const;
+
+function clamp01(n: number): number {
+  return Math.max(0, Math.min(1, n));
+}
+
+/** Build a simple filled/empty state array from a 0..1 fraction. */
+export function fractionStates(
+  fraction: number,
+  segments: number,
+  tone: Exclude<SegState, "empty"> = "filled"
+): SegState[] {
+  const filled = Math.round(clamp01(fraction) * segments);
+  return Array.from({ length: segments }, (_, i) =>
+    i < filled ? tone : "empty"
+  );
+}
+
+export function SegmentedBar({
+  states,
+  value,
+  tone = "filled",
+  segments = 20,
+  size = "default",
+  className,
+  ariaLabel,
+}: {
+  /** Explicit per-segment states; overrides `value`. */
+  states?: SegState[];
+  /** Convenience: 0..1 fraction filled with `tone`. */
+  value?: number;
+  tone?: Exclude<SegState, "empty">;
+  segments?: number;
+  size?: keyof typeof SIZE_CLASS;
+  className?: string;
+  ariaLabel?: string;
+}) {
+  const finalStates =
+    states ?? fractionStates(value ?? 0, segments, tone);
+
+  return (
+    <div
+      className={cn("flex w-full gap-0.5", SIZE_CLASS[size], className)}
+      role="img"
+      aria-label={ariaLabel}
+    >
+      {finalStates.map((s, i) => (
+        <span key={i} className={cn("flex-1", SEG_CLASS[s])} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index c0dc7120..a95d64a5 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
@@ -37,7 +37,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm text-foreground whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-foreground focus-visible:ring-[3px] focus-visible:ring-foreground/15 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-faint data-[size=default]:h-11 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-input bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -94,7 +94,10 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      className={cn(
+        "px-2 py-1.5 font-mono text-[11px] uppercase tracking-[0.1em] text-muted-foreground",
+        className
+      )}
       {...props}
     />
   )
@@ -109,19 +112,14 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-2 pr-3 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
     >
-      <span
-        data-slot="select-item-indicator"
-        className="absolute right-2 flex size-3.5 items-center justify-center"
-      >
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
+      <SelectPrimitive.ItemIndicator data-slot="select-item-indicator">
+        <span className="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 bg-destructive" />
+      </SelectPrimitive.ItemIndicator>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
   )
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index cb53bb28..f3dee702 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -60,22 +60,22 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          "fixed z-50 flex flex-col gap-4 bg-card text-card-foreground transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
           side === "right" &&
-            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            "inset-y-0 right-0 h-full w-3/4 border-l border-input data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
           side === "left" &&
-            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+            "inset-y-0 left-0 h-full w-3/4 border-r border-input data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
           side === "top" &&
-            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+            "inset-x-0 top-0 h-auto border-b border-input data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
           side === "bottom" &&
-            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            "inset-x-0 bottom-0 h-auto rounded-t-2xl border-t border-input data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
           className
         )}
         {...props}
       >
         {children}
         {showCloseButton && (
-          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-md opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
             <XIcon className="size-4" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
@@ -112,7 +112,7 @@ function SheetTitle({
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("font-semibold text-foreground", className)}
+      className={cn("font-medium text-ink", className)}
       {...props}
     />
   )
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
deleted file mode 100644
index 778bf99e..00000000
--- a/src/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,726 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
-import { Slot } from "radix-ui"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
-
-  return context
-}
-
-function SidebarProvider({
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
-
-  // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
-  const setOpen = React.useCallback(
-    (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value
-      if (setOpenProp) {
-        setOpenProp(openState)
-      } else {
-        _setOpen(openState)
-      }
-
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-    },
-    [setOpenProp, open]
-  )
-
-  // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
-
-  // Adds a keyboard shortcut to toggle the sidebar.
-  React.useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
-        event.preventDefault()
-        toggleSidebar()
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [toggleSidebar])
-
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed"
-
-  const contextValue = React.useMemo<SidebarContextProps>(
-    () => ({
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-    }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  )
-
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot="sidebar-wrapper"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  )
-}
-
-function Sidebar({
-  side = "left",
-  variant = "sidebar",
-  collapsible = "offcanvas",
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
-}) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-
-  if (collapsible === "none") {
-    return (
-      <div
-        data-slot="sidebar"
-        className={cn(
-          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    )
-  }
-
-  if (isMobile) {
-    return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
-          data-sidebar="sidebar"
-          data-slot="sidebar"
-          data-mobile="true"
-          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-          style={
-            {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}
-        >
-          <SheetHeader className="sr-only">
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    )
-  }
-
-  return (
-    <div
-      className="group peer hidden text-sidebar-foreground md:block"
-      data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
-      data-variant={variant}
-      data-side={side}
-      data-slot="sidebar"
-    >
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-[side=right]:rotate-180",
-          variant === "floating" || variant === "inset"
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-        )}
-      />
-      <div
-        data-slot="sidebar-container"
-        className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
-          className
-        )}
-        {...props}
-      >
-        <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      data-sidebar="trigger"
-      data-slot="sidebar-trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("size-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeftIcon />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-}
-
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <button
-      data-sidebar="rail"
-      data-slot="sidebar-rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
-  return (
-    <main
-      data-slot="sidebar-inset"
-      className={cn(
-        "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
-  return (
-    <Input
-      data-slot="sidebar-input"
-      data-sidebar="input"
-      className={cn("h-8 w-full bg-background shadow-none", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-header"
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-footer"
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="sidebar-separator"
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-content"
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group"
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return (
-    <Comp
-      data-slot="sidebar-group-label"
-      data-sidebar="group-label"
-      className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupAction({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="sidebar-group-action"
-      data-sidebar="group-action"
-      className={cn(
-        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu"
-      data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-item"
-      data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
-      {...props}
-    />
-  )
-}
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = "default",
-  size = "default",
-  tooltip,
-  className,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot.Root : "button"
-  const { isMobile, state } = useSidebar()
-
-  const button = (
-    <Comp
-      data-slot="sidebar-menu-button"
-      data-sidebar="menu-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  )
-
-  if (!tooltip) {
-    return button
-  }
-
-  if (typeof tooltip === "string") {
-    tooltip = {
-      children: tooltip,
-    }
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side="right"
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
-      />
-    </Tooltip>
-  )
-}
-
-function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
-}: React.ComponentProps<"button"> & {
-  asChild?: boolean
-  showOnHover?: boolean
-}) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-action"
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sidebar-menu-badge"
-      data-sidebar="menu-badge"
-      className={cn(
-        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  showIcon?: boolean
-}) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
-
-  return (
-    <div
-      data-slot="sidebar-menu-skeleton"
-      data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 max-w-(--skeleton-width) flex-1"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
-}
-
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="sidebar-menu-sub"
-      data-sidebar="menu-sub"
-      className={cn(
-        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="sidebar-menu-sub-item"
-      data-sidebar="menu-sub-item"
-      className={cn("group/menu-sub-item relative", className)}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSubButton({
-  asChild = false,
-  size = "md",
-  isActive = false,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean
-  size?: "sm" | "md"
-  isActive?: boolean
-}) {
-  const Comp = asChild ? Slot.Root : "a"
-
-  return (
-    <Comp
-      data-slot="sidebar-menu-sub-button"
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
deleted file mode 100644
index 3ec6be77..00000000
--- a/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-accent", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
deleted file mode 100644
index 9b20afe2..00000000
--- a/src/components/ui/sonner.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client"
-
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from "lucide-react"
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  )
-}
-
-export { Toaster }
diff --git a/src/components/ui/status-text.tsx b/src/components/ui/status-text.tsx
new file mode 100644
index 00000000..e5a5997b
--- /dev/null
+++ b/src/components/ui/status-text.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Inline status text — the Nothing replacement for toast popups.
+ *
+ * Renders bracketed Space Mono status near the trigger: `[SAVED]`,
+ * `[ERROR: …]`, `[SAVING…]`. Announces via aria-live so screen-reader users
+ * still get feedback (toasts previously carried this). Pair with
+ * `useInlineStatus` for transient set + auto-clear.
+ */
+
+export type InlineStatusKind = "idle" | "ok" | "error" | "info" | "pending";
+
+export interface InlineStatusState {
+  kind: InlineStatusKind;
+  message: string;
+}
+
+const KIND_CLASS: Record<InlineStatusKind, string> = {
+  idle: "text-muted-foreground",
+  ok: "text-success",
+  error: "text-destructive",
+  info: "text-muted-foreground",
+  pending: "text-muted-foreground",
+};
+
+export function StatusText({
+  status,
+  className,
+}: {
+  status: InlineStatusState;
+  className?: string;
+}) {
+  const { kind, message } = status;
+  // Reserve a live region even when idle so the announcement fires on change.
+  return (
+    <span
+      role="status"
+      aria-live={kind === "error" ? "assertive" : "polite"}
+      className={cn(
+        "inline-flex items-center gap-1.5 font-mono text-xs tracking-[0.06em] uppercase",
+        KIND_CLASS[kind],
+        className
+      )}
+    >
+      {kind === "pending" ? (
+        <span className="nd-seg-spinner" aria-hidden="true">
+          <i />
+          <i />
+          <i />
+        </span>
+      ) : null}
+      {kind !== "idle" && message ? <span>[{message}]</span> : null}
+    </span>
+  );
+}
+
+export interface UseInlineStatusReturn {
+  status: InlineStatusState;
+  set: (
+    kind: InlineStatusKind,
+    message: string,
+    opts?: { autoClearMs?: number }
+  ) => void;
+  ok: (message?: string) => void;
+  error: (message?: string) => void;
+  info: (message: string) => void;
+  pending: (message?: string) => void;
+  clear: () => void;
+}
+
+/**
+ * Transient inline status with auto-clear. Success/info clear after
+ * `autoClearMs`; errors linger longer; `pending` never auto-clears (caller
+ * resolves it). Cleans its timer on unmount.
+ */
+export function useInlineStatus(autoClearMs = 4000): UseInlineStatusReturn {
+  const [status, setStatus] = React.useState<InlineStatusState>({
+    kind: "idle",
+    message: "",
+  });
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearTimer = React.useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+  }, []);
+
+  const set = React.useCallback(
+    (kind: InlineStatusKind, message: string, opts?: { autoClearMs?: number }) => {
+      clearTimer();
+      setStatus({ kind, message });
+      const ms = opts?.autoClearMs ?? autoClearMs;
+      if (kind !== "pending" && kind !== "idle" && ms > 0) {
+        timer.current = setTimeout(
+          () => setStatus({ kind: "idle", message: "" }),
+          ms
+        );
+      }
+    },
+    [autoClearMs, clearTimer]
+  );
+
+  const ok = React.useCallback((message = "SAVED") => set("ok", message), [set]);
+  const error = React.useCallback(
+    (message = "ERROR") => set("error", message, { autoClearMs: 8000 }),
+    [set]
+  );
+  const info = React.useCallback((message: string) => set("info", message), [set]);
+  const pending = React.useCallback(
+    (message = "WORKING…") => set("pending", message),
+    [set]
+  );
+  const clear = React.useCallback(() => {
+    clearTimer();
+    setStatus({ kind: "idle", message: "" });
+  }, [clearTimer]);
+
+  React.useEffect(() => clearTimer, [clearTimer]);
+
+  // Stable return identity (the methods are already useCallback'd, so this only
+  // changes when `status` changes). Without this, the fresh object literal each
+  // render makes consumers that list the hook result in a useCallback/useEffect
+  // dependency array churn every render — which can spin into an infinite loop.
+  return React.useMemo(
+    () => ({ status, set, ok, error, info, pending, clear }),
+    [status, set, ok, error, info, pending, clear]
+  );
+}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 8baa844f..97a4cacb 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -17,7 +17,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
         className
       )}
       {...props}
@@ -25,7 +25,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+          "pointer-events-none block rounded-full bg-faint ring-0 transition-transform group-data-[size=default]/switch:size-5 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"
         )}
       />
     </SwitchPrimitive.Root>
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index e27f1831..58876c1a 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -44,7 +44,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        "border-t border-border bg-muted font-medium [&>tr]:last:border-b-0",
         className
       )}
       {...props}
@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        "border-b border-border transition-colors hover:bg-accent data-[state=selected]:bg-accent",
         className
       )}
       {...props}
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-11 px-4 text-left align-middle font-mono text-[11px] uppercase tracking-[0.1em] font-normal text-muted-foreground border-b border-input whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "px-4 py-3.5 align-middle text-sm text-foreground whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       )}
       {...props}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index b463afd1..aaeb3ffe 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -26,12 +26,12 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex items-center gap-8 border-b border-border bg-transparent p-0 text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
   {
     variants: {
       variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
+        default: "",
+        line: "",
       },
     },
     defaultVariants: {
@@ -64,10 +64,8 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "relative inline-flex items-center gap-2 border-0 bg-transparent px-0 pb-3 font-mono text-[11px] uppercase tracking-[0.1em] whitespace-nowrap text-faint shadow-none transition-colors group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-ink [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "after:content-[''] data-[state=active]:after:absolute data-[state=active]:after:-bottom-px data-[state=active]:after:left-0 data-[state=active]:after:h-0.5 data-[state=active]:after:w-full data-[state=active]:after:bg-foreground",
         className
       )}
       {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index e67d8fef..997a8ae2 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm text-foreground transition-[color,box-shadow] outline-none placeholder:text-faint focus-visible:border-foreground focus-visible:ring-[3px] focus-visible:ring-foreground/15 disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-destructive",
         className
       )}
       {...props}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index ec65c1e4..64ab0291 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -42,13 +42,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-lg border border-input bg-popover px-3 py-1.5 font-mono text-xs text-balance text-popover-foreground fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-popover fill-popover" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
diff --git a/src/hooks/use-theme-preference.ts b/src/hooks/use-theme-preference.ts
index 4572c8ab..e3f1c6ea 100644
--- a/src/hooks/use-theme-preference.ts
+++ b/src/hooks/use-theme-preference.ts
@@ -3,7 +3,6 @@
 import { useCallback, useEffect, useState, useTransition } from "react";
 import { useTheme } from "next-themes";
 import { useSession } from "next-auth/react";
-import { toast } from "sonner";
 import { updatePreferences } from "@/actions/preferences";
 
 export function useThemePreference() {
@@ -49,8 +48,9 @@ export function useThemePreference() {
         try {
           await persistPreferences(value);
         } catch {
+          // Revert the optimistic theme change; the visual revert is the
+          // feedback (no toasts in the Nothing system).
           setTheme(prevTheme);
-          toast.error("Failed to save theme preference");
         }
       });
     },