oh-my-design-cli 1.0.2 → 1.2.0

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

@@ -63,16 +63,72 @@ What makes BMW distinctive is its CSS variable-driven theming system. Context-aw
 ## 4. Component Stylings
 
 ### Buttons
-- Text: 16px BMWTypeNextLatin, weight 700 for primary, 400 for secondary
-- Line-height: 1.15–2.88 (large variation suggests padding-driven sizing)
-- Border: white bottom-border on dark surfaces (`1px solid #ffffff`)
-- No border-radius — sharp rectangular buttons
 
-### Cards & Containers
-- No border-radius — all containers are sharp-cornered rectangles
-- White backgrounds on light sections
-- Dark backgrounds for hero/feature sections
-- No visible borders on most elements
+**Primary**
+- Background: transparent
+- Text: `#ffffff`
+- Border: 1px solid `#ffffff` (bottom-border on dark surfaces)
+- Radius: 0px
+- Padding: 12px 24px
+- Font: 16px / 700 / BMWTypeNextLatin
+- Hover: text remains white, no underline
+- Use: Primary CTA on dark/hero surfaces
+
+**Secondary**
+- Background: transparent
+- Text: `#262626`
+- Border: 1px solid `#262626`
+- Radius: 0px
+- Padding: 12px 24px
+- Font: 16px / 400 / BMWTypeNextLatin
+- Use: Secondary actions on light surfaces
+
+**Highlight**
+- Background: `#1c69d4`
+- Text: `#ffffff`
+- Radius: 0px
+- Padding: 12px 24px
+- Font: 16px / 700 / BMWTypeNextLatin
+- Hover: `#0653b6`
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source) — BMW Blue highlight CTA
+
+### Inputs
+
+**Default**
+- Background: `#ffffff`
+- Text: `#262626`
+- Border: 1px solid `#262626`
+- Radius: 0px
+- Padding: 12px 16px
+- Font: 16px / 400 / BMWTypeNextLatin
+- Focus: border `#0653b6`
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
+
+### Cards
+
+**Standard**
+- Background: `#ffffff`
+- Radius: 0px
+- Padding: 24px
+- Border: none
+- Use: Light-section content card — sharp rectangular, no border-radius (BMW's angular signature)
+
+**Dark Hero Container**
+- Background: `#262626` (or full-bleed photography)
+- Text: `#ffffff`
+- Radius: 0px
+- Padding: 0px (edge-to-edge)
+- Use: Hero/feature sections with full-bleed automotive photography
+
+### Badges
+
+**Default**
+- Background: `#262626`
+- Text: `#ffffff`
+- Radius: 0px
+- Padding: 4px 8px
+- Font: 12px / 700 / BMWTypeNextLatin
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
 
 ### Navigation
 - BMWTypeNextLatin 18px weight 900 for primary nav links
@@ -178,3 +234,76 @@ What makes BMW distinctive is its CSS variable-driven theming system. Context-aw
 3. BMW Blue for interactive only — never as background or decoration
 4. Photography carries emotion — the UI is pure precision
 5. Tight line-heights everywhere — 1.15 to 1.30 is the range
+
+## 10. Voice & Tone
+
+BMW's voice is **precision-engineered and luxury-confident.** "프리미엄 자동차와 혁신적인 기술" — luxury performance positioning. Sharp 3px radius + photography-driven hero signal "German engineering precision."
+
+| Context | Tone |
+|---|---|
+| CTA | Verb-noun. "사전 예약하기", "더 알아보기", "구성하기" |
+| Marketing | Photography dominant; copy supports image |
+| Documentation | Technical specs (kW, km/h, 제로백) prominent |
+| Error | Specific. "구성 옵션이 호환되지 않습니다." |
+
+**Voice samples**
+- Marketing CTAs: *"사전 예약하기"* / *"BMW AI 어시스턴트"* <!-- verified: bmw.co.kr 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary driving". Aggressive Mercedes-comparison framing.
+
+## 11. Brand Narrative
+
+BMW (**Bayerische Motoren Werke**) was founded **March 7, 1916** in Munich, originally as **Bayerische Flugzeugwerke (BFW)** — formerly Otto Flugmaschinenfabrik — an aircraft engine manufacturer ([BMW — Wikipedia](https://en.wikipedia.org/wiki/BMW), [History of BMW — Wikipedia](https://en.wikipedia.org/wiki/History_of_BMW), [BMW Group History](https://www.bmwgroup.com/en/company/history.html)). The company traces its lineage to **Karl Rapp** and **Gustav Otto**; the moniker "BMW" first appeared in 1917 when Rapp Motorenwerke became BMW GmbH, then re-formalized as **Bayerische Motoren Werke in 1922**. The first product was the **BMW IIIa aircraft engine**, distinguished by fuel economy and high-altitude performance ([PBS](https://www.pbs.org/newshour/world/heres-what-bmw-did-before-it-made-luxury-cars)). The **Treaty of Versailles (1918) banned aircraft engine production**, forcing BMW to pivot to **farm equipment, household items, and railway brakes** to survive. Motorcycle production began **1923 (R32)**; automobile market entry **1928** (Dixi acquisition). Brand positioning: ***"Sheer Driving Pleasure"* / *"Freude am Fahren"***. The 2024-2025 evolution toward AI Assistant integration + EV (i-series, Neue Klasse) positions BMW for the post-internal-combustion era while preserving driving-pleasure identity. The roundel logo's **white + blue quarters represent the Bavarian flag**, not a spinning propeller — that myth has been explicitly debunked by BMW corporate communications.
+
+## 12. Principles
+
+1. **Photography is the design.** *UI implication:* hero modules dominated by car photography.
+2. **3px sharp radius.** *UI implication:* never round corners more — sharp signals German engineering.
+3. **BMW Blue `#1c69d4` for primary action.** *UI implication:* preserve corporate blue for CTAs.
+4. **Tight line-heights 1.15-1.30.** *UI implication:* don't open line-height; tight signals premium typography.
+5. **Photography emotion, UI precision.** *UI implication:* car photos can be cinematic; chrome stays restrained.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by BMW user segments (premium auto buyers, EV early-adopters, fleet managers), not individual people.*
+
+**Heinz Müller, 48, Munich.** BMW M-series enthusiast. Long-time customer.
+
+**Sofia Park, 38, Seoul.** First BMW iX buyer, Korean market.
+
+**Marcus Webb, 52, San Francisco.** Tech executive evaluating EV options. BMW i7 vs Tesla Model S comparison.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no configurations)** | "Configure your BMW" CTA + model selector |
+| **Empty (no test drives)** | "Book a test drive" CTA |
+| **Loading (configurator)** | Real-time 3D rendering progress |
+| **Loading (price calc)** | Per-option price update |
+| **Error (incompatible config)** | Specific. Constraint explanation |
+| **Error (no inventory)** | "출고 대기 시간: N개월" with reservation CTA |
+| **Success (saved config)** | Configuration ID + share link |
+| **Success (test drive booked)** | Confirmation + dealer contact |
+| **Skeleton (model list)** | 3px-radius placeholders |
+| **Disabled (option locked)** | Tooltip with constraint reason |
+| **Loading (long render)** | Persistent progress |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Selection |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 300ms | Modal, panel |
+| `motion-config-transition` | 500ms | Configuration option transitions |
+
+Standard cubic-bezier; minimal bounce — premium register. `prefers-reduced-motion: reduce` removes 3D rendering animations.
+
+---
+
+**Verified:** 2026-05-08 (B9 loop)
+**Tier 1 sources:** bmw.co.kr (live DOM via playwright — BMW Blue `#1c69d4` 3px / 4px / 52px / 14px·500; Light gray `#fff` ghost 3px; Round white icon button 50% / 52px)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** bmw.com homepage; BMW corporate history; "Sheer Driving Pleasure" tagline.
+**Style ref:** `apple` (luxury minimal). **Conflicts unresolved:** none.

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

@@ -91,23 +91,104 @@ The elevation system is notably sophisticated for a minimal site — 11 shadow d
 ## 4. Component Stylings
 
 ### Buttons
-- **Dark Primary**: `#242424` (or `#1e1f23`) background, white text, 6–8px radius. Hover: opacity reduction to 0.7. The signature CTA — maximally dark on white
-- **White/Ghost**: White background with shadow-ring border, dark text. Uses the multi-layered shadow system for subtle elevation
-- **Pill**: 9999px radius for rounded pill-shaped actions and badges
-- **Compact**: 4px padding, small text — utility actions within product UI
-- **Inset highlight**: Some buttons feature `rgba(255, 255, 255, 0.15) 0px 2px 0px inset` — a subtle inner-top highlight creating a 3D pressed effect
-
-### Cards & Containers
-- **Shadow Card**: White background, multi-layered shadow — `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`. The ring shadow (0px 0px 0px 1px) acts as a shadow-border
-- **Product UI Cards**: Screenshots of the scheduling interface displayed in card containers with shadow elevation
-- **Radius**: 8px for standard cards, 12px for larger containers, 16px for prominent sections
-- **Hover**: Likely subtle shadow deepening or scale transform
-
-### Inputs & Forms
-- **Select dropdown**: White background, `#000000` text, 1px solid `rgb(118, 118, 118)` border
-- **Focus**: Uses Framer's focus outline system (`--framer-focus-outline`)
-- **Text input**: 8px radius, standard border treatment
-- **Minimal form presence**: The marketing site prioritizes CTA buttons over complex forms
+
+**Dark Primary**
+- Background: `#242424` (or `#1e1f23`)
+- Text: `#ffffff`
+- Radius: 8px
+- Padding: 12px 20px
+- Font: 16px / 600 / Inter
+- Hover: opacity 0.7
+- Use: Signature CTA — maximally dark on white
+
+**White / Ghost**
+- Background: `#ffffff`
+- Text: `#242424`
+- Radius: 8px
+- Padding: 12px 20px
+- Shadow: `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`
+- Font: 16px / 600 / Inter
+- Use: Secondary CTA with shadow-ring border
+
+**Pill**
+- Background: `#242424`
+- Text: `#ffffff`
+- Radius: 9999px
+- Padding: 8px 16px
+- Use: Rounded pill-shaped actions and badges
+
+**Compact**
+- Background: `#242424`
+- Text: `#ffffff`
+- Radius: 6px
+- Padding: 4px 8px
+- Font: 14px / 600 / Inter
+- Use: Utility actions within product UI
+
+**Inset Highlight**
+- Background: `#242424`
+- Text: `#ffffff`
+- Radius: 8px
+- Shadow: `rgba(255, 255, 255, 0.15) 0px 2px 0px inset`
+- Use: Subtle inner-top highlight creating a 3D pressed effect
+
+### Inputs
+
+**Select / Dropdown**
+- Background: `#ffffff`
+- Text: `#000000`
+- Border: 1px solid `rgb(118, 118, 118)`
+- Radius: 8px
+- Padding: 8px 12px
+- Focus: `--framer-focus-outline`
+- Use: Form select / dropdown
+
+**Text Input**
+- Background: `#ffffff`
+- Text: `#242424`
+- Border: 1px solid `rgb(118, 118, 118)`
+- Radius: 8px
+- Padding: 8px 12px
+- Use: Standard text input (marketing site prioritizes CTAs over complex forms)
+
+### Cards
+
+**Shadow Card**
+- Background: `#ffffff`
+- Radius: 8px
+- Padding: 16px 24px
+- Shadow: `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`
+- Use: Standard card; ring shadow acts as shadow-border
+
+**Large Container**
+- Background: `#ffffff`
+- Radius: 12px
+- Padding: 24px
+- Use: Larger containers
+
+**Prominent Section**
+- Background: `#ffffff`
+- Radius: 16px
+- Padding: 32px
+- Use: Prominent feature sections
+
+### Badges
+
+**Pill Badge**
+- Background: `#242424`
+- Text: `#ffffff`
+- Radius: 9999px
+- Padding: 4px 10px
+- Font: 12px / 600 / Cal Sans
+- Use: Pill-shaped badges and tags
+
+**Default**
+- Background: `#f5f5f5`
+- Text: `#242424`
+- Radius: 8px
+- Padding: 4px 8px
+- Font: 12px / 600 / Cal Sans
+- Use: Inferred from §1-§2 baseline (no explicit DS variant in source).
 
 ### Navigation
 - **Top nav**: White/transparent background, Cal Sans links at near-black
@@ -257,3 +338,78 @@ When refining existing screens generated with this design system:
 3. Ensure card elevation uses the multi-layered shadow stack, not CSS borders
 4. Confirm section spacing is generous (80px+) — if sections feel cramped, add more space
 5. The overall tone should feel like a clean, professional scheduling tool — monochrome confidence without any decorative flourishes
+
+## 10. Voice & Tone
+
+Cal.com's voice is **engineer-direct and developer-warm.** Marketing copy reads like documentation that happens to be on a marketing page — capability statements, no hype. Open-source-first positioning shapes the register: "the open source Calendly alternative" is the original tagline, and the voice still carries that "we built this because the proprietary one was bad" engineer credibility.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb-first. "Get started", "Book a demo", "Sign in with Google" |
+| Empty (no bookings) | Quiet. "Your bookings will appear here." |
+| Error | Specific + actionable. "Calendar permissions revoked. Reconnect Google Calendar." |
+| Documentation | Imperative, code-block heavy |
+| Marketing | Capability-list, monochrome typography |
+
+**Voice samples**
+- Marketing CTA: *"Get started"* <!-- verified: cal.com homepage 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary scheduling", "the future of calendars", emoji in chrome.
+
+## 11. Brand Narrative
+
+Cal.com was founded **January 1, 2021** (initially as **Calendso**) by **Peer Richelsen** and **Bailey Pumfleet** — the latter only **18 years old at founding** ([GetLatka — 18-year-old raises $32M](https://blog.getlatka.com/18-year-old-raises-32m-to-build-opensource-version-of-calendly/), [Cal.com History](https://businessmodelcanvastemplate.com/blogs/brief-history/cal-com-brief-history)) — as the open-source alternative to Calendly. First version launched **April 30, 2021**, rose from **#1 Product of the Day → Week → Month on Product Hunt** ([Product Hunt Stories](https://www.producthunt.com/stories/how-this-open-source-calendly-alternative-rocketed-to-product-of-the-day)). The founding observation: scheduling tools had become essential infrastructure but the dominant player was closed-source. **AGPL-licensed + hosted SaaS.** Funding: **Seed $7.4M** (OSS Capital lead + Chad Hurley/YouTube co-founder + angels), **Series A $25M (May 2022)** (Seven Seven Six lead + Obvious Ventures), **$32M total** ([Startup Intros](https://startupintros.com/orgs/cal-com)). Cal.ai + Cal.et AI-driven scheduling shipped post-Series A.
+
+What Cal.com refuses: lock-in pricing, opaque feature gating, lifestyle marketing imagery.
+
+## 12. Principles
+
+1. **Open by default.** Source, roadmap, pricing — all public. *UI implication:* "View source" / "Roadmap" links in footer.
+2. **Calendar over UI.** *UI implication:* booking page = mostly calendar widget, minimal nav.
+3. **Embed-first thinking.** *UI implication:* design tokens are CSS variables (overridable by host).
+4. **Monochrome confidence.** No accent color at all. *UI implication:* don't introduce a brand accent; calendar widget provides the only color.
+5. **Section spacing is the visual rhythm.** *UI implication:* never cramp; whitespace is the design.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Cal.com user segments (developers, sales teams, contractors), not individual people.*
+
+**Henrik Sondergaard, 36, Copenhagen.** Engineering manager. Self-hosts Cal.com on team's infra.
+
+**Priya Krishnan, 29, Bengaluru.** Independent consultant. Hosted plan, 4 meeting types.
+
+**Marco Bianchi, 44, Milan.** Sales lead. Embeds Cal.com booking widgets in proposal docs. Cares about Salesforce integration.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no bookings)** | "Your bookings will appear here." Single line, centered, no illustration |
+| **Empty (no event types)** | CTA "Create your first event type" + 3 starter templates |
+| **Loading (calendar fetching)** | Skeleton calendar grid `#f5f5f5` blocks |
+| **Loading (booking submitting)** | CTA inline spinner, button label "Booking..." |
+| **Error (no available times)** | "No available times in next 30 days." |
+| **Error (timezone)** | Banner top of page. "Times shown in your timezone (Asia/Seoul)" |
+| **Success (booked)** | Full-page confirmation with calendar invite preview |
+| **Success (rescheduled)** | Same pattern, copy adjusts |
+| **Skeleton** | Vertical rows of `#f5f5f5` rectangles, exact dimensions |
+| **Disabled (slot)** | 0.3 opacity, cursor-not-allowed, tooltip "Already booked" |
+| **Loading (calendar sync)** | Inline chip in nav header |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Slot select |
+| `motion-fast` | 150ms | Hover |
+| `motion-standard` | 250ms | Modal, panel |
+
+Standard cubic-bezier; no bounce. `prefers-reduced-motion: reduce` removes calendar grid fade-in.
+
+---
+
+**Verified:** 2026-05-08 (B1 loop)
+**Tier 1 sources:** cal.com (live DOM via playwright — Black `#000000` Primary 12px / 8×16 / 39px / 13.92px·500; Cream `#f3f2ed` Secondary)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** cal.com homepage; founders Peer Richelsen, Bailey Pumfleet; GitHub roadmap.
+**Style ref:** `stripe`. **Conflicts unresolved:** none.

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

@@ -338,7 +338,9 @@ Anthropic speaks the way a thoughtful colleague does — informed, careful, and
 
 ## 11. Brand Narrative
 
-Anthropic was founded in 2021 by researchers who left OpenAI when the urgency of AI safety outpaced the field's willingness to prioritize it. The founding rejection was twofold: against the tech industry's default optimism that treats powerful systems as obvious goods, and against the cinematic AI aesthetic — Terminator reds, cyberpunk neons, sterile clinical whites — that equates "powerful" with "cold" or "threatening".
+Anthropic was founded in **January 2021** in San Francisco by **Dario Amodei** (CEO, former VP of Research at OpenAI) and **Daniela Amodei** (President, former VP of Safety and Policy at OpenAI) — siblings — joined by **seven other OpenAI alumni** including **Tom Brown** (lead author of the GPT-3 paper), **Sam McCandlish** (Chief Architect), **Jared Kaplan** (Chief Science Officer), **Jack Clark** (former OpenAI Policy Director), **Christopher Olah** (Interpretability Research Lead), **Benjamin Mann** (Head of Anthropic Labs), and others ([Anthropic — Wikipedia](https://en.wikipedia.org/wiki/Anthropic), [Dario Amodei — Wikipedia](https://en.wikipedia.org/wiki/Dario_Amodei), [TIME 100 AI 2023](https://time.com/collections/time100-ai/6309047/daniela-and-dario-amodei/)). The founding split from OpenAI was driven by safety concerns. Per Dario Amodei (per [Big Technology profile](https://kantrowitz.medium.com/the-making-of-anthropic-ceo-dario-amodei-449777529dd6)): *"something in addition to just scaling the models up, which is alignment or safety"* was required. The signature technique — **Constitutional AI** — trains the LLM to adhere to a set of explicit principles (the "constitution"), separating *"whether an AI can do something from the more politically fraught question of whether it should."* Claude product line: Claude 1 (March 2023) → Claude 2 → Claude 3 (March 2024) → Claude 3.5 Sonnet → Claude 4 family (2025) → Claude 4.7 currently. **Valuation ~$380B as of February 2026** ([Wikipedia: Anthropic](https://en.wikipedia.org/wiki/Anthropic)).
+
+The founding rejection was twofold: against the tech industry's default optimism that treats powerful systems as obvious goods, and against the cinematic AI aesthetic — Terminator reds, cyberpunk neons, sterile clinical whites — that equates "powerful" with "cold" or "threatening". The founding rejection was twofold: against the tech industry's default optimism that treats powerful systems as obvious goods, and against the cinematic AI aesthetic — Terminator reds, cyberpunk neons, sterile clinical whites — that equates "powerful" with "cold" or "threatening".
 
 The warm visual language — parchment (`#f5f4ed`), terracotta (`#c96442`), olive grays, serif headlines — is a deliberate counter to that vocabulary. AI should feel like a trustworthy colleague, not a tool to be afraid of. Constitutional AI, the company's signature technique, treats alignment as engineering rather than philosophy; the brand extends that precision into every design decision.
 
@@ -453,3 +455,11 @@ to the cyberpunk AI aesthetic") are editorial readings of the design system,
 not documented Anthropic statements.
 -->
 
+---
+
+**Verified:** 2026-05-08 (B11 loop)
+**Tier 1 sources:** anthropic.com (live DOM via playwright — Skip-to-content `#faf9f5` 0/0/8/8 / 12px / 49px / 18px·600; Try Claude `#faf9f5` 8/0/0/8 ghost; warm cream canvas confirmed; Read the story 24px hover area)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** existing §10-15 retained; anthropic.com About; Claude Constitution; Anthropic publications.
+**Style ref:** `claude` (self). **Conflicts unresolved:** none.
+

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

@@ -302,3 +302,78 @@ What makes Clay truly distinctive is its hover micro-animations: buttons on hove
 5. Hover animations are the signature — rotation + hard shadow, not subtle fades
 6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
 7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles
+
+## 10. Voice & Tone
+
+Clay's voice is **playfully irreverent + sales-team-fluent.** Marketing mixes GTM jargon ("outbound-sourced pipeline", "CRM enrichment") with disarming humor and motion (cards rotate on hover). The combination: "we know GTM is dry, we made the tool fun."
+
+| Context | Tone |
+|---|---|
+| CTA | Direct verb. "Get started", "Book a demo", "Start building for free" |
+| Marketing | Customer-quote-driven. "How Clay uses Clay" |
+| Error | Specific. "LinkedIn rate limit hit. Resume in 4 hours or upgrade plan." |
+| Documentation | Recipe-style, copy-paste examples |
+
+**Voice samples**
+- *"Start building for free"* <!-- verified: clay.com homepage 2026-05 -->
+- *"How Clay uses Clay"* <!-- verified: clay.com case studies -->
+
+**Forbidden phrases.** "AI-powered" without explanation. "10× your outbound" superlative. Aggressive sales pressure.
+
+## 11. Brand Narrative
+
+Clay was founded in **2017** by **Kareem Amin** (CEO) in New York ([Sequoia — Partnering with Clay](https://sequoiacap.com/article/partnering-with-clay-on-a-mission-to-grow/), [Kareem Amin LinkedIn](https://www.linkedin.com/in/kareemamin)). **Varun Anand** joined as **co-founder + Head of Operations in 2021** ([Inside Clay's unconventional path to $1.25B — First Round Review podcast](https://review.firstround.com/podcast/inside-clays-unconventional-path-to-1-25b/)). Pivot from no-code-platform to **GTM-data-platform** around 2021 when sales/RevOps teams emerged as the actual customers — "Spreadsheet for outbound" → GTM-specific Airtable. Now: **10,000+ customers**, **150+ integrated data sources**. Funding: **Series B expansion $40M at $1.25B valuation**, then **Series C $100M led by CapitalG** (Alphabet's independent growth fund) on 2025-08-05 ([BusinessWire](https://www.businesswire.com/news/home/20250805719448/en/AI-GTM-Leader-Clay-Raises-$100M-Series-C-to-Fuel-GTM-Engineering-Roles-Industrywide)). Clay coined the **"GTM Engineering"** role category — published for it as a signature marketing position.
+
+## 12. Principles
+
+1. **Cells are the unit.** *UI implication:* table-first canvas, no tabs above data plane.
+2. **Recipe-style, not magic.** Workflows show every step + provider. *UI implication:* every step editable, never opaque.
+3. **Hover is the play.** Cards rotate, shadows pop. *UI implication:* generous hover transitions on cards (rotate ~3deg + hard shadow `4px 4px 0 #000`).
+4. **Customer voice over marketing voice.** *UI implication:* case studies first-class nav.
+5. **Three weights, strict roles.** *UI implication:* never introduce 700 or 300.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Clay user segments (RevOps, BDR managers, founders), not individual people.*
+
+**Yusuf Khan, 32, NYC.** RevOps lead at B2B SaaS. 15 nightly enrichment workflows.
+
+**Sarah Yoon, 27, San Francisco.** Founding BDR at Series A startup. Clay for list building + AI personalization.
+
+**Olivia Bennett, 45, London.** Agency founder running outbound for 12 clients. Workflow templates across clients.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no workflows)** | Centered illustration + "Create your first workflow" CTA |
+| **Empty (no data in table)** | Inline "+ Add a column" / "+ Add a row" with playful arrows |
+| **Loading (enrichment)** | Per-cell spinner with elapsed time, cancellable |
+| **Loading (workflow run)** | Top-bar progress with step count |
+| **Error (provider failed)** | Cell shows red `#ef4444` border + tooltip with provider name |
+| **Error (rate limit)** | Banner with countdown to next-allowed time + upgrade CTA |
+| **Success (enrichment)** | Subtle green border pulse on cells, no toast |
+| **Success (workflow ran)** | Notification chip top-right, dismissible |
+| **Skeleton (table loading)** | Rotating skeleton cards (signature motion) |
+| **Disabled (preview-only)** | 0.6 opacity + lock icon overlay |
+| **Loading (AI generation)** | Per-row "AI is writing..." with cancel link |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Cell commit |
+| `motion-fast` | 200ms | Hover (slower for rotation effect) |
+| `motion-rotate` | 300ms | Card rotation on hover |
+| `motion-shadow-snap` | 100ms | Hard shadow pop-in |
+| `motion-standard` | 300ms | Modal, panel |
+
+Easings: `ease-rotate cubic-bezier(0.4, 0, 0.2, 1)`, slight overshoot. **Hover rotation is the signature** — never disable except under `prefers-reduced-motion: reduce`.
+
+---
+
+**Verified:** 2026-05-08 (B1 loop)
+**Tier 1 sources:** clay.com (live DOM via playwright — Black `#000000` Primary 12px / 8×16 / 42px / 16px·500; content cards 16px radius)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** clay.com homepage; founder LinkedIn / podcast appearances.
+**Style ref:** `stripe`. **Conflicts unresolved:** none.

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

@@ -279,3 +279,77 @@ What makes ClickHouse distinctive is the electrifying tension between the near-b
 4. Active states use Pale Yellow (#f4f692) — not just opacity changes
 5. All links hover to Neon Volt — consistent interactive feedback
 6. Charcoal borders (rgba(65,65,65,0.8)) are the primary depth mechanism
+
+## 10. Voice & Tone
+
+ClickHouse's voice is **benchmark-driven and engineer-pragmatic.** Marketing emphasizes raw performance numbers ("100x faster", "petabyte-scale") and open-source heritage. Closer to research paper than marketing — measured claims with citations.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Sign up", "Get a demo", "Start building" |
+| Marketing | Numeric. Always lead with benchmark |
+| Documentation | SQL-first, code-heavy, terse |
+| Error (query) | SQL error + line number, never wrapped friendly |
+| Onboarding | Choose: managed cloud / self-host / try in browser |
+
+**Voice samples**
+- *"Sign up"* / *"Get a demo"* <!-- verified: clickhouse.com homepage 2026-05 -->
+
+**Forbidden phrases.** Adjectival superlatives without numbers. "Magic" / "AI-powered" framing.
+
+## 11. Brand Narrative
+
+ClickHouse was originally developed at **Yandex** (Russia's largest tech company) starting in **2009** as an experimental real-time analytics project, with first production deployment in **2012** ([ClickHouse — Wikipedia](https://en.wikipedia.org/wiki/ClickHouse), [Introducing ClickHouse Inc. (2021 blog)](https://clickhouse.com/blog/introducing-click-house-inc)). Used internally for **Yandex.Metrica** (web analytics). **Open-sourced under Apache 2.0 in 2016** — adoption by Uber, Cloudflare, eBay quickly followed. **ClickHouse, Inc. incorporated September 2021** by **Aaron Katz (CEO)** and **Yury Izrailevsky** (co-founder). Funding: **Series A ~$50M (Sept 2021)** led by Index Ventures + Benchmark, with Yandex N.V. participating ([BusinessWire](https://www.businesswire.com/news/home/20210920005219/en/ClickHouse-Inc.-Announces-Incorporation-Along-With-%2450M-In-Series-A-Funding)); **Series B $250M @ $2B (Oct 28, 2021)** led by Coatue + Altimeter; **Series C $350M @ $6.35B (May 2025)** led by Khosla Ventures + BOND + IVP + Battery + Bessemer; **total raised >$650M** ([Forkable](https://www.forkable.io/p/open-source-database-company-clickhouse), [Index Ventures retrospective](https://www.indexventures.com/perspectives/the-fast-and-the-furious-how-clickhouse-the-worlds-fastest-open-source-database-is-creating-the-first-real-time-data-warehouse/)). Brand voice carries original Yandex engineering culture — performance-first, benchmark-cited, SQL-purist.
+
+## 12. Principles
+
+1. **Performance is the headline.** *UI implication:* hero modules contain a metric, not a tagline.
+2. **SQL is sacred.** *UI implication:* query interfaces accept standard SQL; extensions clearly labeled.
+3. **Open source is the default.** *UI implication:* "Self-host" and "Cloud" entry points equal prominence.
+4. **Charcoal borders, not shadows.** *UI implication:* never shadow on dark theme cards.
+5. **Pale yellow is the active state.** *UI implication:* selected = explicit yellow, not opacity.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by ClickHouse user segments (data engineers, observability builders, analytics leads), not individual people.*
+
+**Sergey Volkov, 38, Berlin.** Senior data engineer at ad-tech. Self-hosted on K8s for 50PB+.
+
+**Aisha Patel, 31, San Francisco.** Founding engineer at observability startup using ClickHouse Cloud.
+
+**Rui Chen, 45, Singapore.** Data platform lead at regional bank. Evaluating vs Snowflake.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no databases)** | "Create your first database" with SQL CREATE snippet |
+| **Empty (query result)** | "0 rows returned in 12ms" — query-stat focused |
+| **Loading (query)** | Inline spinner + estimated rows scanned |
+| **Loading (table scan)** | Progress bar with rows/sec + bytes/sec |
+| **Error (SQL syntax)** | Inline below editor with line:column |
+| **Error (server)** | "Server error (200): table not found." |
+| **Success (query)** | Result table appears, query stats line |
+| **Success (cluster created)** | Connection string visible, copy-button |
+| **Skeleton (cluster list)** | Charcoal-border placeholder rows |
+| **Disabled (read-only role)** | 0.5 opacity + lock icon |
+| **Loading (long query)** | Pause/cancel after 5s; partial results stream |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Result row select |
+| `motion-fast` | 150ms | Hover, link to Neon Volt |
+| `motion-standard` | 250ms | Modal |
+| `motion-active-pulse` | 300ms | Pale yellow active appearance |
+
+Standard cubic-bezier; no bounce. Charcoal borders never animate. `prefers-reduced-motion: reduce` makes link hover instant.
+
+---
+
+**Verified:** 2026-05-08 (B1 loop)
+**Tier 1 sources:** clickhouse.com (live DOM via playwright — dark `#141414` ghost; cookie banner `#166534` Allow / `#141414` Dismiss; nav 8px / 14px·500)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** clickhouse.com homepage benchmarks; ClickHouse, Inc. corporate history; Aaron Katz public talks.
+**Style ref:** `stripe`. **Conflicts unresolved:** none.

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

@@ -264,3 +264,78 @@ Color is used with extreme restraint — the interface is almost entirely black-
 4. Interactive elements use Interaction Blue (#1863dc) on hover only
 5. Keep surfaces white with cool gray borders — no warm tones
 6. Purple is for full-width sections, never card backgrounds
+
+## 10. Voice & Tone
+
+Cohere's voice is **enterprise-AI-careful** — formal but readable, security-aware, never breathless. Public messaging emphasizes "private, secure, customized" enterprise positioning over consumer-AI hype. Korean tagline ("개인, 보안, 맞춤형") tracks the same triple.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb-noun. "Request demo", "Talk to sales", "Start free" |
+| Marketing | Enterprise-language. "Private, secure, customized" recurring triplet |
+| Onboarding | Documentation-first; quickstart with API keys |
+| Error | Formal. "Request denied: insufficient quota. Contact sales." |
+| Compliance | Heavy SOC 2 / ISO references; trust pages prominent |
+
+**Voice samples**
+- *"엔터프라이즈 AI: 개인, 보안, 맞춤형"* <!-- verified: cohere.com/ko 2026-05 -->
+- *"데모 요청"* / *"Request a demo"* <!-- verified: cohere.com -->
+
+**Forbidden phrases.** "AGI", "superintelligence". Generic "AI revolution" framing. Casual emoji.
+
+## 11. Brand Narrative
+
+Cohere was founded in **2019** in **Toronto, Canada** by **Aidan Gomez** (CEO), **Nick Frosst**, and **Ivan Zhang** ([Aidan Gomez — Wikipedia](https://en.wikipedia.org/wiki/Aidan_Gomez), [Cohere About](https://cohere.com/about)). **Aidan Gomez was 20 years old when he co-authored "Attention Is All You Need"** in 2017 as a Google Brain intern — the foundational Transformer architecture paper that every modern LLM descends from. Nick Frosst worked at **Google Brain Toronto** with **Geoffrey Hinton** (the "Godfather of AI", who later joined Cohere as advisor) ([Globe and Mail](https://www.theglobeandmail.com/business/article-toronto-ai-star-cohere-lands-tiger-led-125-million-venture-funding/)). The **first cheque came from Radical Ventures** (Toronto AI VC) ([U Toronto Centre for Entrepreneurship](https://www.entrepreneurship.artsci.utoronto.ca/news/how-cohere-ai-startup-co-founded-alumni-landed-170m-funding-year)). Cohere has raised **~US$1.6B at >$7B valuation** as of Sept 2025 ([Tracxn](https://tracxn.com/d/companies/cohere/__o4xfwmr3XwgsGEyH41XvwBm6Xd-SjsMlSld3d4ci6G0)) — Tiger Global led an earlier $125M round. Founding observation: enterprises needed customizable LLMs that respected data privacy. RAG-first, private deployment, on-prem available. **North** is Cohere's enterprise AI agent product.
+
+## 12. Principles
+
+1. **Privacy is the product, not a footnote.** *UI implication:* privacy guarantees first-class on landing pages.
+2. **RAG-first architecture.** *UI implication:* surfaces emphasize "your data + our models".
+3. **Enterprise doesn't mean stuffy.** *UI implication:* trust pages explain SOC 2 in plain English.
+4. **Interaction Blue on hover only.** *UI implication:* don't use brand blue for static CTAs.
+5. **Purple bands for sections, never cards.** *UI implication:* never apply purple to cards/buttons.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by Cohere user segments (enterprise platform engineers, AI/ML platform leads, regulated-industry compliance), not individual people.*
+
+**Catherine Liu, 42, Toronto.** Director of AI/ML at a Canadian bank. Cohere is the only LLM vendor approved by their CISO.
+
+**Hiroshi Tanaka, 36, Tokyo.** Senior platform engineer at multinational logistics. Integrates Cohere Embed for 30+ language search.
+
+**David Mensah, 50, Johannesburg.** Head of risk at insurance carrier. On-prem deployment required.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no API keys)** | "Generate your first API key" CTA + quickstart code |
+| **Empty (no datasets)** | "Connect a data source" with provider grid |
+| **Loading (model inference)** | Per-token streaming visible; never just spinner |
+| **Loading (RAG retrieval)** | Two-phase: "Retrieving (12 docs)" → "Generating" |
+| **Error (rate limit)** | "Tier-1 limit reached (60 req/min). Upgrade or wait." |
+| **Error (auth)** | "API key expired. Generate a new key in Settings → API Keys." |
+| **Success (deployment)** | Endpoint URL + credentials, security reminder |
+| **Success (fine-tuned)** | Email + dashboard notification with eval metrics |
+| **Skeleton (deployments)** | White rows with cool-gray border skeletons |
+| **Disabled (no quota)** | 0.5 opacity + tooltip "Upgrade to enable" |
+| **Loading (long fine-tune)** | Persistent progress with ETA |
+
+## 15. Motion & Easing
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle |
+| `motion-fast` | 150ms | Hover (Interaction Blue color shift) |
+| `motion-standard` | 250ms | Modal, panel |
+| `motion-streaming` | continuous | Token-by-token model output |
+
+Standard cubic-bezier. **No bouncy springs** — enterprise register. `prefers-reduced-motion: reduce` removes hover transitions and panel slide-ins.
+
+---
+
+**Verified:** 2026-05-08 (B1 loop)
+**Tier 1 sources:** cohere.com/ko (live DOM via playwright — Dark `#17171c` Primary 9999px / 12×16-24 / 44-49px / 16px·400)
+**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
+**Tier 1 (Philosophy):** cohere.com homepage; founder bios; Trust + Security pages.
+**Style ref:** `stripe`. **Conflicts unresolved:** none.