LINE DESIGN.md

Design System Inspiration of LINE

Overview

Visual Theme & Atmosphere

LINE is a communication product whose identity begins with helping people stay close, then extends into services that support everyday life. Its current evidence has two related but distinct public design surfaces. The consumer marketing site uses large LINESeed display typography and lifestyle imagery, while the official LINE Design System for Messenger specifies OS-native system fonts, compact product type roles, a structured color palette, and reusable interaction patterns. They share LINE Green and a direct, approachable tone, but their typography and density must not be collapsed into one generic marketing system.

The July 11 capture covered the Korean consumer site plus seven official design-system routes: home, color, typography, layout, box buttons, inputs, and popups. It found 8 surfaces, 41 color candidates, 10 font families, 45 component variants, five tab interactions, and coverage 87/100. system-ui was visibly used on 682 elements across the design-system pages; loaded LINESeed appeared on 107 elements. The previous SFPro canonical claim is no longer sufficient: SFPro remained unresolved on the marketing page, while declared SF Pro Text and SF Pro Display had zero observed usage.

Current product identity is anchored by official LINE Green #06c755, white #ffffff, black #000000, and a deep gray scale. The official component system is broader than pills: box buttons, capsule buttons, inputs, popups, tabs, badges, sheets, navigation, lists, cards, and feedback components each have defined anatomy, usage, and state behavior.

Primary tasks

• Start a chat and keep it going with someone close
• Spot which conversations have an update waiting
• Confirm or back out of an important decision when asked
• Jump to content that arrived above or below where you are reading
• Recover from a communication error mid-conversation

Brand Narrative

LINE's current first-party design documentation frames its mission as closing the distance between information, services, and people. The core product priority is conversation: the official principle “Chat comes first” states that sharing messages with people closest to the user is central to LINE's values.

The public marketing site describes LINE as more than a messenger and as infrastructure for everyday life. This supports the product's broad service surface without requiring unverified name-origin, founding, or ownership mythology. LY Corporation is the current publisher of these documents, but its separate corporate visual system is not treated as Messenger UI.

That boundary is part of LINE's current design identity. The consumer brand can use LINESeed, lifestyle imagery, and expansive display copy, while Messenger relies on native type, compact roles, and predictable interaction patterns. Green and conversational clarity connect the surfaces; identical typography does not. Keeping those layers separate makes the reference useful for recreating a product flow without flattening the wider brand.

Principles

The official LINE Design Principles are:

1. WE ≠ USERS. Investigate what users actually need rather than assuming designer perspectives are universal. UI implication: validate tasks and localization with real usage evidence.

2. Clear primary tasks. Make primary tasks intuitive. UI implication: one primary action should dominate the screen and remain easy to identify.

3. Chat comes first. New features should reinforce conversation between people. UI implication: avoid features or flows that obscure the messaging core.

4. Reliable design. Pursue trustworthy, intuitive design for all ages and varied use cases. UI implication: prioritize clear states, accessibility, and predictable actions.

5. A cohesive experience. Design seamless flows across related screens. UI implication: components and terminology must remain consistent across journeys.

6. Respect for legacy. Phase beneficial changes carefully because users develop familiarity and unexpected workflows. UI implication: migration and redesign need compatibility and staged rollout plans.

Personas

No current first-party LINE persona definitions were found in the inspected public design-system documents. Supported task contexts include starting and maintaining a chat, reading notifications, sharing content, recovering from a communication error, and using localized interfaces across operating systems. Do not convert the broad global audience into fictional demographic profiles inside the canonical reference. Persona research should be stored separately with market, language, task, device, and observed behavior.

Colors

Official Messenger palette

• LINE Green — #06c755: brand color and primary action.
• Android Green — #4cc764: Android display-environment variant.
• White — #ffffff: canvas and on-dark/on-brand content.
• Black — #000000: primary foreground.
• Gray 650 — #616161: recurring secondary text in all eight captured surfaces.
• Gray 500 — #949494: muted navigation, inactive labels, and input underline reference.
• Gray 250 — #e8e8e8: repeated structural border.
• Gray 200 — #efefef: official outline-button asset border.
• Blue 500 — #638dff: documented button-background and large-tooltip blue.
• Red 400 — #ff334b: destructive action and error state.

The official color guide does not permit arbitrary opacity changes except for LINE Black and LINE White. Text should generally use palette values numbered 500 or higher to maintain at least 3:1 contrast; Gray 400 is restricted to the least important text. Highlighted colors are generated by documented HSV rules, and disabled labels use 40% treatment according to foreground context.

The previous #07b53b green was removed. It appeared in an older live tab capture, but the current v3.5 official palette and current product metadata identify #06c755 as LINE Green.

Typography

Font evidence boundary

Specimen availability is separate for system UI and LINESeed; neither is a substitute for the other.

Product UI

The official Messenger typography guideline explicitly uses each operating system's system font. It lists SF Pro Text/Display and localized iOS fonts such as Hiragino Sans, PingFang, Apple SD Gothic Neo, and Thonburi. These are platform mappings, not a license to hard-code SF Pro as the universal LINE font.

