oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/gogolook/DESIGN.md

@@ -0,0 +1,131 @@
+---
+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"
+ds:
+  name: Whoscall Brand Guidelines
+  url: "https://whoscall.com/en/brand"
+  type: brand
+  description: Whoscall's official brand page — logo, the documented brand green #0CD25F, and usage guidelines.
+---
+# 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)

package/web/references/grip/DESIGN.md

@@ -0,0 +1,250 @@
+---
+id: grip
+name: "Grip"
+country: KR
+category: ecommerce
+homepage: "https://www.grip.show"
+primary_color: "#eb2b51"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=grip.show&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Grip
+
+Korea's first live commerce platform — a mobile-first video shopping app where sellers and buyers connect in real time through livestreams, chat, and exclusive in-broadcast deals.
+
+## 1. Visual Theme & Atmosphere
+
+Grip presents a dark-first, energy-charged visual world tuned for live video commerce. The primary canvas is near-black (#0e1011) — a deliberate cinema-mode choice that keeps product thumbnails and live video feeds visually dominant. Against this dark ground, the brand's signature rose-red (#eb2b51) fires as a call-to-action signal: checkout buttons, coupon highlights, discount badges, and active selection states all pulse in the same hue, creating an unambiguous buy-now urgency. A secondary hot-pink (#ff3c78) appears in borders and icon fills for interactive affordances just below the critical-action tier. The live-streaming avatar ring introduces a vivid gradient (hot-pink to coral #fe0189→#ff583c) that animates with a pulse or ripple when a seller is live — the single most kinetically distinctive element in the UI. A deep purple (#6456dc) serves as a secondary accent for purchase nudges, urgency countdowns, and seller badges, adding a premium-yet-playful counter-note to the red-dominant palette. Typography is set entirely in Pretendard, a Korean variable typeface that reads cleanly at 13–18 px in both dark and light contexts. Component radii cluster at 4–8 px — tight enough to feel structured, not clinical.
+
+## 2. Color Palette & Roles
+
+- **Primary Rose-Red:** `#eb2b51` — primary CTA buttons, checkout actions, coupon card accents, checkbox fill, discount rate text
+- **Primary Hot-Pink:** `#ff3c78` — lighter interactive affordance, border accents, icon fills, secondary interactive states
+- **Secondary Purple:** `#6456dc` — purchase nudge bar background, timer text, seller badge accent
+- **App Background:** `#0e1011` — root app canvas (dark mode default)
+- **Surface Dark-1:** `#17181a` — bottom navigation bar background
+- **Surface Dark-2:** `#222327` — elevated card surfaces in dark context
+- **Surface Dark-3:** `#404149` — tertiary panel fills
+- **Surface Light:** `#ffffff` — light-mode cart, coupon, and checkout pages
+- **Surface Subtle:** `#f3f3f3` — empty state icon containers, light dividers
+- **Text Primary (dark):** `#eff0f4` — body copy on dark backgrounds
+- **Text Body (light):** `#323232` — product name, price, UI text on white
+- **Text Muted:** `#999999` — secondary labels, conditions, disabled states
+- **Text Subdued:** `#666666` — meta info, timestamps
+- **Border Default:** `#e5e5e5` — card outlines, dividers
+- **Border Subtle:** `#d5d5d5` — light separators, outline button strokes
+- **Error / Danger:** `#ef4343` — toast error, out-of-stock labels
+- **Live avatar ring:** `conic-gradient(from -68deg, #ff2b51, #ffae8e)` — broadcaster live ring
+- **Creator avatar ring:** `conic-gradient(from -68deg, #1ec7be, #1dc3ff)` — creator/seller avatar ring
+
+## 3. Typography Rules
+
+- **Typeface:** Pretendard (woff2, variable weight 45–920), with Pretendard Fallback (Arial-based) for system fallback
+- **Body / Product name:** 15px / weight 400–500
+- **Price / Emphasis:** 15px / weight 700; discount price 27px / weight 700
+- **Button primary:** 16px / weight 600
+- **Button confirm full-width:** 18px / weight 500
+- **Caption / Meta:** 13px / weight 400–500
+- **Badge / Tag:** 11–12px / weight 500
+- **Page header height:** 56px (CSS export constant)
+- **Letter spacing:** −0.2 px to −0.5 px on headings and price figures; Korean text benefits from tight negative tracking
+- **Line height:** 135–145% for readable body, tabular-nums variant for prices and timers
+
+## 4. Component Stylings
+
+### Purchase Buttons
+
+**Primary CTA (cart checkout)**
+- Background: `#eb2b51`
+- Text: `#ffffff`
+- Radius: 8px
+- Height: 50px
+- Font: 16px / 600
+
+**Full-Width Confirm (drawer bottom)**
+- Background: `#eb2b51`
+- Text: `#ffffff`
+- Height: 56px
+- Font: 18px / 500
+
+**Dark Secondary (buy now inline)**
+- Background: `#323232`
+- Text: `#ffffff`
+- Radius: 4px
+- Height: 34px
+- Font: 14px / 500
+
+**Outline Delete / Cancel**
+- Background: `#ffffff`
+- Text: `#323232`
+- Border: 1px solid `#e5e5e5`
+- Radius: 4px
+- Height: 34px
+- Font: 14px / 500
+
+**Shorts / Discovery CTA**
+- Background: `#17181a`
+- Text: `#ffffff`
+- Radius: 6px
+- Height: 40px
+- Font: 15px / 600
+
+---
+
+### Coupon Card
+
+**Active Coupon**
+- Background: `#ffffff`
+- Background: `#fff5f8`
+- Text (price): `#eb2b51`
+- Font: 27px / 700
+
+**Claimed / Used Coupon**
+- Background: `#ffffff`
+- Border: 5px solid `#f3f3f3`
+- Text: `#999999`
+- Font: 13px / 500
+
+---
+
+### Purchase Nudge Bar
+
+**Urgency Countdown**
+- Background: `rgba(47, 23, 253, 0.05)`
+- Text: `#6456dc`
+- Radius: 4px
+- Height: 38px
+- Font: 14px / 500–600
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.grip.show (homepage HTML + CSS bundles via webapp-resource.grip.show/202606020502/_next/static/css/), https://webapp-resource.grip.show/202606020502/_next/static/css/2caceb3098ae7b02.css (main Tailwind utility CSS, 86 KB), https://webapp-resource.grip.show/202606020502/_next/static/css/1f9e9658ee2b291a.css (cart page CSS with button tokens), https://webapp-resource.grip.show/202606020502/_next/static/css/c2bfe78c6e53a384.css (coupon drawer CSS with full-width confirm button), https://gripcorp.co (brand/corp homepage with gradient slogan and propose-button), https://webapp-resource.grip.show/202606020502/_next/static/css/4299887bf9e53336.css (avatar + live ring CSS)
+**Tier 2 sources:** getdesign.md/grip — 0 DESIGN.md files (NOT LISTED). refero — no result found for Grip KR.
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+Grip is a single-column, mobile-only app (max-width 420px on desktop, 100% on mobile). The root `.main` container is fixed to 420px wide on desktop and stacks vertically: page header (56px fixed top), scrollable content, bottom nav (52px + safe-area bottom). The live video view occupies full viewport height (100dvh) with content layered via absolute positioning. Card grids use gap-based flex rows; product thumbnail grids use 109px fixed-width scroll containers. Horizontal scroll (Indiana Scroll) is used for curation rows, avoiding pagination friction.
+
+## 6. Depth & Elevation
+
+The UI relies on background-color contrast rather than drop shadows for layering. Bottom nav (`#17181a`) sits above the dark app canvas (`#0e1011`). Drawers and modals emerge from below (vaul-drawer, bottom-sheet pattern) using the Radix animation system. An `rgba(0,0,0,0.1)` scrim is applied to floating overlays. The live avatar ring uses `z-index:-1` on the after-pseudo for the gradient ring to sit behind the avatar circle, giving a halo effect without a shadow. Product thumbnail borders use `outline: 1px solid rgba(0,0,0,0.05)` with `outline-offset:-1px` to avoid layout shift at 8px radius.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#eb2b51` for every primary purchase action — checkout, confirm, coupon claim
+- Present live status with the `#fe0189→#ff583c` animated ring gradient, not a static badge
+- Set prices in 700 weight with tabular-nums to prevent width jitter during countdowns
+- Keep body copy at 15px / 400 on light surfaces for readability at arm's length
+- Use `#6456dc` exclusively for urgency/countdown nudges; don't repurpose it as a general brand color
+- Maintain the 420px max-width constraint in desktop contexts to preserve mobile layout fidelity
+
+### Don't
+- Don't use `#ff3c78` as the primary CTA color — it is the lighter interactive affordance, not the checkout signal
+- Don't add shadows to buttons; elevation is communicated through background contrast alone
+- Don't place live-ring gradients on non-live seller avatars — the animation signals active broadcast
+- Don't exceed 8px border-radius on purchase buttons; 24–31px is reserved for pill tags and avatar-adjacent elements
+- Don't use font weight below 500 for interactive UI text; 400 is reserved for body copy and meta descriptions
+
+## 8. Responsive Behavior
+
+Grip is deliberately non-responsive in the traditional sense — it is a mobile web app. The root `.main` container is fixed at 420px wide and centered on desktop, with `max-width:100%` applied only on actual mobile viewports. At ≤460px the container becomes fluid. The bottom nav respects `env(safe-area-inset-bottom)` for notched devices. The video view layout enforces `min-width:360px` and `min-height:568px` to support older small-screen devices. Desktop visitors receive the 420px centered column; there is no tablet breakpoint.
+
+## 9. Agent Prompt Guide
+
+To produce Grip-consistent UI:
+- Dark canvas: `background #0e1011`, body text `#eff0f4`, Pretendard 15px/400
+- Primary CTA: `background #eb2b51`, white text, 8px radius, 50px height, 16px/600
+- Secondary action: `background #323232`, white text, 4px radius, 34px height, 14px/500
+- Live indicator: animated gradient ring `#fe0189→#ff583c` on circular avatars, 0.81s cubic-bezier(0.167, 0.166, 1, 1)
+- Price display: 700 weight, tabular-nums, discount rate in `#eb2b51`
+- Urgency nudge bar: `rgba(47,23,253,0.05)` background, `#6456dc` text, 4px radius, 38px height
+- Coupon card: `#fff5f8` tint interior, primary amount in `#eb2b51` 27px/700
+- Section dividers: 1px solid `#f3f3f3` (light) or background-color switch on dark
+- No box-shadow on action elements; rely on background contrast for layering
+
+## 10. Voice & Tone
+
+**Tone adjectives:** energetic, direct, community-warm
+
+| Do | Don't |
+|----|-------|
+| Use short imperative phrases ("지금 바로", "한정 특가") | Write formal or legalistic copy |
+| Address the viewer as a participant in a live event | Address them as a faceless online shopper |
+| Create urgency around the live moment ("지금 방송 중") | Use generic marketing hyperbole unrelated to real-time |
+| Celebrate the seller-buyer relationship by name (Gripper) | Depersonalize the seller as "vendor" or "merchant" |
+
+**Voice samples (illustrative):**
+- *"지금 라이브 중! 방송에서만 만나는 특가를 놓치지 마세요."* — live broadcast nudge copy
+- *"그리퍼가 직접 쓰고 추천하는 아이템, 지금 채팅으로 물어보세요."* — seller trust prompt
+- *"1,000만이 선택한 영상 쇼핑, 그립."* — official slogan from og:title meta tag
+
+## 11. Brand Narrative
+
+Grip was founded in July 2018 by Kim Han-na, a former Naver marketer who had worked on video products including Jam Live and Snow. Along with six co-founders also from Naver and Kakao, she set out to build Korea's first mobile live commerce platform with a single animating belief: anyone with a smartphone should be able to sell anything, anytime, to anyone. The company (GripCompany, 주식회사 그립컴퍼니) is headquartered in Pangyo, Seongnam — the heart of Korea's tech ecosystem. In December 2021 Kakao became Grip’s largest shareholder (~50% stake, ₩180B), anchoring its live-commerce expansion.
+
+Rather than replicating home shopping television or social media, Grip defined a third category: personal media commerce. Sellers — called Grippers — broadcast from wherever they are, answer questions live via chat, run in-stream auctions and games, and build loyal fan communities around their product expertise. The platform's patent portfolio reflects this: interactive mechanics like rolling dice, quiz games, and flash-sale countdowns are proprietary differentiators, not commodities.
+
+By 2024 the app had surpassed 10 million downloads and runs approximately 1,300 live shows daily. Grip has expanded internationally (US via gripcorp.co, Japan in planning), and operates a B2B arm — Grip Cloud — that powers branded live commerce for third-party retailers. The mission remains unchanged: collapse the distance between the person who made or curated a product and the person who wants it.
+
+## 12. Principles
+
+1. **Anyone can sell.** The platform is designed so that a single creator with a smartphone has the same surface area as a large retailer. UI implication: seller onboarding, stream tooling, and product listing all default to zero-equipment, zero-staff flows.
+
+2. **The live moment is the product.** Urgency is honest, not manufactured — it comes from the real-time nature of the broadcast. UI implication: live badges, countdown timers, and flash prices must always reflect actual live status; never show live signals on recorded or inactive streams.
+
+3. **Community over catalogue.** Grip's retention mechanism is the seller-fan relationship, not a product recommendation algorithm. UI implication: seller avatars, follow states, and chat surfaces are given equal or greater prominence than product grids.
+
+4. **Mobile-first, always.** The app was born on smartphone screens; desktop is a secondary, framed experience. UI implication: the 420px max-width is a design constraint, not a limitation — all interaction models (swipe, scroll, tap) are thumb-native.
+
+5. **Trust through transparency.** Buyers can ask questions live and see the product in real context. UI implication: product info, seller credentials, and review surfaces should never be buried; the chat overlay must remain accessible throughout a broadcast.
+
+## 13. Personas
+
+*Illustrative Gripper (Seller) — "Minjung, 34, Busan"*
+Runs a small handmade cosmetics business. She goes live three times a week from her kitchen studio, always engaging with regulars by name. She values the chat widget above everything else — it is her storefront window and her customer service desk simultaneously.
+
+*Illustrative Buyer / Fan — "Soyeon, 28, Seoul"*
+Follows 12 Grippers in beauty and fashion. She watches live shows on her commute and keeps the app's push notifications on for her favourite sellers. Price is secondary to trust — she buys because she knows the person selling.
+
+*Illustrative Discovery Shopper — "Junho, 41, Daejeon"*
+Opens Grip from a search ad for a specific product category. He swipes the home feed without following anyone, attracted by the HOT ranking and the real-time viewer count as a social-proof signal. He rarely revisits without a compelling deal.
+
+*Illustrative B2B Brand Manager — "Hyeji, 30, Seoul"*
+Uses Grip Cloud to run branded live events for an apparel label. She cares about the OBS integration, analytics dashboard, and the coupon issuance system — the consumer-facing design language is largely transparent to her.
+
+## 14. States
+
+- **Empty (Cart):** `#f3f3f3` circle container (64px) with a cart icon in `#c2c2c2`; text "담긴 상품이 없어요" in `#999` 15px/400; CTA to browse shorts in `#17181a` background
+- **Loading (Live video):** full-viewport dark canvas `#111` with centered spinner; video cover div with `background-size:contain` for thumbnail placeholder
+- **Error (Video stream):** gradient fallback `linear-gradient(180deg, #111 49.95%, #29235e)`; error text surfaced in white on the gradient
+- **Error (Cart item — sold out / ended):** text label "품절" in `#e83c3b` 15px/700; product thumbnail at 50% opacity via `.disabled`
+- **Success (Coupon claimed):** action panel switches to `#f8f8f8`; icon color moves from `#eb2b51` to `#999`; label reads "사용 완료"
+- **Skeleton (Product thumbnail):** `border-radius:8px; outline:1px solid rgba(0,0,0,0.05)` on the wrapper; image `aspect-ratio:1/1` prevents layout shift
+- **Disabled (Coupon card):** `opacity:0.5` applied to all child elements inside `.coupon > *`
+- **Timer / Urgency:** `font-variant-numeric:tabular-nums; font-feature-settings:"tnum"` on all countdown displays; color `#6456dc`
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- Micro (state feedback): 80ms — bottom nav slide (`transition: all 0.08s linear`)
+- Short (UI transitions): 150ms — Tailwind default (`cubic-bezier(0.4, 0, 0.2, 1)`)
+- Medium (drawer open/close): 200–300ms — Radix accordion/drawer (`ease-out`)
+- Long (avatar live animation): 810ms — pulse-border, ripple-border (`cubic-bezier(0.167, 0.166, 1, 1)`)
+
+**Easing tokens:**
+- Standard: `cubic-bezier(0.4, 0, 0.2, 1)` (ease-in-out, Material-derived)
+- Decelerate (drawer enter): `ease-out`
+- Live avatar: `cubic-bezier(0.167, 0.167, 0.833, 0.833)` for ripple ring
+- Pulse entry: `cubic-bezier(0.167, 0.166, 1, 1)` for avatar scale pulse (4 iterations then infinite on live)
+
+**Rules:**
+- The live-ring animation (ripple-sm: scale 1.02→1.2, opacity 1→0) runs 4× then loops only when `repeat-live-animation` class is applied — indicating an active live session
+- Bottom nav slides out (`translateY(100%)`) with 80ms linear — fast enough to feel native, not abrupt
+- Drawer content uses Vaul/Radix `data-[state=open]` animate-in at 150ms; `data-[state=closed]` at 300ms (asymmetric: opens fast, closes deliberately)
+- No spring physics; all motion is CSS cubic-bezier

package/web/references/hahow/DESIGN.md

@@ -0,0 +1,158 @@
+---
+id: hahow
+name: "Hahow"
+country: TW
+category: education
+homepage: "https://hahow.in"
+primary_color: "#00CCB4"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=hahow.in&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+ds:
+  name: "hahow-design"
+  url: "https://github.com/hahow/hahow-design"
+  type: system
+  description: "Hahow's open-source design-system theme — Primary/Secondary token scales (Primary 500 #00ccb4)."
+---
+
+# Design System Inspiration of Hahow
+
+## 1. Visual Theme & Atmosphere
+
+Hahow (好學校) is Taiwan's leading EdTech course marketplace, and its interface carries the warmth of a place that wants you to keep learning rather than the polish of a place that wants to close a sale. The atmosphere is friendly, approachable, and unmistakably human: a soft gray-blue page canvas of #F5F7F9 lets bright content breathe, while a vivid brand teal of #00CCB4 — drawn directly from Hahow's own open-source design tokens — signals interactivity and energy without ever shouting. Cards and buttons settle on a gentle 8px radius that rounds every hard edge into something inviting, and text sits in calm near-black #262626 for comfortable, sustained reading. Warm promotional accents in orange #FA8C16 and coral #F65F55 punctuate the surface where excitement is earned — a sale, a featured course, a moment worth noticing. Set throughout in PingFang TC, the typography feels native and legible to a Traditional-Chinese audience. The overall effect is encouraging and personable, the opposite of corporate sterility — a learning surface that feels like a good teacher: clear, warm, and on your side.
+
+## 2. Color Palette & Roles
+
+Hahow's color system is anchored by a teal Primary scale published in its open-source `hahow-design` theme, layered over a quiet neutral canvas and lifted by warm promotional accents.
+
+- **Brand / Primary 500** — #00CCB4. The signature teal; interactive emphasis, brand identity, primary action text.
+- **Primary 100** — #A3FFE8. Lightest teal tint for subtle fills and soft backgrounds.
+- **Primary 400** — #23D9BD. A slightly deeper teal step for hover and gradient transitions.
+- **Primary 800** — #006166. Deep teal for high-contrast text or pressed states on teal surfaces.
+- **Primary 900** — #00444D. Darkest teal anchor for the scale.
+- **Secondary 500** — #FFB940. Warm amber accent; complementary highlight to the teal.
+- **Page background** — #F5F7F9. Soft gray-blue canvas behind all content.
+- **Body text** — #262626 (near-black), with secondary text at rgba(0,0,0,0.65).
+- **Promotional orange** — #FA8C16. Energetic accent for sales and featured callouts.
+- **Coral** — #F65F55. Warm secondary promotional accent.
+- **Chip fill** — rgba(0,0,0,0.04). Faint neutral wash for tags and metadata chips.
+
+## 3. Typography Rules
+
+- **Typeface:** PingFang TC across the interface — native, legible Traditional-Chinese rendering.
+- **Body:** 16px, primary text color #262626.
+- **Heading:** 24px at weight 600.
+- **Secondary text:** rgba(0,0,0,0.65) for de-emphasized labels and metadata.
+- **Hierarchy principle:** lean on size and the near-black body color for contrast; reserve teal #00CCB4 for interactive text rather than headings, keeping reading surfaces calm.
+
+## 4. Component Stylings
+
+### Button
+
+**Teal Outline (primary action)**
+- Background: transparent
+- Text: #00CCB4
+- Border: 2px solid #DCF9F3
+- Radius: 8px
+- Padding: not separately verified
+- Height: 42px
+- Font: 16px / 600
+- Use: primary call-to-action on the live hahow.in surface
+
+**White Card Button**
+- Background: #FFFFFF
+- Text: #595959
+- Border: not separately verified
+- Radius: 8px
+- Padding: not separately verified
+- Height: not separately verified
+- Font: not separately verified
+- Use: neutral card-level action sitting on the gray-blue canvas
+
+### Tag Chip
+
+**Default**
+- Background: rgba(0,0,0,0.04)
+- Text: rgba(0,0,0,0.65)
+- Border: none
+- Radius: 20px
+- Padding: not separately verified
+- Height: 33px
+- Font: 14px / 400
+- Use: metadata, category, and filter tags
+
+## 5. Layout Principles
+
+- Content sits on a soft gray-blue #F5F7F9 canvas, letting white cards and bright accents read as the foreground.
+- Rounded geometry is consistent: 8px on cards and buttons, 20px (fully rounded) on tag chips.
+- Generous, calm spacing keeps the marketplace browsable rather than dense — the surface invites scanning across many courses.
+- Teal is used sparingly as an interactive signal, never as a flood, preserving the quiet neutral base.
+
+## 6. Depth & Elevation
+
+Hahow's elevation language is restrained and soft rather than dramatic. White cards (#FFFFFF) lift off the gray-blue #F5F7F9 canvas largely through tonal contrast and rounded 8px corners rather than heavy shadow. The teal outline button uses a 2px solid #DCF9F3 border — a pale teal ring — to define its edge instead of a drop shadow, reinforcing a flat, friendly aesthetic. Depth here is implied by layering light surfaces over the muted background, keeping the interface airy and approachable. (Exact shadow values were not captured in the blob and are intentionally not specified.)
+
+## 7. Do's and Don'ts
+
+### Do
+- Anchor interactive emphasis in the brand teal #00CCB4 from the official tokens.
+- Keep body text in near-black #262626 and secondary text in rgba(0,0,0,0.65) for calm, readable hierarchy.
+- Use the soft #F5F7F9 canvas to let white cards and bright accents stand out.
+- Reserve warm orange #FA8C16 and coral #F65F55 for genuinely promotional moments.
+
+### Don't
+- Flood surfaces with teal — it is a signal, not a background.
+- Sharpen the corners; the 8px (and 20px chip) radii are core to the friendly feel.
+- Introduce a heavy, corporate shadow language that contradicts the flat, warm aesthetic.
+- Substitute a non-native typeface for PingFang TC in Traditional-Chinese contexts.
+
+## 8. Responsive Behavior
+
+The live hahow.in marketplace is a course-browsing surface built to scale from desktop grids to mobile stacks. Cards keep their 8px radius and white #FFFFFF fill across breakpoints, and tag chips stay fully rounded at 20px so metadata remains legible when reflowed. Touch targets hold comfortable heights — the teal outline button at 42px and tag chips at 33px — that translate naturally to mobile tapping. (Specific breakpoint widths were not captured in the blob and are not specified here; the verified pattern is consistent rounding, consistent color roles, and generous tap-friendly sizing across viewports.)
+
+## 9. Agent Prompt Guide
+
+When generating UI in Hahow's style, instruct the agent: "Use a soft gray-blue page background (#F5F7F9) with white (#FFFFFF) content cards at 8px radius. Make the primary action a teal outline button — transparent background, #00CCB4 text, 2px solid #DCF9F3 border, 8px radius, 42px height, 16px/600 PingFang TC. Render tags as fully-rounded chips (20px radius, 33px height) with a rgba(0,0,0,0.04) fill and rgba(0,0,0,0.65) text at 14px/400. Keep body text near-black (#262626) at 16px and headings at 24px/600. Use teal #00CCB4 only for interactive emphasis. Reserve orange #FA8C16 and coral #F65F55 strictly for promotional callouts. Aim for a warm, encouraging, human EdTech tone — friendly, never corporate."
+
+## 10. Voice & Tone
+
+Hahow's voice is encouraging and human — the tone of a supportive teacher and a welcoming community of learners (好學校 literally means "good school"). It is warm and approachable rather than corporate or transactional, celebrating curiosity and the act of learning itself. Microcopy should feel like gentle encouragement: inviting people to start, to keep going, to share what they know. Even promotional moments, signaled by the warm orange and coral accents, carry friendliness over hard-sell urgency.
+
+## 11. Brand Narrative
+
+Hahow built Taiwan's leading EdTech course marketplace on a simple, human premise: everyone has something to learn and something to teach. As 好學校 — "the good school" — it positions itself as an open, encouraging place where knowledge moves between people rather than being handed down from an institution. The visual identity reinforces that story: a bright, friendly teal pulled from its own open-source design system, a soft and unintimidating canvas, rounded approachable shapes, and native Traditional-Chinese typography. Every choice tells the same narrative — learning here is warm, accessible, and on your side.
+
+## 12. Principles
+
+- **Warmth over polish** — feel like a good teacher, not a sales funnel.
+- **Calm canvas, bright signals** — let the soft #F5F7F9 base carry quiet content while teal and warm accents earn attention.
+- **Rounded and approachable** — consistent 8px / 20px radii keep every surface inviting.
+- **Native and legible** — PingFang TC and near-black #262626 text serve a Traditional-Chinese audience comfortably.
+- **Restraint with the brand color** — teal #00CCB4 marks interaction; it is never wallpaper.
+
+## 13. Personas
+
+- **The Curious Learner** — browsing the marketplace for a new skill; needs a calm, scannable surface where featured courses (orange/coral accents) stand out and primary actions (teal outline button) are obvious and inviting.
+- **The Knowledge-Sharing Instructor** — creating and publishing courses; needs the platform to feel encouraging and credible, with friendly rounded components and warm tone that lower the barrier to teaching.
+- **The Returning Member** — coming back to continue learning; relies on consistent color roles and tap-friendly components across devices to pick up quickly.
+
+## 14. States
+
+- **Default action:** teal outline button — transparent background, #00CCB4 text, 2px solid #DCF9F3 border, 8px radius, 42px height.
+- **Neutral / card action:** white card button — #FFFFFF background, #595959 text, 8px radius.
+- **Metadata / tag:** chip — rgba(0,0,0,0.04) fill, rgba(0,0,0,0.65) text, 20px radius, 33px height, 14px/400.
+- **Promotional emphasis:** warm orange #FA8C16 and coral #F65F55 accents for sales and featured callouts.
+- (Hover, pressed, focus, and disabled state values were not captured in the blob and are intentionally not specified; the teal token scale — Primary 400 #23D9BD, Primary 800 #006166 — provides the natural darker steps for any hover/pressed treatment.)
+
+## 15. Motion & Easing
+
+Hahow's motion language was not captured with specific values in the blob, so no durations or easing curves are specified here. In keeping with the brand's warm, approachable, flat aesthetic, transitions should read as gentle and encouraging rather than abrupt — soft enough to match the rounded geometry and calm canvas, with the teal token scale (Primary 400 #23D9BD into Primary 500 #00CCB4) available for smooth interactive color transitions.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://hahow.in (live homepage live-DOM inspect), https://business.hahow.in (brand-owned regional business surface), https://github.com/hahow (brand-owned org hosting the open-source design tokens)
+**Tier 2 sources:** getdesign.md/hahow — NOT LISTED. refero — not listed.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)