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.