oh-my-design-cli 1.6.0 → 1.6.1

package/web/references/bunjang/DESIGN.md

@@ -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 (캐치테이블)

package/web/references/classum/DESIGN.md

@@ -158,6 +158,25 @@ business.classum.com/
 
 Top-nav surfaces: AI 기반 LMS · 학습 커뮤니티 · AI 상담 챗봇 · 스킬 솔루션 · 리소스 · 로그인 · 도입 문의 (red CTA).
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Reserve the saturated brand red `#FF4438` strictly for primary CTA fills like "도입 문의", and let everything else stay in the lavender-gray neutral range
+- Set the page background to the barely-tinted lavender-gray canvas `#F6F6F9` rather than pure white, so white cards (`#FFFFFF`) read as elevated through background contrast alone
+- Typeset every role — hero, body, nav, CTA, footer — in Pretendard Variable, using only the production weights 300/400/500/600/700 served from the jsDelivr CDN
+- Build hierarchy by jumping from weight 400 to 600/700 (bold-vs-regular contrast) instead of leaning on mid-weight 500 transitions
+- Apply the disciplined radius ladder — 8px on CTA buttons, 20px on content cards, 30px on large feature cards, 999px on pill chips — with no in-between 2px/6px/14px noise
+- Use Ink `#232334` (a warm navy-charcoal, not true black) for primary headings, with Slate `#49495A` for secondary body text and Mute `#666B80` for tertiary labels
+
+### Don't
+- Spread `#FF4438` onto body type, decorative blocks, or a second button color — there is one button color for one job
+- Stack box-shadows for elevation on marketing surfaces; the primary CTA ships `box-shadow: none` and depth comes from canvas-vs-card contrast, reserving shadows only for floating UI like modals, dropdowns, and the chat widget
+- Pad the layout to a Western 16px body baseline — keep the deliberate Korean-density 14px / 1.43 line-height reading rhythm
+- Introduce serif accents, all-caps display type, decorative scripts, glassmorphism, or emoji-led headlines, all of which Classum's B2B-serious surface refuses
+- Write a generic "everyone benefits" pitch — every section should name its audience (대학 vs 기업 HRD) before splitting by feature
+- Add type gradients or auto-rotating hero carousels; gradients live only in hero illustration backdrops and functional UI stays fully flat
+
 ---
 
 ## 10. Brand Philosophy (paraphrased, not quoted)

package/web/references/dabang/DESIGN.md

@@ -11,6 +11,25 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=dabangapp.com&sz=256"
 verified: "2026-05-15"
 omd: "0.1"
+
+## 16. Do's and Don'ts
+
+### Do
+- Keep brand pink `#FF3478` (`--pink-500`) on the logo wordmark and large-display contexts only, since at 3.4:1 on white it fails AA for body text
+- Drive all interaction state — selected map markers, focus rings, link emphasis — with action blue `#326CF9` (`--blue-500`) and its `#EEF8FF` (`--blue-50`) hover tint
+- Build depth from 1px `#DFDFDF` (`--gray-400`) hairline borders and background-color steps (white → `#F5F5F5` → `#EEF8FF`), keeping `box-shadow: none` everywhere
+- Set body text in `#222` (`--gray-900`) at 16px/400 and run a binary 400→700 weight rhythm, reserving 500 for map filter-chip labels
+- Preserve the contextual radius ladder by using 32px pills for search-entry CTAs and 42px pills for toggleable map filter chips
+- Render price as the map marker itself (e.g. '전세 3.2억') and let warmth surface only in the AI band — 24px/400 with a single 🔍 emoji
+
+### Don't
+- Spread `--pink-500` into product chrome — keeping it wordmark-only is the system's most disciplined rule, and bleeding it onto the map produces a saturated pink that fights the canvas
+- Adopt the zero-shadow rule without investing in clean 1px `#DFDFDF` hairlines, since borders are doing the depth work shadows would
+- Flatten the 32px and 42px pill radii into one value, which loses the affordance distinction between search-entry CTA and toggle-filter
+- Propagate the 400-weight AI-band tone across the surface — it only reads as editorial because the surrounding section heads are 700-bold at 18-20px
+- Bleed casual `-요` endings into structural labels — warmth lives in the AI surface while category labels stay bare nouns (원/투룸 · 아파트 · 분양)
+- Reuse the dense 14px Korean body stack without re-tuning line-height and letter-spacing, since it is tuned for Pretendard's Korean character rendering
+
 ---
 
 # Design System Inspiration of Dabang (다방)

