forth-ai-brand

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 |

---

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

---

Colors (Dark-First)

```css

/ 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

---

Universal Input Bar

The centerpiece. Identical across all modules.

```tsx

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

```tsx

className="rounded-xl p-4"

style={{

background: 'var(--bg-elevated)',

border: '1px solid var(--border-subtle)',

}}

>

Title

Description