zugzbot 1.0.21 → 1.0.23

package/.opencode/oh-my-design/web/references/intercom/.verification.md

@@ -1,144 +0,0 @@
-# Intercom — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `intercom.com/` (corporate home — "the only helpdesk designed for the AI Agent era")
-- `fin.ai/` (Fin AI Agent product — separate domain, inverse chrome)
-
-Note: `intercom.com/fin` 301-redirects to `fin.ai`. Two surfaces verified across the dual-product chrome.
-
-### Raw observations
-
-**Start free trial — Hero Primary (Black Pill, intercom.com)**
-- bg `rgb(0, 0, 0)` = `#000000`
-- color `#ffffff`
-- radius **6px**
-- padding 12×16
-- 42px / 16px·400
-- Use: hero Primary on intercom.com
-
-**Start free trial — Compact Black (Charcoal #111)**
-- bg `rgb(17, 17, 17)` = **`#111111`** (Intercom Charcoal — slightly off-pure-black)
-- color `#fff`
-- radius **4px**
-- padding 0×14
-- 40px / 16px·400
-- Use: in-page compact CTA — note radius is 4px (not 6px) for compact tier
-
-**Fully-featured helpdesk — Cream Card**
-- bg `rgb(250, 249, 246)` = **`#faf9f6`** (Intercom Cream — warm canvas)
-- color `#111111` Charcoal
-- radius 0px
-- padding 16px
-- 53px / 16px·400
-- Use: feature card chrome; canvas color confirmed
-
-**Nav links — Ghost (intercom.com)**
-- bg transparent
-- color `#000`
-- radius **6px** (visible on hover)
-- padding 0-8×4-12
-- 40px / 16px·400
-- Use: top-level nav
-
-**Start free trial — Inverse White (fin.ai)**
-- bg `#ffffff`
-- color `#000`
-- radius **6px**
-- padding 12×16
-- 40-42px / 16px·400
-- Use: hero Primary on fin.ai (inverse vs intercom.com — fin.ai is dark canvas)
-
-### Single-system: 6px hero / 4px compact + Cream canvas + Charcoal Primary
-
-Intercom uses a **two-tier radius system + dual-canvas dual-product chrome**:
-- **Hero Primary**: 6px / 42px / `#000` or `#fff` (canvas-inverted on fin.ai dark hero)
-- **Compact Primary**: 4px / 40px / `#111111` Intercom Charcoal
-- **Canvas**: `#faf9f6` Cream (warm-print) on intercom.com; dark on fin.ai
-- All weight 400 — never bold; size + cream canvas warmth carry the visual register
-- **Two product surfaces, unified Primary type**: intercom.com helpdesk + fin.ai AI Agent each have their own canvas but the same Charcoal/White Primary CTA pattern
-
-This confirms the §11 "warm-cream / craft" register and the dual-product 2024-2025 Fin spinout positioning.
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/intercom` — directory only
-
-## Tier 2b — styles.refero.design
-- `?q=Intercom` — no record
-
-**Tier 2 status: unavailable.** Tier 1 (intercom.com + fin.ai) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 intercom.com | Tier 1 fin.ai | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Hero Primary bg | `#000` | `#fff` (canvas-inverted) | n/a | ✓ dual-canvas |
-| Hero Primary radius | 6px | 6px ✓ | n/a | ✓ |
-| Hero Primary padding | 12×16 | 12×16 ✓ | n/a | ✓ |
-| Hero Primary height | 42px | 40-42px ✓ | n/a | ✓ |
-| Hero Primary font | 16px·400 | 16px·400 ✓ | n/a | ✓ |
-| Compact Primary bg | `#111111` Charcoal | n/a | n/a | ✓ |
-| Compact Primary radius | 4px | n/a | n/a | ✓ tier-distinct |
-| Canvas | `#faf9f6` Cream | dark | n/a | ✓ dual-canvas |
-
-### Unresolved
-- **None.** Single-system canonical with documented dual-canvas dual-product pattern.
-
-### Earlier mistakes reverted
-- Prior footer claimed only "ghost nav 6px / 16px·400 / 40px height; warm cream `#faf9f6` canvas" — captured nav + canvas but missed the canonical Primary CTA (Black 6px hero / Charcoal `#111111` 4px compact). §4 should document both Primary tiers and the dual-product chrome.
-
----
-
-## Components in §4
-
-§4 (prior B4 batch) — needs:
-1. Hero Primary `#000` 6px / 42px / 12×16 (intercom.com canvas) + `#fff` inverse (fin.ai canvas)
-2. Compact Primary `#111111` Intercom Charcoal 4px / 40px / 0×14
-3. Cream `#faf9f6` canvas as a documented surface token
-4. Dual-product (intercom.com + fin.ai) canvas treatment
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- **Intercom founded California 2011** by four Irish designers/engineers
-  - Source: [Intercom — Wikipedia](https://en.wikipedia.org/wiki/Intercom,_Inc.)
-- Founders: **Eoghan McCabe (Chairman, ex-CEO)**, **Des Traynor**, **Ciaran Lee**, **David Barrett**
-- **Previously ran Dublin design consultancy Contrast** + built **Exceptional** bug-tracker → **sold to Rackspace 2011**, those proceeds funded Intercom
-- Initial 30-person Dublin team before HQ relocation to San Francisco
-  - Source: [Irish Times — Four Irishmen mission](https://www.irishtimes.com/business/technology/four-irishmen-on-a-mission-to-build-a-billion-dollar-company-1.1664244)
-- **2012 angel: Twitter co-founder Biz Stone**
-- Seed: **David Sacks, Andy McLoughlin (Huddle), Dan Martell, 500 Global, Digital Garage**
-- **Series A $6M March 2013** led by **Social Capital**
-- **2023 launch Fin** AI chatbot (initially GPT-4 powered) referencing help-center content
-- **2024 €87M / $94M extra AI investment** — Eoghan McCabe quote "aggression on all fronts"
-  - Source: [Irish Times — €87M AI investment](https://www.irishtimes.com/business/2024/05/14/intercom-boss-wants-aggression-on-all-fronts-amid-extra-94m-ai-investment/)
-- **2025 $250M debt financing** + 650 global hires planned
-  - Source: [Silicon Republic — Intercom $250M debt](https://www.siliconrepublic.com/business/intercom-eoghan-mccabe-debt-financing-hiring-jobs-ai)
-- **Fin spun out to fin.ai** as a discrete product domain alongside intercom.com helpdesk
-
-### Voice samples (live-verified)
-- *"Start free trial"* — hero Primary <!-- verified: intercom.com 2026-05 -->
-- *"Contact sales"* / *"View demo"* — header utility <!-- verified: intercom.com -->
-- *"Learn more"* — feature card CTA <!-- verified: intercom.com -->
-- *"Free 14 day trial"* — fin.ai trial CTA <!-- verified: fin.ai 2026-05 -->
-
-### Existing §10-15 retained from prior augmentation (B4 batch)
-- Voice & Tone — friendly-craft register
-- §11 narrative — Irish founders / Fin AI pivot
-- §15 Hover scale 1.1 signature motion
-
----
-
-**Verified-against:**
-- Tier 1: intercom.com/, fin.ai/ (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/funding: Wikipedia (Intercom Inc.), Crunchbase (McCabe), Irish Times, Silicon Republic, Tracxn, Paperflite (Intercom story)

package/.opencode/oh-my-design/web/references/intercom/DESIGN.md

@@ -1,271 +0,0 @@
----
-id: intercom
-name: Intercom
-country: US
-category: productivity
-homepage: "https://www.intercom.com"
-primary_color: "#286efa"
-logo:
-  type: simpleicons
-  slug: intercom
-verified: "2026-05-15"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  note: "primary text/buttons are off-black #111111; Fin Orange #ff5600 is the singular brand accent"
-  colors:
-    off-black: "#111111"
-    white: "#ffffff"
-    canvas: "#faf9f6"
-    fin-orange: "#ff5600"
-    report-orange: "#fe4c02"
-    report-blue: "#65b5ff"
-    report-green: "#0bdf50"
-    report-red: "#c41c1c"
-    report-pink: "#ff2067"
-    black-80: "#313130"
-    black-60: "#626260"
-    muted: "#7b7b78"
-    tertiary: "#9c9fa5"
-    border: "#dedbd6"
-    warm-sand: "#d3cec6"
-  typography:
-    family: { sans: "Saans", serif: "Serrif", mono: "SaansMono" }
-    display-hero: { size: 80, weight: 400, lineHeight: 1.00, tracking: -2.4, use: "Display hero, ultra-compressed" }
-    section:      { size: 54, weight: 400, lineHeight: 1.00, tracking: -1.6, use: "Section heading" }
-    feature:      { size: 24, weight: 400, lineHeight: 1.00, tracking: -0.48, use: "Feature title" }
-    body:         { size: 16, weight: 400, lineHeight: 1.5, use: "Standard reading text" }
-    nav:          { size: 18, weight: 400, lineHeight: 1.00, use: "Nav / UI" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 4, md: 6, lg: 8, full: 9999 }
-  shadow:
-    flat: "none"
-  components:
-    button-primary: { type: button, bg: "#111111", fg: "#ffffff", radius: 4, padding: "0px 14px", use: "Primary dark button, scale(1.1) hover" }
-    button-outlined: { type: button, bg: "#faf9f6", fg: "#111111", radius: 4, use: "Outlined button, 1px off-black border" }
-    button-warm: { type: button, bg: "#faf9f6", fg: "#111111", padding: "16px", use: "Warm card button" }
-    card: { type: card, bg: "#faf9f6", radius: 8, use: "Warm cream card, oat border, no shadow" }
-    nav-link: { type: tab, fg: "#111111", font: "16px Saans", use: "Nav link, off-black on white" }
-  components_harvested: true
----
-
-# Design System Inspiration of Intercom
-
-## 1. Visual Theme & Atmosphere
-
-Intercom's website is a warm, confident customer service platform that communicates "AI-first helpdesk" through a clean, editorial design language. The page operates on a warm off-white canvas (`#faf9f6`) with off-black (`#111111`) text, creating an intimate, magazine-like reading experience. The signature Fin Orange (`#ff5600`) — named after Intercom's AI agent — serves as the singular vibrant accent against the warm neutral palette.
-
-The typography uses Saans — a custom geometric sans-serif with aggressive negative letter-spacing (-2.4px at 80px, -0.48px at 24px) and a consistent 1.00 line-height across all heading sizes. This creates ultra-compressed, billboard-like headlines that feel engineered and precise. Serrif provides the serif companion for editorial moments, and SaansMono handles code and uppercase technical labels. MediumLL and LLMedium appear for specific UI contexts, creating a rich five-font ecosystem.
-
-What distinguishes Intercom is its remarkably sharp geometry — 4px border-radius on buttons creates near-rectangular interactive elements that feel industrial and precise, contrasting with the warm surface colors. Button hover states use `scale(1.1)` expansion, creating a physical "growing" interaction. The border system uses warm oat tones (`#dedbd6`) and oklab-based opacity values for sophisticated color management.
-
-**Key Characteristics:**
-- Warm off-white canvas (`#faf9f6`) with oat-toned borders (`#dedbd6`)
-- Saans font with extreme negative tracking (-2.4px at 80px) and 1.00 line-height
-- Fin Orange (`#ff5600`) as singular brand accent
-- Sharp 4px border-radius — near-rectangular buttons and elements
-- Scale(1.1) hover with scale(0.85) active — physical button interaction
-- SaansMono uppercase labels with wide tracking (0.6px–1.2px)
-- Rich multi-color report palette (blue, green, red, pink, lime, orange)
-- oklab color values for sophisticated opacity management
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Off Black** (`#111111`): `--color-off-black`, primary text, button backgrounds
-- **Pure White** (`#ffffff`): `--wsc-color-content-primary`, primary surface
-- **Warm Cream** (`#faf9f6`): Button backgrounds, card surfaces
-- **Fin Orange** (`#ff5600`): `--color-fin`, primary brand accent
-- **Report Orange** (`#fe4c02`): `--color-report-orange`, data visualization
-
-### Report Palette
-- **Report Blue** (`#65b5ff`): `--color-report-blue`
-- **Report Green** (`#0bdf50`): `--color-report-green`
-- **Report Red** (`#c41c1c`): `--color-report-red`
-- **Report Pink** (`#ff2067`): `--color-report-pink`
-- **Report Lime** (`#b3e01c`): `--color-report-lime-300`
-- **Green** (`#00da00`): `--color-green`
-- **Deep Blue** (`#0007cb`): Deep blue accent
-
-### Neutral Scale (Warm)
-- **Black 80** (`#313130`): `--wsc-color-black-80`, dark neutral
-- **Black 60** (`#626260`): `--wsc-color-black-60`, mid neutral
-- **Black 50** (`#7b7b78`): `--wsc-color-black-50`, muted text
-- **Content Tertiary** (`#9c9fa5`): `--wsc-color-content-tertiary`
-- **Oat Border** (`#dedbd6`): Warm border color
-- **Warm Sand** (`#d3cec6`): Light warm neutral
-
-## 3. Typography Rules
-
-### Font Families
-- **Primary**: `Saans`, fallbacks: `Saans Fallback, ui-sans-serif, system-ui`
-- **Serif**: `Serrif`, fallbacks: `Serrif Fallback, ui-serif, Georgia`
-- **Monospace**: `SaansMono`, fallbacks: `SaansMono Fallback, ui-monospace`
-- **UI**: `MediumLL` / `LLMedium`, fallbacks: `system-ui, -apple-system`
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing |
-|------|------|------|--------|-------------|----------------|
-| Display Hero | Saans | 80px | 400 | 1.00 (tight) | -2.4px |
-| Section Heading | Saans | 54px | 400 | 1.00 | -1.6px |
-| Sub-heading | Saans | 40px | 400 | 1.00 | -1.2px |
-| Card Title | Saans | 32px | 400 | 1.00 | -0.96px |
-| Feature Title | Saans | 24px | 400 | 1.00 | -0.48px |
-| Body Emphasis | Saans | 20px | 400 | 0.95 | -0.2px |
-| Nav / UI | Saans | 18px | 400 | 1.00 | normal |
-| Body | Saans | 16px | 400 | 1.50 | normal |
-| Body Light | Saans | 14px | 300 | 1.40 | normal |
-| Button | Saans | 16px / 14px | 400 | 1.50 / 1.43 | normal |
-| Button Bold | LLMedium | 16px | 700 | 1.20 | 0.16px |
-| Serif Body | Serrif | 16px | 300 | 1.40 | -0.16px |
-| Mono Label | SaansMono | 12px | 400–500 | 1.00–1.30 | 0.6px–1.2px uppercase |
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary Dark**
-- Background: `#111111`
-- Text: `#ffffff`
-- Padding: 0px 14px
-- Radius: 4px
-- Hover: white background, dark text, scale(1.1)
-- Active: green background (`#2c6415`), scale(0.85)
-
-**Outlined**
-- Background: transparent
-- Text: `#111111`
-- Border: `1px solid #111111`
-- Radius: 4px
-- Same scale hover/active behavior
-
-**Warm Card Button**
-- Background: `#faf9f6`
-- Text: `#111111`
-- Padding: 16px
-- Border: `1px solid oklab(... / 0.1)`
-
-### Cards & Containers
-- Background: `#faf9f6` (warm cream)
-- Border: `1px solid #dedbd6` (warm oat)
-- Radius: 8px
-- No visible shadows
-
-### Navigation
-- Saans 16px for links
-- Off-black text on white
-- Small 4px–6px radius buttons
-- Orange Fin accent for AI features
-
-## 5. Layout Principles
-
-### Spacing: 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px, 96px
-### Border Radius: 4px (buttons), 6px (nav items), 8px (cards, containers)
-
-## 6. Depth & Elevation
-Minimal shadows. Depth through warm border colors and surface tints.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use Saans with 1.00 line-height and negative tracking on all headings
-- Apply 4px radius on buttons — sharp geometry is the identity
-- Use Fin Orange (#ff5600) for AI/brand accent only
-- Apply scale(1.1) hover on buttons
-- Use warm neutrals (#faf9f6, #dedbd6)
-
-### Don't
-- Don't round buttons beyond 4px
-- Don't use Fin Orange decoratively
-- Don't use cool gray borders — always warm oat tones
-- Don't skip the negative tracking on headings
-
-## 8. Responsive Behavior
-Breakpoints: 425px, 530px, 600px, 640px, 768px, 896px
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Text: Off Black (`#111111`)
-- Background: Warm Cream (`#faf9f6`)
-- Accent: Fin Orange (`#ff5600`)
-- Border: Oat (`#dedbd6`)
-- Muted: `#7b7b78`
-
-### Example Component Prompts
-- "Create hero: warm cream (#faf9f6) background. Saans 80px weight 400, line-height 1.00, letter-spacing -2.4px, #111111. Dark button (#111111, 4px radius). Hover: scale(1.1), white bg."
-
-## 10. Voice & Tone
-
-Intercom's voice is **support-team-first and product-agentic** — speaks as a customer messaging platform that's positioned itself for the AI agent era ("the only helpdesk designed for the AI Agent era"). Marketing copy emphasizes the support team workflow + AI agent integration.
-
-| Context | Tone |
-|---|---|
-| CTA | Verb. "Get started", "Try Fin", "Book a demo" |
-| Marketing | AI-agent-positioned. Fin (their AI agent) is first-class brand element |
-| Documentation | Practical, integration-heavy |
-| Error | Specific. "Conversation not synced. Refresh to retry." |
-
-**Voice samples**
-- Marketing tagline: *"The only helpdesk designed for the AI Agent era"* <!-- verified: intercom.com homepage 2026-05 -->
-
-**Forbidden phrases.** "Revolutionary support", "AI-powered" without specifics.
-
-## 11. Brand Narrative
-
-Intercom was founded **2011** in **California** by **four Irish designers and engineers** — **Eoghan McCabe (Chairman, ex-CEO)**, **Des Traynor**, **Ciaran Lee**, and **David Barrett** ([Intercom — Wikipedia](https://en.wikipedia.org/wiki/Intercom,_Inc.), [Eoghan McCabe — Crunchbase](https://www.crunchbase.com/person/eoghan-mccabe)). The four had previously run a Dublin design consultancy named **Contrast** and built the bug-tracking tool **Exceptional**, which they **sold to Rackspace 2011** — those proceeds funded Intercom. Initially employed 30 people in **Dublin** before the founders relocated HQ to **San Francisco**. Funding/lineage: **2012 angel from Twitter co-founder Biz Stone**, then seed from **David Sacks, Andy McLoughlin (Huddle), Dan Martell, 500 Global, Digital Garage** → **Series A $6M March 2013** led by **Social Capital** ([Irish Times — Four Irishmen on a billion-dollar mission](https://www.irishtimes.com/business/technology/four-irishmen-on-a-mission-to-build-a-billion-dollar-company-1.1664244)) → **$250M debt financing 2025** alongside **€87M / $94M extra AI investment 2024** ([Irish Times — €87M AI investment](https://www.irishtimes.com/business/2024/05/14/intercom-boss-wants-aggression-on-all-fronts-amid-extra-94m-ai-investment/), [Silicon Republic — $250M debt](https://www.siliconrepublic.com/business/intercom-eoghan-mccabe-debt-financing-hiring-jobs-ai)). Originally positioned as "the customer messaging platform" (challenging Zendesk's ticketing model with conversation-first UX). **2023 launch of Fin** — AI chatbot powered by GPT-4 — became the central product story; in 2025 the AI Agent now ships on **fin.ai** as a discrete product surface alongside intercom.com helpdesk chrome.
-
-## 12. Principles
-
-1. **Conversations over tickets.** *UI implication:* main inbox is conversation-shaped, not row-shaped.
-2. **Fin is the agent layer.** *UI implication:* Fin Resolutions metric has main-nav placement; AI agent isn't a sub-feature.
-3. **Saans is the type voice.** *UI implication:* warm cream + Saans 80px hero is the brand register.
-4. **Hover scale signals interactive.** Buttons grow on hover (scale 1.1). *UI implication:* preserve hover scale; don't replace with color-only transition.
-5. **Cream over white.** Default canvas `#faf9f6`. *UI implication:* don't use pure white — the cream is intentional warmth.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by Intercom user segments (support team leads, RevOps, AI/Fin admins), not individual people.*
-
-**Aisha Patel, 33, Dublin.** Support team lead at SaaS startup. Configures Fin to deflect 60% of tier-1 tickets.
-
-**Marcus Webb, 41, San Francisco.** RevOps at B2B SaaS. Uses Intercom outbound for product-led growth campaigns.
-
-**Priya Krishnan, 28, Bengaluru.** Frontline support agent. Cares about Inbox keyboard shortcuts + macros.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no conversations)** | "Welcome to your Inbox" + onboarding tour |
-| **Empty (Fin disabled)** | "Enable Fin to deflect tickets" with single CTA |
-| **Loading (conversation history)** | Skeleton message bubbles in cream tones |
-| **Loading (Fin response)** | Typing indicator with Fin avatar |
-| **Error (sync)** | Banner top-of-inbox with retry |
-| **Error (Fin failed)** | Inline below message + escalate-to-human option |
-| **Success (assigned)** | Subtle bg shift on conversation row |
-| **Success (Fin resolved)** | Resolution badge appears on conversation |
-| **Skeleton (inbox)** | Cream rows with subtle shimmer |
-| **Disabled (no permission)** | 0.5 opacity + tooltip permission level |
-| **Loading (long Fin run)** | Per-step "Searching knowledge base..." trace |
-
-## 15. Motion & Easing
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Selection |
-| `motion-fast` | 150ms | Hover scale (1.0 → 1.1) |
-| `motion-standard` | 250ms | Modal, panel |
-| `motion-typing` | continuous | Fin "typing" indicator |
-
-Standard cubic-bezier; **hover scale 1.1 is signature**. `prefers-reduced-motion: reduce` disables hover scale (color shift only).
-
----
-
-**Verified:** 2026-05-08 (omd:migrate run 29 — Apple-tier)
-**Tier 1 sources:** intercom.com home + fin.ai/ (dual-product live DOM via playwright — Hero Primary `#000` 6px / 42px / 12×16 / 16px·400 (intercom.com Cream `#faf9f6` canvas) and `#fff` 6px (fin.ai dark canvas); Compact Primary **`#111111`** Intercom Charcoal 4px / 40px / 0×14).
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
-**Tier 2 (Philosophy/founders):** Wikipedia (Intercom Inc.), Crunchbase (McCabe), Irish Times (4-Irishmen origin + €87M AI investment), Silicon Republic ($250M debt), Tracxn, Paperflite.
-**Style ref:** `claude`. **Conflicts unresolved:** none. **Earlier mistake reverted:** prior footer captured only nav + canvas; canonical Primary is Black 6px hero + Charcoal `#111111` 4px compact across dual-product (intercom.com + fin.ai) chrome.

package/.opencode/oh-my-design/web/references/intercom/README.md

@@ -1,23 +0,0 @@
-# Intercom Inspired Design System
-
-[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/intercom/DESIGN.md) extracted from the public [Intercom](https://intercom.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
-
-## Files
-
-| File | Description |
-|------|-------------|
-| `DESIGN.md` | Complete design system documentation (9 sections) |
-| `preview.html` | Interactive design token catalog (light) |
-| `preview-dark.html` | Interactive design token catalog (dark) |
-
-Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/intercom/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Intercom design language.
-
-## Preview
-
-A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
-
-### Dark Mode
-![Intercom Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/intercom/preview-dark-screenshot.png)
-
-### Light Mode
-![Intercom Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/intercom/preview-screenshot.png)

package/.opencode/oh-my-design/web/references/intercom/preview-dark.html

@@ -1,185 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Design System Inspired by Intercom</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
-<style>
-  :root { --cream:#111111; --black:#faf9f6; --white:#1a1a1a; --orange:#ff5600; --oat:#313130; --gray50:#9c9c98; --gray60:#9c9c98; --gray80:#313130; --sand:#3a3835; --font:'Inter',ui-sans-serif,system-ui,sans-serif; }
-  * { margin:0; padding:0; box-sizing:border-box; }
-  body { background:var(--cream); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.50; -webkit-font-smoothing:antialiased; }
-
-  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--white); border-bottom:1px solid var(--oat); }
-  .nav-brand { font-size:14px; font-weight:400; color:var(--black); text-decoration:none; }
-  .nav-links { display:flex; gap:20px; list-style:none; }
-  .nav-links a { font-size:14px; color:var(--gray60); text-decoration:none; }
-  .nav-links a:hover { color:var(--black); }
-  .nav-cta { display:inline-block; background:var(--black); color:var(--white); padding:8px 14px; border-radius:4px; font-size:14px; text-decoration:none; transition:transform 0.2s; }
-  .nav-cta:hover { transform:scale(1.05); }
-
-  .hero { padding:80px 24px 64px; text-align:left; max-width:900px; margin:0 auto; }
-  .hero h1 { font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px; margin-bottom:20px; }
-  .hero h1 span { color:var(--orange); }
-  .hero p { font-size:16px; color:var(--gray60); max-width:480px; margin-bottom:32px; }
-  .hero-buttons { display:flex; gap:12px; }
-  .btn-dark { display:inline-block; background:var(--black); color:var(--white); padding:12px 20px; border-radius:4px; font-family:var(--font); font-size:16px; text-decoration:none; border:none; cursor:pointer; transition:all 0.2s; }
-  .btn-dark:hover { background:var(--white); color:var(--black); transform:scale(1.1); }
-  .btn-dark:active { transform:scale(0.85); }
-  .btn-outline { display:inline-block; background:transparent; color:var(--black); padding:12px 20px; border-radius:4px; border:1px solid var(--black); font-family:var(--font); font-size:16px; text-decoration:none; cursor:pointer; transition:all 0.2s; }
-  .btn-outline:hover { transform:scale(1.1); }
-  .btn-cream { display:inline-block; background:var(--cream); color:var(--black); padding:12px 16px; border-radius:4px; border:1px solid var(--oat); font-family:var(--font); font-size:14px; text-decoration:none; }
-
-  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
-  .section-label { font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50); margin-bottom:8px; }
-  .section-title { font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px; margin-bottom:24px; }
-  .section-divider { border:none; border-top:1px solid var(--oat); margin:0; }
-
-  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
-  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--oat); background:var(--white); }
-  .color-swatch-block { height:60px; }
-  .color-swatch-info { padding:8px 10px; }
-  .color-swatch-name { font-size:12px; font-weight:400; margin-bottom:2px; }
-  .color-swatch-hex { font-size:10px; color:var(--gray50); font-family:monospace; }
-  .color-swatch-role { font-size:9px; color:var(--gray50); margin-top:2px; }
-  .color-group-label { font-size:12px; color:var(--gray60); margin:20px 0 8px; }
-
-  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--oat); }
-  .type-sample:last-child { border-bottom:none; }
-  .type-meta { font-family:monospace; font-size:10px; color:var(--gray50); margin-top:4px; }
-
-  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
-  .button-item { text-align:center; }
-  .button-label { font-size:10px; color:var(--gray50); margin-top:6px; }
-
-  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
-  .card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:20px; }
-  .card h3 { font-size:24px; font-weight:400; letter-spacing:-0.48px; line-height:1.00; margin-bottom:8px; }
-  .card p { font-size:14px; color:var(--gray60); line-height:1.43; }
-
-  .form-group { margin-bottom:16px; max-width:400px; }
-  .form-label { display:block; font-size:14px; margin-bottom:4px; }
-  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; outline:none; }
-  .form-input:focus { border-color:var(--black); }
-  .form-input--focus { border-color:var(--black); }
-  .form-input--error { border-color:var(--orange); }
-  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--oat); padding:10px 14px; border-radius:4px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
-  .form-state-label { font-size:9px; color:var(--gray50); margin-top:4px; }
-
-  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
-  .spacing-item { text-align:center; }
-  .spacing-block { background:var(--black); border-radius:2px; margin-bottom:4px; height:24px; opacity:0.15; }
-  .spacing-value { font-family:monospace; font-size:9px; color:var(--gray50); }
-
-  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
-  .radius-item { text-align:center; }
-  .radius-box { width:52px; height:52px; background:var(--oat); margin-bottom:4px; }
-  .radius-label { font-family:monospace; font-size:9px; color:var(--gray50); }
-
-  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
-  .elevation-card { background:var(--white); border:1px solid var(--oat); border-radius:8px; padding:16px; text-align:center; }
-  .elevation-label { font-size:13px; margin-bottom:4px; }
-  .elevation-desc { font-family:monospace; font-size:9px; color:var(--gray50); }
-
-  .footer { padding:32px; text-align:center; background:var(--black); color:var(--gray50); font-size:12px; }
-  .footer a { color:var(--orange); text-decoration:underline; }
-
-  @media (max-width:768px) { .hero h1 { font-size:44px; letter-spacing:-1.32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
-</style>
-</head>
-<body>
-
-<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Start free trial</a></nav>
-<div style="position:fixed;top:16px;right:16px;z-index:200;background:#ff5600;color:#ffffff;font-size:10px;font-weight:400;padding:4px 10px;border-radius:4px;">Dark Mode</div>
-
-<section class="hero"><h1>Design System<br>Inspired by <span>Intercom</span></h1><p>Every color, font, and component — visualized with warm precision.</p><div class="hero-buttons"><a class="btn-dark" href="#">Get a demo</a><a class="btn-outline" href="#">Start free trial</a></div></section>
-
-<hr class="section-divider">
-
-<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
-<div class="color-group-label">Primary</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#111111"></div><div class="color-swatch-info"><div class="color-swatch-name">Off Black</div><div class="color-swatch-hex">#111111</div><div class="color-swatch-role">Primary text, buttons</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#faf9f6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Cream</div><div class="color-swatch-hex">#faf9f6</div><div class="color-swatch-role">Page background</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#ff5600"></div><div class="color-swatch-info"><div class="color-swatch-name">Fin Orange</div><div class="color-swatch-hex">#ff5600</div><div class="color-swatch-role">Brand accent</div></div></div>
-</div>
-<div class="color-group-label">Report Palette</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#65b5ff"></div><div class="color-swatch-info"><div class="color-swatch-name">Blue</div><div class="color-swatch-hex">#65b5ff</div><div class="color-swatch-role">Report blue</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#0bdf50"></div><div class="color-swatch-info"><div class="color-swatch-name">Green</div><div class="color-swatch-hex">#0bdf50</div><div class="color-swatch-role">Report green</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#c41c1c"></div><div class="color-swatch-info"><div class="color-swatch-name">Red</div><div class="color-swatch-hex">#c41c1c</div><div class="color-swatch-role">Report red</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#ff2067"></div><div class="color-swatch-info"><div class="color-swatch-name">Pink</div><div class="color-swatch-hex">#ff2067</div><div class="color-swatch-role">Report pink</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#b3e01c"></div><div class="color-swatch-info"><div class="color-swatch-name">Lime</div><div class="color-swatch-hex">#b3e01c</div><div class="color-swatch-role">Report lime</div></div></div>
-</div>
-<div class="color-group-label">Neutral</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#7b7b78"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 50</div><div class="color-swatch-hex">#7b7b78</div><div class="color-swatch-role">Muted text</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#626260"></div><div class="color-swatch-info"><div class="color-swatch-name">Gray 60</div><div class="color-swatch-hex">#626260</div><div class="color-swatch-role">Secondary text</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#dedbd6"></div><div class="color-swatch-info"><div class="color-swatch-name">Oat Border</div><div class="color-swatch-hex">#dedbd6</div><div class="color-swatch-role">Borders</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#d3cec6"></div><div class="color-swatch-info"><div class="color-swatch-name">Warm Sand</div><div class="color-swatch-hex">#d3cec6</div><div class="color-swatch-role">Light neutral</div></div></div>
-</div></section>
-
-<hr class="section-divider">
-
-<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
-<div class="type-sample"><div style="font-size:72px; font-weight:400; line-height:1.00; letter-spacing:-2.4px;">Display Hero</div><div class="type-meta">Saans — 80px / 400 / 1.00 / -2.4px</div></div>
-<div class="type-sample"><div style="font-size:54px; font-weight:400; line-height:1.00; letter-spacing:-1.6px;">Section Heading</div><div class="type-meta">Saans — 54px / 400 / 1.00 / -1.6px</div></div>
-<div class="type-sample"><div style="font-size:40px; font-weight:400; line-height:1.00; letter-spacing:-1.2px;">Sub-heading</div><div class="type-meta">Saans — 40px / 400 / 1.00 / -1.2px</div></div>
-<div class="type-sample"><div style="font-size:24px; font-weight:400; line-height:1.00; letter-spacing:-0.48px;">Feature Title</div><div class="type-meta">Saans — 24px / 400 / 1.00 / -0.48px</div></div>
-<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.50; color:var(--gray60);">Body — The only AI-first customer service platform. Resolve issues instantly with Fin AI Agent.</div><div class="type-meta">Saans — 16px / 400 / 1.50</div></div>
-<div class="type-sample"><div style="font-size:14px; font-weight:300; line-height:1.40; color:var(--gray50);">Body Light — Updated 3 minutes ago</div><div class="type-meta">Saans — 14px / 300 / 1.40</div></div>
-<div class="type-sample"><div style="font-family:monospace; font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gray50);">MONO LABEL</div><div class="type-meta">SaansMono — 12px / 500 / uppercase / +1.2px</div></div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
-<div class="button-row">
-<div class="button-item"><a class="btn-dark" href="#">Get a demo</a><div class="button-label">Primary Dark</div></div>
-<div class="button-item"><a class="btn-outline" href="#">Start free trial</a><div class="button-label">Outlined</div></div>
-<div class="button-item"><a class="btn-cream" href="#">Learn more</a><div class="button-label">Warm Cream</div></div>
-</div>
-<p style="font-size:12px; color:var(--gray50); margin-top:12px;">Hover to see scale(1.1). Click for scale(0.85). All buttons: 4px radius.</p>
-</section>
-
-<hr class="section-divider">
-
-<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
-<div class="card-grid">
-<div class="card"><h3>Fin AI Agent</h3><p>Resolve 50% of support questions instantly with AI. No training needed.</p></div>
-<div class="card"><h3>Help Center</h3><p>Help customers help themselves. Build a knowledge base with AI-powered search.</p></div>
-<div class="card"><h3>Workflows</h3><p>Automate repetitive tasks. Route, assign, and resolve at scale.</p></div>
-</div></section>
-
-<hr class="section-divider">
-
-<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
-<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@company.com"><div class="form-state-label">Default (oat border)</div></div>
-<div class="form-group"><label class="form-label">Company</label><input class="form-input form-input--focus" type="text" value="Acme Inc"><div class="form-state-label">Focus (black border)</div></div>
-<div class="form-group"><label class="form-label">Website</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error (orange border)</div></div>
-<div class="form-group"><label class="form-label">Message</label><textarea class="form-textarea" placeholder="How can we help?"></textarea></div>
-</section>
-
-<hr class="section-divider">
-
-<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
-<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div><div class="spacing-item"><div class="spacing-block" style="width:32px"></div><div class="spacing-value">32</div></div><div class="spacing-item"><div class="spacing-block" style="width:48px"></div><div class="spacing-value">48</div></div><div class="spacing-item"><div class="spacing-block" style="width:64px"></div><div class="spacing-value">64</div></div></div></section>
-
-<hr class="section-divider">
-
-<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
-<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div></div>
-<p style="font-size:11px; color:var(--gray50); margin-top:8px;">Sharp geometry: 4px for buttons, 6px for nav, 8px for cards.</p>
-</section>
-
-<hr class="section-divider">
-
-<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
-<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow — warm borders</div></div><div class="elevation-card" style="border-color:var(--black);"><div class="elevation-label">Focus</div><div class="elevation-desc">Black border</div></div></div></section>
-
-<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
-
-</body>
-</html>