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.