oh-my-design-cli 1.0.2 → 1.1.0

package/web/references/coinbase/DESIGN.md

@@ -0,0 +1,205 @@
+# Design System Inspiration of Coinbase
+
+## 1. Visual Theme & Atmosphere
+
+Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.
+
+The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (`#578bfa`). The design alternates between white content sections and dark (`#0a0b0d`, `#282b31`) feature sections, creating a professional, financial-grade interface.
+
+**Key Characteristics:**
+- Coinbase Blue (`#0052ff`) as singular brand accent
+- Four-font proprietary family: Display, Sans, Text, Icons
+- 56px radius pill buttons with blue hover transition
+- Near-black (`#0a0b0d`) dark sections + white light sections
+- 1.00 line-height on display headings — ultra-tight
+- Cool gray secondary surface (`#eef0f3`) with blue tint
+- `text-transform: lowercase` on some button labels — unusual
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders
+- **Pure White** (`#ffffff`): Primary light surface
+- **Near Black** (`#0a0b0d`): Text, dark section backgrounds
+- **Cool Gray Surface** (`#eef0f3`): Secondary button background
+
+### Interactive
+- **Hover Blue** (`#578bfa`): Button hover background
+- **Link Blue** (`#0667d0`): Secondary link color
+- **Muted Blue** (`#5b616e`): Border color at 20% opacity
+
+### Surface
+- **Dark Card** (`#282b31`): Dark button/card backgrounds
+- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `CoinbaseDisplay` — hero headlines
+- **UI / Sans**: `CoinbaseSans` — buttons, headings, nav
+- **Body**: `CoinbaseText` — reading text
+- **Icons**: `CoinbaseIcons` — icon font
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |
+| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |
+| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |
+| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |
+| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |
+| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |
+| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |
+| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |
+| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |
+| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |
+| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
+| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |
+| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Pill (56px radius)**
+- Background: `#eef0f3` or `#282b31`
+- Radius: 56px
+- Border: `1px solid` matching background
+- Hover: `#578bfa` (light blue)
+- Focus: `2px solid black` outline
+
+**Full Pill (100000px radius)**
+- Used for maximum pill shape
+
+**Blue Bordered**
+- Border: `1px solid #0052ff`
+- Background: transparent
+
+### Cards & Containers
+- Radius: 8px–40px range
+- Borders: `1px solid rgba(91,97,110,0.2)`
+
+## 5. Layout Principles
+
+### Spacing System
+- Base: 8px
+- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px
+
+### Border Radius Scale
+- Small (4px–8px): Article links, small cards
+- Standard (12px–16px): Cards, menus
+- Large (24px–32px): Feature containers
+- XL (40px): Large buttons/containers
+- Pill (56px): Primary CTAs
+- Full (100000px): Maximum pill
+
+## 6. Depth & Elevation
+
+Minimal shadow system — depth from color contrast between dark/light sections.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Coinbase Blue (#0052ff) for primary interactive elements
+- Apply 56px radius for all CTA buttons
+- Use CoinbaseDisplay for hero headings only
+- Alternate dark (#0a0b0d) and white sections
+
+### Don't
+- Don't use the blue decoratively — it's functional only
+- Don't use sharp corners on CTAs — 56px minimum
+
+## 8. Responsive Behavior
+
+Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand: Coinbase Blue (`#0052ff`)
+- Background: White (`#ffffff`)
+- Dark surface: `#0a0b0d`
+- Secondary surface: `#eef0f3`
+- Hover: `#578bfa`
+- Text: `#0a0b0d`
+
+### Example Component Prompts
+- "Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa."
+- "Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff)."
+
+## 10. Voice & Tone
+
+Coinbase's voice is **compliance-aware-but-friendly** — a fintech that's been through SEC scrutiny and writes microcopy with both legal precision and consumer warmth. Marketing copy avoids hyped crypto-bro language ("moon", "lambo") and stays plainspoken: *"Buy and Sell Bitcoin, Ethereum, and more with trust"* (homepage 2026-05). Product UI emphasizes regulatory clarity (KYC required, rates explicit, fees disclosed) over speculative excitement.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb-first. "Sign up", "Buy", "Sell". Never "Trade now!!" |
+| Marketing | Trust-emphasized. Plain language about regulation/security |
+| Error (verification) | Specific. "Verification incomplete. Upload a government-issued ID to continue." |
+| Success (transaction) | Receipt-detail. Asset, amount, fee, USD equivalent, network confirmation status |
+| Risk warnings | Required and prominent — never minimized in fine print |
+
+**Voice samples**
+- Tagline: *"Buy and Sell Bitcoin, Ethereum, and more with trust"* <!-- verified: coinbase.com homepage 2026-05 -->
+
+**Forbidden phrases.** "To the moon", "diamond hands". Hyperbolic ROI claims. Hidden fees. "Risk-free" framing on volatile assets.
+
+## 11. Brand Narrative
+
+Coinbase was founded **June 2012** in San Francisco by **Brian Armstrong** (CEO) and **Fred Ehrsam** (former Goldman Sachs FX trader) ([Brian Armstrong — Wikipedia](https://en.wikipedia.org/wiki/Brian_Armstrong_(businessman)), [Frederick.ai — Brian Armstrong](https://www.frederick.ai/blog/brian-armstrong-coinbase)). Origin story: **Armstrong posted on Hacker News looking for a co-founder for Y Combinator**; Ehrsam responded after seeing the post on Reddit — the HN post itself went viral. They entered **Y Combinator S12** with $150K. Mission: ***"to increase economic freedom in the world."*** **NASDAQ direct listing April 14, 2021** under ticker **COIN** — landmark moment for the crypto industry, briefly approached **$100B market cap** at IPO peak ([99bitcoins](https://99bitcoins.com/people/who-is-brian-armstrong/)). Coinbase **survived the 2022 crypto winter and the FTX collapse (Nov 2022)** as the most-regulated US crypto exchange — turning regulatory caution into positioning advantage. Product family extended: **Coinbase Wallet** (non-custodial), **Coinbase Prime** (institutional), **Base** (L2 blockchain, launched 2023).
+
+What Coinbase refuses: token shilling, unregistered securities listings (regulatory caution), aggressive trader-bait UI, casino-style gambling framing.
+
+## 12. Principles
+
+1. **Compliance is a feature, not a tax.** *UI implication:* KYC/security flows have first-class UX investment, not last-mile.
+2. **Show the receipt, always.** *UI implication:* every transaction includes asset / amount / fee / USD value / network status.
+3. **Education sits next to action.** *UI implication:* Earn pages, Learn pages have nav prominence equal to Trade.
+4. **Round buttons, not aggressive corners.** *UI implication:* fully-pill (`56px` radius) on primary actions reads "approachable, retail-grade".
+5. **Coinbase Blue `#0052ff` is the only accent.** *UI implication:* never multi-color brand chrome; let market data charts carry color.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Coinbase user segments (retail crypto holders, institutional traders, recurring-buy long-holders), not individual people.*
+
+**Marcus Reilly, 41, Boston.** First-time crypto buyer, $200/month recurring buy of BTC and ETH. Trusts Coinbase as the most regulated US option.
+
+**Yuki Sato, 29, Tokyo.** Tech worker exploring DeFi via Coinbase Wallet (separate from Coinbase exchange). Cares about gas fees and L2 support.
+
+**Aisha Patel, 53, NYC.** RIA managing client crypto exposure via Coinbase Prime (institutional). Compliance reporting is the entire reason for choosing Coinbase.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no portfolio)** | "Make your first purchase" CTA + recurring-buy promotion |
+| **Empty (no transactions)** | "Your transaction history will appear here." Plain, no upsell |
+| **Loading (price feed)** | Per-cell shimmer; chart shows last cached + stale-indicator |
+| **Loading (KYC verification)** | Persistent badge, allows navigation while pending |
+| **Error (verification)** | Specific reason + remediation path, never blocking-without-recourse |
+| **Error (transaction)** | Receipt-style failure + retry + customer support link |
+| **Success (purchase)** | Full receipt: amount, fee, USD value, network confirmation tracker |
+| **Success (deposit)** | Confirmation + when funds available, network reliance disclosed |
+| **Skeleton (asset list)** | Light gray rows at exact dimensions |
+| **Disabled (insufficient funds)** | 0.5 opacity + "Add funds" inline link |
+| **Loading (long action: send/withdraw)** | Multi-step progress (Submitted → Confirming → Confirmed) with explicit timing |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal, panel |
+| `motion-pulse` | continuous | Live price-update micro-flash on cells |
+
+Easings: standard cubic-bezier; no bounce. **Live price updates** flash green/red cell background briefly on tick. `prefers-reduced-motion: reduce` disables price flash.
+
+---
+
+**Verified:** 2026-05-08 (B2 loop)
+**Tier 1 sources:** coinbase.com (live DOM via playwright — round 56px icon buttons; Sign up `#0052ff` 56px / 16px·600 / 47-60px height)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** coinbase.com homepage; Brian Armstrong public talks; SEC public filings.
+**Style ref:** `stripe`. **Conflicts unresolved:** none.

package/{references → web/references}/composio/DESIGN.md

@@ -305,3 +305,77 @@ When refining existing screens generated with this design system:
 4. Describe the desired "feel" alongside specific measurements — "compressed and authoritative heading at 48px with line-height 1.0"
 5. For glow effects, specify "Electric Cyan at 12% opacity as a radial gradient behind the element"
 6. Always specify which font — abcDiatype for marketing, JetBrains Mono for technical/code content
+
+## 10. Voice & Tone
+
+Composio's voice is **terminal-confident and technically precise.** Marketing copy reads like a developer changelog — capability statements, no hype. Hero CTAs use uppercase ("GET STARTED", "ADD TO MY AGENT", "TRY IT OUT") which on most brands would feel aggressive but on Composio reads as "command line aesthetic" — the brand register intentionally borrows terminal vocabulary to signal "this is for developers building agent infrastructure."
+
+| Context | Tone |
+|---|---|
+| CTA | UPPERCASE imperative. "GET STARTED", "ADD TO MY AGENT", "TRY IT OUT" |
+| Marketing | Capability + integration list. "X tools, Y agents, Z protocols" |
+| Documentation | Code-block-first; minimal prose between examples |
+| Error | Stack-trace-acceptable. Technical users want the actual error |
+
+**Voice samples**
+- Marketing CTA: *"GET STARTED FOR FREE"* / *"ADD TO MY AGENT"* <!-- verified: composio.dev homepage 2026-05 -->
+
+**Forbidden phrases.** Consumer-AI hype ("magic", "AI revolution"). Apology theatre. Excessive emoji.
+
+## 11. Brand Narrative
+
+Composio was founded **2023** in San Francisco by **Soham Ganatra (CEO)** and **Karan Vaidya (CTO)** — both **IIT Bombay** graduates who first met at a **Physics Olympiad camp** before becoming roommates in college ([Tracxn — Composio profile](https://tracxn.com/d/companies/composio/), [Entrackr — Composio Series A](https://entrackr.com/2024/11/composio-raises-25-mn-in-series-a-led-by-lightspeed/)). The platform provides pre-built integrations — **200+ tools and APIs** that LLM agents can call — and powers agent infrastructure for **100K+ developers and 200+ companies** including **Glean, April, OpenNote, and Altera**. Funding total **~$29M**: **$4M seed (2024)** led by **Together Fund** with **Elevation Capital** + angels **Gokul Rajaram, Sohum Mazumdar (Rubrik), Dharmesh Shah (HubSpot)**, then **$25M Series A (Nov 2024)** led by **Lightspeed Venture Partners** ([Lightspeed announcement](https://lsvp.com/stories/composio-series-a/), [Entrackr](https://entrackr.com/2024/11/composio-raises-25-mn-in-series-a-led-by-lightspeed/)). The brand voice — terminal-aesthetic UPPERCASE, monospace typography, electric-cyan accent — signals "infrastructure for builders" rather than "consumer chatbot wrapper." What Composio refuses: consumer-AI hype framing, magic-wand metaphors, abstraction that hides the actual tool call.
+
+## 12. Principles
+
+1. **Terminal aesthetic is the register.** UPPERCASE CTAs + JetBrains Mono for technical content. *UI implication:* don't soften with sentence-case marketing; the brand feels like a CLI.
+2. **Integration count is the headline.** *UI implication:* hero modules show "200+ tools" or live integration grid, not vague claims.
+3. **Code-first documentation.** *UI implication:* every concept page leads with a copy-paste code example.
+4. **Electric Cyan glows are decorative depth.** *UI implication:* radial-gradient cyan glows behind cards, never solid cyan fills on chrome.
+5. **Two fonts, strict roles.** abcDiatype for marketing, JetBrains Mono for technical. *UI implication:* never mix; pick the surface and commit.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Composio user segments (AI engineers, agent platform builders, indie developers shipping agent products), not individual people.*
+
+**Akira Yamamoto, 34, Tokyo.** AI engineer building a Slack agent at a B2B SaaS. Composio for the Slack/Notion/GitHub integrations he'd otherwise build himself.
+
+**Priya Krishnan, 28, Bengaluru.** Indie developer shipping a personal-assistant agent. Cares about per-call pricing + which tools have OAuth flows handled.
+
+**Marcus Webb, 41, San Francisco.** Platform engineer at AI startup. Evaluating Composio vs building integration layer in-house. Latency + observability are the deciding factors.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no agents)** | UPPERCASE CTA "CREATE FIRST AGENT" + integration grid preview |
+| **Empty (no integrations)** | "BROWSE 200+ INTEGRATIONS" with searchable grid |
+| **Loading (integration installing)** | OAuth flow with provider-specific UI; progress visible |
+| **Loading (agent running)** | Per-step trace with tool calls visible |
+| **Error (tool failed)** | Full stack trace + provider error code + retry button |
+| **Error (auth)** | "RECONNECT [Tool]" with OAuth re-trigger |
+| **Success (integration installed)** | Cyan glow pulse on integration card; toast "INSTALLED" |
+| **Success (agent run)** | Trace expanded showing all tool calls + final output |
+| **Skeleton (integration grid)** | Dark cards with subtle cyan border |
+| **Disabled (rate limit)** | 0.5 opacity + "UPGRADE" CTA |
+| **Loading (model inference)** | Per-token streaming visible alongside tool-call trace |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle |
+| `motion-fast` | 100ms | Hover (faster than typical for terminal feel) |
+| `motion-glow-pulse` | 1500ms | Cyan glow heartbeat behind hero elements |
+| `motion-standard` | 250ms | Modal, panel |
+
+Easings: terminal-precise. **Glow pulses** never animate on input fields (would distract). `prefers-reduced-motion: reduce` removes glow pulse (becomes static).
+
+---
+
+**Verified:** 2026-05-08 (B2 loop)
+**Tier 1 sources:** composio.dev (live DOM via playwright — UPPERCASE CTAs `#fff` / `#000` / 0px radius / 6×8 padding / 33px / 14px·400)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** composio.dev homepage; composio.dev/pricing.
+**Tier 2 (Founders/Funding):** Tracxn, Entrackr, Lightspeed Venture Partners blog.
+**Style ref:** `stripe` (engineering tone). **Conflicts unresolved:** none.