oh-my-design-cli 1.5.1 → 1.6.1

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 (토스증권)

package/web/references/tving/DESIGN.md

@@ -257,3 +257,21 @@ Consistent with the systemic Korean-coverage gap.
 ---
 
 *Captured via `omd:add-reference` (CREATE mode) on 2026-05-15. See `assets/_reference/` for tokens.json, structure.json, fonts.json, .live-inspect-proof.json, screenshots/, LICENSE-NOTE.md, attribution.md.*
+
+## 16. Do's and Don'ts
+
+### Do
+- Lock the canvas to pure black (#000000) at the document root and build depth through surface contrast (#000 → #2E2E2E → rgba(15,15,15,0.74)) since box-shadow renders 0 0 #0000 across all product chrome
+- Reserve the brand red #FF153C strictly for CTAs, brand marks, and live-status accents — keeping it to a handful of background nodes the way the doc samples only twelve red backgrounds across 3,000 nodes
+- Drive content-area-aware chrome from the six --color-cate-* tokens (home #FF1F45, live #FF584A, clip #FD8163, VOD #387DFF, movie #7D57FC, ad #FCC800) so color carries product taxonomy
+- Apply the top-corners-only radius (16.5292px 16.5292px 0 0) to poster cards so the image bleeds flush to the bottom metadata edge
+- Set Pretendard as the exclusive typeface and hold weights to the binary 400 body / 700 heading-and-CTA scale, with no 500/600 intermediates
+- Build primary CTAs as #FF153C background, #FFFFFF label, Pretendard 18.6px/700 with generous 19.6292px 62px padding so 4-syllable Korean labels never wrap
+
+### Don't
+- Spread #FF153C across large background areas or decorative fills — it is a CTA, brand-mark, and live-status accent only, never an ambient surface color
+- Apply the locked dark canvas to non-video products, since #000 earns its energy from poster art and video frames a SaaS dashboard or marketplace cannot supply
+- Adopt the six --color-cate-* taxonomy hues for a product with fewer than six genuine content surface paradigms, which only produces visual noise
+- Reproduce #FF153C verbatim as it is a CJ ENM brand color — shift it within the #E0142E–#FF2A4D range with WCAG contrast checks on dark surface if you want a TVING-like scarlet
+- Substitute a system font for Pretendard, whose optical sizing differs meaningfully from Apple SD Gothic Neo at the 12–18px display range
+- Apply the top-corners-only radius to text cards or import the live geometry tokens (e.g. --kbo-player-width: calc(100vw - 31.25rem)) as-is, since both are calibrated to TVING's poster bleed and specific sidebar

package/web/references/upbit/DESIGN.md

@@ -271,6 +271,25 @@ The "why now" thesis encoded in the surface: in a market famous for speculative
   3. Modal enter from `translateY(8px) opacity:0` → identity over 200ms ease-out. Exit reverses, 250ms.
   4. Row-print blink: tint fades in 150ms then holds for 800ms before easing out 400ms. The 800ms hold is what makes a moving market legible.
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Lead with tables, not cards — make the data the hero and the chrome the frame, with row heights of 45px on tradable lists and 30px on column headers
+- Encode direction in the Korean convention: red `#DD3C44` for 상승 (up) and blue `#1375EC` for 하락 (down), and invert to green-up/red-down only when porting to US/EU markets
+- Communicate row direction with an 8% alpha tint (`rgba(221,60,68,0.08)` rise / `rgba(19,117,236,0.08)` fall) so the hue supports rather than overpowers the numeral
+- Keep buttons flat and tight — 4px radius, no border, white text, scaling the blue by stakes: `#0062DF` for nav CTAs, `#003597` for the 44px hero CTA
+- Label CTAs as nouns or noun-phrases (로그인, 회원가입, 거래소 둘러보기, 직접입력) and split sentence-final forms by surface — `~합니다` on notices, `~해요` on product modules
+- Hold motion to the duration scale (100ms hover / 150ms row blink / 200ms nav / 250ms modal out) and animate only a price cell's background tint, never its typography
+
+### Don't
+- Wrap a price or numeral in a decorative card container — table primitives outrank card primitives on trading surfaces
+- Spread the accent blues (`#1375EC` / `#003597`) across large background areas; the page stays light on `#E9ECF1` with white panels and color used structurally
+- Add page transitions, parallax, scroll-jacking, or spring easing — the exchange surface is already in constant micro-motion from updating numbers
+- Sell with imperatives or exclamation (지금 시작하세요!, 쉽고 빠르게!) or lead with brand voice on a trading screen; keep persuasive copy to marketing surfaces only
+- Use emoji, exclamation marks, or a startup-slang tone on price surfaces — the register stays composed and procedural
+- Treat English as a translation layer — ship the Korean stack first with EN as a sibling KO/EN segment, and don't prune the Korean fallback chain to legacy families like Dotum / 돋움
+
 ---
 
 **OmD provenance:** Created 2026-05-14 via `omd:add-reference` CREATE pipeline. Tier 1 = live CDP inspect (2 surfaces, 121 raw samples). Tier 2 = both indexes attempted, both empty (documented). Tier 1 official DS = negative (documented). IP guardrails: brand assets reference-only; voice fresh characterization; no verbatim taglines. See `_research.md` for full source map.

package/web/references/upstage/DESIGN.md

@@ -212,3 +212,21 @@ These are reasoned inferences from the surface IA and proof bands, not user rese
 6. Motion tokens and component-state coverage incomplete — UPDATE pass recommended on a product detail page (e.g. `/products/solar-pro-3`) and Documentation surface.
 
 **IP guardrails confirmed**: brand assets reference-only (logos / Espeak face not redistributed); no verbatim Upstage marketing copy quoted; §10 voice samples are fresh OmD-derived shape-only alternatives; KR business-information block reproduced as factual disclosure, not promotion.
+
+## 16. Do's and Don'ts
+
+### Do
+- Reserve interactive violet #5B52FF as the only chromatic gesture that does work — links, CTAs, and secondary-button text, the way it appears across its 55 sampled occurrences
+- Anchor the brand on the plum canvas #3C043B (the '--colors--grey-background' hero) paired with violet primary, staying on the violet-plum axis instead of any cobalt default
+- Build vertical rhythm from surface-color flips band to band (plum hero to white product band to dark industry grid to near-black footer #191722), not from drop shadows or a numeric spacing ladder
+- Keep type to the three-family, three-job system: Geist for ~93% of body and headings, Espeak only on the hero H1 at 57.6px/600, and a monospace mid-sentence swap for the rotating industry word
+- Encode the binary radius literally — 0px for sections, cards, hero, and footer; 8px ('--style--radius-8px') only for pressable controls and content chips
+- Set body copy in Geist gray #70757F (the dominant 428-element text color) at 18px/400, the way most paragraph text ships
+
+### Don't
+- Spread the Solar yellow-green #D2FF95 broadly — keep it as a single-use accent adjacent to the Solar product narrative, never a default button surface or section background
+- Introduce a fourth type family beyond Geist, Espeak, and the monospace swap, which would break the rotating-word gesture
+- Soften the binary geometry with 4px, 12px, or 16px middle radii, which erases the layout-versus-pressable distinction
+- Import drop-shadow card chrome like 'box-shadow: 0 8px 24px rgba(0,0,0,0.08)' — Upstage ships effectively zero elevation and builds depth from surface contrast and #EEEEEE hairlines
+- Default to a corporate blue primary, the enterprise-AI cliche Upstage consciously avoids in favor of the violet-plum axis
+- Center-align the hero or signal the rotating industry word with color or weight — keep it left-aligned with the typographic monospace shift as the variable-slot cue

package/web/references/velog/DESIGN.md

@@ -0,0 +1,168 @@
+---
+id: "velog"
+name: "velog"
+country: KR
+category: developer-tools
+homepage: "https://velog.io"
+primary_color: "#12B886"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=velog.io&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+ds:
+  name: velog (open source)
+  url: "https://github.com/velog-io/velog"
+  type: system
+  description: velog's production frontend is fully open-source (MIT); its design tokens live in src/lib/styles (themes.ts + palette.ts), built on the Open Color palette.
+---
+# Design System Inspiration of velog
+
+## 1. Visual Theme & Atmosphere
+
+velog is a Korean developer-blogging platform built by velopert (Minjun Kim), and its surface is unmistakably reading-first: calm, minimal, and content-forward, with prose given room to breathe rather than competing with chrome. The palette is literally the Open Color system — a clean teal brand scale running from the near-white teal0 #F3FFFB up to the deep teal9 #087F5B, paired with a full neutral gray scale from gray0 #F8F9FA to gray9 #212529. The atmosphere is editorial and quiet: a soft gray page background (#F8F9FA) holds white content surfaces, dark near-black text (#212529) carries the writing, and the brand teal (#12B886) appears sparingly as the signal color for action. Nothing shouts; the teal is a confident accent reserved for the write button and primary moments rather than a wash across the page. The result feels engineered for long-form technical reading — high legibility, generous neutrality, and a single decisive brand hue that tells you exactly where to click.
+
+## 2. Color Palette & Roles
+velog's color system is the Open Color palette, surfaced through velog-client's `palette.ts` (raw scales) and `themes.ts` (semantic `themedPalette` tokens). The teal scale is the brand spine and the gray scale carries structure and text; red appears only for destructive intent.
+
+**Brand / Teal scale**
+- teal0: `#F3FFFB`
+- teal1: `#C3FAE8`
+- teal2: `#96F2D7`
+- teal3: `#63E6BE`
+- teal4: `#38D9A9`
+- teal5: `#20C997` (themedPalette primary2)
+- teal6: `#12B886` (BRAND / primary — themedPalette primary1)
+- teal7: `#0CA678`
+- teal8: `#099268`
+- teal9: `#087F5B`
+
+**Neutral / Gray scale**
+- gray0: `#F8F9FA` (page background — bg_page1)
+- gray1: `#F1F3F5`
+- gray2: `#E9ECEF`
+- gray3: `#DEE2E6`
+- gray4: `#CED4DA`
+- gray5: `#ADB5BD`
+- gray6: `#868E96`
+- gray7: `#495057`
+- gray8: `#343A40`
+- gray9: `#212529` (primary text — text1)
+
+**Semantic roles (themedPalette)**
+- Primary: `#12B886` (primary1)
+- Primary alt: `#20C997` (primary2)
+- Destructive: `#FF6B6B` (destructive1 / red5)
+- Text: `#212529` (text1)
+- Page background: `#F8F9FA` (bg_page1)
+
+Role guidance: teal6 #12B886 is the single primary-action color (the write button); the gray scale does all structural and typographic work (page #F8F9FA, text #212529); red5 #FF6B6B is reserved strictly for destructive actions. The teal is an accent, not a fill — use it where action lives, not as background.
+
+## 3. Typography Rules
+velog uses a native system font stack rather than a custom typeface, which keeps the reading surface fast and OS-consistent. Body copy renders through the system UI stack (-apple-system / system-ui) at a 16px base. The primary text color is gray9 #212529 — a near-black that delivers strong contrast against the gray0 #F8F9FA page and white content surfaces without the harshness of pure #000.
+
+- Font family: system stack (-apple-system / system-ui)
+- Body size: 16px
+- Primary text color: #212529 (gray9 / text1)
+
+The intent is editorial neutrality: let the writer's content set the tone while the system font and a single dark text color hold legibility steady across platforms.
+
+## 4. Component Stylings
+
+### Login button (header)
+
+**Default**
+- Background: #212529
+- Text: #FFFFFF
+- Border: none
+- Radius: 16px
+- Height: 32px
+- Font: 16px / 700
+- Use: dark pill in the top-right of the header for sign-in / sign-up entry
+
+### Write button (primary action)
+
+**Default**
+- Background: #12B886
+- Text: #FFFFFF
+- Border: none
+- Use: the brand teal primary-action button (buttonColorMap) — the single decisive call-to-action for composing a post
+
+### Header bar
+
+**Default**
+- Background: #FFFFFF
+- Text: #212529
+- Font: 16px (system stack)
+- Use: top navigation surface sitting on the gray0 page, holding brand and the dark login pill
+
+### Page surface
+
+**Default**
+- Background: #F8F9FA
+- Text: #212529
+- Font: 16px (system stack)
+- Use: the soft-gray reading canvas (bg_page1) that frames white content blocks
+
+## 5. Layout Principles
+velog is structured as a reading surface first. A soft gray page background (gray0 #F8F9FA) acts as the canvas, white surfaces (the header #FFFFFF and content blocks) sit on top, and near-black text (#212529) carries the writing. The layout logic is qualitative and editorial: maximize legibility and whitespace, keep chrome minimal, and let long-form technical content lead. Action is concentrated rather than scattered — the dark login pill anchors the header's top-right, and the teal write button is the single bright signal in an otherwise neutral field.
+
+## 6. Depth & Elevation
+velog's depth language is restrained and flat — elevation comes from value contrast, not heavy shadow. The gray0 #F8F9FA page sits one step back from the white (#FFFFFF) header and content surfaces, so the layering reads through tone alone. The dark login pill (#212529, radius 16px) is the heaviest visual object in the header, gaining presence from its near-black fill and rounded form rather than from a drop shadow. The overall effect is calm and tactile-but-quiet: surfaces are distinguished by the gray-to-white step, and the teal accent provides the only chromatic lift.
+
+## 7. Do's and Don'ts
+
+### Do
+- Reserve teal #12B886 for the primary action (the write button) — it is a signal, not a background wash.
+- Use the gray scale for all structure and text: page #F8F9FA, surfaces #FFFFFF, text #212529.
+- Keep the dark login pill at radius 16px and height 32px as documented.
+- Default to the system font stack (-apple-system / system-ui) at 16px for body.
+
+### Don't
+- Use red — #FF6B6B (destructive1) is reserved strictly for destructive actions.
+- Introduce pure black for text; the system's near-black is #212529.
+- Spread teal across large fills; it loses its role as the single action color.
+- Add heavy shadows — depth here is carried by the gray-to-white value step.
+
+## 8. Responsive Behavior
+The blob does not carry measured breakpoint, grid, or container values for velog, so responsive behavior is described qualitatively rather than with invented numbers. The surface is content-forward and reading-first, which favors a single legible column of prose that stays comfortable across viewport widths. The header holds the brand and the dark login pill (height 32px, radius 16px); the teal write button remains the primary action target at any size. Maintain the gray0 #F8F9FA page background and #FFFFFF surfaces across breakpoints so the editorial value contrast is preserved on both desktop and mobile.
+
+## 9. Agent Prompt Guide
+When generating UI in velog's style, instruct the agent: "Build a calm, reading-first developer-blog surface. Use a soft gray page background #F8F9FA (gray0) with white #FFFFFF surfaces and near-black text #212529 (gray9). Use the system font stack (-apple-system / system-ui) at 16px for body. Make teal #12B886 the single primary-action color — apply it only to the write/primary button, never as a large fill. Render the sign-in control as a dark pill: background #212529, white text, border-radius 16px, height 32px, font 16px/700. Reserve #FF6B6B strictly for destructive actions. Keep depth flat: layer surfaces by the gray-to-white value step rather than shadows. Lean on the Open Color teal scale (teal0 #F3FFFB through teal9 #087F5B) and gray scale (gray0 #F8F9FA through gray9 #212529) for any tints or states."
+
+## 10. Voice & Tone
+velog's voice is that of a quiet, capable tool that gets out of the writer's way. It is editorial and engineer-minded: plain, precise, and unhurried, trusting the developer's content to lead. There is no marketing flourish in the surface — the tone matches the visual restraint, favoring clarity over persuasion. The single teal accent is the closest thing to an exclamation point, and even that is reserved for the one moment that matters: writing.
+
+## 11. Brand Narrative
+velog was created by velopert (Minjun Kim) as a developer-blogging platform for the Korean developer community, and its character flows directly from that origin. The production frontend is fully open-source (MIT), and the design tokens live transparently in `src/lib/styles` — `themes.ts` and `palette.ts` — built on the Open Color palette. That openness is the narrative: velog is a tool by and for developers, where the teal brand and the gray reading surface aren't decoration but the legible, honest scaffolding around technical writing. The brand reads as calm, minimal, and content-forward — a place where the words come first and the interface is just the quiet teal-and-gray frame around them.
+
+## 12. Principles
+- Reading-first: legibility and whitespace before chrome; long-form content leads.
+- One signal color: teal #12B886 marks action and nothing else.
+- Neutral structure: the gray scale (#F8F9FA → #212529) carries page, surface, and text.
+- Restraint in red: #FF6B6B is destructive-only.
+- Open and honest: tokens are open-source, built on the Open Color palette.
+- Flat depth: layer by value contrast, not shadow.
+
+## 13. Personas
+- The developer-writer: drafting long-form technical posts and wanting an editorial, distraction-free canvas. The system answers with a #F8F9FA reading surface, #212529 text, and a single teal write button as the clear next step.
+- The developer-reader: scanning technical content for signal. The high-contrast near-black text on soft gray, the system font at 16px, and the minimal chrome keep attention on the writing.
+
+## 14. States
+- Default / primary action: teal #12B886 (primary1) — the write button.
+- Primary alt / hover-tier tint: #20C997 (primary2 / teal5) is the documented secondary teal step for primary action.
+- Destructive: #FF6B6B (destructive1 / red5), reserved for destructive actions only.
+- Text (resting): #212529 (text1).
+- Page (resting): #F8F9FA (bg_page1).
+
+The blob does not carry measured per-state hover/pressed/focus values for individual components, so those interaction states are described by the available token roles rather than invented numbers; lean on the teal and gray scales (e.g., adjacent teal steps such as teal5 #20C997 and teal7 #0CA678) for tint progressions when a state shift is needed.
+
+## 15. Motion & Easing
+The blob does not carry measured duration, easing-curve, or transition values for velog, so motion is described qualitatively rather than with invented numbers. In keeping with the calm, reading-first character and flat depth, motion should be minimal and unobtrusive — gentle, quick transitions that never pull focus from the content. The teal accent is the one element worth a subtle emphasis on interaction; everything else should settle quietly so the reading surface stays still.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://velog.io (live DOM: page background #F8F9FA, header #FFFFFF, login pill #212529 / white / radius 16px / height 32px / 16px-700, system font 16px, brand teal #12B886 write button), https://github.com/velog-io/velog (open-source DS — tokens in src/lib/styles built on Open Color), https://github.com/velopert/velog-client (source files palette.ts + themes.ts giving the teal/gray/red scales and themedPalette semantic tokens)
+**Tier 2 sources:** getdesign.md/velog — NOT LISTED. refero — not listed (dev-blog SaaS absent).
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/wadiz/DESIGN.md

@@ -10,6 +10,25 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=wadiz.kr&sz=256"
 verified: "2026-05-14"
 omd: "0.1"
+
+## 16. Do's and Don'ts
+
+### Do
+- Reserve the brand mint #00c4c4 for interactive moments only — CTA fills, links, checkbox marks, focus outlines, progress fills, and the waffle loader — so mint always reads as a verb
+- Default to 8px radius for buttons, cards, inputs, and modals (the 112-occurrence workhorse), reserving 16px for hero modals and the 16px 16px 0 0 bottom-sheet pattern and 50% for avatars and indicator dots
+- Set body text in Pretendard at 15px / 400 and reserve 700 for funding amounts, percentages, headings, and maker names so the eye bounces between the two near-parity weights
+- Use the Toss-family ink scale (#191f28 heading, #4e5968 muted, #6b7684 subtle, #8b95a1 placeholder) for all text instead of pure black
+- Build funding-state chips from the LabelBadge system using solid / outlined / tint shapes across the mint, yellow #fcc500, blue #4672f9, and red #ff5959 hues (오픈중 = mint solid, 마감임박 = red solid, 인기 = yellow solid)
+- Reach for the tint button (#e6fafa surface, #00c4c4 label, hover to #bef5f5 / #07abae) to carry marketing weight, letting it land before outlined buttons in the page rhythm
+
+### Don't
+- Use pure black #000 anywhere — #191f28 is the ink floor of the system
+- Apply mint #00c4c4 onto campaign photography or thumbnails — mint colorizes the chrome that frames the image, with the waffle loader as the single exception
+- Tint drop-shadows with the brand color — shadows stay blue-black (0 6px 6px -1px #0a16461a), never mint, never theatrical
+- Put 12px or larger radius on functional buttons — that consumer-app idiom breaks Wadiz's 8px retail-catalog read
+- Drop skeleton placeholders on the home grid — the thumbnail opacity 0 to 1 fade-in over 0.25s ease-in-out IS the loading state
+- Reach for marketing superlatives like 최고, 최강, or 혁신적, or introduce a serif or 300-weight thin face — the funding-state vocabulary does the selling and Pretendard does the entire type job
+
 ---
 
 # Design System Inspiration of Wadiz

package/web/references/webflow/DESIGN.md

@@ -165,8 +165,22 @@ Webflow's website is a visually rich, tool-forward platform that communicates "d
 ## 6. Depth: 5-layer cascading shadow system
 
 ## 7. Do's and Don'ts
-- Do: Use WF Visual Sans Variable at 500–600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.
-- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.
+
+### Do
+- Set WF Visual Sans Variable as the type face, using weight 600 for headlines (e.g. the 80px / -0.8px Display Hero), 500 for buttons, and 400 for body
+- Reserve Webflow Blue (#146ef5) for the primary CTA, links, and focus borders on a white (#ffffff) canvas with near-black (#080808) text
+- Keep border-radius conservative and sharp on the 2px / 4px / 8px scale — 4px for buttons, inputs, and badges, 8px for standard cards
+- Apply the signature translate(6px) horizontal nudge on button hover, timed with motion-fast (150ms)
+- Deploy purple (#7a3dff), pink (#ed52cb), and green (#00d722) together as a SET for category coding and tier comparison — e.g. a 4px top-edge color bar on feature cards
+- Build depth with the 5-layer cascading shadow stack rather than a single flat drop shadow
+
+### Don't
+- Round functional elements beyond 8px, or make them pill-shaped or fully square — radius stays moderate between geometric and rounded
+- Use the secondary accents (purple #7a3dff, pink #ed52cb, green #00d722, etc.) on primary CTAs — those stay Webflow Blue #146ef5
+- Use a single secondary accent in isolation; the purple/pink/green trio only reads correctly when used together as category coding
+- Render the marketing surface in dark mode — keep it bright and airy on white (#ffffff)
+- Substitute another typeface for WF Visual Sans Variable or drift off its 400/500/600 weights
+- Write copy like "Revolutionary no-code" or aggressive Wix-comparison framing — both are forbidden under the agentic-web-platform voice
 
 ## 8. Responsive: 479px, 768px, 992px