Sizes smaller than 12pt are not recommended. The scale is recommended rather than mandatory so designers can combine roles when content hierarchy requires it.

Marketing and documentation

The public consumer surface uses loaded LINESeed for major display roles: “Life on LINE” is 70px/700, while “Messenger APP” and “Services” are 60px/700. The design-system documentation also uses LINESeed for 48px/900 page titles and 32px/700 section titles, while its explanatory body uses system-ui.

Brand face, substitute, safe default

• Brand face: LINE Seed (captured as LINESeed) for marketing and design-system display roles. LY Corp. releases it under the SIL Open Font License 1.1 with an official download (seed.line.me), so it can be installed as itself. Messenger product UI has no brand face: it uses each platform's system font.
• Substitute: none needed; LINE Seed is installable and the product UI uses system fonts.
• Safe default (not the brand face): none listed; the product UI face is already a system stack.

Layout

The official Messenger layout uses a common 16pt left and right screen margin and repeats 16pt inside cards. Its reference grid defines:

When resolution increases, the guideline keeps the gutter and increases column count while maintaining proportional column widths. This is a product grid rule, not a claim about the wide marketing site's layout.

Responsive Behavior

LINE's official guidance is resolution-adaptive rather than breakpoint-specific. Gutters remain stable while the number of grid columns increases, and screen/card margins remain 16pt in the documented mobile grid.

Multilingual behavior is part of responsiveness. English, Japanese, Korean, Chinese, and Thai labels can vary substantially in length. Buttons and popups should switch from horizontal to vertical arrangements when translations would truncate action labels. Tabs can become horizontally scrollable, but labels remain single-line and the selected tab must be fully revealed.

No canonical CSS breakpoints were published in the inspected Messenger documents.

Elevation & Depth

The captured public and documentation surfaces are predominantly flat and reported box-shadow: none. Component hierarchy is expressed through color, borders, scrims, fixed placement, and content order.

A popup is elevated semantically in front of app content using a scrim. Sticky buttons sit above scrolling content but below dialogs and sheets. No reusable shadow value was published or reliably extracted, so the canonical shadow token remains none rather than an invented modal shadow.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.flat: none

Motion & Easing

The inspected documents define interaction outcomes but do not publish canonical duration or easing tokens.

• Capsule buttons scroll to new content and disappear after the destination is reached.
• Tabs navigate through press or content swipe, subject to documented gesture-priority rules.
• Box buttons may show loading progress for save/download-like actions.
• Code inputs submit automatically after the final digit.
• Popup content can scroll while its button area remains fixed.

Computed transition-duration, transition-timing-function, animation-duration, and reduced-motion behaviour must be captured before any motion token is added.

Components

Box Button

Primary Medium

• Type: button
• Background: #06c755
• Text: #ffffff
• Radius: 5px
• Height: 36px
• States: active, inactive, pressed, loading, on, off
• Use: the most important general action in content or the bottom action area

Destructive Medium

• Type: button
• Background: #ff334b
• Text: #ffffff
• Radius: 5px
• Height: 36px
• States: active, inactive, pressed, loading
• Use: delete, replace, remove, and other destructive actions

Outline Medium

• Type: button
• Background: #ffffff
• Text: #000000
• Border: 1px solid #efefef
• Radius: 5px
• Height: 36px
• States: active, inactive, pressed, loading, off
• Use: secondary action or turned-off state

Official SVG assets expose a progression from approximately 29–30px small controls through 36px medium, 43px large, and 48px extra-large controls, using 5px radius at medium and 6px at large/extra-large.

Capsule Button

Green

• Type: button
• Background: #06c755
• Text: #ffffff
• Radius: 9999px
• States: active, pressed
• Use: scroll to newly available content above or below the current position, then disappear

Text Input

Underline Input

• Type: input
• Background: #ffffff
• Text: #000000
• Border: bottom underline using Gray 500
• Focus: underline changes to #06c755
• Error: underline, cursor, and helper text change to #ff334b
• States: inactive, focused, typing, completed, error, disabled
• Use: text, password, or code entry with reset action and optional label/helper/counter

Popup

Messenger Modal

• Type: dialog
• Background: #ffffff
• Text: #000000
• States: light, dark, one-button, two-button, three-button, affirmative-disabled
• Use: important information or a user decision with content area, action area, and scrim

The action area must include a dismissal path. Affirmative actions sit right or above dismissive actions. Only one popup may be exposed at a time.

Tabs

Content Grouping

• Type: tab
• Background: transparent
• Text: #000000
• Active: selected indicator uses #06c755
• States: selected, unselected, pressed
• Use: text, box, or icon grouping at the top of dependent content

Only one tab can be active. Tabs may scroll horizontally when all items do not fit; fixed tabs divide the width into two to four columns.

Notification Badge

Update Badge

• Type: badge
• Background: #06c755
• Text: #ffffff
• Radius: 9999px
• Use: N, dot, or number notification; red is reserved for GNB placement

---

