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:

The Goal

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

Claude-skill-registry forth-ai-brand