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

Stickers are bubble-less and oversized (~140pt) on the chat backdrop with a bounce-in — this is THE brand
The chat backdrop is periwinkle #8CABD9 by default (themeable), never white
Outgoing bubble = pale chat-green #C5F0B1; incoming = white; text always black — do NOT use brand green for bubbles
LINE Green #06C755 is reserved for "go" chrome: active tab, primary buttons, official badge, toggles
Timestamp + "Read" floats OUTSIDE the bubble on the backdrop, not inside
The official-account green badge is the trust primitive — show it inline after verified names
Make the composer's sticker (smiley) glyph a primary, prominent input — stickers are how people talk
Noto Sans 400/700 only, generous CJK-friendly line-height; the super-app tab bar breadth is intentional

FilesExpand file tree

DESIGN.md

Latest commit

History