oh-my-design-cli 1.5.0 → 1.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oh-my-design-cli",
-  "version": "1.5.0",
-  "description": "Bootstrap oh-my-design skills + agents into your project. After install, talk to your AI coding agent in natural language \u2014 no other CLI commands.",
+  "version": "1.5.1",
+  "description": "Bootstrap oh-my-design skills + agents into your project. After install, talk to your AI coding agent in natural language — no other CLI commands.",
   "type": "module",
   "bin": {
     "oh-my-design": "dist/bin/oh-my-design.js",
@@ -73,4 +73,4 @@
     "typescript": "^5.8.2",
     "vitest": "^3.1.1"
   }
-}
+}

package/skills/omd-kr-writer/SKILL.md

@@ -87,7 +87,7 @@ oh-my-design 블로그의 한국어 본문을 **Toss Tech 디자인 카테고리
 oh-my-design용 변형:
 ```
 안녕하세요. oh-my-design을 만드는 [이름]이에요.
-107개 브랜드의 디자인 시스템을 라이브로 캡쳐해서 카탈로그로 모으고 있어요.
+100개가 넘는 브랜드의 디자인 시스템을 라이브로 캡쳐해서 카탈로그로 모으고 있어요.
 오늘은 그 중 [브랜드]를 들여다본 이야기를 나누려고 해요.
 ```
 

package/web/references/17live/DESIGN.md

