zugzbot 1.0.21 → 1.0.23

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

@@ -1,67 +0,0 @@
-# Sendbird — Verification Notes (2026-06-01)
-
-Pipeline: spec/verification-pipeline.md · CREATE pilot (first ref through the proof-gated pipeline, audit Finding 3/4).
-
-## Proof — Tier 1 live inspect
-
-**Inspected:** 2026-06-01
-**Method:** playwright `page.evaluate(getComputedStyle)` on sendbird.com + official UIKit source/docs
-**Sources:**
-- https://sendbird.com/ — marketing nav, hero, footer, CTAs, input (live DOM)
-- https://sendbird.com/docs/chat/uikit/v3/android-view/customizations/resource-customization/color-resources — official token palette
-- https://github.com/sendbird/sendbird-uikit-react — official UIKit SCSS (Button, Input, MessageContent)
-
-### Raw samples (live DOM — sendbird.com)
-- `body` · bg `rgb(255, 255, 255)` · text `rgb(66, 66, 66)` = #424242 · font "Helvetica Now Text" 18px
-- nav link "Pricing" · color `rgb(14, 16, 23)` = #0E1017 · 16px / 500 · "Helvetica Now Text Medium" · padding 10px 8px · transparent bg
-- `h1` "The AI customer experience platform" · serif display face · 72px / 500 · color `rgb(13, 13, 13)` = #0D0D0D
-- footer · bg `rgb(242, 243, 247)` = #F2F3F7
-- utility chip button · bg `rgb(242, 243, 247)` = #F2F3F7 · text `rgb(13, 13, 13)` · border 1px solid `rgb(227, 229, 239)` = #E3E5EF · radius 8px · height 50px · 18px / 400
-- dark pill CTA · bg `rgb(13, 13, 13)` = #0D0D0D · text `rgb(255, 255, 255)` · border 1px solid #0D0D0D · radius 24px · height 42px · 13px / 600
-- outline pill CTA · bg `rgb(255, 255, 255)` · text `rgb(13, 13, 13)` · border 1px solid #0D0D0D · radius 24px · height 42px · 13px / 600
-- newsletter input · bg `rgb(255, 255, 255)` · text `rgb(66, 66, 66)` · border 1px solid `rgb(209, 209, 209)` = #D1D1D1 · radius 50px (pill) · padding 6px 35px · 12.8px
-
-### Raw samples (official UIKit — token palette, Android colors.xml)
-- primary_300 `#742ddd` (main), primary_400 `#6211c8` (hover), primary_500 `#491389` (active), primary_200 `#c2a9fa`, primary_100 `#dbd1ff`
-- secondary_300 `#259c72`, secondary_400 `#027d69`, secondary_500 `#066858`, secondary_200 `#69c085`, secondary_100 `#a8e2ab`
-- error_300 `#de360b`, error_400 `#bf0711`, error_500 `#9d091e`, error_200 `#f66161`, error_100 `#fdaaaa`
-- background_50 `#ffffff` → background_100 `#eeeeee` → 200 `#e0e0e0` → 300 `#bdbdbd` → 400 `#393939` → 500 `#2c2c2c` → 600 `#161616` → 700 `#000000`
-- information `#adc9ff`; onlight 87/50/38/12% black; ondark 87/50/38/12% white; overlay 55% / 32% black
-
-### Raw samples (official UIKit — component SCSS)
-- Button base · border-radius 4px · font var(--sendbird-font-family-default)
-- Button Big · height 40px · text margin 10px 16px
-- Button Small · height 32px · text margin 6px 16px
-- Button Primary · bg primary-3 `#742ddd` · hover primary-4 `#6211c8` · active primary-5 `#491389`
-- Button Danger · bg error-3 `#de360b` · hover error-4 `#bf0711` · active error-5 `#9d091e`
-- Button Disabled · bg background-2 `#e0e0e0`
-- Input `.sendbird-input_for_form` · border 1px solid on-bg-4 (12% black) · radius 4px · padding 7px 12px · font 14px
-- Input focus · border 1px solid primary-3 `#742ddd` + box-shadow 0 0 0 1px `#742ddd`
-- Input error · border 1px solid error-3 `#de360b`
-- MessageContent · max-width 400px · mobile calc(100vw - 140px) · avatar 40px min-width
-
-## Tier 2 — cross-check (attempted, both empty)
-
-- `getdesign.md/sendbird` (WebFetch) → "No designs found for 'sendbird'." NOT LISTED.
-- `styles.refero.design/?q=sendbird` (playwright) → query param does not server-filter; page returns the default curated taste-set (Tinybird, Signal Messenger, MotherDuck, Dia Browser…); Sendbird absent. NOT LISTED.
-- Per pipeline, KR brand + Western Tier-2 absent → Tier 1 (official UIKit docs + source + live inspect) is authoritative. This is the exact case `spec/regional-sources.yaml` exists for.
-
-## Conflict matrix
-
-| Field | Tier 1 (official) | getdesign | refero | Resolution |
-|-------|-------------------|-----------|--------|------------|
-| primary color | `#742DDD` (Android colors.xml) | — | — | Tier 1 official source. Earlier web-search "green #259c72" was the **secondary** palette; rejected. |
-| button radius | 4px (Button index.scss) | — | — | Tier 1 official source |
-| message bubble max-width | 400px (MessageContent index.scss) | — | — | Tier 1 official source |
-| marketing CTA radius | 24px / 50px pill (live DOM) | — | — | Tier 1 live inspect |
-
-## Country classification + sources
-
-**country: US** — Sendbird Inc. is headquartered in San Mateo, CA (Korean-founded: originally 스마일패밀리/Smile Family). Per project rule, country follows the **parent company's HQ**, so it is classified US, not KR. The KR/TW ≥2-regional-source policy therefore does **not** apply.
-
-Tier-1 sources cited (≥1 required; 3 provided, all brand-owned):
-1. sendbird.com (brand site, live DOM inspect)
-2. sendbird.com/docs/chat/uikit (official DS docs)
-3. github.com/sendbird (official GitHub org — UIKit source)
-
-None are Western Tier-2 catalogs. Proof gate satisfied via the `## Proof` block above.

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

