diff --git a/DESIGN.md b/DESIGN.md deleted file mode 100644 index e71f88c77d..0000000000 --- a/DESIGN.md +++ /dev/null @@ -1,254 +0,0 @@ -# OmniRoute — Design System & Visual Identity - -> **Status:** analysis + standardization plan (no code applied yet — this doc is the spec to approve before implementation). -> **Date:** 2026-06-16 · **Scope:** unify the OmniRoute dashboard (`src/`) with the marketing site (`_mono_repo/omnirouteSite/`) into **one visual identity** — same graph-paper grid background, same color tokens, standardized components. - ---- - -## 1. Purpose - -The marketing site (`viral.omniroute.online`, `why.omniroute.online`, `omniroute.online`) and the product dashboard should look like **one product**. The site already borrowed its palette from the dashboard — its `css/tokens.css` even says _"Palette mirrors the OmniRoute dashboard (src/app/globals.css)"_. So the two are already ~80% aligned at the color level. What's missing on the dashboard: - -1. The **graph-paper grid wallpaper** the site uses on every page. -2. A handful of **shared design tokens** the site has but the dashboard lacks (radius scale, brand gradient, `surface-2`, mono font). -3. **Component-level consistency** — a number of dashboard components bypass the theme tokens with hardcoded hex/rgba. - -This document is the analysis and the plan. **Nothing is changed until approved.** - ---- - -## 2. Principles - -- **Single source of truth = `src/app/globals.css`.** The site mirrors the dashboard, never the other way around. New tokens land in `globals.css` first. -- **Tokens, never literals.** Components consume semantic tokens (`bg-surface`, `text-primary`, `border-border`), never raw `#hex`. -- **Subtle, not loud.** The grid is a faint wallpaper that sits behind content — it must never reduce text contrast or fight the UI. -- **Theme-aware.** Everything works in both `.dark` (default-ish, the product's signature look) and light. -- **Surgical rollout.** Ship the grid + tokens first (low risk, high visibility), then component cleanups in waves. - ---- - -## 3. Current state — what's already aligned vs. what's not - -### 3.1 Colors — already unified ✅ - -Every brand color and surface already matches the site **by value** (only the names differ — dashboard prefixes with `--color-`). Verified in `src/app/globals.css:30-128`: - -| Concept | Site token (`tokens.css`) | Dashboard token (`globals.css`) | Match | -| -------------------------- | ------------------------------------------- | ------------------------------- | ------------ | -| primary | `--primary #e54d5e` | `--color-primary #e54d5e` | ✅ | -| primary-hover | `--primary-hover #c93d4e` | `--color-primary-hover #c93d4e` | ✅ | -| accent | `--accent #6366f1` | `--color-accent #6366f1` | ✅ | -| accent-2 | `--accent-2 #8b5cf6` | `--color-accent-hover #8b5cf6` | ✅ (renamed) | -| accent-3 | `--accent-3 #a855f7` | `--color-accent-light #a855f7` | ✅ (renamed) | -| success / warning / error | `#22c55e / #f59e0b / #ef4444` | identical | ✅ | -| traffic lights | `#ff5f56 / #ffbd2e / #27c93f` | identical | ✅ | -| dark bg / surface / border | `#0b0e14 / #161b22 / rgba(255,255,255,.08)` | identical | ✅ | -| light bg / surface / text | `#f9f9fb / #fff / #1a1a2e` | identical | ✅ | - -**Conclusion:** there is no color migration to do. The identity is already shared; we are _finishing_ it, not rebuilding it. - -### 3.2 Gaps — what the dashboard is missing - -| Gap | Site has | Dashboard | Action | -| ----------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------- | ---------------------- | -| **Grid wallpaper** | `body::before` graph-paper, `--grid-line`, `--grid-size 46px`, `--section-alt` | none (flat `--color-bg`) | **Part A** | -| **Radius scale** | `--radius 14px`, `--radius-sm 9px` | none — primitives use ad-hoc `rounded-md/lg/xl` (6/8/12px) | **Part B** | -| **Brand gradient** | `--grad-brand 135deg primary→accent-3` | none — only a one-off `.bg-hero-gradient` | **Part B** | -| **Nested surface** | `--surface-2 #1c2230` | none | **Part B** | -| **Mono font** | `--font-mono` (ui-monospace stack) | none (code/terminal areas have no token) | **Part B** | -| **`text-muted` (dark)** | `#8b8b9e` | `#a1a1aa` (zinc-400) | reconcile — **Part B** | - -### 3.3 Theming mechanics (so we don't break anything) - -- **Tailwind v4, CSS-first** (no `tailwind.config.*`). Tokens are defined in `:root`/`.dark` and exposed to utilities via `@theme inline` (`globals.css:130-179`). -- **Dark via `.dark` class** on `` (`@custom-variant dark` at `globals.css:22`), toggled by a custom Zustand store (`src/store/themeStore.ts`), default theme = `system` (`src/shared/constants/appConfig.ts:11`). The site uses `html[data-theme="light"]` instead — **the mechanisms differ but never meet** (separate origins), so no conflict. We keep the dashboard's `.dark` mechanism. -- **Runtime primary override** exists (`themeStore.ts:85-97`, presets in `COLOR_THEMES`) — users can swap `--color-primary`. Any new token (gradient, etc.) that references `--color-primary` will inherit those overrides for free. ✅ - ---- - -## 4. Part A — The graph-paper grid background (headline ask) - -### 4.1 What it is - -The exact recipe from the site (`_mono_repo/omnirouteSite/css/base.css`): a **fixed, full-viewport pseudo-element** painting two 1px line gradients, sitting at `z-index:-1` behind all content. - -```css -body::before { - content: ""; - position: fixed; - inset: 0; - z-index: -1; - pointer-events: none; - background-image: - linear-gradient(to right, var(--grid-line) 1px, transparent 1px), - linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); - background-size: var(--grid-size) var(--grid-size); -} -``` - -**Why this works even though `body` has an opaque `background-color`:** a `::before` with `z-index:-1` paints _above_ the element's own background but _below_ its in-flow content. So `--color-bg` is the base fill, the grid is layered on top of it, and the app renders above the grid. - -### 4.2 Precedent already in the codebase - -`src/app/landing/page.tsx:16-26` **already implements this same grid per-page** — but with **red** lines (`#E54D5E`, opacity `0.06`) at **50px**, plus animated orbs. So the pattern is proven in the product; we are promoting it to a **global, theme-aware** wallpaper and (optionally) retiring the duplicate. - -### 4.3 Tokens to add (in `globals.css`) - -```css -:root { - /* light */ - --grid-line: rgba(0, 0, 0, 0.045); - --grid-size: 46px; - --section-alt: rgba(0, 0, 0, 0.022); -} -.dark { - /* dark */ - --grid-line: rgba(255, 255, 255, 0.035); - --section-alt: rgba(255, 255, 255, 0.018); -} -``` - -### 4.4 The single blocker - -The grid is global by construction (it covers the panel, `auth`/`login`, error pages — every route — at once). Exactly **one** element hides it inside the panel: - -- `src/shared/components/layouts/DashboardLayout.tsx:62` — the outer wrapper paints an opaque `bg-bg`: - - ```jsx -
- ``` - - Everything below it is already transparent — `
` (`:93`), the scroll container (`:102`), the `max-w-7xl` inner (`:103`). So **removing `bg-bg` from this one line** lets the body grid show through the entire content area (the body's `--color-bg` remains the base fill underneath the grid). - - ```diff - -
- +
- ``` - -### 4.5 Chrome interaction (sidebar / header) - -- `Header` (`src/shared/components/Header.tsx:207`, `bg-bg`) and `Sidebar` (`src/shared/components/Sidebar.tsx:430`, `bg-sidebar`) stay **opaque** → the grid shows in the **content area only**, with solid chrome framing it. This is the recommended, calm default and matches how the site separates chrome from canvas. -- _Optional vibrancy variant:_ make the header translucent (`bg-bg/80 backdrop-blur`) so the grid runs behind it. A `.bg-vibrancy` helper already exists (`globals.css:370`). **Decision D3 below.** - -### 4.6 Login / auth / error pages - -These render directly under `` (no panel chrome) and their page wrappers are mostly transparent — the global grid appears behind them automatically. One exception: `src/app/login/page.tsx:124,139` uses opaque `bg-bg` wrappers; soften the same way if we want the grid there too (minor, **D4**). - -### 4.7 Landing page - -`landing/page.tsx` keeps its richer animated background (orbs + vignette). Options: (a) leave it as-is (its own splash identity), or (b) align its grid to the global tokens (46px, neutral lines) for consistency. **Recommend (a)** — it's a marketing splash, not a panel screen. **Decision D5.** - ---- - -## 5. Part B — Token unification - -Add to `globals.css` (`:root` + `@theme inline`) so the dashboard gains the site's missing tokens. None of these change existing colors; they add the _missing_ primitives. - -```css -:root { - --surface-2: #f5f5fa; /* light: nested panels */ - --radius: 14px; - --radius-sm: 9px; - --grad-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent-light)); - --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", "SF Mono", monospace; -} -.dark { - --surface-2: #1c2230; -} - -@theme inline { - --color-surface-2: var(--surface-2); /* enables bg-surface-2 */ - --radius-lg: var(--radius); /* enables rounded-lg = 14px */ - --radius-md: var(--radius-sm); /* enables rounded-md = 9px */ - --font-mono: var(--font-mono); /* enables font-mono */ -} -``` - -| Token | Why | Consumers | -| -------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------- | -| `--radius` / `--radius-sm` | One radius scale (14/9) instead of 6/8/12 ad-hoc | Button, Card, Modal, Input, Select | -| `--grad-brand` | Brand gradient for primary CTAs (red→violet), matching the site | Button `primary`, hero/CTA surfaces | -| `--surface-2` | Nested panels / table headers / inset rows | Card.Section, DataTable header, inputs | -| `--font-mono` | Code blocks, terminal, IDs, endpoints | ConsoleLogViewer, code snippets, `localhost:20128/v1` chips | -| `--text-muted` reconcile | Pick one value site↔panel | global | - -**Decision D2 (text-muted):** site `#8b8b9e` vs dashboard `#a1a1aa`. Recommend keeping the **dashboard's `#a1a1aa`** (it's the live product, slightly higher contrast) and updating the _site_ to match. Low priority, cosmetic. - ---- - -## 6. Part C — Component standardization - -The component layer is **custom** (no shadcn/Radix), Tailwind v4, semantic tokens **mostly** adopted (`bg-surface`, `border-white/10`, `ring-primary`) — good adoption (195 files import the shared barrel). The work is removing the **bypasses**. Home: `src/shared/components/`. - -Ranked by impact × reach: - -| # | Item | File(s) | Problem → Target | -| --- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| C1 | **Radius alignment** | `Button.tsx:14-18`, `Card.tsx:39`, `Modal.tsx`, `Input.tsx`, `Select.tsx` | mixed 6/8/12px → repoint to `--radius`/`--radius-sm` (14/9) | -| C2 | **Button gradient + `accent` variant** | `Button.tsx:5-12` | primary is flat red→red (`from-primary to-primary-hover`); align to `--grad-brand` (red→violet) and add the missing `accent` variant (indigo `#6366f1` is unused by buttons) — **highest visibility, ~195 importers**. **Decision D1.** | -| C3 | **Tables** | `DataTable.tsx:122-176`, `logTableStyles.ts`, `globals.css:405-414` (Ant remnants) | `DataTable` is 100% inline hardcoded rgba + references non-existent vars (`--text-secondary`, `--bg-table-header`); migrate to tokens, retire the 2 divergent table styles. Tables are everywhere (providers/connections/logs) — worst offender. | -| C4 | **Centralize status colors** | `flow/edgeStyles.ts:7-12`, `TokenHealthBadge.tsx:14-19`, `DegradationBadge.tsx`, `ProviderCascadeNode.tsx`, `Badge.tsx`, +5 `statusColor` helpers | 6+ copies of the same `#22c55e/#f59e0b/#ef4444` hex; create one `statusColors` module driven off `--color-success/warning/error`. Critical for circuit-breaker / cooldown / lockout badges to read consistently. | -| C5 | **Card border** | `Card.tsx:39` | uses `border-white/5`; brand border is `/8` → align | -| C6 | **Focus ring reconcile** | `globals.css:183` vs component `ring-primary/30` | global `:focus-visible` is indigo (`--color-accent`), components are red (`ring-primary`) — pick one (recommend **accent/indigo** globally, it reads as the "interactive" color) | -| C7 | **Add `Checkbox` + `Textarea` primitives** | currently raw ``/`