oh-my-design-cli 1.6.0 → 1.6.2

package/web/references/laftel/DESIGN.md

@@ -0,0 +1,253 @@
+---
+id: laftel
+name: "Laftel"
+country: KR
+category: consumer-tech
+homepage: "https://laftel.net"
+primary_color: "#816BFF"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=laftel.net&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Laftel
+
+Korea's largest anime streaming platform — a dual-mode (light/dark) product built around a vivid purple identity, fan-curated discovery, and legal access to Japan's animation catalog.
+
+## 1. Visual Theme & Atmosphere
+
+Laftel's interface reads as a dark-first entertainment shell with a saturated violet accent, much like a premium streaming dashboard tuned for anime fans. The default experience leans toward deep charcoal backgrounds (#121212 / #000000) layered with a luminous purple (#816BFF) that signals interactivity, brand moments, and delight. In light mode the same purple pops against near-white surfaces (#FFFFFF / #F7F7F7), giving the product a punchy, youthful energy without the visual fatigue of a fully dark app. Thumbnail-heavy grids dominate layouts, so colour takes a supporting role — framing content rather than competing with it. The result is a streaming UI that feels simultaneously otaku-authentic and modern enough for a mainstream Korean OTT audience.
+
+## 2. Color Palette & Roles
+
+- **Purple 500 (Brand Primary):** `#816BFF` — primary CTA buttons, active nav links, badges, icons, brand foreground
+- **Purple 50 (Highlight):** `#F0EDFF` — slight button background (light), hover highlight wash
+- **Purple 100 (Slight 2):** `#D9D3FF` — hover state for slight buttons
+- **Purple Gray 800 (Dark Surface):** `#242537` — dark toast background, dark button-purple-gray surface
+- **Purple Gray 900 (Deep Nav):** `#191B2A` — light-mode button-purple-gray accent, deep overlay
+- **Background 1 (Light):** `#FFFFFF` — primary surface in light mode
+- **Background 1 (Dark):** `#121212` — primary surface in dark mode
+- **Background 2 (Dark base):** `#000000` — deepest dark background
+- **Background 3:** `#EEEEEE` / `#323232` — skeleton, subtle dividers (light/dark)
+- **Foreground 1 (Light):** `#121212` — primary text on light
+- **Foreground 1 (Dark):** `#F7F7F7` — primary text on dark
+- **Foreground 2:** `#505050` / `#E2E2E2` — secondary text (light/dark)
+- **Foreground 3:** `#8A8A8A` / `#ABABAB` — tertiary / metadata text
+- **Border 1:** `#EEEEEE` / `#323232` — default hairline separator
+- **Red 300:** `#F16361` — error / destructive state
+- **Red 500:** `#FF1010` — critical alert
+
+## 3. Typography Rules
+
+- **Font family:** Pretendard (loaded via cdn.jsdelivr.net/gh/orioncactus/pretendard), falling back to -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Noto Sans KR"
+- **Base size:** 16px on `html, body`
+- **Scale (web):** title-xxl 40px · title-xl 32px · title-l 28px · title-m 24px · title-s 20px · text-l 18px · text-m 16px · text-s 14px · text-xs 13px · text-xxs 12px
+- **Weight:** 700 is the only declared weight in component CSS (nav links, badges, buttons, labels); body inherits from Pretendard's default
+- **Line height:** 1.5 globally via `:root`; badge label `line-height: 150%`
+- **Letter spacing:** `normal` reset on all elements
+- **Smoothing:** `-webkit-font-smoothing: antialiased`
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (md)**
+- Background: `#816BFF`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 4px
+- Height: 56px
+- Padding: 0 18px
+- Font: 18px / 700
+- Hover background: `#6E58FF`
+
+**Primary (sm)**
+- Background: `#816BFF`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 4px
+- Height: 48px
+- Padding: 0 20px
+- Font: 16px / 700
+
+**Slight (secondary)**
+- Background: `#F0EDFF`
+- Text: `#816BFF`
+- Border: none
+- Radius: 4px
+- Height: 56px
+- Hover background: `#D9D3FF`
+
+**Disabled**
+- Background: `#EEEEEE`
+- Text: `#D0D0D0`
+- Radius: 4px
+- Height: 56px
+
+### Navigation Bar
+
+**Desktop Nav**
+- Background: `#FFFFFF` / `#121212` (themed via CSS var)
+- Height: 4rem (64px)
+- Padding: 0 3.125rem (50px)
+- Active link color: `#816BFF`
+- Default link color: `var(--foreground-1)`
+- Hover link color: `#816BFF`
+- Font: 0.875rem (14px) / 700
+- Bottom border: 1px solid `var(--border-1)`
+
+### Badge / Pill
+
+**Notification Badge**
+- Background: `#816BFF`
+- Text: `#FFFFFF`
+- Radius: 50%
+- Height: 1.0625rem (17px)
+- Font: 0.625rem (10px) / 700
+
+### Toast
+
+**Default Toast**
+- Background: `#000000` (light) / `#242537` (dark)
+- Text: `#FFFFFF`
+- Radius: 0.25rem (4px)
+- Padding: 1rem 0.75rem
+- Min-height: 3rem (48px)
+- Font: 0.875rem (14px)
+- Transition: opacity 0.2s ease, transform 0.2s ease
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://laftel.net (homepage HTML — full CSS custom properties block in inline `<style>`); https://laftel.net/_next/static/chunks/b3ccd441-eef37a2225571c0d.js (styled-components button/badge/nav definitions, full PURPLE scale, font scale); https://laftel.net/_next/static/css/4e57b743a29280e8.css (Pretendard font import); https://apps.apple.com/kr/app/라프텔/id1169440095 (App Store listing, brand copy)
+**Tier 2 sources:** getdesign.md/laftel — NOT LISTED ("No designs found for 'laftel'"). refero ?q=Laftel — no result (page returned empty listing, 4201 bytes).
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+- **Grid:** Thumbnail-first horizontal carousels and vertical grid layouts; desktop max-width ~1920px reference in font-size calc
+- **Breakpoints:** desktop ≤1280px · tablet ≤1024px · tabletVertical ≤768px · mobile ≤480px · mobileLandscape (orientation: landscape, max-height 576px)
+- **Nav hidden below:** 1024px (`.ksUJkh` display:none at tablet)
+- **Content padding:** 3.125rem (50px) horizontal on desktop nav; responsive fluid via vw-based font-size calc
+- **Spacing rhythm:** base unit 0.5rem (8px); typical component margin 1rem (16px), 1.5rem (24px), 2.5rem (40px)
+
+## 6. Depth & Elevation
+
+- **Hairline separator:** `box-shadow: 0 1px 0 0 var(--border-1)` on sticky nav
+- **Basic shadow:** `rgba(0,0,0,0.25)` light / `rgba(0,0,0,0.5)` dark
+- **Dropdown shadow:** `rgba(0,0,0,0.16)` light / `rgba(0,0,0,0.6)` dark
+- **Scroll thumb:** 4px transparent border, `background-clip: content-box`, `border-radius: 8px`
+- **Dim overlays:** `rgba(0,0,0,0.5)` (dim-1 light) · `rgba(0,0,0,0.7)` (dim-1/2 dark)
+- **Skeleton:** gradient shimmer `linear-gradient(to right, --background-3 0%, --background-1 25%, --background-3 50%)`, animated at 1.5s infinite linear
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#816BFF` (PURPLE500) for all primary CTAs and interactive accent moments
+- Apply the purple-50 wash (`#F0EDFF`) for non-primary ("slight") button backgrounds
+- Use Pretendard at 700 weight for all button labels and nav text
+- Respect the dual-mode token system — always reference CSS custom properties (`--foreground-1`, `--background-1`) rather than hardcoded colours in themed contexts
+- Use 4px border-radius on buttons and toast components for brand consistency
+- Ensure scrollbars use the 8px border-radius thumb treatment
+
+### Don't
+- Mix hardcoded hex literals in themed components — breaks dark mode
+- Use border-radius values other than 4px (buttons), 8px (scrollbar/card accent), or 50% (circular badges) without design intent
+- Replace Pretendard with a generic sans-serif — the Korean glyph quality matters for this audience
+- Use purple accent on disabled states — disabled buttons must use `#EEEEEE` / `#D0D0D0`
+- Increase font-weight above 700 — the scale tops out here in the design system
+
+## 8. Responsive Behavior
+
+- Desktop (>1280px): Full horizontal nav with 50px side padding; wide carousels; large hero at 51.375em height; font-size calculated from 1920px reference width
+- Tablet (768px–1024px): Nav collapses to mobile; layout adapts fluid grids; hero resizes
+- Mobile (≤480px): Font-size recalculated from 360px reference width via `calc(16vw / 360 * 100)`; mobile-specific image proportions; thumbnail grids shift to 2-column
+- Touch devices: `-webkit-tap-highlight-color: transparent`; `touch-action: pan-y` on sliders; `maximum-scale=1` in viewport to prevent iOS zoom
+
+## 9. Agent Prompt Guide
+
+When generating Laftel-style UI:
+- **Palette:** primary = `#816BFF`; slight surface = `#F0EDFF`; deep dark = `#121212`; toast dark = `#242537`
+- **Buttons:** 4px radius, 48px (sm) or 56px (md) height, font-weight 700, Pretendard
+- **Mode:** always implement both light and dark variants via CSS custom properties
+- **Typography:** Pretendard, 16px base, scale: 12/13/14/16/18/20/24/28/32/40px
+- **Transitions:** colour changes at 0.4s, opacity/transform at 0.2s ease
+- **Skeleton:** shimmer gradient from `--background-3` to `--background-1` at 1.5s linear infinite
+- **Layout:** breakpoints at 480/768/1024/1280px; horizontal padding 50px desktop, fluid below
+
+## 10. Voice & Tone
+
+**Three adjectives:** Fan-fluent, warm-direct, quietly authoritative
+
+| Dimension | Do | Don't |
+|---|---|---|
+| Register | Speak as a knowledgeable fellow fan ("덕후") | Sound like a corporate broadcast | 
+| Sentence length | Short, punchy; one idea per sentence | Long nested clauses |
+| Vocabulary | K-anime vernacular where natural; plain Korean elsewhere | Jargon-heavy or overly formal keigo-style |
+| Punctuation | Light use of `:D` emoticons in taglines only | Exclamation marks on every line |
+
+**Voice samples (illustrative):**
+- *Illustrative:* "세상 모든 애니를 라프텔에서 :D" — the brand's own App Store tagline; warm, inclusive, fan-to-fan energy.
+- *Illustrative:* "추억의 애니부터 분기별 신작까지, 무제한 스트리밍 가능한 곳은 오직 라프텔." — confident authority without boasting; the "only Laftel" claim lands as fact, not hype.
+- *Illustrative:* "뭘 볼지 모를 땐, 덕후가 직접 엄선한 애니 명작들을 시청!" — peer credibility; the recommendation comes from fans, not algorithms.
+
+## 11. Brand Narrative
+
+Laftel was founded in October 2014 by Kim Beom-jun, a Yonsei University student who saw that Korea's vast appetite for Japanese animation was being served almost entirely by illegal download sites. The name "라프텔(Laftel)" is a play on "마지막 화까지 봤다" — "I watched all the way to the last episode" — enshrining the complete, satisfying anime experience in the brand itself. The service launched streaming in May 2017, building on a personalization-first model: new users rate a set of anime to calibrate their taste, and the platform surfaces recommendations through both AI-driven signals and hand-curated selections by in-house "덕후" (hardcore fans).
+
+In 2019 Ridi, Korea's leading digital content platform, acquired Laftel, bringing engineering scale and content licensing resources. In November 2022 an Aniplus-led consortium (Aniplus — Korea’s largest anime broadcaster — with Keistone Partners) acquired a controlling 87.75 % stake, giving Laftel deeper ties to broadcast rights and a clearer path to simulcast programming. Through each ownership transition the product's core mission remained stable: make legal anime viewing so convenient and affordable that piracy becomes the inferior choice.
+
+Today Laftel offers SVOD (unlimited streaming), TVOD (pay-per-episode rental/purchase), and AVOD (ad-supported free tier), available across web, iOS, Android, smart TV, and Chromecast. The Laftel Store extends the brand into anime merchandise, while original productions — including webtoon adaptations like "Super Secret" — signal ambitions beyond licensing.
+
+## 12. Principles
+
+1. **Legal first, fan always.** Every content deal is a legitimate contract; the product's legitimacy is a brand promise, not just a legal formality. *UI implication:* never use dark-pattern flows to upsell; membership upgrade prompts must be clear and skippable.
+
+2. **Personalization over browsing.** The preference-test onboarding and tag-based discovery are not features — they are the product. *UI implication:* recommendation surfaces should occupy prime real estate and update dynamically; generic "Popular" lists are a fallback, not the default.
+
+3. **Complete the series.** The name encodes the ideal outcome: watch every episode. *UI implication:* auto-play next episode is on by default; progress tracking, episode skips (OP/ED), and continue-watching rails are first-class features.
+
+4. **Fan credibility at every touch-point.** Editorial selections are attributed to "덕후" curators, not anonymous algorithms. *UI implication:* show curator handles or "staff pick" labels on themed collections; avoid anonymous "Recommended for you" copy.
+
+5. **Dual-mode comfort.** Fans watch at night; the dark theme must be as polished as the light theme. *UI implication:* all design tokens must resolve correctly in both modes; never hard-code colours in theme-sensitive components.
+
+## 13. Personas
+
+*Illustrative — Classic Fan (클래식 덕후):* Tomoyuki, 32, IT engineer in Seoul. Has watched anime since high school; wants a reliable legal home for classics (2000s titles) that free-tier competitors don't carry. Values breadth of catalog and tag-based search. Pays for the annual plan without hesitation.
+
+*Illustrative — Seasonal Watcher (분기 팔로워):* Ji-yeon, 24, university student. Follows 3–5 simulcast series each season. She checks Laftel every Monday for the latest episode. Skips OP/ED religiously. Sensitive to price; on the base plan, occasionally upgrades for a single season.
+
+*Illustrative — New Discoverer (입문자):* Soo-min, 19, high school senior whose friends are into anime. Took the preference quiz and got hooked on a romance series. Mostly watches on mobile; uses the free AVOD tier but nudgeable toward membership via free-trial CTA.
+
+*Illustrative — Goods Fan (굿즈 덕후):* Mi-rae, 28, designer. Subscribes mainly to access Laftel Store drops and exclusive merch. Browses the store tab weekly. For her, the streaming subscription is a loyalty perk on top of merchandise access.
+
+## 14. States
+
+- **Empty (no history):** Show the preference quiz CTA prominently — "어떤 애니를 좋아하세요? 취향 테스트로 시작해요" with a primary purple button; no blank grid.
+- **Loading / Streaming buffer:** Purple spinner (32×32px, `#816BFF`, stroke-dasharray animated at 1.4s ease-in-out infinite) centered in the player.
+- **Skeleton:** Shimmer gradient tiles (`linear-gradient(to right, --background-3 0%, --background-1 25%, --background-3 50%)`) at 1.5s linear infinite in place of thumbnails and text rows.
+- **Error — Network:** Inline message "잠시 후 다시 시도해 주세요" with a secondary retry button (slight variant); red 300 (`#F16361`) icon accent.
+- **Error — Unlicensed Content:** Overlay with dim-1 backdrop (`rgba(0,0,0,0.5)`) and a locked-icon illustration; "이 작품은 현재 지역 서비스 불가" copy; no CTA escalation.
+- **Success — Subscription:** Toast notification slides up from bottom center: dark background (`#000000` light / `#242537` dark), white text, 4px radius, 0.2s ease slide + fade; auto-dismisses after ~3s.
+- **Disabled:** Buttons use `#EEEEEE` background, `#D0D0D0` text; cursor: default; no hover effect.
+- **Offline / Download available:** Download badge in purple; offline indicator swaps to muted foreground-3 (`#8A8A8A`).
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- Micro (state toggle, colour): 200ms
+- Short (slide-in, fade): 400ms  
+- Medium (skeleton shimmer): 1400ms–1500ms (loop)
+
+**Easing:**
+- Default transitions: `ease` (cubic-bezier(0.25, 0.1, 0.25, 1))
+- Spinner stroke animation: `ease-in-out` at 1.4s infinite
+- Skeleton shimmer: `linear` at 1.5s infinite
+- Toast slide: `ease` on both `opacity` and `transform`
+
+**Rules:**
+- Colour and background-colour transitions run at 0.4s (`transition:color 0.4s`, `transition:background-color 0.4s,box-shadow 0.4s`) for interactive elements
+- Opacity and positional transforms run at 0.2s ease for overlays and toasts
+- Never animate layout-affecting properties (width, height) on the main content grid — use opacity/transform only
+- Skeleton shimmer uses `background-size: 200% 100%` sweep; clip-path masks define thumbnail shapes

