oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/bithumb/DESIGN.md

@@ -0,0 +1,170 @@
+---
+id: bithumb
+name: "Bithumb"
+country: KR
+category: fintech
+homepage: "https://www.bithumb.com"
+primary_color: "#1C2028"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=bithumb.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+
+# Design System Inspiration of Bithumb
+
+## 1. Visual Theme & Atmosphere
+
+Bithumb wears the aesthetic of money taken seriously: a dark, premium, data-dense trading surface built on a near-black structural base of #1C2028, warmed in carefully chosen places by a bronze/brown accent (#543E35) that signals a deliberate, recent rebrand. As Korea's No.1 crypto-asset exchange, the interface earns trust not through decoration but through density — packed grids of numbers, tight controls, and micro-labels that never waste a pixel. The palette is restrained and structural, letting the trading colors do the emotional work: red (#E15241) reads as price up and blue (#4880EE) as price down, following the Korea-market convention rather than the Western one. Everything is signed by the proprietary 'Bithumb Trading Sans' typeface, a brand-owned voice that lends the dense data UI a consistent, money-grade tone. The result feels less like a consumer app and more like a professional terminal: composed, serious, and engineered for people moving real value. Bronze against near-black is the whole mood — warmth held in tension with a structural, almost industrial calm.
+
+## 2. Color Palette & Roles
+
+- **Structural near-black** `#1C2028` — the primary structural color; used for the signup button surface and active filter chips. The anchor of the entire dark UI.
+- **Warm bronze/brown** `#543E35` — the rebrand accent; carries the exchange CTA surface, the single warmest gesture in the chrome.
+- **Brown text** `#4F3327` — used as the text color on outline CTAs, echoing the bronze accent in type.
+- **Neutral border** `#B6ABA1` — the 1px border on outline CTAs; a warm, low-contrast separator.
+- **Trading red (price up)** `#E15241` — Korea convention: rising prices. An emotional, directional color, not a structural one.
+- **Trading blue (price down)** `#4880EE` — Korea convention: falling prices. The counterpart to trading red.
+- **Muted gray** `#707882` — inactive chip text and secondary labels.
+- **Muted gray** `#93989E` — secondary/tertiary muted text.
+- **Off-white surface text** `#F8F9FA` — text on the bronze exchange CTA.
+- **Pure white** `#FFFFFF` — text on the structural near-black signup button and active chips.
+
+Roles in short: #1C2028 is structure, #543E35 is the warm call-to-action, #E15241 / #4880EE are reserved exclusively for directional trading signal, and the grays (#707882, #93989E) plus the neutral border #B6ABA1 carry everything quiet.
+
+## 3. Typography Rules
+
+The system is set in the proprietary **'Bithumb Trading Sans'** typeface — brand-owned, and a core part of the rebrand's signature. This is a dense data UI, so the type scale stays tight and functional:
+
+- **Body:** 14px — the workhorse for readable content in a packed layout.
+- **Controls:** 13px — buttons, chips, and interactive labels sit one step down from body.
+- **Micro-labels:** 12px — the smallest tier, for dense data annotations that must coexist with numbers.
+
+Weights observed in components run from 500 (medium, on CTAs and the signup button) up to 600 (semibold, on active filter chips), giving emphasis without resorting to a large size jump. The discipline is clear: hold the scale narrow, let weight and color — not size — create hierarchy in a money-grade, data-first interface.
+
+## 4. Component Stylings
+
+### Primary Button
+
+**Signup (structural)**
+- Background: #1C2028
+- Text: #FFFFFF
+- Border: none
+- Radius: 4px
+- Height: 32px
+- Font: 13px / 500
+- Use: account signup / primary structural action in the top chrome
+
+### Exchange CTA
+
+**Filled (bronze)**
+- Background: #543E35
+- Text: #F8F9FA
+- Border: none
+- Radius: 4px
+- Height: 56px
+- Font: 18px / 500
+- Use: the primary exchange call-to-action — the single warmest, most prominent action
+
+**Outline**
+- Background: transparent
+- Text: #4F3327
+- Border: 1px solid #B6ABA1
+- Radius: 4px
+- Height: 56px
+- Use: secondary action paired alongside the filled bronze CTA
+
+### Filter Chip
+
+**Active**
+- Background: #1C2028
+- Text: #FFFFFF
+- Border: none
+- Radius: 8px
+- Height: 36px
+- Font: 13px / 600
+- Use: the currently selected filter in a chip row
+
+**Inactive**
+- Background: transparent
+- Text: #707882
+- Border: 1px solid rgba(28,32,40,0.1)
+- Radius: 8px
+- Use: unselected filter options in the same chip row
+
+## 5. Layout Principles
+
+Bithumb's layout philosophy is density done deliberately: a data-dense trading aesthetic where information packs tightly and controls sit compact (13px control type, 12px micro-labels). The structural near-black base (#1C2028) frames the content rather than competing with it, so dense grids of numbers and chips can coexist without visual fatigue. Two radius scales signal two layout intents — 4px on buttons and CTAs for crisp, terminal-like edges, and 8px on filter chips for a slightly softer, more tappable control row. Control heights are tiered to importance: 32px for the compact signup button, 36px for filter chips, and a generous 56px for the primary exchange CTAs that deserve weight. The overall principle is restraint in surface and richness in data — let the structure recede so the numbers and the directional trading colors lead.
+
+## 6. Depth & Elevation
+
+The aesthetic is structural and flat rather than shadow-heavy: depth comes primarily from color layering against the near-black #1C2028 base and from borders, not from elevation. The outline CTA uses a 1px solid #B6ABA1 border, and inactive chips use a 1px solid rgba(28,32,40,0.1) border — these thin strokes do the separating work that shadows would in a lighter UI. Filled surfaces (the bronze #543E35 CTA, the structural #1C2028 signup button and active chips) establish foreground purely through contrast and warmth against the dark ground. No specific shadow blur, spread, or elevation token was captured in the inspection, so elevation should be treated qualitatively: lean on contrast and 1px borders, not drop shadows.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use #1C2028 as the structural anchor for primary surfaces and active states.
+- Reserve #543E35 bronze for the single most important call-to-action.
+- Keep red (#E15241) strictly for price-up and blue (#4880EE) strictly for price-down — Korea convention, never swapped.
+- Hold the type scale tight (14 / 13 / 12px) and use weight (500–600), not size, for emphasis.
+- Use 4px radius on buttons/CTAs and 8px on filter chips, consistently.
+
+### Don't
+- Apply the Western convention (green-up / red-down) — Bithumb's market reads red as up.
+- Substitute a generic font; the proprietary 'Bithumb Trading Sans' is part of the brand signature.
+- Dilute the bronze accent by spreading #543E35 across many surfaces — its power is its scarcity.
+- Introduce heavy drop shadows; depth here is structural (color + 1px borders).
+- Loosen the data density into airy spacing — the money-grade seriousness depends on it.
+
+## 8. Responsive Behavior
+
+No discrete breakpoint pixel values or responsive grid tokens were captured in the live inspection, so responsive behavior is described qualitatively. The system is built around compact, fixed-height controls — a 32px signup button, 36px filter chips, 56px exchange CTAs — which translate cleanly to touch targets, with the 56px CTAs comfortably finger-sized and the 36px chips reading as a scrollable control row. The dense data orientation (13px controls, 12px micro-labels) implies that on narrower viewports the trading grids would reflow into stacked, scrollable panels rather than shrinking type below the legibility floor. Treat the chip row as horizontally scrollable on small screens, and keep the bronze CTA full-width and prominent where space contracts. Until real breakpoints are measured, preserve the height tiers and radius scales rather than inventing new ones.
+
+## 9. Agent Prompt Guide
+
+When generating UI in Bithumb's style, prompt for: a dark, data-dense trading interface on a structural near-black base (#1C2028); a single warm bronze (#543E35) primary CTA; directional trading colors used only for price signal (red #E15241 = up, blue #4880EE = down, Korea convention); the proprietary 'Bithumb Trading Sans' (or a tight, neutral sans as stand-in); a compressed type scale (body 14px, controls 13px, micro-labels 12px) with emphasis via weight 500–600. Specify radii explicitly: 4px on buttons and CTAs, 8px on filter chips. Specify heights: 32px signup button, 36px chips, 56px exchange CTAs. Ask for structural depth — color layering and 1px borders (#B6ABA1 for outlines, rgba(28,32,40,0.1) for inactive chips) — not drop shadows. The brief in one line: "serious, dense, money-grade — near-black structure, one bronze accent, directional trading color, nothing decorative."
+
+## 10. Voice & Tone
+
+Bithumb's voice is serious, dense, and money-grade — the register of a professional trading floor, not a playful consumer app. It communicates with precision and economy, trusting the user to handle real numbers and real risk. Microcopy should be direct and unembellished, prioritizing clarity of state (price up / price down, active / inactive) over personality. The tone is confident and composed: it conveys that this is Korea's No.1 exchange without saying so loudly, letting the density and discipline of the interface make the claim.
+
+## 11. Brand Narrative
+
+Bithumb is Korea's No.1 crypto-asset exchange, and its recent rebrand tells the story of an institution maturing into a premium, professional identity. The visual narrative pairs a near-black structural base with a deliberate bronze/brown accent (#543E35) — warmth introduced into an otherwise austere, money-grade environment, signaling both gravity and craft. The proprietary 'Bithumb Trading Sans' typeface makes the brand literally speak in its own voice, a mark of an organization investing in a coherent, owned identity. Korea-convention trading colors (red up, blue down) root the brand firmly in its home market and its users' expectations. The throughline: seriousness about money, expressed as density, restraint, and a single warm accent that makes the dark feel intentional rather than cold.
+
+## 12. Principles
+
+- **Density with discipline** — pack information tightly, but keep the scale and palette restrained so it never reads as cluttered.
+- **One warm accent** — let bronze (#543E35) carry the primary action; scarcity is what gives it power.
+- **Color is signal** — reserve red/blue strictly for directional price meaning; structure stays in near-black and gray.
+- **Owned voice** — the proprietary 'Bithumb Trading Sans' is non-negotiable to the identity.
+- **Structural depth** — separate with contrast and 1px borders, not shadows.
+- **Money-grade seriousness** — every choice should reinforce trust and gravity, not delight.
+
+## 13. Personas
+
+- **The active trader** — moves real value, expects a dense terminal where price-up (#E15241) and price-down (#4880EE) read instantly. Values speed, precision, and zero ambiguity over decoration.
+- **The serious newcomer** — drawn by Bithumb's No.1 standing; needs the prominent bronze exchange CTA (#543E35, 56px) and clear signup path (#1C2028 button) to feel guided without the interface feeling consumer-soft.
+- **The Korea-market user** — reads red as up and blue as down by convention; any deviation would break trust instantly. The directional colors are designed for exactly this reader.
+
+## 14. States
+
+- **Active (filter chip):** background #1C2028, text #FFFFFF, radius 8px, height 36px, font 13px/600 — high-contrast, structural, clearly selected.
+- **Inactive (filter chip):** background transparent, text #707882 (muted gray), border 1px solid rgba(28,32,40,0.1), radius 8px — recessive and quiet against the dark ground.
+- **Primary action (exchange CTA):** background #543E35, text #F8F9FA, radius 4px, height 56px, font 18px/500 — the warmest, most prominent state.
+- **Secondary action (outline CTA):** background transparent, text #4F3327, border 1px solid #B6ABA1, radius 4px, height 56px — paired but subordinate to the filled bronze.
+- **Price up:** trading red #E15241 (Korea convention).
+- **Price down:** trading blue #4880EE (Korea convention).
+- Hover, pressed, focus, and disabled states were not captured in the live inspection; treat them qualitatively (likely subtle contrast shifts against #1C2028) rather than inventing values.
+
+## 15. Motion & Easing
+
+No motion durations, easing curves, or transition tokens were captured in the live inspection. In keeping with the brand's serious, money-grade, data-dense character, motion should be treated qualitatively: minimal, fast, and functional — the kind of restrained transition appropriate to a professional trading terminal, where responsiveness and clarity matter more than expressive animation. State changes (chip active/inactive, CTA press) should feel immediate and composed. Until real timing values are measured, do not invent durations or curves; default to crisp, low-key transitions that respect the density of the interface.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.bithumb.com (live primary site, brand-owned), https://apidocs.bithumb.com (official API docs, brand-owned), https://www.bithumbcorp.com (corporate site, brand-owned), https://github.com/bithumb (official GitHub org, brand-owned)
+**Tier 2 sources:** getdesign.md/bithumb — NOT LISTED. refero — not listed. Note: primary_color #1C2028 is the measured dominant structural color (brand logotype orange not present in the rendered web chrome); the rebrand pairs near-black with a bronze accent #543E35.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/bunjang/DESIGN.md

@@ -8,7 +8,7 @@ homepage: "https://m.bunjang.co.kr"
 primary_color: "#d80c18"
 logo:
   type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=bunjang.co.kr&sz=256"
+  slug: "https://static.bunjang.co.kr/web/ui/favicon.ico"
 verified: "2026-05-14"
 omd: "0.1"
 ---
@@ -262,6 +262,25 @@ Do NOT use this reference for:
 - Editorial commerce where the photo deserves a 4:5 or 1:1 art-directed frame
 - B2B SaaS where information density and table-rendering trump scrollable feeds
 
+
+## 13. Do's and Don'ts
+
+### Do
+- Reserve Bunjang Red (#d80c18, --color-primary) for the single highest-intent CTA per surface — the only place red appears
+- Build the product card on the 81:100 portrait thumbnail (--bun-ui-aspect-ratio-vertical: 81 / 100) with a 6px radius and #f6f6f6 placeholder bg
+- Signal depth with 1px #e5e5e5 (gray-100) borders and #f6f6f6 (gray-50) tints instead of elevation
+- Set all UI text in Pretendard Variable using only the 400/500/700 weights, letting 16px/700 price outweigh 14px/500 gray-600 (#666) titles
+- Color-code service chips by their dedicated ladders — indigo --color-safe-* for 안전결제, warm-amber --color-care-* for 감정완료, info-blue --color-blue-* for 내폰시세
+- Outline the heart (찜) button with a 10% black inner glow so its white stroke stays legible on any seller photo, flipping to solid --color-red-500 when tapped
+
+### Don't
+- Spend red (#d80c18) on secondary or tertiary actions — it drains the single primary it is meant to mark
+- Use square or square-ish thumbnails that break the 81:100 vertical convention and make phones and sneakers look stunted
+- Add box-shadow to any card or button — no sampled element carries elevation, and it contradicts the borders-and-tints depth language
+- Mix in Noto Sans KR, Apple SD Gothic Neo, or any display face — Pretendard Variable carries 100% of UI text
+- Manufacture urgency with copy like '마지막 1개!' or '지금 바로!' — the platform's listing depth is the urgency, and only price typography earns emphasis
+- Reuse partner login colors (kakao #fae100, naver #03cf5d, etc.) or interrupt with a modal where a z-index 1500 snackbar would do
+
 ---
 
 ## Verification footer

package/web/references/cakeresume/DESIGN.md

@@ -0,0 +1,162 @@
+---
+id: cakeresume
+name: "Cake"
+country: TW
+category: saas
+homepage: "https://www.cake.me"
+primary_color: "#13AB67"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=cake.me&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+
+# Design System Inspiration of Cake
+
+## 1. Visual Theme & Atmosphere
+
+Cake is a Taiwan-built global talent network — formerly CakeResume — that bundles job search, an AI resume and portfolio builder, and recruiting SaaS into one optimistic surface. The atmosphere is clean and professional: a wide white ground (#FFFFFF) lets every element breathe, and a confident Cake green (#13AB67) carries the eye to whatever action matters most. Headings sit in a deep, grounded green (#0C4129) that reads as serious and trustworthy without ever turning cold, while a mid-green accent (#378060) adds quiet warmth between the two. Corners are crisp and small — a consistent 4px radius — so the product feels modern and engineered rather than soft or playful. Set in Inter throughout the UI, the whole experience is tidy, legible, and human: a tool that takes your career seriously but still feels approachable.
+
+## 2. Color Palette & Roles
+
+- **Brand green / primary action** `#13AB67` — the signature Cake green, reserved for the most important call to action (Sign Up / primary buttons). It is the loudest color on the page and should stay scarce.
+- **Deep-green heading** `#0C4129` — the grounded, authoritative tone used for headings and primary text emphasis.
+- **Mid-green accent** `#378060` — a softer green that bridges the brand green and the deep heading green; use for secondary accents and supporting emphasis.
+- **Neutral fill** `#E2E6E4` — a light, cool-neutral surface for chips and quiet containers.
+- **Neutral border** `#D1D6D4` — the standard 1px hairline border for inputs, selectors, and dividers.
+- **Ground** `#FFFFFF` — the page background and the field on which everything else is composed.
+- **Text** `#000000` — primary body and control text; on neutral chips text shifts to near-black `#0E0E0F`.
+
+Roles in practice: green carries action and identity, deep green carries hierarchy, neutrals carry structure and rest, and white carries space. Keep the brand green for one decisive thing per view.
+
+## 3. Typography Rules
+
+- **Primary typeface:** Inter — used for UI and headings.
+- **CJK body typeface:** Apple SD Gothic Neo — used for CJK body text, keeping multilingual content consistent and legible.
+- **Body:** 16px, set in Inter for comfortable reading.
+- **Heading:** 38px / 600 weight, colored deep green (#0C4129) — large and confident, anchoring the page.
+- **Control / button text:** 14px / 400 weight, Inter — quiet and even, never shouting against the green fill.
+
+The type system is restrained: one Latin family doing the heavy lifting, a dedicated CJK companion for global reach, and a clear jump from 16px body to 38px headings that makes hierarchy obvious at a glance.
+
+## 4. Component Stylings
+
+### Button
+
+**Primary (Sign Up)**
+- Background: #13AB67
+- Text: #FFFFFF
+- Border: none
+- Radius: 4px
+- Padding: horizontal, snug to 14px label
+- Height: 32px
+- Font: 14px / 400
+- Use: the single most important action in a view (Sign Up, primary submit), set in Inter
+
+**Secondary (Log In)**
+- Background: transparent
+- Text: #13AB67
+- Border: none
+- Radius: 4px
+- Padding: horizontal, snug to 14px label
+- Height: 32px
+- Font: 14px / 400
+- Use: the secondary, lower-emphasis action sitting beside the primary button
+
+### Language Selector
+
+**Default**
+- Background: #FFFFFF
+- Text: #000000
+- Border: 1px solid #D1D6D4
+- Radius: 4px
+- Padding: horizontal, compact
+- Height: 32px
+- Font: 14px / 400
+- Use: the locale / language switcher in the header, styled as a quiet bordered control
+
+### Chip
+
+**Neutral**
+- Background: #E2E6E4
+- Text: #0E0E0F
+- Border: none
+- Radius: 4px
+- Padding: compact, label-hugging
+- Height: compact
+- Font: small label
+- Use: neutral tags and metadata pills that should recede behind primary content
+
+## 5. Layout Principles
+
+Cake composes on a generous white ground where whitespace is the primary structuring tool. Controls share a consistent 32px height, so buttons, the language selector, and adjacent fields align cleanly along a shared baseline. The small 4px radius is applied uniformly across buttons, the selector, and chips, giving the interface a tidy, engineered rhythm. Hierarchy is carried by scale and color rather than by heavy dividers — a 38px deep-green heading sets the top of a view, 16px body fills the reading column, and quiet neutral borders (#D1D6D4) mark only where structure genuinely needs an edge. Keep one decisive green action per region so the eye always knows where to go.
+
+## 6. Depth & Elevation
+
+Depth in Cake is intentionally flat and restrained. Elevation is communicated primarily through color and borders rather than heavy shadows: the white ground recedes, neutral fills (#E2E6E4) lift chips just enough to read as discrete objects, and a 1px #D1D6D4 hairline defines the edges of inputs and the language selector. The primary green button stands out by saturation and contrast against white, not by floating on a drop shadow. The result is a crisp, modern surface where separation comes from value and outline, keeping the interface light and engineered rather than skeuomorphic.
+
+## 7. Do's and Don'ts
+
+### Do
+- Reserve the brand green #13AB67 for the single most important action in a view.
+- Set headings in deep green #0C4129 at 38px / 600 to anchor hierarchy.
+- Keep a consistent 4px radius on buttons, selectors, and chips.
+- Align controls to the shared 32px height for clean baselines.
+- Lean on white space and 1px #D1D6D4 hairlines instead of heavy dividers.
+
+### Don't
+- Fill large areas with the brand green — it loses its meaning as the primary action.
+- Mix radii; avoid pill or large-radius shapes that break the crisp 4px system.
+- Add heavy drop shadows; let color and borders carry separation.
+- Color body headings in pure black when the deep-green #0C4129 is the brand voice.
+
+## 8. Responsive Behavior
+
+The white-ground, whitespace-first composition adapts gracefully across breakpoints: the 16px body remains the reading baseline, and the 38px deep-green heading scales down as viewport width tightens so it never crowds the column. The header's quiet bordered language selector and the 32px-tall action buttons collapse into a compact arrangement on narrow screens while keeping their 4px corners and shared height. Because separation relies on neutral fills (#E2E6E4) and 1px #D1D6D4 borders rather than fixed-width shadows, components reflow cleanly into a single column without visual breakage. The primary green action stays prominent and reachable at every size.
+
+## 9. Agent Prompt Guide
+
+When generating UI in Cake's style, instruct the agent: "Build on a pure white #FFFFFF ground with generous whitespace. Use exactly one primary action per view, filled with Cake green #13AB67 and white #FFFFFF text, 4px radius, 32px height, Inter 14px/400. Render secondary actions as transparent buttons with #13AB67 text at the same 4px radius and 32px height. Set headings in Inter at 38px/600 colored deep green #0C4129, and body at 16px. For inputs and selectors, use a white background, #000000 text, and a 1px solid #D1D6D4 border at 4px radius. Use neutral chips with #E2E6E4 fill and #0E0E0F text. Avoid heavy shadows — separate elements with color and 1px borders. Use #378060 only as a supporting mid-green accent." This keeps output professional, optimistic, and unmistakably Cake.
+
+## 10. Voice & Tone
+
+Cake speaks like a trustworthy career partner: clear, encouraging, and grown-up. The tone is professional but warm — never corporate-stiff, never overly casual. Microcopy favors plain, action-oriented language ("Sign Up", "Log In") that matches the restrained 14px control type. The optimism in the green palette carries into the words: confident about your potential, practical about the next step. Across languages — Latin in Inter, CJK in Apple SD Gothic Neo — the voice stays consistent: helpful, human, and globally minded.
+
+## 11. Brand Narrative
+
+Cake began in Taiwan as CakeResume and grew into a global talent network connecting people, portfolios, and companies. The rename to Cake signals a broader ambition: not just a resume tool, but an entire career surface spanning AI-assisted resume and portfolio building, job search, and recruiting SaaS. The deep-green headings and confident brand green tell a story of growth and trust — green as both optimism and momentum. Built for a multilingual, cross-border audience, Cake pairs an engineered, crisp aesthetic with genuine human warmth, presenting career progress as something serious, hopeful, and within reach.
+
+## 12. Principles
+
+- **Optimistic, not loud:** green signals possibility; reserve the brightest green for the one action that matters.
+- **Trust through clarity:** deep-green headings and clean 16px body make information easy and credible.
+- **Crisp and engineered:** a uniform 4px radius and shared 32px control height keep the system tidy.
+- **Whitespace first:** let the white ground structure the page before any border or fill does.
+- **Globally human:** Inter for Latin, Apple SD Gothic Neo for CJK — consistent and welcoming across regions.
+
+## 13. Personas
+
+- **The Job Seeker:** building a resume or portfolio, wants encouragement and a clear next step — served by the obvious green primary action and reassuring deep-green headings.
+- **The Recruiter:** scanning candidates inside the SaaS, needs scannable, professional, low-noise surfaces — served by neutral chips, hairline borders, and restrained color.
+- **The Global User:** working across languages — served by the Inter / Apple SD Gothic Neo pairing and consistent multilingual layout.
+
+## 14. States
+
+- **Default action:** brand green #13AB67 fill, white #FFFFFF text, 4px radius, 32px height — the resting primary button.
+- **Secondary / default Log In:** transparent background with #13AB67 text — present but quieter beside the primary.
+- **Selector default:** white #FFFFFF background, #000000 text, 1px solid #D1D6D4 border, 4px radius, 32px height.
+- **Neutral / inactive chip:** #E2E6E4 fill with #0E0E0F text, used for metadata and tags that should recede.
+
+(Hover, pressed, and focus treatments were not captured in live inspection and are intentionally left undocumented rather than invented.)
+
+## 15. Motion & Easing
+
+Specific motion timings and easing curves were not captured during live inspection. In keeping with the brand's crisp, engineered character, any motion should stay quick and understated — brief, confident transitions on the primary green action and the language selector that reinforce responsiveness without drawing attention away from content. Avoid bouncy or theatrical animation; favor calm, purposeful feedback consistent with the clean white ground and 4px geometry.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.cake.me (live brand site — colors, typography, components), https://github.com/cakeresume (brand-owned engineering org), https://medium.com/cakeresume (brand-owned publication)
+**Tier 2 sources:** getdesign.md/cakeresume — NOT LISTED. refero — not listed.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/web/references/catchtable/DESIGN.md

@@ -10,6 +10,25 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=catchtable.co.kr&sz=256"
 verified: "2026-05-15"
 omd: "0.1"
+
+## 16. Do's and Don'ts
+
+### Do
+- Reserve CatchTable Orange (#FF3D00) for the single primary CTA pill only, where it appears in just 4 text/icon contexts across a 3000-element scan
+- Keep chrome hard-square at 0px radius (92% of elements), softening only to 4px for photo thumbnails, 8px for interactive controls, and 12px for the primary CTA pill
+- Set Pretendard as the sole typeface across the entire system with no display or headline font, letting food photography be the brand moment
+- Apply line-height: 150% to every typography slot, from the 20px/700 Section Title down to the 10px/500 Micro Meta, as a system-wide contract
+- Carry separation with borders and hairline alpha (#00000014) on cards at rest, reserving the five-tier shadow ladder for FABs, bottom sheets, sticky search bars, and modals
+- Keep body weight at Pretendard 400 (91% of text) and punctuate only with 700 for section titles and price emphasis
+
+### Don't
+- Flood sections or large backgrounds with brand orange #FF3D00 — it is a single-CTA color, not a section-fill color
+- Apply a global border-radius reset like 8px to the chrome — it erases the hard-square 0px signature that frames the photography
+- Add a display or brand-typography font alongside Pretendard, which alone carries 91% of all rendered text
+- Fire shadows on cards at rest — depth is meant to come from borders and hairline alpha, not the shadow ladder
+- Stamp discount stickers, X% off badges, or countdown timers over food photography, which the system treats as sovereign
+- Confuse semantic Danger red #D91F11 with brand orange #FF3D00, or compress the 150% line-height contract
+
 ---
 
 # Design System Inspiration of CatchTable (캐치테이블)