Visual Tokens & Design System

Dashboard OKLCH tokens, typography, and icon conventions for the Hoox operator UI.

This page

The dashboard (Next.js 16) is the visual source of truth. Tokens live in workers/dashboard/src/app/globals.css. Landing pages and docs follow the same accent and type language.

🎨 1. OKLCH Color Palette

Hoox uses OKLCH for perceptually uniform brightness. Dark is the primary theme; light is the optional toggle.

Dark Mode (Primary)

  • Background (--background): oklch(0.12 0.006 260) — near-black canvas.
  • Foreground (--foreground): oklch(0.96 0.005 90) — warm off-white.
  • Card (--card): oklch(0.18 0.007 260) — elevated panel.
  • Accent (--accent): oklch(0.72 0.17 48) — orange focal actions.
  • Muted Foreground (--muted-foreground): oklch(0.7 0.015 260).
  • Borders (--border): oklch(0.32 0.012 260).
  • Sidebar (--sidebar): oklch(0.145 0.006 260) — between canvas and card.

📐 2. Layout, Borders & Density

  • Border Radius (--radius): 0.5rem (8px).
  • Shadows: Cards and modals use a deep shadow: shadow-2xl → box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  • Spacing Density:
    • Cards Grid: gap-6 (24px).
    • Sidebar Items: gap-0.5 (2px) between nav links.

🔤 3. Typography

Aesthetic LayerFont FamilyCSS UtilityUse Case
Primary Titles"Bebas Neue", sans-seriffont-headingCard headers, page titles.
Prose & Body"IBM Plex Sans", sans-seriffont-sansExplanatory text, paragraphs, tables.
Technical Chrome"IBM Plex Mono", monospacefont-monoInputs, SQL, code, navigation chrome.

Loaded via next/font/google in the dashboard layout (--font-bebas, --font-ibm-plex-sans, --font-ibm-plex-mono).

📦 4. Icons

Dashboard chrome uses Lucide and Tabler React icons (stroke, currentColor). Do not mix emoji into operator UI. Docs navigation is Mintlify’s icon set — keep section keys aligned with docs.json.

🔗 Next Steps