package/web/references/lezhin/DESIGN.md

@@ -0,0 +1,301 @@
+---
+id: lezhin
+name: "Lezhin Comics"
+country: KR
+category: consumer-tech
+homepage: "https://www.lezhin.com"
+primary_color: "#eb0014"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=lezhin.com&sz=256"
+verified: "2026-06-03"
+omd: "0.1"
+---
+
+# Lezhin Comics
+
+Korea's first premium webtoon platform — bold, content-first, and unapologetically direct.
+
+## 1. Visual Theme & Atmosphere
+
+Lezhin Comics presents a dark, immersive canvas that keeps the spotlight firmly on cover art and episode thumbnails. The interface uses a deep near-black base (`#111115`) punctuated by a single vivid crimson (`#eb0014`) that signals every interactive action — from primary buttons to the switch-selected state and the badge on adult content. Grey neutrals (`#e9e9ec` border-muted through `#09090b` ink-black) form a tight tonal ladder, producing clean hierarchy without decorative flourish. Content grids are tight and image-led; typography is set in Pretendard for sharp legibility in Korean and Latin. The overall atmosphere is premium but unadorned — a platform confident that its 8,000+ titles speak louder than chrome.
+
+## 2. Color Palette & Roles
+
+- **Brand Red:** `#eb0014` — primary CTA buttons, state-switch-selected, state-form-bg-selected, badge
+- **Red Hover:** `#ff5254` — primary button hover state
+- **Red Focus/Dark:** `#c40017` — badge background, button focus/active state
+- **Ink Black:** `#111115` — inverted background, text-default, icon-default
+- **Deep Dark:** `#09090b` — dark-strong surface
+- **Dark Charcoal:** `#222225` — secondary button background, border-default
+- **Soft Black:** `#36363a` — text-soft, icon-soft
+- **Mid Grey:** `#6f6f77` — text-subtle, icon-subtle
+- **Muted Grey:** `#a1a1a9` — text-muted, icon-muted, placeholder
+- **Border Muted:** `#e9e9ec` — card borders, dividers
+- **Surface Muted:** `#f4f4f5` — background muted, disabled button, skeleton base
+- **White:** `#ffffff` — default background (light), text-inverted
+
+## 3. Typography Rules
+
+- **Primary typeface:** Pretendard Variable → Pretendard → -apple-system → Noto Sans KR → Malgun Gothic → sans-serif
+- **Scale:** 10 / 12 / 13 / 14 / 15 / 16 / 17 / 18 / 20 / 24 / 28 / 32 / 36 / 40 / 56 / 80px (mapped via `--size-3xs` through `--size-10xl`)
+- **Body default:** 16px / weight 400 (regular)
+- **Caption / metadata:** 12–13px / weight 400
+- **Label / UI text:** 14px / weight 500 (medium) or 600 (semibold)
+- **Button labels:** 14px (small/medium) or 16px (large) / weight 600
+- **Section headers:** 18–24px / weight 700
+- **Font weights available:** 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
+- **Line height:** 1.5 for body; 1.35–1.4 for compact UI labels; `line-height: 100%` for buttons
+- **Letter spacing:** −0.28px to −0.36px for tighter display text in Korean
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (lzButtonPrimary / lzBtn--filled_red)**
+- Background: `#eb0014`
+- Text: `#ffffff`
+- Border: none
+- Radius: 4px
+- Height: 48px
+- Padding: 0 12px
+- Font: 14px / 600
+
+**Primary Large**
+- Background: `#eb0014`
+- Text: `#ffffff`
+- Border: none
+- Radius: 4px
+- Height: 56px
+- Padding: 0 16px
+- Font: 16px / 600
+
+**Secondary (lzButtonSecondary / lzBtn--filled_bw)**
+- Background: `#222225`
+- Text: `#ffffff`
+- Border: none
+- Radius: 4px
+- Height: 48px
+- Padding: 0 12px
+- Font: 14px / 600
+
+**Tertiary (lzButtonTertiary / lzBtn--filled_grey)**
+- Background: `#f4f4f5`
+- Text: `#36363a`
+- Border: none
+- Radius: 4px
+- Height: 48px
+- Padding: 0 12px
+- Font: 14px / 600
+
+**Outlined (lzBtn--outlined)**
+- Background: transparent
+- Text: `#36363a`
+- Border: 1px solid `#a1a1a9`
+- Radius: 4px
+- Height: 40px
+- Padding: 0 20px
+- Font: 14px / 600
+
+### Cards
+
+**Comic Thumbnail Card (lzCard)**
+- Background: `#f4f4f5`
+- Border: 1px solid `rgba(17,17,21,0.1)`
+- Radius: 4px
+- Aspect ratio: 2/3 (portrait)
+
+**Circle Thumb Card (lzCardCircleThumb)**
+- Radius: 9999px
+- Border: tracked ring at 3px stroke
+
+### Chips (lzChip)
+
+**Default Chip**
+- Background: transparent
+- Text: `#6f6f77`
+- Border: 1px solid `#e9e9ec`
+- Radius: 999px
+- Padding: 0 12px
+- Height: 32px
+
+**Selected Chip**
+- Background: `rgba(255,82,84,0.15)`
+- Text: `#c40017`
+- Border: 1px solid transparent
+- Radius: 999px
+
+### Tabs (lzTab)
+
+**Default Tab**
+- Background: `rgba(17,17,21,0.04)`
+- Text: `#111115`
+- Border: 1px solid `rgba(17,17,21,0.04)`
+- Radius: 4px
+- Padding: 0 12px
+- Height: 36px
+
+**Selected Tab**
+- Background: `rgba(17,17,21,0.95)`
+- Text: `#ffffff`
+- Radius: 4px
+
+### Dropdown / Select (lzSelectPaper)
+
+**Dropdown Container**
+- Background: `#ffffff`
+- Border: 1px solid `#f4f4f5`
+- Radius: 4px
+- Padding: 12px 0
+
+---
+**Verified:** 2026-06-03
+**Tier 1 sources:** https://www.lezhin.com (homepage HTML + 5 CSS bundles: 035ea059869bfd89.css, 9161416b11db8c9e.css, 06e1ad77298be69d.css, 0427f27bd4442fbd.css, 895581ecc829564e.css), https://about.lezhin.com/en (corporate brand/about page)
+**Tier 2 sources:** getdesign.md/lezhin — NOT LISTED (no data). refero — not checked (KR brand, typically no result).
+**Conflicts unresolved:** none
+
+## 5. Layout Principles
+
+Lezhin uses a fluid column-grid whose gutter and column count adapt per viewport: 7 columns on desktop (≥ 961px), 4 columns on tablet (640–960px), 3–4 columns on mobile (≤ 639px). Card widths are computed via `calc((100% - (col-1) × gap) / col)` with 4px or 8px gutters on dense grids and 12–16px gutters on sparser layouts. The horizontal page max-widths are 1036px at 961–1280px breakpoint and 1212px at 1281px+. Horizontal scroll snap is used for compact-carousel sections (snap-scroll list) on mobile. All interactive regions maintain at minimum 36px touch targets.
+
+## 6. Depth & Elevation
+
+Elevation is expressed through the shadow token ladder:
+
+- **Level 1 – Subtle:** `rgba(17,17,21,0.06)` — hero banner ambient, near-flat cards
+- **Level 2 – Soft:** `rgba(17,17,21,0.08)` — dropdown menus (lzSelectPaper: `0 2px 12px 0 rgba(17,17,21,.08)`)
+- **Level 3 – Medium:** `rgba(17,17,21,0.25)` — drawers, floating elements
+- **Level 4 – Strong:** `rgba(17,17,21,0.30)` — modals
+- **Level 5 – Bold:** `rgba(17,17,21,0.50)` — overlay scrim base
+- **Thumbnail shadow:** `rgba(17,17,21,0.20)` inset on cover art
+- **Dark overlay (full scrim):** `rgba(17,17,21,0.85)` — background-overlay-bold
+
+Dark mode uses the same numeric scale but on the dark surface (`#111115`), so card depth reads via subtle border differences (`--border-muted: #222225`) rather than box-shadow contrast.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use `#eb0014` exclusively for the single highest-priority CTA per screen
+- Apply Pretendard (or Noto Sans KR fallback) — never substitute decorative display fonts
+- Follow the exact button-height ladder: 28px (xs) / 40px (sm) / 48px (md) / 56px (lg)
+- Use the pill chip (`border-radius: 999px`) for filterable genre or tag selectors
+- Maintain 4px radius on cards and rectanglular buttons for the characteristic sharp-yet-soft look
+- Use the skeleton shimmer (`lzSkeleton` — 1.8s ease-in-out infinite) during async content loads
+- Reserve the AI gradient (`#4CECBE → #00BFE2 → #007EE0`) only for AI-feature UI accents
+
+### Don't
+- Don't use red for destructive warnings — Lezhin's red is a brand/action signal, not a danger signal
+- Don't mix primary and secondary CTAs at equal visual weight on the same card or row
+- Don't apply `border-radius` larger than 12px on rectangular interactive components (chips and avatars are exempt)
+- Don't place light-mode text (`#111115`) directly on the dark surface (`#111115`) — toggle to inverted tokens
+- Don't hard-code pixel color values — always reference the semantic CSS variable so dark-mode tokens apply correctly
+- Don't add decorative illustration or icon embellishments inside buttons
+
+## 8. Responsive Behavior
+
+Lezhin uses three primary breakpoints:
+
+- **Mobile** `max-width: 960px` — single-column flow, horizontal-scroll carousels, paddings collapse to 8–16px, card grids shift to 3–4 columns
+- **Tablet** `min-width: 640px and max-width: 960px` — 4–6 column grids, moderate gutters (12–16px), nav bar adjusts to compact mode
+- **Desktop** `min-width: 961px` — 7-column grids, 24–32px gutters, full GNB nav, fixed sidebar elements appear
+
+Additional breakpoints handle edge cases: `max-width: 639px` (small mobile, 3-col grids), `max-width: 320px` (reduced padding to 8px), `min-width: 1281px` (max-width: 1212px container). Components observe `prefers-color-scheme: dark` via 53 scoped media queries, switching semantic tokens to their dark-palette counterparts without changing the component markup.
+
+## 9. Agent Prompt Guide
+
+When building Lezhin-styled UI:
+
+- **Color:** Treat `#eb0014` as the single brand accent; use it on the primary button and selected-state only. All other UI operates on the grey ladder (#111115 → #e9e9ec → #ffffff).
+- **Typography:** Set the font stack to `Pretendard Variable, Pretendard, -apple-system, Noto Sans KR, sans-serif`. Use 14px/600 for buttons, 16px/400 for body copy, 12px/400 for metadata.
+- **Radius:** Default to 4px on buttons and cards. Use 999px for pills (chips, avatars). Avoid values above 12px on rectangular elements.
+- **Spacing:** Prefer 4/8/12/16/20/24px spacing increments. Card gutters are 4px (dense) or 8–12px (standard).
+- **Dark mode:** Swap `--bg-default` to `#111115`, `--text-default` to `#ffffff`, border tokens adjust automatically when referencing CSS variables.
+- **Animation:** Transitions are `0.2s ease-in-out` for background-color and borders; `0.25s linear` for transforms. Skeleton is `1.8s ease-in-out infinite`.
+- **States:** Disabled buttons carry `rgba(255,82,84,0.2)` background. Focus states use `#9e0018` for primary.
+
+## 10. Voice & Tone
+
+**Brand voice:** Direct, confident, candid
+
+The Lezhin voice is **솔직한** (honest/frank) — it does not hedge or oversell. Copy leans toward short declarative punches rather than elaborate prose. It speaks to adult readers who know what they want and appreciate the platform getting out of the way.
+
+| Do | Don't |
+|----|-------|
+| Use short, punchy sentences | Use vague or corporate euphemisms |
+| Be direct about content types | Sanitize mature topics with excessive euphemism |
+| Address readers as adults who make their own choices | Be paternalistic or add unsolicited warnings |
+| Use Korean naturally (informal register is fine) | Over-translate Korean idioms into stiff English equivalents |
+| Let the content title and art do the heavy lifting | Over-describe what readers can see for themselves |
+
+**Voice samples (illustrative):**
+- *Illustrative:* "솔직한 재미 대폭발 — 당신이 찾던 진짜 웹툰." (Honest fun explosion — the real webtoon you've been looking for.)
+- *Illustrative:* "매일 업데이트. 오늘 뭐 읽을까?" (Updated every day. What are you reading today?)
+- *Illustrative:* "재미있는 만화를, 쉽게 결제해서, 편하게 보게 하자." (Let's make great comics easy to buy and comfortable to read.)
+
+## 11. Brand Narrative
+
+Lezhin Entertainment was founded in April 2012 by Han Hee-sung (the blogger known as "lezhin") and developer Kwon Jung-hyuk, launching its Android app on June 7, 2013. The company was acquired by Seoul-listed KidariStudio in December 2020. The platform was built on a simple conviction: great comics deserve frictionless commerce. By introducing a coin-based micro-payment system at a time when most Korean webtoon platforms relied on ad revenue, Lezhin created South Korea's first premium webtoon marketplace — positioning itself as the platform for creators who wanted to earn and readers who wanted more.
+
+The company's governing mission is that "stories can make the world a better place." Lezhin Entertainment operates as a global content company, running the Lezhin Comics platform across Korea, the United States, and Japan. Its catalogue spans over 8,000 titles, and beyond reading, Lezhin Studio adapts webtoon IPs into films, dramas, and games while the Lezhin Shop brings physical merchandise to fans who want to hold their favourite stories in their hands.
+
+The brand's tagline — "솔직한 재미 대폭발" (honest fun explosion) — encapsulates the operating philosophy: candid about content, direct about pricing, and unapologetically focused on reader satisfaction. Lezhin's four stated values — duty and self-reliance, mutual respect, customer satisfaction, and innovation — underpin both its creator relationships and its product decisions, from daily episode release schedules to the coin economy.
+
+## 12. Principles
+
+1. **Reader first, always.** Every service decision begins with the question of how readers discover and enjoy content. *UI implication:* Thumbnail art is the dominant visual element; interface chrome is minimal so it never competes with the cover image.
+
+2. **Honest commerce.** Lezhin pioneered transparent paid webtoons. The pricing model is explicit — coins, costs, and episode counts are surfaced without dark patterns. *UI implication:* Coin balances and episode prices are always visible in context before purchase; no hidden upsells.
+
+3. **Candid about content.** The platform serves adult audiences without euphemism. *UI implication:* Genre and content-type badges (including adult tags) are shown directly on thumbnail cards rather than hidden behind additional taps.
+
+4. **Data and intuition in balance.** The founding team values "2% crazy" creative instinct alongside clear analytical thinking. *UI implication:* The platform ships experimental features (AI search, Snack short-drama) as clearly-labelled distinct experiences rather than silently folding them into the main flow.
+
+5. **Global through localisation.** Lezhin operates dedicated services for KR, US, and JP markets with locale-specific content curation rather than a one-size-fits-all approach. *UI implication:* Typography stacks, locale date formats, and content catalogues adapt per region rather than defaulting to a single language baseline.
+
+## 13. Personas
+
+*Illustrative — for design scenario use only:*
+
+**The Weekend Binge Reader** — A Korean professional in their late 20s who subscribes to Lezhin Premium. They open the app on Friday night, scan the "New Updates" carousel, and burn through three episodes of their favourite romance series back-to-back. They top up coins proactively rather than per-episode. For them, friction = bad; they want zero loading states and instant next-episode transitions.
+
+*Illustrative — for design scenario use only:*
+
+**The Genre Explorer** — A 32-year-old who discovered Lezhin through a recommendation for a specific genre (BL, thriller, or isekai). They use the tag-filter chip system heavily and bookmark titles for later. They read on both mobile and desktop and expect the reading experience to be consistent across devices.
+
+*Illustrative — for design scenario use only:*
+
+**The Loyal Creator Fan** — A college student who follows a specific artist and gets notified for every update. They comment frequently using the page-stamp system and engage with the creator's social feeds. Price sensitivity is moderate; they will spend coins on a title they love but are cautious about new unfamiliar series.
+
+*Illustrative — for design scenario use only:*
+
+**The International Reader** — An English-speaking reader in the US or Japan accessing Lezhin via lezhinus.com or the JP equivalent. They tend toward licensed titles with professional translation. They are brand-new to the coin system and need clear onboarding. The UI's Korean-first defaults (label copy, currency display) can create friction if not properly localised.
+
+## 14. States
+
+- **Empty (no content):** Shows the `lzEmpty` component with an illustrated book image (96×140px from `ccdn.lezhin.com/files/assets/img/empty-book-lt.png`); title in `#36363a` at 18px / weight 500; subtitle in `#6f6f77` at default size / weight 400
+- **Loading (skeleton):** `lzSkeleton` — background `#f4f4f5`; shimmer overlay `hsla(0,0%,100%,0.6)` animated via `linear-gradient(120deg, transparent 35%, shimmer 50%, transparent 65%)` at 1.8s ease-in-out infinite; dark-mode variant uses `#3a3b3d` base and `hsla(0,0%,100%,0.08)` shimmer
+- **Error (network/500):** `lzError` component centered at max-width 640px; title `#111115` at 34px / weight 500 (desktop) or 24px (mobile); error illustration displayed at `width: auto; height: 180px`; home button uses primary red CTA
+- **Error (expired/access denied):** Same `lzError` structure; uses specific expired-state illustration (132px wide); body text in `#6f6f77` at 14px; action CTA in red primary button
+- **Success:** State-form-bg-selected `#eb0014` applied to radio/checkbox fill; switch tracks when selected use `#eb0014`; snackbar uses dark `#2f353e` background with `#ffffff` text and blue-tinted link `#2992d6`
+- **Skeleton (card-specific):** Comic card background holds `#f4f4f5` while image lazy-loads; once loaded, image covers the background fully with `object-fit: cover`
+- **Disabled:** Primary button background `rgba(255,82,84,0.2)` with `#ffffff` text; tertiary button background `#fafafa` with `#dadadd` text; pointer-events none applied via attribute `[disabled]`
+
+## 15. Motion & Easing
+
+**Duration scale:**
+- **Fast (micro-interactions):** 125ms — sort-arrow expand/collapse
+- **Standard:** 200ms — button background/border transitions, tab color, opacity fades (snackbar)
+- **Deliberate:** 250ms — slide-in/slide-out transforms (drawer, sheet transitions), switch track background, skeleton reveal height
+
+**Easing:**
+- `ease-in-out` — background-color and border transitions on buttons and tabs
+- `linear` — switch thumb position and track color
+- `ease-in-out` — skeleton shimmer sweep (1.8s)
+
+**Rules:**
+- Button hover/focus: 200ms ease-in-out on `background-color` and `border`
+- Drawer / bottom-sheet: `transform 250ms ease-in-out, opacity 250ms ease-in-out` — enters from below or from the left
+- Snackbar: `opacity 200ms` fade-in / fade-out; no transform movement
+- Skeleton: `translateX(-100% → 100%)` over 1.8s ease-in-out infinite; never use shorter durations as it feels cheap against dense content grids
+- Switch: `250ms linear` for track background, `250ms linear` for circle position — simultaneous, never staggered
+- AI gradient divider (search bar): `translateX` at 3s ease-in-out infinite — slower to feel ambient, not urgent

package/web/references/lunit/DESIGN.md

@@ -10,6 +10,25 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=lunit.io&sz=256"
 verified: "2026-05-14"
 omd: "0.1"
+
+## 16. Do's and Don'ts
+
+### Do
+- Set every section, card, image, input, and footer to `border-radius: 0` and round only the single primary CTA pill to `100px`, honoring the binary radius thesis
+- Pair ClashGrotesk for headings and Lexend for body, keeping both at LIGHT weights — H1 at 78px/84px weight 400, body at 18.4px weight 300 — so authority reads through size and air, not heft
+- Fill the primary marketing CTA as a black pill (`#000000` background, `#ffffff` label) and withhold the signature blue `#1032cf` from primary actions
+- Set body ink in warm-cool gunmetal `#232f32` and hero H1 in near-black `#151515`, never pure `#000`, for standing copy
+- Build depth through full-bleed band switching (white canvas → black band → off-white footer `#eff0f4`) with `box-shadow: none` everywhere
+- Reserve the signature blue `#1032cf` (bright sibling `#2a4eef`) for system, cookie, hover, and dark-band moments, and use AOS scroll-reveal fades as the only motion
+
+### Don't
+- Apply mid-range radii like 4px, 6px, 8px, 12px, or 16px anywhere, or round cards, images, or surfaces that are not the primary action
+- Use the saturated signature blue `#1032cf` on the primary CTA — the brand-action color is black, and blue is deliberately withheld
+- Reach for bold or semibold typographic weights to add confidence; LIGHT weight is the rule across all heading levels
+- Add drop shadows or floating card elevation — depth comes from band switching, not floating objects
+- Add hero video autoplay, parallax, or animated stat counters on the `10,000+` band; keep motion to low-amplitude AOS fades
+- Introduce stock smiling-team photography, hex-mesh/circuit-board/neural-net cliché, multi-accent green-blue-orange palettes, exclamation marks, or emotive verbs like 'transform lives'
+
 ---
 
 # Design System Inspiration of Lunit