[Visual Tokens & Design System]

Production design system and visual token specifications, covering OKLCH color palettes, typography, and visual SVG icon maps.

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 LayerFont FamilyCSS UtilityIdeal Operational Use Case
Primary Titles"Bebas Neue", sans-seriffont-headingMain high-signal card headers, page titles.
Prose & Body"IBM Plex Sans Variable", sans-seriffont-sansExplanatory text, paragraphs, tables.
Technical Chrome"IBM Plex Mono", monospacefont-monoNavigation 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