@@ -0,0 +1,424 @@
+---
+id: 17live
+name: 17LIVE
+country: TW
+category: consumer-tech
+homepage: "https://17.live"
+primary_color: "#FF4F6E"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=17.live&sz=128"
+verified: "2026-05-19"
+omd: "0.1"
+---
+
+# Design System Inspiration of 17LIVE
+
+## 1. Visual Theme & Atmosphere
+
+17LIVE is one of the world's largest live-streaming and interactive-entertainment platforms — a place where a "LIVER" (17LIVE's word for a livestreamer) broadcasts to fans who react in real time with virtual gifts, fan-club subscriptions, and chat. Its design system is built for the energy and intimacy of live performance, and the atmosphere is **dark-stage with a hot-pink spotlight**. The interface defaults to dark surfaces (`#121212` / `#1C1C1E`), the way a streaming or video app does — because the content is video, video looks best framed in dark, and a dark UI keeps a phone-screen glowing in a bedroom at midnight from blowing out the room. Against that dark stage, a vivid coral-pink (`#FF4F6E`) is the brand's signature: it lights up the logo, the "GO LIVE" button, the gift-send action, the follow state — every moment of connection and transaction.
+
+The emotional register is **playful, social, and immediate**. Where a utility app is calm, 17LIVE is animated: gift animations fly across the stream, hearts float up the screen, level-up effects burst. The pink is warm and youthful, signaling fun and human connection rather than cold tech. Typography is system-stack and locale-aware — Latin sans leading, with Traditional Chinese (`PingFang TC`, `Microsoft JhengHei`), Japanese, and other CJK fallbacks, because 17LIVE's two largest markets are Japan and Taiwan and it operates across 150+ countries. Hierarchy is weight-driven and compact; the UI is chrome around video, so it stays out of the way until a moment of interaction lights up pink.
+
+What distinguishes 17LIVE from a generic dark-mode app is that **its design is event-driven and celebratory**. The system is not a static catalog; it is a live floor where reactions, gifts, and rankings animate constantly. Pink is the color of every social action — go live, send gift, follow, join fan club — and the dark stage exists to make both the video and the pink pop.
+
+**Key Characteristics:**
+- **Dark-stage default** (`#121212` / `#1C1C1E`) — video-first UI, content framed in dark
+- **Hot coral-pink (`#FF4F6E`)** as the brand + action color — logo, GO LIVE, gift, follow
+- System-stack, locale-aware typography (TC / JP / CJK fallbacks) — JP + TW are the largest markets
+- Playful, social, immediate register — gift animations, floating hearts, level-up bursts
+- Compact, weight-driven hierarchy — UI is chrome around the video stream
+- Vertical-video-first layout (mobile-native, portrait stream + overlay chrome)
+- Pink reserved for connection/transaction moments; dark neutral everywhere else
+- Bright accent secondaries for gamified status (gold for ranking, gradient effects for premium gifts)
+- Rounded, friendly geometry — pill follow buttons, soft cards, circular avatars
+- High motion budget on reactions, low motion on navigation chrome
+
+## 2. Color Palette & Roles
+
+> **Note:** Live computed-style verification was not completed this pass (the inspection browser session redirected unreliably; WebFetch surfaced only the tagline). Values below combine the brief-provided primary, 17LIVE's known dark-mode + hot-pink streaming identity, and conventional live-streaming-app roles. Hexes other than the primary are well-grounded approximations pending live re-inspection.
+
+### Primary (Brand / Action)
+- **17 Pink** (`#FF4F6E`): The signature brand + action color. Logo, "GO LIVE" button, gift-send, follow state, active tab, primary CTAs.
+- **Pink Pressed** (`#E8455F`): Darker press/hover state.
+- **Pink Tint** (`#FF4F6E1A`): Pink at ~10% — subtle highlight backgrounds, selected-row wash on dark.
+
+### Surface (Dark Stage)
+- **Stage Black** (`#121212`): Primary app background — the dark stage.
+- **Surface 1** (`#1C1C1E`): Cards, sheets, raised panels.
+- **Surface 2** (`#2C2C2E`): Higher-elevation panels, input fields, chips on dark.
+- **Overlay Scrim** (`rgba(0,0,0,0.5)`): Gradient scrim over video so overlay chrome stays legible.
+
+### Text (on dark)
+- **Text Primary** (`#FFFFFF`): Headings, usernames, primary labels.
+- **Text Secondary** (`rgba(255,255,255,0.7)`): Secondary labels, captions.
+- **Text Tertiary** (`rgba(255,255,255,0.45)`): Metadata, timestamps, viewer counts.
+- **Text Disabled** (`rgba(255,255,255,0.3)`): Disabled labels.
+
+### Accent / Gamified Status
+- **Rank Gold** (`#FFC83D`): Leaderboard #1, top-fan crowns, premium status — the status color.
+- **VIP Purple** (`#8B5CF6`): Premium fan-club / VIP tier accents and gradient effects.
+- **Gift Gradient**: Coral→magenta→gold gradients for premium gift animations (`#FF4F6E` → `#FF2D8E` → `#FFC83D`).
+
+### Semantic
+- **Success / Live** (`#27C76F`): "LIVE" indicator dot, success states, online presence.
+- **Warning** (`#F5A623`): Soft warnings, low-balance prompts.
+- **Error / Danger** (`#FF453A`): Errors, destructive actions, report flows.
+
+### Borders & Dividers
+- **Divider** (`rgba(255,255,255,0.08)`): Hairline separators on dark surfaces.
+- **Border Subtle** (`rgba(255,255,255,0.15)`): Outlined buttons/chips on dark.
+
+## 3. Typography Rules
+
+### Font Stack (locale-aware, inferred)
+| Locale | Stack |
+|---|---|
+| Default | `-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif` |
+| Traditional Chinese | `… "PingFang TC", "Microsoft JhengHei", sans-serif` |
+| Japanese | `… "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif` |
+| Simplified Chinese | `… "PingFang SC", "Microsoft YaHei", sans-serif` |
+
+No custom display typeface — system stacks render natively across JP/TW and keep mobile performant.
+
+### Weights
+- **700 (Bold)**: LIVER names, key labels, CTAs, ranking numbers, gift values.
+- **600 (Semibold)**: Tab labels, section headers, active states.
+- **400 (Regular)**: Body, chat messages, captions, metadata.
+
+### Size Scale (px, inferred — mobile-first)
+| Use | Size |
+|---|---|
+| Micro / viewer count | `11px` |
+| Caption / chat meta | `12px` |
+| Chat message / body | `14px` |
+| LIVER name / list title | `15–16px` |
+| Section heading | `18–20px` |
+| Hero / spotlight | `22–28px` |
+
+### Conventions
+- **Compact, mobile-native sizing** — the UI is overlay chrome on video, so type stays small and legible against the scrim.
+- **Weight + the pink accent** drive hierarchy; the brand rarely uses huge display type because the video is the content.
+- **Numbers are gamified** — viewer counts, gift totals, ranks render bold, often with gold for top status.
+- **Text over video** always sits on a gradient scrim or has a subtle shadow for legibility.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (GO LIVE / Action)**
+- Background: `#FF4F6E`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: `24px` (pill)
+- Padding: `12px 24px`
+- Font: `16px` / `700`
+- Pressed: bg `#E8455F`
+- Use: "GO LIVE", primary CTAs, sign-up
+
+**Follow**
+- Background: `#FF4F6E` (not-following) → transparent + `1px solid rgba(255,255,255,0.3)` (following)
+- Text: `#FFFFFF` → `rgba(255,255,255,0.7)`
+- Radius: `16px` (pill)
+- Padding: `6px 16px`
+- Font: `14px` / `600`
+- Use: Follow / Following toggle on LIVER profiles and stream overlays
+
+**Secondary (Outlined on dark)**
+- Background: transparent
+- Text: `#FFFFFF`
+- Border: `1px solid rgba(255,255,255,0.3)`
+- Radius: `24px`
+- Padding: `12px 24px`
+- Font: `16px` / `600`
+- Use: Secondary actions, "Maybe later"
+
+**Gift (special)**
+- Background: gift gradient (`#FF4F6E` → `#FF2D8E`)
+- Text: `#FFFFFF`
+- Radius: `20px`
+- Use: Send-gift action — the highest-energy transaction button
+
+### Inputs
+
+**Default (on dark)**
+- Background: `#2C2C2E`
+- Text: `#FFFFFF`
+- Border: none (or `1px solid rgba(255,255,255,0.15)`)
+- Radius: `12px`
+- Padding: `12px 16px`
+- Placeholder: `rgba(255,255,255,0.45)`
+- Focus: `1px solid #FF4F6E`
+- Use: Search, login, profile editing
+
+**Chat input**
+- Background: `#2C2C2E` or translucent over video
+- Radius: `24px` (pill)
+- Trailing: pink send icon (`#FF4F6E`)
+- Use: Live-chat composer overlay on stream
+
+### Cards
+
+**Stream Card (discover grid)**
+- Background: image/video thumbnail with `rgba(0,0,0,0.5)` bottom gradient
+- Radius: `12px`
+- Overlay: LIVE badge top-left, viewer count, LIVER name + avatar bottom
+- Use: Discover/explore grid of live streams
+
+**Profile / List Card**
+- Background: `#1C1C1E`
+- Radius: `12px`
+- Padding: `12px`
+- Use: LIVER lists, ranking rows, fan-club cards
+
+### Badges & Chips
+
+**LIVE Badge**
+- Background: `#FF4F6E` or `#27C76F` dot + "LIVE"
+- Text: `#FFFFFF`
+- Radius: `4px`
+- Padding: `2px 6px`
+- Font: `11px` / `700`
+- Use: Live-now indicator on thumbnails
+
+**Rank Badge**
+- Background: `#FFC83D` (gold) for #1
+- Text: `#121212`
+- Radius: `50%` or `4px`
+- Use: Leaderboard / top-fan status
+
+**Avatar**
+- Radius: `50%`
+- Optional pink/gradient ring for live or VIP status
+- Use: LIVER and viewer avatars
+
+### Navigation
+- Bottom tab bar (mobile-native): Home / Discover / GO LIVE (center, pink) / Messages / Profile
+- Active tab: `#FF4F6E`; inactive: `rgba(255,255,255,0.45)`
+- Center GO LIVE is an elevated pink action
+
+## 5. Layout Principles
+
+### Structure
+- **Mobile / vertical-video first** — the canonical surface is a portrait phone screen with a full-bleed stream and overlay chrome
+- Discover = grid/feed of stream thumbnails; Stream view = full-bleed video + floating chat + gift rail + bottom action bar
+- Web/desktop is a secondary surface that frames the same dark-stage system
+
+### Spacing
+- 4/8px-based spacing scale, tight on overlay chrome
+- Safe-area-aware padding for notches and home indicators on the stream overlay
+
+### Density
+17LIVE is **medium density with high motion**. Overlay chrome is minimal and edge-anchored so the video breathes; lists and discover grids pack efficiently; the "noise" comes from animated reactions, not from static density.
+
+## 6. Depth & Elevation
+
+On a dark UI, elevation is communicated by **surface lightness steps** (`#121212` → `#1C1C1E` → `#2C2C2E`) and by scrims, more than by shadow.
+
+- **Bottom sheet / modal**: `#1C1C1E` surface rising over a `rgba(0,0,0,0.5)` scrim; soft top shadow
+- **Stream overlay chrome**: anchored to a bottom/top gradient scrim so it floats legibly over video
+- **Gift animations**: render in a top layer above all chrome
+- **Glow accents**: pink/gradient glows on live-avatar rings and premium gifts — the system's "lighting"
+
+### Z-Index (stream view)
+1. Video (base)
+2. Gradient scrims
+3. Chat + overlay chrome
+4. Gift/reaction animation layer (highest)
+
+## 7. Do's and Don'ts
+
+- **DO** default to the dark stage (`#121212`) — video looks best framed in dark and the UI stays out of the way.
+- **DON'T** use a light background for the streaming surface — it blows out late-night phone viewing and dilutes the video.
+- **DO** reserve pink (`#FF4F6E`) for connection/transaction — go live, send gift, follow, primary CTA.
+- **DON'T** paint neutral chrome pink. Pink reads as "an action / a moment" only because the stage is dark-neutral.
+- **DO** use pill geometry (16–24px radius) on buttons and circular avatars — friendly, social.
+- **DON'T** use sharp enterprise corners — they fight the playful register.
+- **DO** keep overlay text legible with gradient scrims or shadows over video.
+- **DON'T** let chrome cover the LIVER's face — anchor it to edges, keep the center clear.
+- **DO** spend the motion budget on reactions (gifts, hearts, level-ups) — that's the live energy.
+- **DON'T** animate navigation chrome with theatrics; tab/route motion stays quick and quiet.
+- **DO** use gold (`#FFC83D`) for ranking/status and green (`#27C76F`) for LIVE/online.
+- **DON'T** conflate the status colors with the pink action color.
+- **DO** use Traditional Chinese on TW surfaces and native CJK per market; never Simplified on TW.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Width | Behavior |
+|---|---|
+| Mobile `<768px` | Canonical surface — full-bleed vertical video, bottom tab bar, overlay chat/gift chrome |
+| Tablet `768–1024px` | Stream centers with side panels (chat / ranking) appearing |
+| Desktop `>1024px` | Stream center stage with persistent chat rail + gift panel + recommendations sidebar (Twitch-like three-zone layout) |
+
+### Touch & Mobile
+- Large tap targets (44px+); center GO LIVE elevated for thumb reach
+- Gift rail and chat composer are bottom-anchored within thumb zone
+- Swipe gestures to switch streams (feed-like) on mobile
+- Safe-area insets respected on overlay chrome
+
+### Media
+- Video full-bleed `object-fit: cover` on mobile, contained on desktop center stage
+- Thumbnails lazy-load; LIVE thumbnails may show a short motion preview on hover (desktop)
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand / action: 17 Pink (`#FF4F6E`); pressed `#E8455F`
+- Stage: `#121212`; surfaces `#1C1C1E` / `#2C2C2E`
+- Text on dark: white / `rgba(255,255,255,0.7)` / `rgba(255,255,255,0.45)`
+- Rank gold: `#FFC83D`; VIP purple: `#8B5CF6`
+- LIVE/success: `#27C76F`; error: `#FF453A`
+
+### Example Component Prompts
+- "Create a 17LIVE stream card: full-bleed thumbnail, 12px radius, bottom gradient scrim `rgba(0,0,0,0.5)`, LIVE badge top-left (`#FF4F6E`, white, 11px/700, 4px radius), viewer-count chip with eye icon, LIVER avatar (28px circle, pink ring) + name (15px/700 white) bottom-left."
+- "Build a 17LIVE Follow toggle: not-following = `#FF4F6E` bg, white text, 16px pill radius, 14px/600, padding 6px 16px; following = transparent + 1px solid rgba(255,255,255,0.3), text rgba(255,255,255,0.7)."
+- "Design a GO LIVE button: pink (`#FF4F6E`) pill, 24px radius, white 16px/700, padding 12px 24px. As the center bottom-tab action, elevate it slightly above the bar."
+- "Create a gift-send button: gradient `#FF4F6E → #FF2D8E`, 20px radius, white text + gift icon, the highest-energy transaction control. On send, trigger a top-layer gift animation."
+- "Build the stream overlay chat composer: pill input (`#2C2C2E`, 24px radius) over the video bottom scrim, placeholder rgba(255,255,255,0.45), trailing pink (`#FF4F6E`) send icon."
+
+### Iteration Guide
+1. **Dark stage default; pink is the action.** Never light-mode the streaming surface.
+2. **Pill geometry + circular avatars** — friendly and social.
+3. **Locale-aware system fonts** (JP + TW first-class). Never Simplified on TW.
+4. **Spend motion on reactions, not chrome.** Gifts/hearts/level-ups are the energy.
+5. **Keep overlay chrome edge-anchored** over scrims; never cover the LIVER's face.
+6. **Status colors are distinct:** gold = rank, green = LIVE, pink = action.
+7. **Numbers are gamified** — bold counts, gold for top status.
+
+---
+
+## 10. Voice & Tone
+
+17LIVE speaks like an upbeat host hyping the room — warm, encouraging, and celebratory, the voice of a platform whose whole premise is connection between a LIVER and their fans. The register is **playful and intimate**, leaning on second-person address and the platform's own vocabulary ("LIVER" for streamer, "GO LIVE", fan-club language). It is genuinely multilingual — Japanese and Traditional Chinese are the largest first-class voices, authored per market across 150+ countries, never machine-translated from one master. Copy celebrates moments (a new follower, a gift received, a fan-club join) without being saccharine, and keeps transactional flows (top-ups, gifting) clear and trustworthy because real money moves through them. The bilingual tagline "Live Streaming 直播互動娛樂平台" captures the positioning — interactive entertainment, live and social.
+
+| Context | Tone |
+|---|---|
+| Onboarding / hero | Inviting, energetic. `GO LIVE`, `Join the party`. Second-person, action-forward. |
+| CTAs | Imperative + warm. `Go Live`, `Send Gift`, `Follow`, `Join Fan Club`. |
+| Social events (follow / gift) | Celebratory micro-copy. `You're now following <LIVER>!`, `Gift sent — they felt that!`. Genuine, not corporate. |
+| Live chat / reactions | Casual, emoji-friendly (user territory), real-time. |
+| Transactions (coins / top-up) | Clear and trustworthy — exact amounts, no dark patterns, balance always visible. |
+| Empty states | Encouraging next step. `No one's live in this category right now — explore Trending.` |
+| Errors | Blameless, friendly, actionable. Never blame the fan or the LIVER. |
+| Safety / report | Calm, serious, supportive — the one place the playful tone yields to clarity. |
+| Legal / policy | Formal and plain. |
+
+**Forbidden phrases.** Manipulative spend-pressure on gifting/top-up (`Hurry, gift now!`), shaming a user for not spending, `Oops! Something went wrong` without a reason, cold corporate jargon in social moments, emoji in safety/report flows (keep those serious), Simplified-Chinese characters on TW-Traditional surfaces, fake hype in error messages.
+
+**Voice samples.**
+- `Live Streaming 直播互動娛樂平台` — bilingual platform positioning <!-- verified: 17.live tagline via WebFetch 2026-05-19 -->
+- `GO LIVE` — primary creator CTA <!-- illustrative/conventional: 17LIVE's core action verb; not live-DOM-verified this pass -->
+- `Follow` / `Following` — LIVER follow toggle <!-- illustrative/conventional -->
+- `You're now following this LIVER!` — illustrative follow-success micro-copy <!-- illustrative: not verified as live 17LIVE copy -->
+- `No one's live here right now — check out Trending.` — illustrative empty state <!-- illustrative: not verified as live 17LIVE copy -->
+
+## 11. Brand Narrative
+
+17LIVE was founded in **June 2015 in Taiwan** by **Jeffrey Huang** (黃立成), a musician-entrepreneur, as a live-streaming app built around the idea that broadcasting should be **interactive and intimate** — not a one-way feed but a real-time room where fans shape the show through chat and virtual gifts ([en.wikipedia.org/wiki/17LIVE](https://en.wikipedia.org/wiki/17LIVE)). The name "17" (read "one-seven", and a homophone play in Mandarin) became shorthand for going live. After early leadership transitions — Joseph Phua (co-founder of Paktor) became CEO following a 2017 merger, and Alex Lien became Global CEO in 2023 — the company grew into an international entertainment platform headquartered across Japan, Taiwan, and beyond.
+
+The design language is the product-surface expression of that interactive-intimacy thesis. The dark stage exists so the LIVER's video is the hero and the late-night, in-your-hand viewing feels right; the hot pink is the color of every act of connection — going live, following, sending a gift, joining a fan club — because the platform's entire economy and emotion run on those moments. The high motion budget (flying gifts, floating hearts, level-up bursts) is not decoration; it is the visible feedback loop that makes a fan feel *seen* by a LIVER, which is the product.
+
+By April 2022, 17LIVE reported roughly **60 million registered users across 154 countries**, around **46,000 contracted artists**, and over **2.3 million monthly active users**, ranking among the largest live-broadcasting platforms in the world; it is publicly listed on the Singapore Exchange (SGX: VT1). Revenue flows through virtual gifting, monthly fan-club subscriptions, pay-per-view ticketed events, and live-commerce (HandsUp / OrderPally). ([en.wikipedia.org/wiki/17LIVE](https://en.wikipedia.org/wiki/17LIVE)) <!-- source: Wikipedia via WebFetch 2026-05-19; metrics not independently audited -->
+
+## 12. Principles
+
+1. **Dark stage, lit content.** The UI is a darkened theater so the LIVER's video and the pink actions carry the light. *UI implication:* Default surfaces to `#121212`/`#1C1C1E`; keep overlay chrome edge-anchored and minimal; never use a light streaming surface.
+
+2. **Pink is connection.** The signature pink marks every act of social connection and transaction. *UI implication:* Apply `#FF4F6E` to GO LIVE, follow, gift, and primary CTA; keep neutral chrome neutral so pink always reads as "a moment of connection."
+
+3. **Reactions are the product.** Gifts, hearts, and level-ups are the visible loop that makes a fan feel seen. *UI implication:* Spend the motion budget here — top-layer gift animations, floating reactions — while keeping navigation motion quiet. The reaction layer is the highest z-index.
+
+4. **Money moves; be trustworthy.** Coins, top-ups, and gifting involve real money and a creator's livelihood. *UI implication:* Show exact balances and amounts; never use spend-pressure dark patterns; keep transaction flows clear, with safety/report flows calm and serious.
+
+5. **Two-plus languages, all native.** Japanese and Traditional Chinese lead; copy is authored per market. *UI implication:* Use the locale-aware CJK font stack; route microcopy through locale bundles; never Simplified on TW surfaces.
+
+6. **Friendly geometry.** Pills, circular avatars, soft cards signal a social, human platform. *UI implication:* Buttons 16–24px radius; avatars 50%; cards ~12px. Avoid sharp enterprise corners.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by publicly described 17LIVE user segments (JP/TW livestream fans and LIVERs), not individual people.*
+
+**さくら (Sakura), 23, Tokyo.** A devoted fan who follows three LIVERs and tunes in nightly after work. Belongs to a paid fan club, sends mid-tier gifts during special streams, and treats the chat community as a real social circle. Cares that her gift visibly registers — the animation and the LIVER's reaction are the payoff.
+
+**阿哲 (A-Zhe), 27, Taipei.** A part-time LIVER who streams gaming and talk content several evenings a week, building toward full-time. Watches his ranking and fan-club growth closely, optimizes his GO LIVE schedule, and values clear earnings/analytics. The pink GO LIVE button is the most important pixel in his day.
+
+**Kevin, 19, Kaohsiung.** A casual viewer who discovers streams through the explore feed, drops in for a few minutes, occasionally sends a free heart, and rarely spends. Browses on mobile in short sessions; the discover grid and quick swipe-between-streams are his whole experience.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no live streams in category)** | One `rgba(255,255,255,0.7)` line + a CTA to explore Trending. No illustration required; keep it encouraging. |
+| **Empty (no messages / followers)** | Friendly one-liner + suggested action (discover LIVERs). |
+| **Loading (discover grid)** | Dark skeleton tiles (`#1C1C1E`) at 12px radius matching final thumbnails; subtle shimmer. No spinner takeover. |
+| **Loading (stream connecting)** | Centered spinner over a dark scrim with `Connecting…`; preserves the dark stage. |
+| **Loading (inline — send gift)** | Gift button holds width; brief in-button spinner; on success, trigger the gift animation. |
+| **Error (stream failed to load)** | Blameless one-liner over dark scrim + retry in `#FF4F6E`. Never a raw error code alone. |
+| **Error (insufficient coins)** | Clear, non-shaming prompt with exact balance + a top-up action; never pressure language. |
+| **Success (follow)** | Toggle flips to "Following", brief pink confirmation; optional toast `You're now following <LIVER>!`. |
+| **Success (gift sent)** | Top-layer gift animation plays over the stream; chat shows the gift event. The animation IS the confirmation. |
+| **Skeleton** | `#1C1C1E` blocks at exact card dimensions; numeric placeholders render as `—`, never `0`. |
+| **Disabled (button)** | Faded fill + `rgba(255,255,255,0.3)` text; geometry preserved. |
+
+## 15. Motion & Easing
+
+17LIVE has a **bifurcated motion philosophy**: lavish and celebratory on reactions, quick and quiet on navigation. This is the rare brand where overshoot is welcome — but only in the reaction layer.
+
+**Durations:**
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle flips, reduce-motion fallback |
+| `motion-fast` | 150ms | Hover/press, tab switch, chrome transitions |
+| `motion-standard` | 250ms | Sheets, modals, panel slides |
+| `motion-slow` | 400ms | Stream-switch transitions |
+| `motion-reaction` | 600–1500ms | Gift animations, floating hearts, level-up bursts |
+
+**Easings:**
+| Token | Curve | Use |
+|---|---|---|
+| `ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | Navigation, sheets, chrome — quiet and platform-native |
+| `ease-enter` | `cubic-bezier(0, 0, 0.2, 1)` | Things appearing |
+| `ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Reaction layer ONLY — gift pops, heart bursts, level-up |
+
+**Spring stance.** Unlike utility brands, 17LIVE **embraces overshoot — but quarantines it to the reaction layer.** A sent gift should pop, scale-bounce, and celebrate; a tab switch should not. Navigation, sheets, and form chrome use the standard non-bouncy easings. The rule: spring lives where the social/emotional payoff lives (gifts, hearts, follows, level-ups); everything structural stays calm.
+
+**Signature motions.**
+1. **Gift send.** On send, a gift graphic enters with `ease-spring` over `motion-reaction`, scales up, drifts, and fades — playing in the top z-index layer above all chrome. Premium gifts trigger full-screen gradient effects.
+2. **Floating hearts.** Tapping the like control spawns hearts that float up and fade over `motion-reaction` with slight random drift — continuous, ambient live energy.
+3. **Follow toggle.** Flips to "Following" with a brief pink pulse over `motion-fast` — a small celebratory beat, not a full spring.
+4. **Stream switch (swipe).** On mobile, swiping between streams transitions over `motion-slow / ease-standard` — smooth, not bouncy, to keep orientation.
+
+**Reduce motion.** Under `prefers-reduced-motion: reduce`, gift/heart/level-up animations collapse to a static confirmation (the gift still registers in chat, but without the bounce); navigation motion goes instant. The reaction *event* is never lost — only its theatrics.
+
+<!--
+OmD v0.1 Sources — 17live
+Created: 2026-05-19
+
+Tier 1 (attempted): live computed-style inspection of 17.live was NOT completed — WebFetch surfaced
+only the tagline "Live Streaming 直播互動娛樂平台" and the Playwright MCP session redirected to
+injected ad interstitials, blocking a clean DOM read this pass. primary_color #FF4F6E is the
+creation-brief-provided value and matches 17LIVE's known hot-pink brand identity, but exact
+production hexes and the dark-surface palette in §2 are NOT live-verified — they are well-grounded
+approximations from live-streaming-app conventions + the brand's known dark+pink identity. Flagged
+for a future omd:add-reference UPDATE pass with a working browser.
+
+Tier 2 (philosophy/founders):
+- en.wikipedia.org/wiki/17LIVE (WebFetch 2026-05-19) — founded June 2015 Taiwan by Jeffrey Huang;
+  Joseph Phua CEO post-2017 merger; Alex Lien Global CEO 2023; ~60M registered users / 154 countries
+  (Apr 2022); ~46k contracted artists; 2.3M+ MAU; SGX-listed (VT1); revenue via virtual gifting,
+  fan-club subs, ticketed events, live-commerce (HandsUp/OrderPally); "LIVER" = streamer.
+  Metrics not independently audited.
+
+Illustrative (not verified as live copy): all CTA/social/empty/error strings beyond the tagline,
+type scale, semantic + accent hexes, font stack (inferred from JP/TW live-streaming conventions).
+Marked inline. Personas fictional (§13).
+-->
+
+---
+
+**Verified:** 2026-05-19
+**Tier 1 sources:** 17.live — live inspect NOT completed (browser redirect); tagline "Live Streaming 直播互動娛樂平台" (WebFetch). primary `#FF4F6E` is brief-provided and matches 17LIVE's hot-pink identity; dark-surface palette and other hexes are grounded approximations pending live re-inspection.
+**Tier 2 sources:** styles.refero.design / getdesign.md — not checked this pass (browser session unreliable).
+**Tier 2 (Philosophy/founders):** Wikipedia (17LIVE — Jeffrey Huang / June 2015 Taiwan / SGX VT1 / 60M users 154 countries / LIVER terminology / virtual-gift economy).
+**Style ref:** `pinkoi` (TW consumer tone, adapted dark). **Conflicts unresolved:** production hexes beyond primary not live-verified this pass (browser unreliable) — flagged for UPDATE.