Hoox — Edge-Native Algorithmic Trading on the Cloudflare Edge

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

Aesthetic Layer	Font Family	CSS Utility	Ideal Operational Use Case
Primary Titles	`"Bebas Neue", sans-serif`	`font-heading`	Main high-signal card headers, page titles.
Prose & Body	`"IBM Plex Sans Variable", sans-serif`	`font-sans`	Explanatory text, paragraphs, tables.
Technical Chrome	`"IBM Plex Mono", monospace`	`font-mono`	Navigation links, settings inputs, SQL queries, code.

📦 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.

DevOps

Visual Tokens & Design System

🎨 1. OKLCH Color Palette

Dark Mode (Primary Visual Standard)

📐 2. Layout, Borders & Density

🔤 3. Typography & Runtimes

📦 4. SVG Icon Mapping Catalog

A. Rocket Icon (`getting-started`)

B. Book Icon (`guides`)

C. Lightbulb Icon (`concepts`)

D. Book-Open Icon (`reference`)

E. Target Icon (`tutorials`)

F. Gear Icon (`devops` & `workers`)

G. Home House Icon (`home`)

🔗 Next Steps

​🎨 1. OKLCH Color Palette

​Dark Mode (Primary Visual Standard)

​📐 2. Layout, Borders & Density

​🔤 3. Typography & Runtimes

​📦 4. SVG Icon Mapping Catalog

​A. Rocket Icon (getting-started)

​B. Book Icon (guides)

​C. Lightbulb Icon (concepts)

​D. Book-Open Icon (reference)

​E. Target Icon (tutorials)

​F. Gear Icon (devops & workers)

​G. Home House Icon (home)

​🔗 Next Steps

🎨 1. OKLCH Color Palette

Dark Mode (Primary Visual Standard)

📐 2. Layout, Borders & Density

🔤 3. Typography & Runtimes

📦 4. SVG Icon Mapping Catalog

A. Rocket Icon (`getting-started`)

B. Book Icon (`guides`)

C. Lightbulb Icon (`concepts`)

D. Book-Open Icon (`reference`)

E. Target Icon (`tutorials`)

F. Gear Icon (`devops` & `workers`)

G. Home House Icon (`home`)

🔗 Next Steps