oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/trenbe/DESIGN.md

@@ -0,0 +1,252 @@
+---
+id: trenbe
+name: "Trenbe"
+country: KR
+category: ecommerce
+homepage: "https://www.trenbe.com"
+primary_color: "#7620F6"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=trenbe.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Trenbe
+
+Global No.1 luxury shopping platform from Korea, combining tech-driven authentication and real-time global price scanning with a purple-accented monochrome design language.
+
+## 1. Visual Theme & Atmosphere
+
+Trenbe's interface balances the accessibility of mass-market ecommerce with the calm restraint expected of a luxury goods destination. The canvas is predominantly white with a warm near-black text system and deliberate use of Trenbe's signature vivid purple (#7620F6) as the sole accent color, signaling trust, exclusivity, and forward-facing technology. Product photography is given maximum breathing room within a tight typographic grid; decorative ornamentation is avoided in favor of clean rule lines and generous whitespace. On marketing surfaces the purple can appear in gradients and saturated CTAs, while within the shopping UI it is reserved for interactive states, labels, and primary links — preventing visual noise against high-resolution luxury imagery. The result feels simultaneously confident and approachable: global in aspiration, Korean in precision.
+
+## 2. Color Palette & Roles
+
+- **Purple (Primary):** `#7620F6` — brand primary; maps to `--primary` and `--purple` across all Trenbe sub-domains; used for interactive labels, uiPrimary text, hover states on marketing CTAs
+- **Purple 500 (UI Primary):** `#7351EC` — semantic `uiPrimary` / `textPrimary` token in app DS v4; active focus rings, highlight text
+- **Black:** `#000000` — primary action button background (btn-primary, btn-black); high-emphasis foreground
+- **White:** `#FFFFFF` — page canvas, card backgrounds, field01 input surface; theme-color meta
+- **Gray 1000 (text01):** `#2F2E2B` — body text, headings, highest-contrast foreground
+- **Gray 900 (text02):** `#4F4E4B` — secondary body text, descriptions
+- **Gray 800 (text03):** `#6F6E6B` — tertiary text, subheadings
+- **Gray 400 (border):** `#CFCECB` — hairline dividers, card borders
+- **Gray 100 (surface):** `#F7F6F5` — page background, input field02 fill
+- **Red 500 (Secondary):** `#EC5151` — semantic `uiSecondary` / `textSecondary`; sale badges, error states, price emphasis
+- **Green 500 (Success):** `#1EB789` — success states, confirmation labels
+- **Yellow 500 (Caution):** `#FFAB1E` — caution / promotional badges
+
+## 3. Typography Rules
+
+- **Primary font:** Pretendard (weights 100–900 loaded via subset WOFF2), fallback: "Apple SD Gothic Neo", "Helvetica Neue", sans-serif
+- **Feature settings:** `"ss03"`, `"cv01"` enabled on mobile — applied via `@media (max-width: 768px)` on `#app`
+- **Type scale (v4 rem-based, base 10px root):**
+  - overline: 1.0rem / line-height 1.8rem
+  - caption: 1.2rem / 2.0rem
+  - body: 1.4rem / 2.2rem
+  - headline: 1.6rem / 2.4rem
+  - title: 1.8rem / 2.6rem
+  - display03: 2.0rem / 2.8rem
+  - display02: 2.4rem / 3.2rem
+  - display01: 3.2rem / 4.2rem
+- **Legacy CSS (global fallback):** body font-size 13px, line-height 1.2, color `#444444`
+- **Weight usage:** 400 for body, 500 for subheadings, 700 for CTAs and prices, 600 for section titles
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Black CTA)**
+- Background: `#000000`
+- Text: `#FFFFFF`
+- Border: 1px solid `#000000`
+- Radius: 2px
+- Padding: 6px 12px
+- Font: 13px / 400
+
+**Default (Ghost)**
+- Background: `#FFFFFF`
+- Text: `#000000`
+- Border: 1px solid `#88888E`
+- Radius: 2px
+- Padding: 6px 12px
+- Font: 13px / 400
+
+**Disabled**
+- Background: `#FFFFFF`
+- Text: `#AFAEAB`
+- Border: 1px solid `#CFCECB`
+- Radius: 2px
+
+**Marketing CTA (Brand Purple)**
+- Background: `#7618F1`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 4px
+- Height: 55px
+- Font: 18px / 600
+
+### Form Fields
+
+**Default Input**
+- Background: `#FFFFFF`
+- Text: `#555555`
+- Border: 1px solid `#CCCCCC`
+- Radius: 0px
+- Height: 29px
+- Padding: 6px 12px
+- Font: 13px / 400
+
+**Focus Input**
+- Background: `#FFFFFF`
+- Text: `#555555`
+- Border: 1px solid `#66AFE9`
+
+### Badges / Labels
+
+**Primary Badge (Black)**
+- Background: `#000000`
+- Text: `#FFFFFF`
+- Radius: 0px
+- Padding: 0.2em 0.6em 0.3em
+
+**Sale / Accent Badge (Red)**
+- Background: `#EC5151`
+- Text: `#FFFFFF`
+- Radius: 4px
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.trenbe.com (HTML + theme-color meta), https://assets.trenbe.com/20260602.151834.7400ea3/main.696cafc00c26f4e3cdcd.js (embedded CSS + design token object), https://www.trenbecorp.com (corp CSS: common.css + main.css), https://trenbe.github.io (tech blog CSS: --primary: #7620F6), https://assets.trenbe.com/font/pretendard/pretendard-subset.css (confirmed Pretendard font)
+**Tier 2 sources:** getdesign.md/trenbe — NOT LISTED (no data). refero — no result for Trenbe.
+**Conflicts unresolved:** Two purple primary values co-exist in the codebase: #7620F6 (older token, used on tech blog and trenbecorp.com as `--primary`) and #7351EC (newer v4 DS token `purple500` / `uiPrimary`). The tech blog and corporate site both use #7620F6 as `--primary`, which is treated as the canonical brand primary here. The v4 DS purple500 (#7351EC) is the current interactive UI token in the product app.
+
+## 5. Layout Principles
+
+- Single-column mobile-first grid; horizontal padding: 20px mobile, 41px tablet, 48px desktop
+- Vertical rhythm follows spacing token scale (0.2rem–6.4rem in 8-step increments)
+- Product grid: 2-column on mobile, 3–4 column on tablet/desktop, with consistent gutter matching horizontal padding
+- Maximum content width: 1200px (pc breakpoint), centered with auto margins
+- Cards have 8px radius (main borderRadius token), hairline 1px `#CFCECB` borders
+- zIndex layers: header 1399, modal 1500, ProductCard 1
+
+## 6. Depth & Elevation
+
+- Minimal shadow philosophy: UI avoids drop-shadows on cards; separation achieved via border `#CFCECB` and background-color contrast (`#F7F6F5` vs `#FFFFFF`)
+- Modals use `rgba(0,0,0,0.5)` scrim backdrop (alpha50 token = `#2F2E2B80`)
+- Sticky header separates with a subtle bottom border, no shadow
+- Drawers and bottom sheets slide in with `0.325s ease-out` without elevation shadow
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#7620F6` (or `#7351EC` in v4 DS contexts) exclusively as the brand accent; do not introduce other accent hues
+- Keep primary CTAs black (#000) on white surfaces inside the product UI to respect luxury product photography
+- Reserve the purple CTA only for high-emphasis marketing surfaces (landing pages, onboarding)
+- Use Pretendard for all Korean and Latin text; ensure feature settings `"ss03"` `"cv01"` are active on mobile
+- Apply 8px radius to product cards; 4px to chips, badges, and secondary UI elements
+- Use red (#EC5151) exclusively for sale prices, error states, and count-down labels
+- Respect the 20px mobile / 48px desktop horizontal padding consistently
+
+### Don't
+- Don't use the purple as a button background inside the main shopping UI — the primary action is always black
+- Don't add gradients or decorative patterns behind product images
+- Don't reduce line-height below 1.5× for body text; the Pretendard variable-weight range demands adequate leading
+- Don't mix the legacy 13px/1.2 line-height scale with the v4 rem scale in new components
+- Don't use border-radius above 8px for cards or 4px for chips in the current DS
+
+## 8. Responsive Behavior
+
+- **Mobile (≤480px):** 20px horizontal padding; 2-column product grid; bottom navigation bar replaces desktop header links; font sizes follow v4 rem scale with `font-feature-settings: "ss03","cv01"`
+- **Tablet mini (480–768px):** 41px horizontal padding; 3-column grid; header retains logo + search; secondary nav collapsed
+- **Tablet big (768–1024px):** full desktop header; 3–4 column grid; xPadding 41px
+- **Desktop (1024–1200px):** 48px horizontal padding; max-content 1200px; full navigation visible
+- **Large desktop (≥1200px):** content remains capped at 1200px; outer gutters expand
+
+## 9. Agent Prompt Guide
+
+When generating Trenbe UI:
+- Use white (`#FFFFFF`) canvas with warm near-black body text (`#2F2E2B`)
+- Primary interactive element: black button (bg `#000`, text `#fff`, radius 2px)
+- Use Pretendard font; specify weights 400 / 500 / 700
+- Accent color: `#7620F6` for labels, links, and focus indicators only
+- Red (`#EC5151`) for price reductions and error messages
+- Green (`#1EB789`) for success confirmations
+- Card containers: white bg, 1px `#CFCECB` border, 8px radius
+- Do not add gradients, shadows, or decorative flourishes behind product images
+- Layout: 20px mobile gutter, 48px desktop gutter, max-width 1200px
+
+## 10. Voice & Tone
+
+**Three defining adjectives:** Trustworthy, Direct, Savvy
+
+| Do | Don't |
+|----|-------|
+| Use clear, benefit-forward language: "verified by our experts" | Use vague luxury clichés: "elevate your lifestyle" |
+| Be specific about tech advantages: "AI price matching across 10M items" | Use jargon: "synergize your fashion portfolio" |
+| Acknowledge the user's desire directly: "가지고 싶은 것, 가지고 싶을 때" (what you want, when you want it) | Be passive or hedged: "you might consider exploring..." |
+| Frame authentication as protection, not gatekeeping | Shame or intimidate around budget |
+
+**Voice samples (illustrative):**
+- "전세계 명품을 한 눈에. 최저가 스캐너로 가장 빠르게." — All the world's luxury, at a glance. Fastest with our lowest-price scanner. *(illustrative tone sample)*
+- "가지고 싶은 것, 가지고 싶을 때, 가질 수 있도록." — What you want, when you want it, yours to have. *(illustrative brand line)*
+- "300% 보상 정책으로 안심하고 쇼핑하세요." — Shop with peace of mind backed by our 300% compensation policy. *(illustrative trust copy)*
+
+## 11. Brand Narrative
+
+Trenbe was founded in November 2016 in Seoul, South Korea, by CEO Park Kyung-hoon with a clear thesis: luxury shopping online did not have to mean counterfeit risk, opaque pricing, or limited selection. The name "Trenbe" blends "trend" and "be," signaling the brand's aspiration for customers to inhabit the trends they love rather than merely observe them. From the start, the company invested in physical infrastructure — overseas offices and fulfillment centers in the UK, US, France, Germany, Italy, and Japan — so that its platform could offer direct buying, direct inspection, and direct shipping rather than relying on third-party resellers.
+
+The company describes itself as a "luxury tech-commerce" business rather than a simple marketplace. Its proprietary Trenbot AI scans roughly 10 million products in real time across global department stores, brand official sites, and outlets to surface the lowest available price. The Korean Authentic Center, initially an in-house inspection team of over 40 expert authenticators, was later spun off as an independent subsidiary to reinforce the credibility of Trenbe's authentication signal. In 2022 Trenbe raised a KRW 35 billion Series D round, and the platform's MAU reached 4.5 million by late 2020. By Q1 2026 the pre-owned luxury segment contributed to its first operating profit of KRW 300 million.
+
+Trenbe's corporate manifesto — "We change the rules. We change the commerce." — anchors its design and product philosophy. The purple accent in its design system represents this disruption: vivid and technologically forward in a category traditionally expressed through ivory and gold. Yet the dominant use of black-and-white in the shopping UI maintains the respectful restraint that luxury buyers expect when their attention is focused on the products themselves.
+
+## 12. Principles
+
+1. **Trust through transparency** — Every price displayed shows where it came from. Every product that passes through Trenbe's fulfillment is inspected and logged. *UI implication:* Inspection status, price history, and authentication certificates appear prominently on product detail pages without requiring the user to dig for them.
+
+2. **Desire, not delay** — The user's intent is to acquire something desirable; friction between intent and checkout must be minimized. *UI implication:* Add-to-cart and purchase flows are surfaced within one thumb's reach on mobile; payment providers including Naver Pay, Apple Pay, and card-based installments are pre-integrated.
+
+3. **Global reach, local precision** — Trenbe operates in seven countries but the experience is built for Korean consumers first, then localized. *UI implication:* Korean-language copy is the primary string; KRW pricing is canonical; Pretendard is loaded as a subset for performance at Korean character density.
+
+4. **Technology as service, not spectacle** — AI and automation power the platform but should never make the user feel surveilled or overwhelmed. *UI implication:* Trenbot recommendations are labeled clearly as price comparisons, not "personalization magic"; data-driven badges use factual language ("15% below market average").
+
+5. **Authenticity as table stakes** — Counterfeit risk is the sector's defining anxiety. Trenbe's response is operational, not just copywritten. *UI implication:* Authentic guarantee badges and Korean Authentic Center certification marks appear at the same visual weight as the price; they are never buried in footers.
+
+## 13. Personas
+
+*Illustrative Persona A — The Aspirational Accumulator:* A 28-year-old woman in Seoul in her first management-level role. She buys one statement luxury piece per quarter as a self-reward. She comparison-shops obsessively before committing. She trusts Trenbe's price scanner because she has verified its results against department-store prices herself. Her primary device is iPhone; she browses during commute and completes purchases at home.
+
+*Illustrative Persona B — The Resale Strategist:* A 35-year-old man who buys luxury goods both to enjoy and to trade. He uses the Shuffle exchange feature to upgrade without net spend. He values the authentication certificate because it protects the resale value of his items. He reads the tech blog and trusts the brand's engineering transparency.
+
+*Illustrative Persona C — The Gifting Professional:* A 40-year-old professional who buys 3–5 luxury gifts per year for clients and family. She needs fast, reliable delivery and gift-wrap options. She cares deeply about authenticity guarantees because a counterfeit gift would be a professional embarrassment. The 300% compensation policy is the feature that converted her.
+
+*Illustrative Persona D — The Global Shopper:* A Korean expat in London who relies on Trenbe's UK office logistics to ship authenticated pieces home to family at prices competitive with local boutiques. She reads prices in KRW and filters by brand country of origin.
+
+## 14. States
+
+- **Empty:** Category page with no matching items shows a centered purple icon + "검색 결과가 없어요" (No results found) in gray900 text with a suggestion to broaden the filter — no full-bleed illustration, no decorative artwork
+- **Loading (skeleton):** Product cards show a gray100 (#F7F6F5) block for the image area and two gray200 (#EFEEEB) lines for title/price; animated with a left-to-right shimmer using linear gradient
+- **Error — Network:** Full-page or modal overlay on a white background with a neutral icon, headline in gray1000, sub-copy in gray800, and a black "다시 시도" (Retry) CTA button
+- **Error — Validation:** Inline beneath form fields; border turns red (#EC5151), helper text appears in red500 at 1.2rem (12px), field label does not change color
+- **Success:** Green (#1EB789) inline confirmation text or toast; checkmark icon at 24px; auto-dismisses after 3s with 0.2s ease-in-out fade-out
+- **Skeleton (product detail):** Hero image area dims to gray200, product title and price lines show as gray100 bars; below-fold specs show 3-line skeleton
+- **Disabled:** Button opacity 0.65; text color switches to #AFAEAB (gray600/textDisabled); cursor changes to not-allowed; no background color change
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- Micro: 150ms — border-color focus transitions (`ease-in-out`)
+- Short: 200ms — hover state color changes, icon rotations (`ease-in-out`)
+- Medium: 240ms — drawer bottom position animations (`ease`)
+- Standard: 325ms — modal entrance/exit, overlay opacity (`ease-out`)
+- Long: 400ms — page-level slide carousels (`linear`)
+
+**Primary easing functions:**
+- `ease-in-out` — default for interactive state changes (border, background-color)
+- `ease-out` — modal fade-in and slide-up (enters fast, settles gently)
+- `linear` — carousel swipe momentum, progress bars
+
+**Rules:**
+- All transitions are applied via CSS `transition` properties; no JavaScript-driven animation for routine UI state changes
+- Skeleton shimmer uses a CSS linear-gradient animation at 1.5s infinite linear (AOS library handles scroll-triggered reveals)
+- Carousel interactions use Swiper.js inertia; drag velocity maps naturally without artificial easing override
+- Reduced-motion: no explicit `prefers-reduced-motion` override is in the current CSS; agents generating new components must add it

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)