Verified: 2026-07-11 (eight-surface collector plus in-app visual verification) Tier 1 sources: https://www.line.me/ko/ , https://designsystem.line.me/ , https://designsystem.line.me/LDSM/foundation/color/line-color-guide-ex-en/ , https://designsystem.line.me/LDSM/foundation/typography-ex-en/ , https://designsystem.line.me/LDSM/foundation/layout-ex-en/ , https://designsystem.line.me/LDSM/components/box-button-ex-en/ , https://designsystem.line.me/LDSM/components/capsule-button-ex-en/ , https://designsystem.line.me/LDSM/components/input-ex-en/ , https://designsystem.line.me/LDSM/components/popup-ex-en/ , https://designsystem.line.me/LDSM/components/tabs-ex-en/ , https://designsystem.line.me/LDSM/components/badge-ex-en/ , https://designsystem.line.me/about/design-principle-en , https://designsystem.line.me/about/line-voice-en , https://www.lycorp.co.jp/en/technology-design/design/ Tier 2 sources: https://getdesign.md/line returned “No designs found for line”; https://styles.refero.design/?q=LINE exposed no LINE-specific style result after top and bottom rendered-path inspection. Conflicts unresolved: none

LY Corporation's corporate Design Style is retained as organizational context only. Its corporate chrome and values are not used as LINE Messenger component tokens.

Published component roster (34 published, none measured here)

The LINE Design System for Messenger (LDSM) publishes 34 components, read from its own index at https://designsystem.line.me/LDSM/components/ on 2026-09-19. Every host in this group serves a shell to a plain fetch, so the names come from the rendered page in a browser. No value, state or geometry below is asserted by this reference.

Badge, Banner, Bottom Navigation, Bottom Sheet, Box Button, Capsule Button, Card, Checkbox, Checkmark, Chips, Empty, Flex Message, Floating Action Button, Icon button, Image Grid, List, List Header, Page Indicator, Popup, Profile, Progress Indicator, Radio Button, Search Bar, Slider, Snackbar, Spinner, Switch, Tabs, Text Button, Text Inputs, Toast Overlay, Tooltip, Top Navigation, Video Player

LINE publishes a second system at the same host, LDSG, with its own component set. This roster is LDSM only; LDSG is not enumerated here and should not be assumed to match.

States

The collector safely exercised five official documentation tab controls and recorded selected/tab-selected variants. It did not execute form submission, destructive actions, or popup actions.

Do's and Don'ts

Do

• Use official #06c755 LINE Green for primary Messenger actions.
• Use each OS's system font for product UI and LINESeed for verified marketing/display roles.
• Keep the primary task intuitive and visually dominant.
• Use one primary green or red box button per screen.
• Place affirmative popup actions on the right or above dismissive actions.
• Support multilingual labels and change horizontal controls to vertical when translation length requires it.
• Use green badges in content areas and red badges only in GNB placement.
• Preserve 16pt screen and card margins.

Don't

• Hard-code SF Pro as the universal cross-platform LINE font.
• Use the legacy #07b53b as current LINE Green.
• Place more than one popup on screen.
• Disable the dismissive popup action while waiting for an affirmative selection.
• Expose nested tabs or connect tabs directly to bottom navigation.
• Repeat label text as placeholder text without adding guidance.
• Use capsule buttons in the center of content; place them at the top or bottom scroll boundary.
• Merge LY corporate charcoal chrome into Messenger tokens.

Voice & Tone

The official LINE Voice defines three qualities:

1. Clear — remove unimportant information, prefer unambiguous language, and choose clarity over rigid consistency.
2. Conversational — translate complex concepts into the user's language, use active sentences, and treat buttons as the user's voice.
3. Considerate — avoid assumptions, focus on user goals, anticipate problems, and emphasize what users can do.

Official examples include “Keep it short,” “Buttons are the user's voice,” and “Use descriptive links instead of URLs paired with instructions.” These are current first-party writing rules, not inferred marketing tone.

Agent Prompt Guide

Product UI tokens

• Primary: #06c755
• Android primary: #4cc764
• Foreground: #000000
• Secondary text: #616161
• Muted: #949494
• Danger: #ff334b
• Product font: platform System
• Screen and card margin: 16pt
• Standard body: 16pt/Regular
• Minimum recommended body: 12pt/Regular

Construction prompts

• “Build a LINE Messenger medium primary box button with #06c755 fill, white text, 36px height, and 5px radius. Include active, inactive, pressed, and loading states.”
• “Build a LINE underline input with a Gray 500 default underline, green focused underline, red error underline/helper text, reset action, optional label, and password visibility toggle.”
• “Build a LINE popup with content, optional area, mandatory dismissal path, action area, and scrim. Keep affirmative action right or above dismissive action and allow only one popup.”
• “Build a LINE tab row with selected, unselected, and pressed states. Use a green selected indicator and enable horizontal scroll when localized labels do not fit.”

Treat the public 70px LINESeed headline as marketing typography. Do not transfer it into Messenger product screens.

Governance

Known Gaps

• Contrast, box-button-primary. Text #ffffff on #06c755 measures 2.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, box-button-destructive. Text #ffffff on #ff334b measures 3.60:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, capsule-button. Text #ffffff on #06c755 measures 2.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, tabs. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, notification-badge. Text #ffffff on #06c755 measures 2.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.