oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/riiid/DESIGN.md

@@ -0,0 +1,228 @@
+---
+id: riiid
+name: "Riiid"
+country: KR
+category: education
+homepage: "https://www.riiid.com"
+primary_color: "#14161A"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=riiid.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Riiid
+
+AI-native education company from Seoul — formerly known as Riiid, reborn as Socra AI on September 1, 2025 — building personalized learning through products like Santa (AI TOEIC/TOEFL) guided by the philosophy "AI that grows humans."
+
+## 1. Visual Theme & Atmosphere
+
+Riiid's digital product language is scholarly and calm: a near-white canvas (`#FCFCFC`) anchored by a deep ink foreground (`#14161A`) creates a paper-like reading surface that frames learning rather than shouting it. The dual-typeface pairing — Playfair Display for headings, Pretendard for body — signals both academic credibility and modern Korean product sensibility. Accents stay cool-grey (`#F1F2F4`, `#E8EAED`) rather than saturated; colour is earned, never decorative. The overall effect is focused and unhurried: a tutor's quiet study room where content — not chrome — holds attention.
+
+## 2. Color Palette & Roles
+
+- **Ink / Primary:** `#14161A` — default button background, heading text, primary foreground; hsl(220 13% 9%)
+- **Canvas / Background:** `#FCFCFC` — page background; hsl(0 0% 99%)
+- **Card Surface:** `#FAFAFA` — card and popover fill; hsl(0 0% 98%)
+- **Secondary Surface:** `#F1F2F4` — secondary button background, section dividers; hsl(220 10% 95%)
+- **Muted / Subtle:** `#E8EAED` — muted backgrounds, chips; hsl(220 14% 92%)
+- **Muted Foreground:** `#6C727F` — secondary labels, captions, placeholder text; hsl(220 8% 46%)
+- **Border / Input:** `#E5E7EB` — all stroke borders and input outlines; hsl(220 13% 91%)
+- **Destructive / Error:** `#EF4343` — error states, destructive actions; hsl(0 84% 60%)
+- **Interactive Blue:** `#3B82F6` — focus rings, sidebar ring; hsl(217.2 91.2% 59.8%)
+
+## 3. Typography Rules
+
+- **Heading serif:** Playfair Display — weights 400 (light headings), 600 (section headings), 700 (bold callouts). Used for page titles (36–48px), section headers (24px), and editorial pull-quotes. Tracks wide at tracking-wide.
+- **Body / UI:** Pretendard — weights 400 (body), 500 (nav, labels), 600 (card headers), 700 (strong emphasis). Used for all UI text, nav links (14px), body prose (16–18px), captions (12px).
+- **Scale:** text-xs 12px / text-sm 14px / text-base 16px / text-lg 18px / text-xl 20px / text-2xl 24px / text-4xl 36px / text-5xl 48px
+- **Leading:** leading-relaxed 1.625 (`--text-leading-relaxed`) for body; 1.8 (`--text-leading-loose`) for long-form prose
+- **Korean locale note:** Pretendard is designed for Korean/Latin bilingual rendering; weights 300–800 are loaded.
+
+## 4. Component Stylings
+
+### Button
+
+**Primary (Default)**
+- Background: `#14161A`
+- Text: `#FAFAFA`
+- Radius: 6px
+- Height: 40px
+- Padding: 8px 16px
+- Font: 14px / 500
+
+**Outline**
+- Background: `#FCFCFC`
+- Text: `#14161A`
+- Border: 1px solid `#E5E7EB`
+- Radius: 6px
+- Height: 40px
+- Padding: 8px 16px
+- Font: 14px / 500
+
+**Large (CTA)**
+- Background: `#14161A`
+- Text: `#FAFAFA`
+- Radius: 6px
+- Height: 44px
+- Padding: 12px 32px
+- Font: 16px / 500
+
+### Card / Content Block
+
+**Surface Card**
+- Background: `#FAFAFA`
+- Border: 1px solid `#E5E7EB`
+- Radius: 8px
+- Padding: 32px
+
+**Accent Panel**
+- Background: `#F0F2F4`
+- Radius: 8px
+- Padding: 32px
+
+**Primary-Tinted Panel**
+- Background: `rgba(19, 21, 25, 0.05)`
+- Radius: 8px
+- Padding: 48px
+
+### Navigation Link
+
+**Default**
+- Text: `#6C727F`
+- Font: 14px / 500
+
+**Hover**
+- Text: `#14161A`
+- Font: 14px / 500
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.riiid.com (→ redirects to https://corp.socra.ai); https://corp.socra.ai/assets/index-DB1490PF.css (CSS bundle, :root custom properties); https://corp.socra.ai/assets/index-DpZvyCLE.js (JS bundle, component definitions); https://corp.socra.ai/our-story (brand narrative)
+**Tier 2 sources:** getdesign.md/riiid — NOT LISTED ("No designs found for 'riiid'"). refero ?q=Riiid — no result found.
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+- Single-column centered reading lane (max-w-prose-wide ≈ 65ch) for long-form pages; constrains text to comfortable reading width
+- Grid breaks to 4-column for nav links on desktop, collapses to 1-column on mobile
+- Generous top padding on page entry (pt-32 / 128px) creates breathing room before content
+- Sections divided by subtle `--section-divide` lines and 64px vertical gaps; no heavy decorative dividers
+- Content blocks use 32px internal padding; large callout panels use 48px padding for emphasis
+- Max content width: max-w-4xl (896px) for wide layouts, max-w-2xl (672px) for focused reading
+
+## 6. Depth & Elevation
+
+- No drop shadows on primary surfaces — elevation is implied by background color steps (#FCFCFC → #FAFAFA → #F1F2F4)
+- Border (`#E5E7EB`) used for separation rather than shadow
+- Focus ring: 2px ring at `#3B82F6` with 2px offset — the only vibrant colour pop in the system
+- Disabled elements reduce opacity to 50%
+- Hover states use bg-accent (#F0F2F4) shift — subtle 0-shadow elevation language
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Playfair Display for headings to maintain the scholarly, thoughtful tone
+- Pair Ink (`#14161A`) buttons with generous whitespace — the colour earns its authority through contrast, not saturation
+- Keep body text at 16–18px with line-height 1.625 for extended reading sessions
+- Use left-border accent lines (4px `#14161A`) for pull-quotes and editorial emphasis
+- Maintain the cool-grey palette — every surface should feel like fine paper
+- Use the 4-column responsive nav grid and collapse gracefully to single column on mobile
+
+### Don't
+- Introduce warm or saturated brand colours — the palette is intentionally cool and neutral
+- Use heavy drop shadows; the system relies on tonal layering for depth
+- Mix Pretendard and Playfair in the same weight role — Playfair is strictly for headings
+- Set body text below 14px or line-height below 1.5 — legibility is a core product value
+- Place primary buttons side by side — one clear CTA per viewport section
+- Use border-radius above 8px (the base token) for primary UI components
+
+## 8. Responsive Behavior
+
+- Mobile (< 640px): single-column layout, px-4 gutters, hero font scales from text-4xl to text-xl, navigation collapses to 1×4 vertical stack
+- Tablet (640px–1024px): px-6 gutters, hero at text-2xl, navigation in 2-column grid
+- Desktop (> 1024px): max-w-4xl centered, px-8 gutters, hero at text-3xl+, full 4-column nav
+- Font sizes use responsive prefixes (sm:, md:) — no JavaScript breakpoint logic in critical path
+- Body max-width locked at max-w-prose-wide for reading pages regardless of viewport
+
+## 9. Agent Prompt Guide
+
+When generating Riiid / Socra AI UI:
+
+- Background `#FCFCFC`, all body text `#14161A`, secondary text `#6C727F`
+- Heading font: Playfair Display (light 400 for page titles, semibold 600 for sections)
+- Body/UI font: Pretendard (regular 400, medium 500 for interactive)
+- Primary button: `#14161A` fill, `#FAFAFA` text, 6px radius, 40px height
+- Border: 1px `#E5E7EB` on inputs and cards; no drop shadows
+- Spacing: 8px base unit, sections at 64px vertical gap
+- Do NOT add warm tones, orange, or brand gradients — the system is intentionally monochromatic
+- Focus ring: 2px `#3B82F6` — only blue accent in the palette
+
+## 10. Voice & Tone
+
+**Adjectives:** Scholarly, clear, humanist
+
+| Do | Don't |
+|---|---|
+| Use measured, complete sentences that respect the reader's intelligence | Use hype language ("revolutionary", "game-changing") |
+| Ask questions that invite reflection | Make declarative promises about outcomes |
+| Acknowledge complexity in learning | Oversimplify ("just 5 minutes a day!") |
+| Speak about growth as a journey, not a destination | Use urgency tactics or countdown timers |
+| Reference evidence and method | Use superlatives without substance |
+
+**Voice samples (illustrative):**
+- *Illustrative:* "AI should be a tool for realizing human potential, not replacing it."
+- *Illustrative:* "Know Thyself. Grow Thyself." — core tagline, Socratic in rhythm, personal in address
+- *Illustrative:* "The future belongs to those who learn more skills and develop faster than their challenges."
+- *Illustrative:* "We are not just imagining the future of education — we are building it."
+- *Illustrative:* "Every learner receives personalized, real-time feedback and an environment designed for immersion, curiosity, and growth."
+
+## 11. Brand Narrative
+
+Founded in Seoul in 2014, Riiid built its name on a single conviction: that artificial intelligence could democratize access to world-class tutoring. Its first product, Santa, applied deep-learning algorithms to TOEIC exam preparation and rose to number one in education app sales across Korea and Japan, reaching over four million users. The company grew through partnerships with ETS, SoftBank Vision Fund, and global media companies including NBC Universal, Warner Media, and BBC, while expanding into the US, Japan, and Brazil.
+
+On September 1, 2025, Riiid rebranded as Socra AI — a name drawn from Socrates and his method of guided questioning. The rebrand signalled a philosophical maturation: from AI as answer-delivery machine to AI as learning companion. The mission crystallised around a phrase: "AI that grows humans." Products were unified under this philosophy — Santa for standardised test prep, Real Class for ESL with licensed media, Real Academy for K–12 writing and speaking, and Vest Way for financial literacy.
+
+The design language shifted accordingly: away from the bold product colours common in EdTech and toward a quiet, academic aesthetic. Pretendard and Playfair Display were chosen to serve both Korean and global audiences; a near-white canvas and ink-dark primary signal intellectual seriousness. The company now describes its mission as "opening the Age of Personal Tutors" — a world where every learner has access to a tutor as knowledgeable and patient as the best teacher they never had.
+
+## 12. Principles
+
+1. **AI as amplifier, not replacement.** Every product decision asks: does this strengthen or outsource human thinking? *UI implication:* Features surface reasoning scaffolds and reflection prompts rather than bare answers; feedback explains, not just scores.
+
+2. **Developmentally appropriate.** Learning interfaces adapt to the user's current level. *UI implication:* Complexity is revealed progressively; beginners see fewer options; advanced users see richer controls.
+
+3. **Socratic dialogue over rote delivery.** Questions drive understanding more than explanations. *UI implication:* Copy favours interrogative framing; empty states and onboarding use questions to orient users.
+
+4. **Honest simplicity.** The brand rejects visual noise because learning requires sustained attention. *UI implication:* One primary CTA per screen; neutral palette; no distracting animation; generous whitespace.
+
+5. **Global reach, Korean craft.** Riiid originates in Seoul and serves learners across Asia and beyond. *UI implication:* Pretendard supports flawless Korean/Latin bilingual rendering; layouts accommodate CJK character widths.
+
+## 13. Personas
+
+*Illustrative persona:* **Jiyeon, 24, TOEIC candidate** — A Korean university student preparing for her first job application. She studies in 20-minute subway sessions, prioritises score prediction accuracy, and trusts the app's AI score estimate more than she trusts her own self-assessment. She is motivated but time-poor; she needs reassurance that practice time is not wasted.
+
+*Illustrative persona:* **Marcus, 31, ESL learner in Japan** — An American expatriate working in Tokyo who wants to learn Korean and maintain English fluency. He subscribes to Real Class to watch licensed media with AI conversation practice. He values authentic content over textbook exercises and skips lessons that feel condescending.
+
+*Illustrative persona:* **Principal Kim, 48, K–12 administrator** — A middle-school principal evaluating Real Academy for classroom adoption. He needs evidence of measurable writing improvement and an admin dashboard. Trust is built through case studies and rubric-aligned scoring, not feature lists.
+
+*Illustrative persona:* **Hana, 17, high-achieving student** — A Korean high-school student using Santa for TOEFL while simultaneously studying for university entrance exams. She compares her AI-predicted score weekly against peers. She expects a minimal, distraction-free UI and finds gamification condescending.
+
+## 14. States
+
+- **Empty (no study history):** Soft card with Playfair headline "Where would you like to begin?" and a single primary CTA; background `#F8F9FA`; no placeholder illustrations
+- **Loading (score calculation):** Skeleton bars at 60% and 40% width on card surface `#FAFAFA`; animated opacity pulse from 0.4 to 0.7; no spinner
+- **Error — network:** Inline alert with `#EF4343` left border (4px), muted-foreground message, and a single "Try again" outline button
+- **Error — input validation:** Input border changes to `#EF4343`; 12px red caption appears below field; label remains in `#14161A`
+- **Success:** Brief inline confirmation in `#14161A` text; no toast unless action was irreversible; icon ✓ in foreground colour
+- **Skeleton:** Full-width bars at varying widths (80%, 60%, 40%); card background `#FAFAFA`; 1.5s ease-in-out pulse; no border shimmer
+- **Disabled:** Pointer-events none; opacity 50%; both background and text muted together; no tooltip required unless action is permanently unavailable
+
+## 15. Motion & Easing
+
+- **Duration scale:** instant 0ms / fast 150ms / default 200ms / medium 300ms / slow 500ms
+- **Easing:** `transition-colors` with CSS default ease; `fade-in-0` + `zoom-in-95` for enter (200ms); `fade-out-0` + `zoom-out-95` for exit (150ms)
+- **Slide:** `slide-in-from-top-2` / `slide-in-from-bottom-2` for tooltips and popovers — 8px travel
+- **Page transitions:** None (SPA with React Router; instant client-side navigation)
+- **Hover:** Color-only transitions at 200ms `duration-200`; no transform on hover
+- **Rules:** Do not animate layout shifts; respect `prefers-reduced-motion`; skeleton pulses are the only looping animations

package/web/references/sendbird/DESIGN.md

@@ -0,0 +1,285 @@
+---
+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.
+---
+# 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/web/references/socar/DESIGN.md

@@ -383,3 +383,21 @@ plus standard FRAME-tier conventions, not published SOCAR tokens. Treat as
 inference until cross-checked against the internal SOCAR Frame 2.0 motion
 documentation.
 -->
+
+## 16. Do's and Don'ts
+
+### Do
+- Set all body and heading text in cool blue-grey #354153 on pure white #ffffff, never true black, to signal a calm service rather than a bank or government form
+- Reserve SOCAR Blue exclusively for the Space Frame symbol, app-store badges, and the primary booking CTA, keeping the rest of the chrome achromatic
+- Keep radii on the 12 / 14 / 16px ladder — 12px for inputs and the search button, 14px for booking chips and city tiles, 16px for content cards
+- Contain article cards with the single soft shadow rgba(0,0,0,0.1) 0 4px 8px and let it act as the border, rather than adding outlines
+- Cap headings at the mobile-first scale (H1 26px/700, H2 22px/700, H3 16px/600) even on desktop, and separate hierarchy by size and weight, not by a darker color
+- Render booking and payment confirmations as a dedicated single-column screen with one '확인' CTA, never reducing money-moving events to a toast
+
+### Don't
+- Spread SOCAR Blue across large background areas or general chrome — it must stay achromatic so the blue does the brand-flagging where it matters
+- Reuse the #b4bbcb placeholder/disabled grey for active text, since it only measures ~2.5:1 on white and fails WCAG AA
+- Introduce pill (9999px) or sharp-corner (0px) primary components, or multi-layer chromatic shadow stacks — both break the single-shadow, mid-radius geometry
+- Swap Pretendard for a bespoke web display face or add letter-spacing to Korean text; the type voice comes from disciplined sizing with tracking left at normal
+- Revive the pre-2024 playful consumer-app vocabulary — bright accents, illustrated empty states, or character mascots — that the rebrand deliberately retired
+- Write generic error copy like '검색 결과가 없습니다' or '문제가 발생했습니다', or put exclamation marks and emoji on booking, payment, or return surfaces

package/web/references/toss-securities/DESIGN.md

@@ -11,6 +11,25 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=tossinvest.com&sz=256"
 verified: "2026-05-15"
 omd: "0.1"
+
+## 14. Do's and Don'ts
+
+### Do
+- Build dark-mode-first, layering surfaces from deepest #101013 to body rgb(23,23,28) to overlay #202025 for sheets
+- Encode the KR-finance locale by using red #dc2e47 for positive/up ticks and blue #3182f6 for negative/down ticks via the positive/negative semantic tokens
+- Create depth with translucent rgba(214,224,239,0.09) 1px borders and layered surface alpha instead of elevation
+- Keep the two-tier radius scale, using 8px for cards, inputs, and buttons and 32px for pill controls like memo and filter chips
+- Set type from the observed hierarchy: 24px/700 section H2, 18.72px/700 sub-section H3, 15px/500 nav links, and 16px/400 body
+- Use Toss Product Sans tabular numerals so price ticks, order-book columns, and percent changes align by column
+
+### Don't
+- Copy positive=red / negative=blue into non-KR/JP/TW locales without inverting positive-* to green and negative-* to red
+- Assume Toss Blue #3182f6 always means brand CTA, since on this surface it is also the down-tick fill and only context disambiguates
+- Introduce box-shadow as elevation language; this system deliberately uses translucent borders plus layered surface alphas
+- Add a third radius tier beyond the deliberate two-tier 8px / 32px scale
+- Introduce a display-only accent typeface; restraint is the rule and there is no decorative accent face
+- Decorate data surfaces with illustration; the price chart itself is the imagery
+
 ---
 
 # Design System Inspiration of Toss Securities (토스증권)