@@ -1,331 +0,0 @@
----
-id: "sendbird"
-name: "Sendbird"
-country: US
-category: developer-tools
-homepage: "https://sendbird.com"
-primary_color: "#742DDD"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=sendbird.com&sz=128"
-verified: "2026-06-01"
-omd: "0.1"
-ds:
-  name: Sendbird UIKit
-  url: "https://sendbird.com/docs/chat/uikit/v3/react/overview"
-  type: system
-  description: Sendbird's official chat UIKit — a documented, token-driven conversation-UI system (React, iOS, Android, React Native) with named color sets, message components, and themeable light/dark resources.
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#742DDD"
-    primary-hover: "#6211C8"
-    primary-active: "#491389"
-    brand: "#742DDD"
-    canvas: "#FFFFFF"
-    foreground: "#0D0D0D"
-    body: "#424242"
-    muted: "#EEEEEE"
-    on-primary: "#FFFFFF"
-    success: "#259C72"
-    error: "#DE360B"
-    info: "#ADC9FF"
-    surface: "#F2F3F7"
-    hairline: "#E3E5EF"
-    border-light: "#D1D1D1"
-    ink-dark: "#0D0D0D"
-  typography:
-    family: { sans: "Helvetica Now Text", mono: "system-ui" }
-    display-serif: { size: 72, weight: 500, use: "Marketing hero headline (serif)" }
-    body-lg:    { size: 18, weight: 400, use: "Marketing body text" }
-    nav:        { size: 16, weight: 500, use: "Marketing nav links" }
-    body:       { size: 14, weight: 400, use: "UIKit message text and labels" }
-    label:      { size: 14, weight: 600, use: "UIKit labels, button text" }
-    cta:        { size: 13, weight: 600, use: "Marketing pill CTA text" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32 }
-  rounded: { sm: 4, md: 8, lg: 24, full: 9999 }
-  shadow:
-    focus-ring: "0 0 0 1px #742DDD"
-    scrim: "rgba(0,0,0,0.55)"
-  components_harvested: true
-  components:
-    button-primary: { type: button, bg: "#742DDD", fg: "#FFFFFF", radius: "4px", height: "40px", padding: "10px 16px", font: "14px / 600", hover: "#6211C8", active: "#491389", use: "UIKit primary action (send, confirm)" }
-    button-secondary: { type: button, bg: "transparent", fg: "#742DDD", border: "1px solid #742DDD", radius: "4px", active: "rgba(0,0,0,0.04)", use: "UIKit ghost alternative beside primary" }
-    button-danger: { type: button, bg: "#DE360B", fg: "#FFFFFF", radius: "4px", hover: "#BF0711", active: "#9D091E", use: "UIKit destructive action" }
-    button-disabled: { type: button, bg: "#E0E0E0", fg: "rgba(0,0,0,0.38)", radius: "4px", disabled: "non-interactive", use: "UIKit blocked action" }
-    input: { type: input, bg: "#FFFFFF", fg: "rgba(0,0,0,0.87)", border: "1px solid rgba(0,0,0,0.12)", radius: "4px", padding: "7px 12px", font: "14px / 400", focus: "border #742DDD + 0 0 0 1px #742DDD", use: "UIKit text field" }
-    bubble-outgoing: { type: listItem, bg: "#742DDD", fg: "#FFFFFF", use: "Outgoing message bubble, right-aligned, max 400px" }
-    bubble-incoming: { type: listItem, bg: "#EEEEEE", fg: "rgba(0,0,0,0.87)", use: "Incoming message bubble, left-aligned, 40px avatar" }
-    cta-dark-pill: { type: button, bg: "#0D0D0D", fg: "#FFFFFF", border: "1px solid #0D0D0D", radius: "24px", height: "42px", padding: "12px 10px", font: "13px / 600", use: "Marketing highest-emphasis CTA" }
-    cta-outline-pill: { type: button, bg: "#FFFFFF", fg: "#0D0D0D", border: "1px solid #0D0D0D", radius: "24px", height: "42px", padding: "12px 10px", font: "13px / 600", use: "Marketing secondary CTA" }
-    chip: { type: badge, bg: "#F2F3F7", fg: "#0D0D0D", border: "1px solid #E3E5EF", radius: "8px", height: "50px", padding: "8px 12px", font: "18px / 400", use: "Marketing neutral selector / utility control" }
-    input-newsletter: { type: input, bg: "#FFFFFF", fg: "#424242", border: "1px solid #D1D1D1", radius: "50px", padding: "6px 35px", font: "12.8px / 400", use: "Marketing pill email capture" }
----
-# Design System Inspiration of Sendbird
-
-## 1. Visual Theme & Atmosphere
-
-Sendbird is a developer-infrastructure company that wears two faces, and the gap between them is the whole story. The **product** — the Sendbird UIKit that powers chat inside thousands of apps — is a disciplined, token-driven system built on a single confident **purple** (`#742DDD`, "Sendbird purple") sitting on an eight-step neutral grayscale, with green, red and blue reserved strictly for semantic meaning. It is functional software color: a 4px corner radius everywhere, flat fills, no gradients, a palette that survives being dropped into a customer's own app without fighting it. The **marketing site** (sendbird.com), by contrast, is a near-monochrome editorial surface — pure white grounds, an oversized **serif display face** running to 72px for headlines, body text set in Helvetica Now Text, and pill-shaped black-and-white CTAs with no brand color at all. One surface is engineered to disappear into a developer's product; the other is engineered to read like a printed enterprise brochure. The through-line is restraint: a brand that earns trust by looking calm, legible, and uncluttered, letting the single purple do its work only where it carries product meaning.
-
-## 2. Color Palette & Roles
-
-Sendbird's UIKit ships a fully named, five-step-per-family color set (the authoritative design-system source). The marketing site layers a separate near-grayscale identity on top.
-
-**Primary — Sendbird purple (brand + primary actions)**
-- primary-100: `#DBD1FF`
-- primary-200: `#C2A9FA`
-- primary-300: `#742DDD` (the main color — default fills, links, focus)
-- primary-400: `#6211C8` (hover)
-- primary-500: `#491389` (pressed/active)
-
-**Secondary — green (accents, success-adjacent)**
-- secondary-100: `#A8E2AB`
-- secondary-200: `#69C085`
-- secondary-300: `#259C72`
-- secondary-400: `#027D69`
-- secondary-500: `#066858`
-
-**Error — red (destructive, validation)**
-- error-100: `#FDAAAA`
-- error-200: `#F66161`
-- error-300: `#DE360B` (light-theme error border + danger fill)
-- error-400: `#BF0711`
-- error-500: `#9D091E`
-
-**Information — `#ADC9FF`** (informational highlights, link previews)
-
-**Background — neutral grayscale (surfaces, light → dark)**
-- background-50: `#FFFFFF`
-- background-100: `#EEEEEE` (incoming message bubble, subtle fills)
-- background-200: `#E0E0E0` (disabled fills)
-- background-300: `#BDBDBD`
-- background-400: `#393939`
-- background-500: `#2C2C2C`
-- background-600: `#161616`
-- background-700: `#000000`
-
-**Text on light (alpha black)**
-- onlight-01: `#000000` @ 87% (primary text)
-- onlight-02: `#000000` @ 50% (secondary text)
-- onlight-03: `#000000` @ 38% (disabled text)
-- onlight-04: `#000000` @ 12% (dividers, default input border)
-
-**Text on dark (alpha white)** mirrors the above at 87 / 50 / 38 / 12% white. **Overlay:** `#000000` @ 55% (modal scrim), `#000000` @ 32% (lighter scrim).
-
-**Marketing surface (sendbird.com, live):** ground `#FFFFFF`, body text `#424242`, near-black display + CTA ink `#0D0D0D`, nav ink `#0E1017`, footer + chip fill `#F2F3F7`, hairline borders `#E3E5EF` and `#D1D1D1`. No purple appears in the marketing chrome — brand color is held back for the product.
-
-## 3. Typography Rules
-
-- **Product (UIKit):** the system font stack via `--sendbird-font-family-default` — platform-native sans (SF Pro / Roboto / system-ui) so embedded chat matches the host app. Message text and labels sit at 14px with a clear weight ladder (400 body, 500–600 labels).
-- **Marketing display:** a **serif** display face for headlines, observed at **72px / weight 500** on the hero (`#0D0D0D`). The serif is the single most distinctive type choice — it signals editorial confidence and separates Sendbird from the geometric-sans default of developer-tool marketing.
-- **Marketing body + nav:** **Helvetica Now Text** — body at 18px / 400 (`#424242`), nav links at 16px / 500 (`#0E1017`), small print near 13px / 600 on pill CTAs.
-- **Hierarchy:** large serif headline → Helvetica Now subhead/body → medium-weight nav and buttons. Tight, legible, generous line spacing; never more than two type families on one surface.
-
-## 4. Component Stylings
-
-> Two systems documented below: the **UIKit** (product, token-driven, purple) verified from the official component source, and the **marketing chrome** (sendbird.com) verified from live computed style. Each is the source of truth for its own surface.
-
-### UIKit Button
-
-**Primary — Big (default)**
-- Background: `#742DDD` (primary-300)
-- Text: `#FFFFFF`
-- Border: none
-- Radius: 4px
-- Padding: 10px 16px
-- Height: 40px
-- Font: 14px / 600 / system default
-- Hover: background `#6211C8` (primary-400)
-- Pressed: background `#491389` (primary-500)
-- Use: the single most prominent action in a UIKit surface (send, confirm, create channel)
-
-**Primary — Small**
-- Background: `#742DDD`
-- Text: `#FFFFFF`
-- Radius: 4px
-- Padding: 6px 16px
-- Height: 32px
-- Use: inline and toolbar actions
-
-**Secondary (ghost)**
-- Background: transparent
-- Text: `#742DDD`
-- Border: 1px solid `#742DDD`
-- Radius: 4px
-- Pressed: background `#000000` @ 4% (onlight wash)
-- Use: lower-emphasis alternative beside a primary button
-
-**Danger**
-- Background: `#DE360B` (error-300)
-- Text: `#FFFFFF`
-- Radius: 4px
-- Hover: background `#BF0711` (error-400)
-- Pressed: background `#9D091E` (error-500)
-- Use: destructive actions (leave channel, delete message)
-
-**Disabled**
-- Background: `#E0E0E0` (background-200)
-- Text: `#000000` @ 38% (onlight-03)
-- Radius: 4px
-- Use: any blocked action; non-interactive
-
-### UIKit Input / TextField
-
-**Default**
-- Background: `#FFFFFF`
-- Text: `#000000` @ 87% (onlight-01)
-- Border: 1px solid `#000000` @ 12% (onlight-04)
-- Radius: 4px
-- Padding: 7px 12px
-- Font: 14px / 400
-
-**Focus**
-- Border: 1px solid `#742DDD` (primary-300)
-- Shadow: 0 0 0 1px `#742DDD`
-
-**Error**
-- Border: 1px solid `#DE360B` (error-300)
-
-### UIKit Message Bubble
-
-**Outgoing (mine)**
-- Background: `#742DDD` (primary-300)
-- Text: `#FFFFFF`
-- Max-width: 400px
-- Use: messages sent by the current user, right-aligned
-
-**Incoming (other)**
-- Background: `#EEEEEE` (background-100)
-- Text: `#000000` @ 87% (onlight-01)
-- Max-width: 400px
-- Avatar: 40px (min-width, left of bubble)
-- Use: messages from other participants, left-aligned
-
-### Marketing CTA — Dark pill (primary)
-
-**Default**
-- Background: `#0D0D0D`
-- Text: `#FFFFFF`
-- Border: 1px solid `#0D0D0D`
-- Radius: 24px
-- Padding: 12px 10px
-- Height: 42px
-- Font: 13px / 600 / Helvetica Now Text
-- Use: highest-emphasis marketing action
-
-### Marketing CTA — Outline pill (secondary)
-
-**Default**
-- Background: `#FFFFFF`
-- Text: `#0D0D0D`
-- Border: 1px solid `#0D0D0D`
-- Radius: 24px
-- Padding: 12px 10px
-- Height: 42px
-- Font: 13px / 600
-- Use: secondary marketing action paired with the dark pill
-
-### Marketing Utility chip
-
-**Default**
-- Background: `#F2F3F7`
-- Text: `#0D0D0D`
-- Border: 1px solid `#E3E5EF`
-- Radius: 8px
-- Padding: 8px 12px
-- Height: 50px
-- Font: 18px / 400 / Helvetica Now Text
-- Use: neutral selector / utility control on marketing surfaces
-
-### Marketing Input (newsletter)
-
-**Default**
-- Background: `#FFFFFF`
-- Text: `#424242`
-- Border: 1px solid `#D1D1D1`
-- Radius: 50px
-- Padding: 6px 35px
-- Font: 12.8px / 400
-- Use: pill-shaped email capture in footer/forms
-
-## 5. Layout Principles
-
-- **UIKit:** a vertical conversation column with a fixed channel header, a scrolling message list, and a docked composer. Message rows are avatar + bubble, bubbles capped at 400px so long text wraps rather than spanning wide screens. 4px is the universal corner unit; spacing is an 8px rhythm.
-- **Marketing:** generous single-column-of-attention sections on white, oversized serif headlines anchoring each block, wide margins, and image columns doing the visual work. No dense grids — the page breathes.
-- **Density:** product is information-dense but calm (chat needs scannability); marketing is deliberately sparse.
-
-## 6. Depth & Elevation
-
-Sendbird is overwhelmingly **flat**. The UIKit uses fills and 1px hairlines, not shadows, to separate surfaces — incoming bubble vs. ground is a fill contrast (`#EEEEEE` on `#FFFFFF`), not a drop shadow. Elevation appears only where it carries meaning: modals/menus float above a `#000000` @ 55% overlay scrim, and the input focus ring is a 1px purple halo rather than a glow. Marketing is similarly shadowless — depth comes from whitespace and scale, not z-axis tricks.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use purple `#742DDD` for exactly one primary action per surface; let neutrals carry everything else.
-- Keep the 4px radius on product controls and the pill (24px / 50px) radius on marketing chrome — don't mix the two languages.
-- Reserve green, red, and blue for semantic roles (success-adjacent, destructive/error, informational).
-- Pair the serif display headline with Helvetica Now body on marketing; never set body copy in the serif.
-
-### Don't
-- Introduce gradients, drop shadows, or a second brand hue — the system's calm depends on restraint.
-- Put brand purple into marketing chrome, or near-black pills into the product UI; the surfaces are intentionally distinct.
-- Combine multiple fields on one spec line; each token gets its own value.
-- Let message bubbles exceed the 400px cap or drop the 40px avatar gutter.
-
-## 8. Responsive Behavior
-
-- **UIKit:** the conversation column is fluid; bubble max-width collapses from 400px to `calc(100vw - 140px)` on narrow viewports, preserving the avatar gutter and right/left alignment. Channel list and conversation become a single stacked view on mobile.
-- **Marketing:** the serif hero scales down from 72px on large screens; multi-column sections reflow to a single column; pill CTAs stay full-radius and stack vertically.
-- Touch targets respect the 40px (Big) / 32px (Small) button heights as comfortable minimums.
-
-## 9. Agent Prompt Guide
-
-When generating a Sendbird-style interface, specify which surface you mean:
-- **"Sendbird UIKit style"** → token-driven chat UI: purple `#742DDD` primary, neutral grayscale, 4px radius, flat fills, 14px system-font text, message bubbles (outgoing purple / incoming `#EEEEEE`) capped at 400px with 40px avatars, semantic green/red/blue only.
-- **"Sendbird marketing style"** → near-monochrome editorial: white ground, 72px serif display headline, Helvetica Now Text body, black `#0D0D0D` and white pill CTAs (24px radius), `#F2F3F7` neutral chips, no brand color in chrome.
-- Default corner radius: **4px** (product) — state "pill" explicitly for marketing CTAs.
-- Keep it flat: 1px hairlines and fills, not shadows. One primary action per surface.
-
-## 10. Voice & Tone
-
-Sendbird speaks like **infrastructure that respects your time**: precise, technical without jargon-for-its-own-sake, confident but never loud. Product copy (UIKit labels, empty states) is plain and instructive — "No messages yet," "Send," "Leave channel." Marketing copy is declarative and enterprise-assured — "The AI customer experience platform" — short clauses, present tense, outcomes over features. The serif display face gives the words a measured, editorial gravity; the tone is a senior engineer who has already solved your problem and is calmly telling you how.
-
-## 11. Brand Narrative
-
-Founded in Korea (originally as a community for parents) and now powering in-app conversations for some of the world's largest apps, Sendbird's story is **invisible reliability at scale**. The brand's job is to be the messaging layer you never think about — which is why the product design system is built to disappear into the host app, and why the brand color is held back from marketing chrome. The single purple is a signature you only meet where it matters: the action that sends, the link that connects. Everything else — grayscale surfaces, flat fills, serif calm — communicates "we are the dependable substrate, not the spectacle."
-
-## 12. Principles
-
-1. **Color carries meaning, not decoration.** One purple for primary action; semantic green/red/blue; everything else neutral.
-2. **Flat by default.** Fills and hairlines over shadows; elevation only for true overlays.
-3. **The product disappears.** UIKit is themeable and system-font-based so it adopts the host app's identity.
-4. **Two surfaces, two languages.** Product = 4px functional; marketing = pill editorial. Never blur them.
-5. **Restraint reads as trust.** Whitespace, legibility, and a single accent over visual noise.
-
-## 13. Personas
-
-- **The app developer** embedding chat — wants tokens, theming, and components that drop in without fighting their design. Lives in the UIKit docs.
-- **The enterprise buyer** evaluating a CX/messaging platform — meets the serif marketing site, reads "reliable, secure, at scale," needs trust signals (certifications, G2).
-- **The end user** inside a customer's app — never sees "Sendbird," only a calm, legible conversation that feels native to the app they're using.
-
-## 14. States
-
-- **Default / Hover / Pressed:** buttons step purple-300 → purple-400 → purple-500 (danger steps error-300 → 400 → 500).
-- **Focus:** 1px purple `#742DDD` border + 1px purple box-shadow halo on inputs.
-- **Error:** input border switches to error-300 `#DE360B`; validation text in error color.
-- **Disabled:** background-200 `#E0E0E0` fill with onlight-03 (38% black) text; no interaction.
-- **Empty:** plain instructive copy ("No messages yet") centered in the conversation column, neutral text, no illustration noise.
-- **Loading:** lightweight skeleton/spinner in neutral grays; the composer stays docked.
-
-## 15. Motion & Easing
-
-Motion is **minimal and purposeful**. New messages slide/fade into the list at the bottom; the composer and channel transitions are quick (~150–200ms) ease-out movements that never block input. State changes (hover, focus, pressed) are near-instant color transitions, not animated flourishes. Overlays fade their scrim in over ~200ms. The marketing site favors restraint too — subtle reveal-on-scroll rather than parallax theatrics. The guiding rule mirrors the visual system: motion clarifies, it does not perform.
-
----
-**Verified:** 2026-06-01 (CREATE pilot — first ref through the proof-gated pipeline)
-**Tier 1 sources:** https://sendbird.com (live DOM via playwright getComputedStyle — marketing chrome: nav `#0E1017` 16px/500, serif h1 72px/500 `#0D0D0D`, dark pill `#0D0D0D` 24px radius, neutral chip `#F2F3F7`/`#E3E5EF` 8px, pill input 50px radius), https://sendbird.com/docs/chat/uikit/v3/android-view/customizations/resource-customization/color-resources (official UIKit color tokens — primary/secondary/error/background/onlight/ondark/overlay full palette), https://github.com/sendbird/sendbird-uikit-react (official UIKit source — Button index.scss 4px radius / Big 40px / Small 32px / variant fills, Input index.scss 7px·12px / focus + error borders, MessageContent index.scss 400px max-width / 40px avatar)
-**Tier 2 sources:** getdesign.md/sendbird — NOT LISTED ("No designs found"). styles.refero.design — NOT LISTED (curated taste-set; ?q= does not server-filter; B2B SDK absent). Tier 1 (official UIKit docs + source + live inspect) treated as authoritative per pipeline.
-**Conflicts unresolved:** none. Note: an earlier web search reported a green primary (#259c72) — that is the UIKit **secondary** palette; the Android `colors.xml` source confirms **primary = purple #742DDD**. Resolved in favor of the official source file.
-**Proof:** see `.verification.md` (`## Proof` block, ≥5 raw computed-style samples).
-**Surface split:** §4 documents two parallel systems — the UIKit product DS (purple, 4px, token-driven) and the sendbird.com marketing chrome (monochrome serif editorial, pill radius). Both retained as authoritative for their surface.

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

@@ -1,157 +0,0 @@
-# Sentry — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `sentry.io/welcome/` (corporate home — APM + Error Tracking)
-- `sentry.io/pricing/` (pricing — Free/Team/Business/Enterprise tiers)
-
-### Raw observations
-
-**START TRIAL — Pricing Primary (Sentry Deep Purple)**
-- bg `rgb(69, 38, 80)` = **`#452650`** (Sentry Deep Purple — the canonical brand purple, dark/saturated)
-- color `#ffffff`
-- radius **8px**
-- padding 12×16
-- 40px / 14px·**700 ALL CAPS**
-- Use: every Primary CTA on /pricing tiers
-
-**Top-level Nav — PLATFORM / SOLUTIONS / RESOURCES / DOCS / PRICING / SIGN IN**
-- bg transparent
-- color `#ffffff` (on dark hero)
-- radius 8px (hover-fills)
-- padding 12×16
-- 40px / **14px·500 ALL CAPS**
-- Use: top nav (uppercase canonical chrome)
-
-**GET STARTED / GET STARTED WITH SENTRY — Hero Primary (Eggplant Text Outline)**
-- bg transparent
-- color `rgb(31, 22, 51)` = **`#1f1633`** (Sentry Eggplant — even darker purple-near-black)
-- radius 8px
-- padding 12×16
-- 40px / 14px·**700 ALL CAPS**
-- Use: hero Primary (Outline-style, uses Eggplant text on light canvas)
-
-**Errors — Pricing Tab (Lavender Mist)**
-- bg `rgb(245, 243, 250)` = **`#f5f3fa`** (Sentry Lavender Mist — barely-tinted purple-cream)
-- color `#1f1633` Eggplant
-- radius **0px** (sharp tab)
-- padding 12×16
-- 43px / 16px·400
-- Use: pricing-page event-type tab
-
-**CHECK OUT OUR PRIVACY POLICY — Cookie Banner**
-- bg `rgb(246, 246, 248)` = `#f6f6f8` (Cool Gray)
-- color `rgb(54, 45, 89)` = **`#362d59`** (Sentry Mid-Purple — different from Deep Purple Primary)
-- radius 8px
-- padding 12×16
-- 40px / 14px·700
-- Use: GDPR cookie banner CTA
-
-**SIGN UP — Light Inverse**
-- bg `#ffffff`
-- color `#1f1633` Eggplant
-- radius 8px
-- padding 12×16
-- 40px / 14px·500
-- Use: white-on-purple hero variant
-
-### Single-system: 8px Pill + Multi-Purple palette + ALL CAPS 700
-
-Sentry uses a **multi-shade purple palette** with ALL CAPS 700-weight discipline:
-- **Sentry Deep Purple `#452650`** — Primary CTA fill (canonical, /pricing surfaces)
-- **Sentry Mid-Purple `#362d59`** — cookie/secondary surfaces (the §11-claimed `#6c5fc7` is an even-lighter variant in the brand palette but not the canonical Primary)
-- **Sentry Eggplant `#1f1633`** — body text + Outline CTA text (ultra-dark purple-near-black)
-- **Sentry Lavender Mist `#f5f3fa`** — subtle tab/card surface
-- All CTAs **8px** radius / 40px height / 14px·**700 ALL CAPS** (Primary) or 14px·500 (nav/Sign-up)
-- Pricing tabs are 0px sharp (different track)
-
-The **multi-shade purple palette** + **ALL CAPS 700** is unmistakably Sentry — confirms the §11 "errors are normal, debugging is craft" register.
-
-This corrects the prior footer's "nav `#fff` 8px ghost / 12×16 / 40px / 14px·500" + "Purple primary `#6c5fc7` is the signature accent" — accurate for nav (14px·500 ghost) but missed:
-1. **Canonical Primary `#452650` Deep Purple** (the actual /pricing CTA fill, NOT `#6c5fc7`)
-2. **ALL CAPS 700-weight** discipline (distinct from nav's 500)
-3. **3-shade purple palette** (`#452650` / `#362d59` / `#1f1633`)
-4. **Lavender Mist `#f5f3fa`** subtle surface
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/sentry` — directory only
-
-## Tier 2b — styles.refero.design
-- `?q=Sentry` — no record
-
-**Tier 2 status: unavailable.** Tier 1 (sentry.io home + /pricing) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home | Tier 1 /pricing | Prior footer claim | Resolution |
-|---|---|---|---|---|
-| Primary bg | n/a (Outline only) | **`#452650` Deep Purple** | `#6c5fc7` Mid-Purple (different shade) | ✓ Deep Purple `#452650` canonical |
-| Primary radius | 8px | 8px ✓ | 8px ✓ | ✓ |
-| Primary padding | 12×16 | 12×16 ✓ | 12×16 ✓ | ✓ |
-| Primary height | 40px | 40px ✓ | 40px ✓ | ✓ |
-| Primary font | 14px·**700 ALL CAPS** | 14px·700 ALL CAPS ✓ | 14px·500 (nav-only — WRONG for Primary) | ✓ 14px·700 |
-| Outline text | `#1f1633` Eggplant | n/a | n/a | ✓ |
-| Cookie surface | `#362d59` Mid-Purple | n/a | n/a | ✓ |
-| Lavender Mist | n/a | `#f5f3fa` 0px tab | n/a | ✓ |
-
-### Unresolved
-- **Brand Purple HEX**: §2 doc cited `#6c5fc7` Mid-Purple as Primary; live DOM shows `#452650` Deep Purple as canonical Primary CTA fill. **Resolution**: 3-shade palette — `#452650` is the Primary, `#6c5fc7` may be an older/lighter variant or a chart/icon accent. Both retained, live wins for Primary.
-
-### Earlier mistakes reverted
-- Prior footer captured nav 14px·500 only — canonical Primary is **14px·700 ALL CAPS** at `#452650` Deep Purple. §4 needs material correction on weight + canonical purple shade.
-
----
-
-## Components in §4
-
-§4 (prior B8 batch) — needs:
-1. **Primary `#452650` Sentry Deep Purple** 8px / 40px / 12×16 / **14px·700 ALL CAPS** (canonical)
-2. **Outline Primary** Eggplant `#1f1633` text on transparent / 8px / 14px·700 ALL CAPS
-3. **Mid-Purple `#362d59`** cookie/secondary text surface
-4. **Lavender Mist `#f5f3fa`** subtle tab/card 0px (pricing tabs)
-5. **Top nav 14px·500 ALL CAPS** (separate from 700-weight Primary)
-6. **3-shade purple palette** documented as a system (`#452650` / `#362d59` / `#1f1633`)
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- **Sentry started as open-source project by David Cramer in 2008** for application error monitoring
-  - Source: [CIO — Sentry's Cramer on bootstrapping](https://www.cio.com/article/401704/sentrys-david-cramer-on-bootstrapping-a-unicorn.html)
-  - Source: [First Round Review — Sentry's Path to PMF](https://review.firstround.com/sentrys-path-to-product-market-fit/)
-- **Functional Software Inc. (legal name) incorporated February 2012** by **David Cramer (CTO)** + **Chris Jennings (Chief Creative Officer)**
-  - Source: [Crunchbase — Sentry](https://www.crunchbase.com/organization/sentry)
-- **Cramer is a high-school dropout** — featured in First Round case study "A High School Dropout Turned an Open-Source Project into a $3B Company"
-- **Bootstrapped ~3 years** before monetization; another stretch before taking VC
-- **Milin Desai is current CEO**
-  - Source: [ShiftMag — Milin Desai Sentry CEO](https://shiftmag.dev/milin-desai-sentry-open-source-business-model-739/)
-- **Total funding ~$217M** at **~$3B valuation** — investors: **Accel, New Enterprise Associates (NEA), Bond Capital**
-  - Source: [Contrary Research — Sentry](https://research.contrary.com/company/sentry)
-  - Source: [Tracxn — Sentry](https://tracxn.com/d/companies/sentry/__xY1QS-chu9yx61SH6md5umn0GKsaBgfj6yyhrReLyRA)
-
-### Voice samples (live-verified)
-- *"START TRIAL"* — pricing Primary <!-- verified: sentry.io/pricing 2026-05 -->
-- *"GET STARTED"* / *"GET STARTED WITH SENTRY"* — hero Outline <!-- verified: sentry.io/welcome -->
-- *"PLATFORM / SOLUTIONS / RESOURCES / DOCS / PRICING / SIGN IN"* — top nav <!-- verified: sentry.io/welcome -->
-- *"Errors"* — pricing event-type tab <!-- verified: sentry.io/pricing -->
-- *"CHECK OUT OUR PRIVACY POLICY"* — cookie banner <!-- verified: sentry.io -->
-
-### Existing §10-15 retained from prior augmentation (B8 batch)
-- Voice & Tone — debugging-as-craft register
-- §11 narrative — Cramer + Jennings open-source 2008→2012 incorporation lineage
-- §15 Standard cubic-bezier; no bounce
-
----
-
-**Verified-against:**
-- Tier 1: sentry.io/welcome/, sentry.io/pricing/ (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/funding: First Round Review (PMF + podcast), CIO, Crunchbase, Contrary Research, Tracxn, ShiftMag (Desai CEO)