---

name: forth-ai-brand description: Apply Forth AI brand guidelines when creating frontends. Use for UI components, pages, applications, and design systems. Enforces radical simplicity, polymorphic interfaces, and the Forth AI visual identity.

Forth AI Design System

Forth AI is the AI-native enterprise. All interfaces must embody radical simplicity and joyful usability.

Source Documents

Before building, read these canonical documents:

---

Core Philosophy (Quick Reference)

The One Interface

Google Search simplicity × ChatGPT polymorphism × Enterprise predictability.

One universal input box handles:

• Search
• Actions & workflows
• Automations
• Queries
• Data retrieval
• Configuration

Rule: If a user needs a different page to perform a fundamentally similar task, the design has failed.

Speed = Product Value

Restraint

• Hide advanced features until intent is signaled
• Reveal tools contextually
• First-time users must feel like they already know how to use it

---

Visual Identity (Quick Reference)

Colors (Dark-First)

Copy/* Backgrounds */
--bg-primary: #0a0a0c;
--bg-secondary: #111114;
--bg-tertiary: #18181c;
--bg-elevated: #1f1f24;

/* Text */
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;

/* Accent — Amber */
--accent: #f59e0b;
--accent-soft: rgba(245, 158, 11, 0.15);

/* Semantic */
--success: #22c55e;
--warning: #eab308;
--danger: #ef4444;

/* Borders */
--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.1);

Typography

Effects

• Glass: backdrop-filter: blur(12px) with subtle white overlay
• Noise texture: 2% opacity grain overlay
• Glow: Amber accent shadows on CTAs and active elements

---

Canonical Components

Universal Input Bar

The centerpiece. Identical across all modules.

Copy<input
  className="w-full px-4 py-3 rounded-xl text-sm outline-none"
  style={{
    background: 'var(--bg-elevated)',
    border: '1px solid var(--border-default)',
    color: 'var(--text-primary)',
  }}
  placeholder="Ask anything..."
/>

Result Card

Copy<div
  className="rounded-xl p-4"
  style={{
    background: 'var(--bg-elevated)',
    border: '1px solid var(--border-subtle)',
  }}
>
  <h3 style={{ fontFamily: "'Clash Display', sans-serif" }}>Title</h3>
  <p style={{ color: 'var(--text-secondary)' }}>Description</p>
  <div className="flex gap-2 mt-4">
    <Button>Edit</Button>
    <Button>Automate</Button>
    <Button>Run</Button>
  </div>
</div>

Status Badges

Copy.status-draft { background: rgba(113, 113, 122, 0.2); color: #a1a1aa; }
.status-sent { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.status-paid { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.status-overdue { background: rgba(239, 68, 68, 0.2); color: #f87171; }

---

Do NOT Add

• New sidebars
• New persistent panels
• New "mini dashboards"
• New icons (use existing set)
• More than 6 colors
• Any feature that breaks the "one box" metaphor

---

Design Checklist

Before shipping any interface:

• Single obvious entry point (universal input)
• Zero learning curve (30-second test passes)
• No unnecessary UI elements
• Speed targets met (<500ms latency)
• Streaming responses where applicable
• Brand colors applied correctly
• Typography hierarchy clear
• Reversible actions available
• No disruptive navigation
• Sparks joy

---

The Goal

A feeling of effortless capability — a system that "just works" for any task without overwhelming the user.