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:

| Document | Path | Contains | |----------|------|----------| | Design Doctrine | SSOT/Product/design-doctrine.md | UX philosophy, layout doctrine, interaction principles, governance rules | | Brand Guide | SSOT/GTM/brand-guide.md | Visual identity, colors, typography, components, messaging | | Product Vision | SSOT/Product/vision.md | What we're building and why |

---

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

| Metric | Target | |--------|--------| | Perceived latency | <500ms | | First token | <600ms | | Response style | Always streaming | | Loading states | Skeletal placeholders, never spinners |

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)

/* 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

| Use | Font | |-----|------| | Headlines, brand | Clash Display | | Body, UI | General Sans | | Code, technical | Geist Mono |

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.

<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

<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

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