package/web/references/dji/DESIGN.md

@@ -115,7 +115,6 @@ DJI almost never uses light/thin weights for UI text — thin weights read as fr
 - Background: transparent
 - Text: sky-blue accent (≈`#0a84ff`)
 - Border: none
-- Radius: n/a
 - Font: 15px / 400
 - Use: Inline links, "learn more" affordances, spec-detail expanders. The only place the blue accent reliably appears.
 

package/web/references/fastcampus/DESIGN.md

@@ -284,6 +284,25 @@ Designers picking from Fastcampus should treat the FDS hue scales as an official
 - Font: 12px / 600 / Pretendard Variable
 - Use: Design / creative category tags.
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Pin the signature commerce-red #fc1c49 (--c-primary / --fds-semantic-primary-primary) to enrolment CTAs, sale-price highlights and limited-time banners, using #c9032a (--c-primary-darken) for the pressed/hover state
+- Keep the 4px radius vocabulary everywhere and reserve 4px 4px 0 0 (top-rounded, bottom flat) for course cards so the thumbnail caps the visual seam
+- Assign one accent hue per content rail (yellow #ffeb3b for 0원/사전알림, orange #f8930f for early-bird discount, blue #3b83ff for dev/data, pink #e91e63 for design/creative) so the rail hue does the spatial wayfinding
+- Set type on the binary 400/700 cadence — 40px/700 for two-line banner headlines, 14px/600 for category-pill labels, 16px/400 for body and primary GNB — reserving 500 only for the 12px rank-badge label
+- Render rank as a dark #171b1f corner-clipped (4px 0) badge showing the raw number plus enrolment count (1위 / 1,940+), letting the figure speak instead of an adjective
+- Write microcopy in casual-polite ~해요 / ~하기 / ~만나자 for product surfaces and keep formal ~합니다 only for legal, refund and receipt screens
+
+### Don't
+- Apply a full-pill radius to CTAs or category navigation — Fastcampus deliberately chose sharper 4px rectangles to read as a structured market, not a browsy social feed
+- Mix two accent hues within a single card; the rich Material palette is a per-band convention, and yellow and orange are adjacent accent slots, not a primary/secondary brand-color duo
+- Use the commerce-red #fc1c49 for system errors — form/validation errors belong to the separate --fds-color-red ramp (e.g. #c5213b), distinct from the brand primary
+- Adopt the --swiper-theme-color #007aff value as a brand token; it is the Swiper.js library default that leaked into the var dump, not a Fastcampus color
+- Editorialize ranking with superlative prose like 최고의 강의 or 압도적 1위, or add emoji and !!! tails on price/enrolment surfaces — the corner badge and raw count already carry the proof
+- Add elevation via box-shadow on the category-pill or rank-badge layer, or introduce parallax/scroll-triggered hero animation; depth comes from color contrast, and card hover micro-scale (1.0→1.02) is the only ambient motion outside the carousel
+
 ---
 
 **Verified:** 2026-05-15

package/web/references/flex/DESIGN.md

@@ -302,6 +302,25 @@ States 카탈로그가 사이트에 명시되지 않은 곳은 **observed shape
 3. *No spring bounce.* 항상 ease-out 류. overshoot 0.
 4. *Stagger ≤ 100ms.* 3-card grid stagger는 잘게.
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Build hierarchy from a single ink hue `#1D1D1F` stepped through alpha values (0.04 / 0.10 / 0.24 / 0.72 / 0.96) instead of introducing semantic colors
+- Set the 52px display h2 with tight `-1.56px` letter-spacing in Pretendard Variable 700 — the negative tracking is flex's visual signature
+- Define component edges with a 1px inset ring (`rgba(29,29,31,0.24) 0 0 0 1px inset` for active pills, `0.10` for inactive) rather than CSS borders, so hover/active transitions cause zero layout shift
+- Render the first section under the hero as a three-beat narrative (friction → mechanism → outcome) using `#2D3338` graphite cards with 16px radius and 30px padding
+- Flip light/dark by toggling `.l2024_dark` / `.l2024_light` surface classes while keeping the same ink and graphite tokens, rather than swapping the palette
+- Keep motion as assist: opacity fade plus a translateY of ≤12px on scroll entry, ease-out only, with 3-card stagger ≤100ms
+
+### Don't
+- Introduce blue, green, or yellow accent colors — flex's 2024 refresh deliberately deletes the SaaS accent-color habit and resolves nearly every element to the ink scale
+- Fill the active service pill with a solid primary color — it uses a quiet `rgba(29,29,31,0.04)` fill with an inset ring, never a filled blue/primary
+- Make the hero h1 larger than the in-page h2 — flex inverts the usual hierarchy with a compact 28px h1 banner under the 52px h2 argument
+- Use spring-bounce, parallax, or slides with overshoot — motion is always ease-out with overshoot 0 and translate capped at 12px
+- Put illustrations, icons, or images inside the manifesto cards — they are pure type on `#2D3338`, where the graphite-on-white card itself is the visual
+- Cram multiple USPs into one card or screen — flex holds to one message per screen across its three-card structure
+
 ---
 
 **Verified:** 2026-05-14

package/web/references/gmarket/DESIGN.md

@@ -436,6 +436,25 @@ Motion tokens **partially captured** — the chrome relies on Swiper.js defaults
 - Layer / modal transitions should be 200–250ms with ease-out
 - Respect `prefers-reduced-motion: reduce` — disable swiper auto-advance, eliminate non-essential transitions
 
+
+## 16. Do's and Don'ts
+
+### Do
+- Reserve Gmarket Red #da120d (--Red-600) for numeric price-discount strings, percentage-off, and strike-through context — treat it as a semantic-price asset, not a generic CTA fill
+- Set section H2s in Gmarket Sans at 28px/700 for hero modules and 24px/700 for compact modules, keeping the body on the Apple SD Gothic Neo / Noto Sans CJK KR system stack
+- Stack 10+ category modules vertically with ~48-64px breaks and repeating thumbnail-price-chip card rhythm so users scan the grid, not headings
+- Convey depth through borders and Gray-ladder tints (--Gray-200 #eeeeee card edge, --Gray-100 #f5f5f5 row/section tint) instead of box-shadow, which is absent in production chrome
+- Map color to revenue programs via named sub-systems — Smile-Yellow #ffd200 for loyalty/SmilePay, StarDelivery-Purple #7130f3 for premium delivery, Club-Navy-Main #002041 for Smile Club rails
+- Render Korean service-names exactly as-is (스마일배송 / 안전결제 / 도착보장 / 쿠폰적용가) and lead card copy with the price, letting the number do the work
+
+### Don't
+- Flood Gmarket Red #da120d as a primary button fill across large surfaces — in 272 sampled chrome elements it appears on price text, not as a button background
+- Place Smile-Yellow #ffd200 as a foreground on white (1.6:1 contrast, fails WCAG AA) — use it only as a background fill behind #222222 dark text
+- Add box-shadow or elevation to product cards; separation comes from the 8-16px gutter and color tints, never drop shadows
+- Pad sections to 'breathe' or introduce hierarchy that breaks the dense scan rhythm at the expense of card count per fold
+- Translate or rebrand Korean service-names (e.g. 스마일배송 to 'Smile Delivery') in Korean chrome, and avoid emotional adjectives or hero-tagline gestures inside card chrome
+- Collapse the type scale onto Medium 500 — production leans on the 400/700 binary, with 500 reserved mainly for the rendered logotype and banner overlays
+
 ---
 
 **Verified:** 2026-05-15

package/web/references/gogolook/DESIGN.md

@@ -0,0 +1,126 @@
+---
+id: gogolook
+name: "Gogolook"
+country: TW
+category: consumer-tech
+homepage: "https://whoscall.com"
+primary_color: "#0CD25F"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=whoscall.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+---
+# Design System Inspiration of Gogolook
+
+## 1. Visual Theme & Atmosphere
+
+Gogolook is the Taiwan TrustTech company behind Whoscall, the caller-ID and anti-scam app, and its design speaks in the language of friendly, reassuring consumer safety rather than cold enterprise security. The world is built on a clean white ground (#FFFFFF) that keeps everything calm and uncluttered, punctuated by a vivid, documented brand green (#0CD25F) that signals "you're protected" without ever feeling alarming. Buttons are fully-rounded pills, soft and tappable, and a big playful rounded display face (Nunito) carries the headlines while Noto Sans handles the body, so the voice reads as approachable and human. The overall feeling is of a trusted neighbor who happens to be excellent at spotting scams: warm, confident, and easy to talk to. Color is used sparingly and purposefully, letting the green do the emotional work of conveying safety against a quiet, bright backdrop. Nothing here shouts; the protection is communicated through friendliness, generous rounding, and a single confident accent rather than through dark, defensive, "security-vendor" visual tropes.
+
+## 2. Color Palette & Roles
+- **Whoscall Green #0CD25F** — primary brand color, documented on whoscall.com/en/brand; the core identity hue and the emotional anchor for "trusted protection."
+- **Download-CTA Green #05F067** — the live, slightly brighter near-twin green used on the primary download pill on whoscall.com; carries the main call-to-action.
+- **Light-Green Tint #E6FAEF** — soft pale-green surface used for the premium button background; a gentle, low-pressure accent fill.
+- **Dark Gray #2C3E50** — documented secondary on the brand page; a softened near-black for structure and contrast that avoids harsh pure black.
+- **Primary Text #262626** — the live body and button text color on whoscall.com; warm dark neutral for readability.
+- **White #FFFFFF** — the dominant ground; keeps the experience bright, clean, and reassuring.
+- **Category accent — Pink #F53F90** — a documented live category accent for differentiation and playful color-coding.
+- **Category accent — Teal #019D91** — a second live category accent, complementing the green family with a cooler tone.
+
+## 3. Typography Rules
+Two faces split the work cleanly. **Nunito** is the rounded display face — its soft, geometric letterforms reinforce the friendly, approachable character, scaling all the way up to a 118px hero at weight 500. **Noto Sans** handles body copy at 16px, providing neutral, highly legible text with broad multilingual coverage suited to a Taiwan-rooted consumer product. Primary text renders in #262626, a warm dark neutral rather than pure black, keeping even dense copy soft on a white ground. The pairing is deliberate: rounded, expressive headlines invite the reader in, while clean, sober body text keeps trust-critical information clear and credible.
+
+## 4. Component Stylings
+
+### Primary Download Pill
+
+**Default**
+- Background: #05F067
+- Text: #262626
+- Border: none
+- Radius: 100px
+- Padding: 16px 32px
+- Height: 56px
+- Font: 16px / 500
+- Use: primary download call-to-action on whoscall.com
+
+### Secondary Demo Pill
+
+**Default**
+- Background: rgba(255,255,255,0.8)
+- Text: #262626
+- Border: none
+- Radius: 100px
+- Padding: 16px 32px
+- Height: 56px
+- Font: 16px / 500
+- Use: secondary "demo" action sitting beside the primary download CTA
+
+### Premium Button
+
+**Default**
+- Background: #E6FAEF
+- Text: #262626
+- Border: none
+- Radius: 40px
+- Padding: 16px 32px
+- Height: 57px
+- Font: 16px / 400
+- Use: premium / upgrade action on a soft light-green surface
+
+## 5. Layout Principles
+The composition rests on a generous white ground that gives each element room to breathe, with the bright green CTA acting as the single visual destination on the page. Content is kept calm and uncluttered, so the eye moves naturally from a large rounded Nunito hero down to a clear, tappable pill button. Spacing is comfortable and the hierarchy is unambiguous: one confident primary action, supported by a quieter secondary pill, rather than a wall of competing buttons. The white-first canvas reinforces the brand's reassuring, non-aggressive posture — safety presented as a clean, open, easy-to-navigate space.
+
+## 6. Depth & Elevation
+Elevation is restrained and quiet. The interface leans on the white ground and soft pale-green tint surfaces (#E6FAEF) to separate planes rather than heavy shadow stacks, keeping the look flat, bright, and friendly. Depth is implied mainly through the fully-rounded pill geometry and gentle background-color shifts between the white canvas and the light-green premium surface. No documented hard borders are used on the primary actions, so contrast comes from color fill rather than outlines or strong drop shadows.
+
+## 7. Do's and Don'ts
+
+### Do
+- Lead with the documented Whoscall Green (#0CD25F) as the brand anchor and reserve the brighter #05F067 for the live download CTA.
+- Keep the ground white (#FFFFFF) and let color carry meaning sparingly.
+- Use fully-rounded pill geometry (100px radius) for primary and secondary actions.
+- Pair rounded Nunito display with clean Noto Sans body, and render text in #262626.
+
+### Don't
+- Invent dark "security-vendor" backgrounds or aggressive red-alert palettes; the brand reads as friendly protection.
+- Square off the buttons or reduce their rounding — the pill language is core to the approachable feel.
+- Overload the page with multiple competing accents; the category pink (#F53F90) and teal (#019D91) are accents, not primaries.
+- Substitute pure black for text where #262626 is specified.
+
+## 8. Responsive Behavior
+The white-first, single-CTA layout is built to stay calm and legible as it scales, with the pill buttons holding their fully-rounded 100px geometry and comfortable 16px 32px padding across contexts. The Nunito display face flexes dramatically — anchored by a 118px hero on large screens — while Noto Sans body stays at a steady 16px for reliable readability on smaller viewports. Because the design depends on color fill rather than fine borders or dense shadow, it degrades gracefully: the green CTA remains the clear focal point regardless of width. (Specific breakpoint values are not documented in the captured data; behavior is described qualitatively.)
+
+## 9. Agent Prompt Guide
+When generating UI in Gogolook's style, instruct the agent to: start from a clean white (#FFFFFF) ground; make the single most important action a fully-rounded pill (radius 100px, height 56px, padding 16px 32px, font 16px/500) filled with the live download green #05F067 and dark text #262626; reserve the documented brand green #0CD25F as the identity anchor; add a quieter secondary pill on a translucent white background (rgba(255,255,255,0.8)) with matching geometry; use a softer premium button on a light-green tint surface (#E6FAEF, radius 40px, height 57px, font 16px/400). Set headlines in rounded Nunito (scaling up to a 118px/500 hero) and body in Noto Sans at 16px, all text in #262626. Keep the mood friendly, reassuring, and consumer-grade — approachable protection, never enterprise security. Use category accents pink #F53F90 and teal #019D91 only for light color-coding, never as the dominant hue.
+
+## 10. Voice & Tone
+The voice is warm, reassuring, and plainly human — the tone of a trusted neighbor who is genuinely good at spotting scams. It reassures without alarming, choosing friendly confidence over fear-based urgency. Copy should feel approachable and protective at once: clear about safety, never preachy or technical for its own sake. Where a security vendor might say "threat detected," Gogolook would rather say "we've got your back."
+
+## 11. Brand Narrative
+Gogolook is a Taiwan TrustTech company, best known for Whoscall, its caller-ID and anti-scam app. Its mission energy is consumer safety made friendly: turning the anxious, technical world of fraud and spam into something approachable, reassuring, and easy to trust. The brand deliberately positions itself as approachable protection rather than enterprise security — a clean white ground, a vivid documented brand green, fully-rounded pill buttons, and a big playful rounded display face together signal that staying safe should feel calm and human, not cold and defensive.
+
+## 12. Principles
+- **Approachable protection, not enterprise security** — safety communicated through warmth, rounding, and a single confident green.
+- **Reassure, don't alarm** — bright white grounds and friendly greens replace dark, defensive security tropes.
+- **One confident action** — a single primary pill CTA carries the page; everything else stays quiet.
+- **Friendly by form** — fully-rounded pills and rounded Nunito display make the interface feel human and tappable.
+- **Color with purpose** — green does the emotional work of "you're protected"; accents are used sparingly.
+
+## 13. Personas
+- **The Cautious Everyday User** — wants to feel safe from scam calls without learning security jargon; reassured by the calm white ground, friendly green, and one obvious tap target.
+- **The Family Protector** — sets up safety tools for parents or kids and needs a product that looks trustworthy and non-intimidating; the approachable, neighborly tone earns confidence.
+- **The Regional Mobile-First User** — a Taiwan-rooted, multilingual audience served by Noto Sans body text and a clean, legible, mobile-friendly layout.
+
+## 14. States
+Documented interactive states beyond the default are not present in the captured data, so additional states (hover, pressed, focus, disabled) should be derived conservatively from the established palette rather than invented. Keep any state treatment within the brand's friendly, low-pressure language: lean on gentle shifts within the green family and the light-green tint (#E6FAEF) for surfaces, and preserve the #262626 text and fully-rounded pill geometry across states. Avoid introducing alarm colors or hard borders that would break the reassuring tone. (No specific hover/pressed/focus values are documented; treat them qualitatively.)
+
+## 15. Motion & Easing
+No motion or easing values are documented in the captured data, so motion should be described qualitatively rather than specified numerically. In keeping with the brand's friendly, reassuring character, any motion should feel soft, calm, and welcoming — gentle transitions that match the rounded pill geometry and the unhurried, neighborly tone, never abrupt or alarming. (Specific durations and easing curves are not in the captured data.)
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.gogolook.com/about (corporate brand / company background), https://whoscall.com/en/brand (documented brand color page — Whoscall Green #0CD25F, Dark Gray #2C3E50, White #FFFFFF), https://medium.com/gogolook-tech (brand-owned engineering/tech blog)
+**Tier 2 sources:** getdesign.md/gogolook — NOT LISTED. refero — not listed. Note: documented brand green #0CD25F is the catalog primary; the live download CTA renders the near-twin #05F067.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)