🎨 Visual Tokens & Design System

To maintain visual cohesion across the entire Hoox ecosystem (web landing pages, Astro documentation sites, Zustand Next.js dashboards, and terminal UIs), the platform implements a standardized, high-integrity design system.

This document catalogs our color tokens, spacing densities, border-radius behaviors, and provides the complete SVG Icon Mapping Catalog used inside the documentation navigation chrome.

🎨 1. OKLCH Color Palette

Hoox utilizes OKLCH color values to ensure perceptually uniform brightness and high contrast across all edge screens and operating systems:

Dark Mode (Primary Visual Standard)

• Background (--background): oklch(0.08 0 0) — Deep charcoal/black.
• Foreground (--foreground): oklch(0.95 0 0) — Bright neutral Zinc/white.
• Card (--card): oklch(0.12 0 0) — Slightly elevated dark panel grey.
• Accent (--accent): oklch(0.70 0.20 45) — High-contrast bright orange (used for focal actions and headers).
• Muted Foreground (--muted-foreground): oklch(0.68 0 0) — Secondary readability text.
• Borders (--border): oklch(0.30 0 0) — Low-contrast dark grey dividers.

📐 2. Layout, Borders & Density

• Border Radius (--radius): Restored globally to 0.5rem (8px) to soften panel boundaries without losing the clean command-center aesthetic.
• Shadows: Cards and active modal prompts bind a highly contrasting deep shadow: shadow-2xl -> box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
• Spacing Density: Standardize grid gutters using Tailwind flex/grid spaces:
  • Cards Grid: gap-6 (24px) for dashboard cards.
  • Sidebar Items: gap-0.5 (2px) vertical padding between nav links.

🔤 3. Typography & Runtimes

📦 4. SVG Icon Mapping Catalog

To ensure visual consistency and completely eliminate platform-inconsistent emojis, the navigation chrome (Sidebar.astro and MobileNav.astro) maps dynamic section keys to clean, flat, inline SVGs:

A. Rocket Icon (getting-started)

Used to represent system setup and installation paths.

<svg
  class="size-3.5"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
>
  <path
    d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
  />
  <path
    d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
  />
  <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
  <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
</svg>

B. Book Icon (guides)

Used to represent operational manuals and setup instructions.

<svg
  class="size-3.5"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
>
  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
</svg>

C. Lightbulb Icon (concepts)

Used to represent structural theories and edge architectures.

<svg
  class="size-3.5"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
>
  <path d="M9 18h6" />
  <path d="M10 22h4" />
  <path
    d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"
  />
</svg>

D. Book-Open Icon (reference)

Used to represent dictionary definitions, configuration matrices, and API details.

<svg
  class="size-3.5"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
>
  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
</svg>

E. Target Icon (tutorials)

Used to represent step-by-step walkthroughs and integration guides.

<svg
  class="size-3.5"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
>
  <circle cx="12" cy="12" r="10" />
  <circle cx="12" cy="12" r="6" />
  <circle cx="12" cy="12" r="2" />
</svg>

F. Gear Icon (devops & workers)

Used to represent background cron engines, system setups, and deployment configs.

<svg
  class="size-3.5"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
>
  <circle cx="12" cy="12" r="3" />
  <path
    d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
  />
</svg>

G. Home House Icon (home)

Used to return to the parent portal.

<svg
  class="size-4"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
>
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
  <polyline points="9 22 9 12 15 12 15 22" />
</svg>

🔗 Next Steps

• System Topology Overview — Analyze edge isolates and data layers integrations.
• Isolate Communication Spec — Check service bindings and standard Bearer Auth middleware.