Design System
LINE logo

LINE

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.

01

Color Palette

Brand

Accent

Neutrals

Semantic

02

Typography

Fonts

Display
LINESeed
Brand-only
Live preview unavailable (brand font is not publicly distributed)
Not in the OMD font registry. Likely a brand-proprietary typeface — check the brand's own design site for source/availability.
Not publicly distributed.
sans
System UI stack
Systemno install needed
Rendered with the OS-native System UI stack
OS-native font stack (San Francisco on Apple, Segoe UI on Windows, Roboto on Android). No web font is loaded — the OS supplies the face.
Not publicly distributed.
03

Spacing & Shape

Spacing

PurposeValuePreview
gutter-4-column5px
gutter-3-column8px
gutter-2-column9px
card-margin16px
screen-margin16px

Border Radius

ElementValuePreview
buttonStructured token5px
button-largeStructured token6px
fullStructured token9999px

Elevation

flat
04

Guidelines

Do and Don't guidelines parsed from DESIGN.md.

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

Components

Buttons

box-button-destructive
Background#ff334b
Text#ffffff
Radius5px
statesactive, inactive, pressed, loading
Use: Delete, replace, remove, and other destructive actions
box-button-outline
Background#ffffff
Text#000000
Border1px solid #efefef
Radius5px
statesactive, inactive, pressed, loading, off
Use: Secondary or turned-off box-button action
box-button-primary
Background#06c755
Text#ffffff
Radius5px
statesactive, inactive, pressed, loading, on, off
Use: Primary general action; official medium box-button geometry
capsule-button
Background#06c755
Text#ffffff
Radius9999px
statesactive, pressed; disappears after completing its scroll action
Use: Move to new content above or below the current scroll position

Badges

notification
notification-badge
Background#06c755
Text#ffffff
Radius9999px
Use: N, dot, or number update badge; red is reserved for GNB placement

Dialogs

popup
Dialog content placeholder
popup
Background#ffffff
Text#000000
stateslight, dark, one-button, two-button, three-button, affirmative-disabled
Use: Important information or user decision with content, action area, and scrim

Tabs

TabTabTab
tabs
Backgroundtransparent
Text#000000
Borderselected indicator uses #06c755
statesselected, unselected, pressed
Use: Text, box, or icon grouping at the top of dependent content

Inputs

text-input
Background#ffffff
Text#000000
Border0 0 1px solid #949494
statesinactive, focused #06c755, typing, completed, error #ff334b, disabled
Use: Text, password, and code input with required underline and reset action