# UI Context — n8n.io + ClawHub.ai Signature Design System

## Theme

Ultra-modern, high-contrast, technical dark mode inspired by **n8n.io** (AI workflow canvas, signature coral accents, visual node execution graphs) and **ClawHub.ai** (dark obsidian void backgrounds, terminal CLI callouts, skill registry cards, and verified publisher badges).

## Color Palette (n8n + ClawHub Spectrum)

| Role | CSS Variable / Token | Color Value | Description |
| ---- | -------------------- | ----------- | ----------- |
| Base Obsidian Void | `--bg-void` | `#090A0F` | Main deep dark background |
| Canvas Surface | `--bg-canvas` | `#0E1017` | Workflow & section canvas |
| Surface Card | `--bg-card` | `#141824` | Skill cards & node containers |
| n8n Signature Coral | `--color-coral` | `#FF6D5A` | Primary brand accent & CTAs |
| n8n Coral Glow | `--color-coral-light` | `#FF8F7D` | Secondary text & hover state |
| ClawHub Cyan | `--color-cyan` | `#00E5FF` | Tech accents, code highlights & CLI tags |
| Emerald Success | `--color-emerald` | `#10B981` | Operational badges & revenue progress |
| Purple AI Glow | `--color-purple` | `#8B5CF6` | AI agent & automation triggers |
| Subtle Border | `--border-subtle` | `#1E2330` | High-contrast subtle borders |
| Primary Text | `--text-primary` | `#F8FAFC` | Crisp white headings |
| Secondary Text | `--text-secondary` | `#94A3B8` | Subheadings & body copy |
| Code / Mono Text | `--text-mono` | `#FF6D5A` | Terminal CLI & parameters |

## Typography

| Role | Font Family | Usage |
| ---- | ----------- | ----- |
| Primary UI & Headings | Plus Jakarta Sans | Main headings, navigation & titles |
| Technical Code / CLI | Fira Code / JetBrains Mono | Workflow nodes, terminal snippets, tags & metrics |

## Border Radius & Glassmorphism

| Context | Class / Style |
| ------- | ------------- |
| Small Pills / Badges | `rounded-full` |
| Cards / Skill Modules | `rounded-2xl` |
| Terminal / Code Blocks | `rounded-xl` |
| Node Containers | `rounded-2xl border border-[#1E2330] bg-[#141824]/90 backdrop-blur-md` |

## Component Library (n8n & ClawHub Design System)

- **n8n Workflow Nodes**: Visual node graphs with connection paths, trigger pills (`Webhook`, `n8n AI Node`), and glowing status indicators (`SUCCESS - 100%`).
- **ClawHub Terminal Callouts**: High-contrast monospaced command blocks with copy buttons (`$ clawhub skill run @startuplx/auto-engine`).
- **Skill Registry Cards**: Formatted as `@startuplx/web-dev`, `@startuplx/erp-system`, `@startuplx/n8n-automation` with versioning badges (`v2.4.0`) and execution metrics.
- **n8n Metric Pill Badges**: Glowing rounded badges (`● 100% Operational`, `202.7k stars`, `$7.0k MRR Target`).
- **Audit Booking Form**: Glassmorphism form with n8n input styles and instant submission feedback.

## Layout Patterns

- **Header**: Glassmorphism navbar with n8n logo glow, live operational pill badge, and CLI shortcut link.
- **Hero**: Dual column layout with n8n workflow execution node canvas and ClawHub CLI skill callout.
- **Services**: ClawHub-inspired Skill Registry grid with deliverable checklists.
- **Pricing**: n8n workflow tier cards with 50% deposit callouts & $100/mo retainer calculator.
- **Dashboard**: Metabase BI metrics framed with n8n workflow execution logs.