Communication / iOS / Android / Web

LINE

LINE keeps its brand quiet: pale gray ground, near-black type and huge friendly headlines, with the signature green saved for small marks.

Download
  • #07B53B
  • #1E1E1E
  • #F7F8F9
  • #616161
  • #777777
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#07B53B
  • on primary#FFFFFF
  • ink secondary#616161

Surfaces

  • canvas#FFFFFF

Text

  • ink#1E1E1E
  • ink muted#777777

More

  • page#F7F8F9

Typography

Each style is set with the file's own family, size, weight and spacing.

  • LINESeedOpen font, listed in the open library as LINE Seed JP.
  • SFProSFPro is private and not available in open fonts. Shown in Inter, the closest open match.
  • display70px / 700 / 93px

    LINE

  • headline60px / 700 / 80px

    LINE

  • body20px / 400 / 28px

    Pack my box with five dozen liquor jugs

  • small16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm10px
  • md16px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md16px
  • lg24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • page band
    page-band
  • card
    card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 70 lines
version: alpha
name: LINE-design-analysis
description: "A friendly messenger brand: pale gray ground (#f7f8f9), near-black ink (#1e1e1e), the signature LINE green (#07b53b) used sparingly, huge LINE Seed headlines at weight 700 and 4 to 16px soft corners."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#07b53b"
  on-primary: "#ffffff"
  ink: "#1e1e1e"
  ink-secondary: "#616161"
  ink-muted: "#777777"
  canvas: "#ffffff"
  page: "#f7f8f9"

typography:
  # Font note: "SFPro" is a private font and is not available in open fonts. Closest open alternative: "Inter".
  display:
    fontFamily: "LINESeed, 'LINE Seed JP', SFPro, Arial, 'Noto Sans JP', sans-serif"
    fontSize: 70px
    fontWeight: 700
    lineHeight: 93px
  headline:
    fontFamily: "LINESeed, 'LINE Seed JP', SFPro, Arial, 'Noto Sans JP', sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 80px
  body:
    fontFamily: "SFPro, Inter, Arial, 'Noto Sans JP', sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
  small:
    fontFamily: "SFPro, Inter, Arial, 'Noto Sans JP', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px

rounded:
  xs: 4px
  sm: 10px
  md: 16px

spacing:
  sm: 8px
  md: 16px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.small}"
    rounded: "{rounded.xs}"
    height: 48px
    padding: 0 24px
  page-band:
    backgroundColor: "{colors.page}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 24px
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.small}"
    rounded: "{rounded.md}"
    padding: 24px

Overview

LINE is the dominant messenger in Japan, Taiwan and Thailand. The site is light and airy: pale gray, near-black ink, big friendly headlines in LINE Seed and one signature green. [Observed]

What defines the look:

  1. A pale gray ground. #f7f8f9 behind white cards. [Measured]
  2. Near-black ink. #1e1e1e for headlines, #616161 and #777777 for supporting text. [Measured]
  3. The LINE green, sparingly. #07b53b appears on small marks and links, not on large areas. [Measured]
  4. Huge friendly headlines. LINE Seed at 70 and 60 at weight 700. [Measured]
  5. Soft small corners. 4, 10 and 16. [Measured]

Source for this file: the line.me English home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The messenger itself was not measured, and LINE's design system site was not read. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Green#07b53bMarks and links
Ink#1e1e1eHeadlines
Secondary and muted#616161, #777777Supporting text
Page and cards#f7f8f9, #ffffffSurfaces

Typography

LINE Seed at 700 sets headlines: 70 on 93 and 60 on 80. SF Pro-style system text sets body at 20 and small text at 16, with Noto Sans JP and Korean behind it. [Measured]

Shape and spacing

Corners are 4, 10 and 16. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light on the page measured. [Observed]

Platform: iOS

The LINE iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for friends, chats, timeline and more. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A compose or add-friend control. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The messenger is expected to share the green and the soft corners with the site. [Inferred]

Platform: Android

The LINE Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for friends, chats, timeline and more. [Inferred]

Main action

Expected on Android: Floating action button.

A floating or bar control for starting a chat. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The messenger is expected to share the green and the soft corners with the site. [Inferred]

Platform: Web

The line.me English home page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A short top bar with product links. [Observed]

Main action

Expected on Web: Page-level button.

A download call to action. [Inferred]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Not measured. [Inferred]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Not measured. [Inferred]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the green, the soft corners and the friendly headline style. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Keep green for small marks.
  • Set headlines huge and friendly.
  • Use pale gray grounds with white cards.
  • Keep corners soft and small.

Don't

  • Don't fill large areas with green.
  • Don't use thin headline weights.
  • Don't use pills for primary buttons.

Known Gaps

  • The messenger, stickers and the LINE app screens were not measured. Only the marketing page was.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • LINE's design system site was not read, so role names are not given.
  • White text on the signature green measures about 2.7 to 1, below 4.5 to 1.