designmd-forge 1.2.0

package/dist/data/designs/ios-line.md

@@ -0,0 +1,362 @@
+# Design System Inspiration of LINE (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+LINE's iOS app is a messaging surface where the sticker is the unit of expression. Most messengers treat stickers as a feature; LINE treats them as the medium. The single most identifying visual is the **oversized sticker message**: when you send a sticker it does not sit in a bubble — it renders large (≈140pt) and naked directly on the chat backdrop, character art front and center, with only a tiny timestamp floating beside it. Conversations are punctuated by these big, expressive Brown/Cony/Sally moments, and the rest of the UI is deliberately calm so the stickers can carry the emotional weight.
+
+The chat backdrop itself is a signature: a soft periwinkle blue (`#8CABD9`) by default (users can theme it), not white. Against that backdrop, incoming text bubbles are crisp white (`#FFFFFF`) and outgoing bubbles are LINE's pale chat-green (`#C5F0B1` — a soft, friendly mint, not the saturated brand green). The brand color, **LINE Green** (`#06C755`), is held for chrome that means "go": the active tab, primary buttons, the official-account verification badge, toggles, and the floating action affordances. The contrast of pale-green bubbles on periwinkle, interrupted by large color stickers, gives LINE a distinctly soft, playful, East-Asian-mobile feel — closer to a friendly scrapbook than a utility.
+
+Typography is **Noto Sans** (LINE ships globally with deep CJK coverage; system fonts are the fallback) at weights 400 / 700. Type is functional and unobtrusive — friend names at 16pt, message text at 16pt, the sticker shop and official accounts using 700 for emphasis. The bottom tab bar is broad: Home, Talk, VOOM, News, Wallet — LINE is a super-app, and the tab bar advertises that breadth. Friend list rows, the official-account badge, and the sticker shop tile are recurring structural components. The overall atmosphere: soft, character-forward, friendly, and unmistakably built around stickers as the primary way people talk.
+
+**Key Characteristics:**
+- **Oversized sticker messages** — stickers render large (~140pt) and bubble-less directly on the chat backdrop
+- Periwinkle chat backdrop (`#8CABD9`) by default — not white; users can theme it
+- Outgoing bubble pale chat-green (`#C5F0B1`); incoming bubble white (`#FFFFFF`)
+- LINE Green (`#06C755`) for "go" chrome — active tab, primary buttons, official-account badge, toggles
+- Friend list rows with circular avatars + status message line
+- Official-account badge — a green shield/diamond verifying brand accounts
+- Sticker shop tile — a recurring entry point; stickers are a first-class economy
+- Broad super-app tab bar: Home / Talk / VOOM / News / Wallet
+- Noto Sans, weights 400/700, deep CJK coverage
+- Sticker bounce-in motion — stickers arrive with a playful spring
+
+## 2. Color Palette & Roles
+
+### Primary
+- **LINE Green** (`#06C755`): Active tab, primary buttons, official-account badge, toggles, send-ready accents, FAB.
+- **LINE Green Pressed** (`#05A647`): Pressed/active state for green buttons and toggles.
+- **Outgoing Bubble Green** (`#C5F0B1`): The pale chat-green of your own message bubbles (soft mint, NOT the brand green).
+
+### Canvas & Surface (Light)
+- **Chat Backdrop** (`#8CABD9`): The default periwinkle chat-room background (themeable).
+- **Canvas White** (`#FFFFFF`): Friend list, Home, settings, sheets, incoming bubbles, nav bars.
+- **Surface Gray** (`#F7F7F7`): Grouped sections, search field, sticker-shop cards background.
+- **Divider** (`#E5E5E5`): Hairline dividers between list rows.
+- **Text Primary** (`#000000`): Friend names, message text, primary labels.
+- **Text Secondary** (`#8C8C8C`): Status messages, timestamps, previews, metadata.
+- **Text Tertiary** (`#B3B3B3`): Placeholders, disabled labels.
+
+### Canvas & Surface (Dark — Limited Use)
+LINE's iOS app is primarily a light/themeable surface; a dark variant exists for system-dark users.
+- **Dark Canvas** (`#1E1E1E`)
+- **Dark Surface** (`#2A2A2A`)
+- **Dark Chat Backdrop** (`#1A2230`) (dark periwinkle)
+- **Dark Incoming Bubble** (`#2A2A2A`)
+- **Dark Text Primary** (`#EDEDED`)
+- **Dark Text Secondary** (`#9A9A9A`)
+
+### Message-Specific
+- **Incoming Bubble** (`#FFFFFF`): Left-aligned received text bubble.
+- **Outgoing Bubble** (`#C5F0B1`): Right-aligned sent text bubble (pale green).
+- **Bubble Text** (`#000000`): Text in both incoming and outgoing bubbles.
+- **Bubble Meta** (`#8C8C8C`): Timestamp + read ("Read") beside a bubble (sits outside the bubble, on the backdrop).
+- **Read Label** (`#8C8C8C`): The small "Read" text under/next to your last outgoing message.
+
+### Semantic
+- **Official Account Green** (`#06C755`): The verification badge on official/business accounts.
+- **Sticker Shop Accent** (`#06C755`): "Sticker Shop" entry, "Get" buttons on free stickers.
+- **Notification Red** (`#FF334B`): Unread badge dots and counts.
+- **Link Blue** (`#1F8FFF`): Inline links inside text bubbles.
+- **Error Red** (`#FF334B`): Failed-to-send, destructive actions.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Noto Sans` (LINE ships globally; deep Latin + CJK + Thai coverage)
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Hiragino Sans', 'Noto Sans CJK', 'Segoe UI', Roboto, sans-serif`
+- **Weights**: 400 (regular), 700 (bold) — LINE's hierarchy is mostly regular vs bold, no semibold tier
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Large Title | Noto Sans | 24pt | 700 | 1.2 | 0pt | "Home", "Talk" nav title |
+| Friend Name | Noto Sans | 16pt | 400 | 1.3 | 0pt | Row title in friend / chat list |
+| Thread Title | Noto Sans | 17pt | 700 | 1.25 | 0pt | Contact/group name in chat header |
+| Message Body | Noto Sans | 16pt | 400 | 1.45 | 0pt | The text-bubble content — core reading size |
+| Status Message | Noto Sans | 13pt | 400 | 1.3 | 0pt | Friend's status line under their name |
+| Message Preview | Noto Sans | 14pt | 400 | 1.3 | 0pt | Last-message snippet in chat list |
+| Section Header | Noto Sans | 13pt | 700 | 1.2 | 0.2pt | "Friends", "Groups", grouped headers |
+| Timestamp | Noto Sans | 12pt | 400 | 1.2 | 0pt | Time on a row, or beside a bubble/sticker |
+| Read Label | Noto Sans | 11pt | 400 | 1.2 | 0pt | "Read" indicator beside last outgoing |
+| Button (Primary) | Noto Sans | 16pt | 700 | 1.0 | 0pt | Green primary button labels |
+| Button (Text) | Noto Sans | 15pt | 700 | 1.0 | 0pt | Green text actions |
+| Tab Label | Noto Sans | 10pt | 400 | 1.0 | 0pt | Bottom tab bar labels |
+| Badge Count | Noto Sans | 11pt | 700 | 1.0 | 0pt | Unread count in a red badge |
+| Sticker Price | Noto Sans | 13pt | 700 | 1.0 | 0pt | Coin price on sticker-shop tiles |
+
+### Principles
+- **Two weights, regular and bold**: Noto Sans 400/700 — LINE's hierarchy is contrast by weight, no semibold step
+- **Stickers replace expressive type**: there is no display headline because the *sticker* is the expressive element
+- **Message body at 16pt / line-height 1.45**: comfortable for Latin and CJK alike
+- **CJK-first metrics**: line-height is set generously so CJK glyphs are not cramped
+- **Dynamic Type respected** on names and bodies; tab labels, badge counts, sticker prices are layout-fixed
+- **Bold means "tappable/important"**: official-account names, sticker-shop CTAs, primary buttons
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button ("Add Friend", "Get", "Confirm")**
+- Background: `#06C755`
+- Text: `#FFFFFF`, Noto Sans 16pt weight 700
+- Padding: 13pt vertical, full-width (16pt horizontal inset) or pill on smaller actions
+- Corner radius: 8pt (rectangular) or 22pt (pill, for inline "Add"/"Get")
+- Pressed: `#05A647`, scale 0.98
+
+**Outline Button ("Cancel", secondary)**
+- Background: `#FFFFFF`
+- Text: `#06C755`, Noto Sans 16pt weight 700
+- Border: 1pt solid `#06C755`
+- Corner radius: 8pt
+- Pressed: background `#F1FBF3`
+
+**Text Button ("Edit", "More")**
+- Noto Sans 15pt weight 700, color `#06C755`
+- No background; 44pt hit area; pressed opacity 0.5
+
+**Send Button**
+- When composer empty: a sticker/emoji + mic + plus glyph cluster (no send)
+- When text exists: a green up-arrow inside a `#06C755` circle 30pt, white glyph 16pt
+- Pressed: `#05A647`, scale 0.92
+
+**Icon Action (Album, Camera, Sticker, Voice, Plus)**
+- Glyph 24pt, hit area 44pt
+- Default: `#8C8C8C`
+- The sticker (smiley) glyph opens the sticker keyboard — the most-used action
+
+### Cards & Containers
+
+**Friend / Chat List Row**
+- Height: 68pt
+- Layout: 52pt circular avatar (leading) → name (16pt w400) + status/preview (13–14pt w400 `#8C8C8C`, 1-line clamp) → trailing: timestamp (12pt) + unread red badge
+- Official account: a green badge (shield) sits immediately right of the name
+- Background: `#FFFFFF`; pressed `#F7F7F7`
+- Divider: hairline `#E5E5E5` inset to text origin
+
+**Text Bubble — Incoming**
+- Background: `#FFFFFF`
+- Text: `#000000`, Noto Sans 16pt w400
+- Padding: 9pt vertical, 12pt horizontal
+- Corner radius: 16pt with a small 4pt notch at the top-left near the avatar (LINE's tail)
+- Sender avatar (40pt) shown leading on the first message of a run; sender name (12pt `#8C8C8C`) above first bubble in groups
+- Max width: 70% of chat width; left-aligned with 8pt leading inset after avatar
+- Timestamp + nothing-or-"Read" floats just outside the bubble's bottom corner (on the backdrop), 11–12pt `#8C8C8C`
+
+**Text Bubble — Outgoing**
+- Background: `#C5F0B1` (pale chat-green)
+- Text: `#000000`, Noto Sans 16pt w400
+- Corner radius: 16pt with a 4pt notch at the top-right (tail)
+- Meta: "Read" + timestamp floats outside the bubble's bottom-left, 11–12pt `#8C8C8C`
+- Max width: 70%; right-aligned with 8pt trailing inset
+
+**Oversized Sticker Message (Signature)**
+- NOT in a bubble — the sticker image renders directly on the chat backdrop
+- Size: ~140pt on the long edge (animated/sound stickers slightly larger), preserving aspect
+- Alignment: right for outgoing, left for incoming (after avatar for incoming)
+- Meta: timestamp (+ "Read") floats beside the sticker's lower edge, 11pt `#8C8C8C`, no background plate
+- Entrance: a bounce-in spring (scale 0.6 → 1.08 → 1.0) — stickers feel like they "land"
+- Tapping an animated sticker replays its animation/sound
+
+**Official Account Badge (Signature)**
+- A small rounded-diamond/shield glyph in `#06C755` (white inner mark)
+- Sits inline immediately after an official account's display name in lists, headers, and chat
+- Communicates verified/business identity — LINE's trust primitive
+
+**Sticker Shop Tile**
+- Card on `#F7F7F7`, corner radius 12pt
+- Sticker preview image (square), title (Noto Sans 14pt w700), author (12pt `#8C8C8C`)
+- Trailing: a pill price button — green outline with coin icon + price (Noto Sans 13pt w700) or "Free"
+
+**Status / System Note**
+- Centered, full-width on the backdrop, Noto Sans 12pt w400 `#FFFFFF` on a translucent `rgba(0,0,0,0.18)` rounded plate
+- "Brown joined the group", date separators ("Today")
+
+### Navigation
+
+**Bottom Tab Bar (Super-App)**
+- Height: 50pt + safe area
+- Background: `#FFFFFF`, top hairline `#E5E5E5`
+- Tabs: Home, Talk, VOOM, News, Wallet
+- Icon 24pt; active `#06C755`, inactive `#8C8C8C`
+- Labels: Noto Sans 10pt w400, always shown
+- Talk tab: unread total red badge `#FF334B`; News/VOOM may show a red dot
+
+**Chat List / Home Top Bar**
+- Title (24pt w700) leading; trailing cluster: search + add-friend + settings glyphs 22pt `#000000`
+- Search field below (where shown): `#F7F7F7` fill, 36pt, corner radius 18pt, placeholder "Search"
+
+**Thread Header**
+- Height: 44pt + safe area, `#FFFFFF` background, bottom hairline
+- Leading: back chevron 22pt `#000000` + name (17pt w700) + official badge (if applicable)
+- Trailing: audio-call + video-call + menu (☰) glyphs 22pt `#000000`, 16pt gap
+- Tapping the menu opens the chat settings/album drawer
+
+### Input Fields
+
+**Composer**
+- Sits on the chat backdrop; the field is a white pill
+- Leading on the backdrop: plus glyph 24pt `#FFFFFF` (collapses the actions)
+- Pill: `#FFFFFF`, min height 36pt, corner radius 18pt
+- Field: Noto Sans 16pt w400, placeholder "Aa", trailing-inside: a smiley (sticker) glyph and a camera glyph
+- Outside the pill: mic glyph when empty; green send circle when text exists
+- The smiley glyph is prominent — the sticker keyboard is a primary input mode
+
+**Search Field**
+- Background: `#F7F7F7`
+- Height: 36pt, corner radius 18pt
+- Leading magnifier 16pt `#8C8C8C`, placeholder "Search" `#B3B3B3`
+- Focus: cursor `#06C755`
+
+### Distinctive Components
+
+**Oversized Sticker Message**
+- The defining element: bubble-less, ~140pt, character art on the periwinkle backdrop, bounce-in
+- A LINE conversation is recognizable from a single sticker moment alone
+
+**Official Account Badge**
+- Green verification mark inline after a name — LINE's identity/trust signal across the super-app
+
+**Sticker Shop**
+- A first-class destination with tiles, prices in coins, free packs — stickers are an economy, not a feature
+
+**Periwinkle Chat Backdrop**
+- The non-white default chat background is itself a brand signature; pale-green bubbles + white bubbles are tuned to read on it
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 52
+- Bubble inner padding: 9pt vertical, 12pt horizontal
+- Inter-bubble gap: 3pt within a same-sender run, 10pt between senders
+- Sticker vertical margin: 10pt above/below (it needs air to read as a moment)
+- Row inset: avatar leading 16pt, text origin 76pt
+
+### Grid & Container
+- Single column for chat and lists
+- Text bubble max width: 70% of chat width
+- Sticker max edge: ~140pt (does not obey the 70% bubble rule — it's bubble-less)
+- Home is a vertical scroll of grouped sections (Friends, Groups, Services, Banner)
+- iPad: master-detail split (list left, chat right)
+
+### Whitespace Philosophy
+- **Stickers need air**: generous vertical margin around a sticker so it reads as an expressive beat
+- **Calm chrome, loud content**: the UI is soft and quiet so character stickers can be the focal point
+- **Backdrop is part of the layout**: bubbles and meta are tuned for legibility on periwinkle, not white
+- **Super-app density on Home**: Home packs many service entries, but Talk stays breathing-room calm
+
+### Border Radius Scale
+- Notch (4pt): the small tail notch on a bubble's avatar-side top corner
+- Standard (8pt): primary/outline buttons, sticker-shop CTAs (rect)
+- Card (12pt): sticker-shop tiles, Home service cards
+- Bubble (16pt): text message bubbles
+- Pill (18pt+): search field, composer pill, inline "Add"/"Get" buttons
+- Circle (50%): avatars, send button, FAB
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Lists, Home cards, the chat backdrop |
+| Bubble (Level 1) | `rgba(0,0,0,0.06) 0 1px 2px` | Text bubbles get a faint lift so white/green read on periwinkle |
+| Sticker (Level 0) | No shadow | Stickers sit directly on the backdrop, flat and naked |
+| Bar Hairline (Level 1) | `rgba(0,0,0,0.05) 0 0.5px 0` | Tab bar + thread header |
+| Sheet (Level 2) | `rgba(0,0,0,0.16) 0 -8px 28px` | Sticker keyboard, attachment sheet, menus |
+| Toast (Level 3) | `rgba(0,0,0,0.18) 0 6px 18px` | "Saved", "Added" confirmations |
+
+**Shadow Philosophy**: The chat backdrop is colored, not white, so text bubbles take a *very* faint 1px shadow to lift them legibly off the periwinkle — without that, white-on-periwinkle would feel like it's bleeding. Stickers, by contrast, are deliberately flat and shadowless: they're meant to feel like they're drawn directly onto the conversation. Real elevation is reserved for the sticker keyboard and sheets.
+
+### Motion
+- **Sticker bounce-in**: a newly arrived sticker scales 0.6 → 1.08 → 1.0 with a spring (damping 0.55) — the signature motion
+- **Animated/sound sticker tap**: replays the sticker's animation/audio with a small re-bounce
+- **Text bubble enter**: subtle fade + 6pt rise, 220ms
+- **Send circle press**: scale 1.0 → 0.92 → 1.0, soft haptic
+- **Sticker keyboard present**: slides up 280ms ease, the field's smiley glyph toggles to a keyboard glyph
+- **Tab switch**: instant crossfade
+- **Read receipt**: "Read" fades in beside the bubble when delivered-read
+
+## 7. Do's and Don'ts
+
+### Do
+- Render stickers **bubble-less and oversized** (~140pt) directly on the chat backdrop, with bounce-in
+- Use the periwinkle `#8CABD9` chat backdrop by default (themeable) — not white
+- Make outgoing bubbles pale chat-green `#C5F0B1`, incoming white `#FFFFFF`, text black
+- Reserve LINE Green `#06C755` for "go" chrome: active tab, primary buttons, official badge, toggles
+- Float timestamp + "Read" *outside* the bubble on the backdrop, not inside it
+- Show the official-account green badge inline after verified names everywhere
+- Give the sticker keyboard a primary, prominent smiley entry in the composer
+- Use Noto Sans 400/700 with generous CJK-friendly line-height (1.45 on body)
+
+### Don't
+- Don't put stickers in a bubble or cap them at the 70% bubble width — they're bubble-less and big
+- Don't use the saturated brand green `#06C755` for the outgoing bubble — that's the pale `#C5F0B1`
+- Don't default the chat background to white — the periwinkle backdrop is a brand signature
+- Don't put a shadow on stickers — they sit flat on the backdrop; only text bubbles get a faint lift
+- Don't bury official-account verification — the green badge is the trust primitive
+- Don't add a semibold tier — LINE's hierarchy is 400 vs 700 only
+- Don't cramp CJK — keep line-height generous
+- Don't hide the breadth — the super-app tab bar (Home/Talk/VOOM/News/Wallet) is intentional
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | 60pt rows, sticker ~120pt, bubble max 76% |
+| iPhone 13/14/15 | 390pt | Standard — 68pt rows, sticker ~140pt |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the header |
+| iPhone 15/16 Pro Max | 430pt | Larger avatars (56pt), sticker ~160pt |
+| iPad | 768pt+ | Master-detail split: list (left, 360pt) + chat (right) |
+
+### Dynamic Type
+- Friend names, message bodies, status messages: full scale
+- Message body caps at ~22pt; bubble grows with content
+- Stickers: fixed size (image asset, not type-driven)
+- Tab labels, badge counts, sticker prices: layout-fixed (do not scale)
+
+### Orientation
+- Lists / chat / Home: **portrait + landscape** (landscape widens chat; sticker keeps ~140pt)
+- iPad: split view in both orientations
+- Image/video viewer: rotates freely
+
+### Touch Targets
+- Send circle: 30pt visual, 44pt effective hit
+- Sticker (tap to replay animation): the full ~140pt image is tappable
+- List rows: full 68pt row tappable
+- Tab items: 24pt icon, 49pt hit
+- Composer smiley/sticker glyph: 44pt hit (it's a primary action)
+
+### Safe Area Handling
+- Top: title/header respect safe area / Dynamic Island
+- Bottom: composer + tab bar respect home indicator; sticker keyboard rises above the home indicator
+- Sides: 8pt chat insets (bubbles), 16pt list insets
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Chat backdrop: `#8CABD9` (periwinkle, themeable)
+- Canvas (lists/Home): `#FFFFFF`
+- Surface: `#F7F7F8` / `#F7F7F7`
+- Incoming bubble: `#FFFFFF`; outgoing bubble: `#C5F0B1` (pale green); bubble text: `#000000`
+- Divider: `#E5E5E5`
+- Text primary: `#000000`; secondary: `#8C8C8C`; tertiary: `#B3B3B3`
+- LINE Green (chrome/CTA/badge): `#06C755`; pressed `#05A647`
+- Notification red: `#FF334B`; link blue: `#1F8FFF`
+
+### Example Component Prompts
+- "Create a SwiftUI LINE friend list row: white background, 68pt height, 52pt circular avatar leading, name 'Brown' Noto Sans 16pt weight 400 #000000 with a #06C755 official-account badge inline right of the name, status message 'Out of office until Monday' Noto Sans 13pt #8C8C8C (1-line clamp). Trailing: timestamp '9:41' Noto Sans 12pt #8C8C8C. Pressed background #F7F7F7. Divider hairline #E5E5E5 inset to text origin."
+- "Build a LINE oversized sticker message — NOT in a bubble. The sticker image renders directly on the #8CABD9 chat backdrop at ~140pt on the long edge, right-aligned for outgoing. A timestamp '9:41' (+ 'Read') Noto Sans 11pt #8C8C8C floats just beside the sticker's lower-left edge with NO background plate. Entrance: a bounce-in spring scale 0.6 → 1.08 → 1.0 (damping 0.55). Tapping an animated sticker replays it."
+- "Design LINE text bubbles on the periwinkle backdrop: incoming bubble #FFFFFF, outgoing bubble #C5F0B1 (pale chat-green, NOT the brand green), text #000000 Noto Sans 16pt w400, padding 9pt/12pt, corner radius 16pt with a 4pt tail notch on the avatar-side top corner, faint shadow rgba(0,0,0,0.06) 0 1px 2px so they lift off the periwinkle. Meta ('Read' + time) floats OUTSIDE the bubble on the backdrop, 11pt #8C8C8C."
+- "Create a LINE sticker-shop tile: card on #F7F7F7, corner radius 12pt, square sticker preview, title 'Brown & Friends' Noto Sans 14pt w700, author 'LINE' Noto Sans 12pt #8C8C8C, and a trailing green-outline pill price button with a coin glyph + '120' Noto Sans 13pt w700 (or 'Free')."
+- "Build the LINE super-app bottom tab bar: 50pt + safe area, white, top hairline #E5E5E5. Five tabs Home / Talk / VOOM / News / Wallet, icons 24pt, active #06C755, inactive #8C8C8C, labels Noto Sans 10pt w400. Talk shows a #FF334B unread badge with a white count."
+
+### Iteration Guide
+1. Stickers are **bubble-less and oversized** (~140pt) on the chat backdrop with a bounce-in — this is THE brand
+2. The chat backdrop is periwinkle `#8CABD9` by default (themeable), never white
+3. Outgoing bubble = pale chat-green `#C5F0B1`; incoming = white; text always black — do NOT use brand green for bubbles
+4. LINE Green `#06C755` is reserved for "go" chrome: active tab, primary buttons, official badge, toggles
+5. Timestamp + "Read" floats OUTSIDE the bubble on the backdrop, not inside
+6. The official-account green badge is the trust primitive — show it inline after verified names
+7. Make the composer's sticker (smiley) glyph a primary, prominent input — stickers are how people talk
+8. Noto Sans 400/700 only, generous CJK-friendly line-height; the super-app tab bar breadth is intentional