---
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.
