LINE Brand Design System Deep-Dive

1. Brand Overview

LINE’s visual language is exactly what you’d expect from one of Asia’s dominant messaging platforms: clean, friendly, and unapologetically digital. This is not a “heritage” brand. It’s built for speed and clarity — interfaces that feel like they belong on your phone, not in a museum.

The vibe: approachable tech. The design system is flat, with rare use of shadows, and heavy reliance on crisp edges and pill shapes. The primary green (#07b53b) is the heartbeat — bright enough to be instantly recognizable, but not so neon that it fatigues. It says “this is the action button” in every context.

Typography is modern sans. The custom LINESeed font leads, supported by SFPro for system consistency and fallback coverage. The stack is deliberately multilingual, with Noto Sans JP and Noto Sans KR ensuring Japanese and Korean text renders perfectly. That’s a big signal: this brand is global in reach but deeply rooted in East Asian usability norms.

The grid? Strict. An 8px base scale drives all spacing decisions. You can almost hear the design team saying, “No, we don’t do 7px margins.” That consistency makes the UI feel tight and engineered.

Buttons are pill-shaped, with 50px radius — a choice that screams “mobile-first.” Borders are subtle, often semi-transparent, which keeps visual noise low. Shadows are minimal, almost decorative rather than functional.

Overall, this system is built for clarity over ornamentation. It’s not “minimalist” in the Apple sense — there’s color, personality, and character — but it avoids clutter. The design prioritizes legibility, speed, and recognizability. It’s for people who tap quickly, not those who linger.

2. Color System

2.1 Primary Colors

The single most important color in LINE’s palette is Primary Green — #07b53b. It’s used for CTAs, active states, and anything that requires user action. Psychologically, green signals “go,” “success,” and “positive.” It also differentiates them from competitors like WhatsApp (#25D366) — LINE’s green is slightly darker, more stable, and less pastel.

Interestingly, the site also uses a pure link blue (#0000ee) — the old-school HTML anchor color. That’s rare in modern design, but it works here because links are secondary actions and need to stand out in text-heavy contexts.

The rest of the palette is neutral: deep charcoal (#1e1e1e), mid-gray (#616161), and white. The neutrals dominate backgrounds and text, with green reserved for emphasis.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid. Charcoal on white hits WCAG AA easily. Green on white is fine for large text but borderline for small text — they mitigate this with bold weights. Blue on white is classic and highly accessible.

Dark mode isn’t explicitly defined in the extracted data, but the heavy use of charcoal backgrounds and white text suggests a preference for high-contrast surfaces.

2.4 Usage Guide

• Green + White: Use for primary buttons and success states. Avoid for long text blocks — fatigue risk.
• Blue + White: Good for inline links. Avoid using blue for buttons — that’s not LINE’s action color.
• Charcoal + White: Default text/background pairing.
• Mid Gray: Use for secondary text and non-critical info.
• Don’t mix green and blue in the same action cluster — too much competition.

3. Typography

3.1 Font Families

• LINESeed — Custom brand font. Used for major headings and some links.
  Fallbacks: SFPro, Arial, Noto Sans JP, Noto Sans KR.
• SFPro — Apple’s system font. Used across headings, links, and buttons.
  Fallbacks: Arial, Noto Sans JP, Noto Sans KR (sometimes AppleSDGothicNeo for Korean).

No Google Fonts, no Adobe Fonts. This is a locked-down system — they control rendering.

3.2 Type Scale

3.3 Hierarchy

The jump from 70px to 60px to 40px is a clear top-down hierarchy. Anything 20px or below feels like UI text rather than content. The extreme line heights (up to 4.00) are unusual — they create airy spacing for small link text, which helps touch targets.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Everything snaps to this.

4.2 Layout

Breakpoints: 422px, 800px, 878px, 879px. Odd that 878 and 879 are separate — likely fine-tuned for specific components. No full desktop width defined, but the presence of large fixed spacings suggests wide layouts.

5. Visual Elements

Border Radius:

• 4px — Small UI elements.
• 10px — Rare, maybe list items.
• 16px — Images.
• 50px — Buttons (full pill).

Shadows:

• Main: rgba(0,0,0,0.1) 0px 20px 20px 0px — soft drop.
• Minor: rgba(0,0,0,0.1) 0px 1px 0px 0px — hairline.
• Inset: rgba(0,0,0,0.2) 0px -0.6px 0px 0px inset — subtle inner border.

Borders:

• 1px solid rgba(255,255,255,0.3) — on links.
• Semi-transparent charcoals for neutral elements.
• Green border for active button.

6. Components

6.1 Buttons

Primary:

• Background: #07b53b
• Color: #ffffff
• Padding: 8px 15px
• Radius: 50px
• Border: 1px solid #07b53b
• Font: SFPro, 13px, 700

States:

• Hover: no outline change.
• Focus: no outline.
• Active: not defined — probably same as default.

Secondary:

• Background: transparent
• Color: rgba(30,30,30,0.7)
• Border: 1px solid rgba(30,30,30,0.2)
• Same padding/radius/font.

6.2 Links

Three styles:

• Charcoal, bold.
• Blue (#0000ee), normal.
• White (#ffffff), normal.

No underline by default.

6.3 Forms

No data on inputs — possibly custom styled elsewhere or native mobile.

6.4 Cards

Likely using 16px radius from image data and primary shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-link-blue: #0000ee;
  --color-charcoal: #1e1e1e;
  --color-mid-gray: #616161;
  --color-white: #ffffff;
  --color-primary-green: #07b53b;
  --color-swiper-blue: #007aff;

  /* Typography */
  --font-line-seed: "LINESeed", "SFPro", Arial, "Noto Sans JP", "Noto Sans KR";
  --font-sf-pro: "SFPro", Arial, "Noto Sans JP", "Noto Sans KR";

  /* Spacing */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-14: 0.88rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-28: 1.75rem;
  --space-30: 1.88rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-40: 2.5rem;
  --space-60: 3.75rem;
  --space-70: 4.38rem;
  --space-74-63: 4.66rem;
  --space-85: 5.31rem;
  --space-160: 10rem;
  --space-180: 11.25rem;
  --space-270: 16.88rem;
  --space-319-98: 20rem;
  --space-674-39: 42.15rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.1) 0px 20px 20px 0px;
  --shadow-sm: rgba(0,0,0,0.1) 0px 1px 0px 0px;
  --shadow-inset: rgba(0,0,0,0.2) 0px -0.6px 0px 0px inset;
}

8. AI Coding Assistant Prompt

# LINE Design System Specification

You are a LINE design expert. Build UIs matching their visual language exactly.

## Brand Context
LINE's design is mobile-first, clean, and approachable. It uses a bright primary green for actions, strict 8px spacing, and pill-shaped buttons. Typography is modern sans with multilingual support.

## Color Palette
- Link Blue: #0000ee — Inline text links
- Charcoal: #1e1e1e — Primary text
- Mid Gray: #616161 — Secondary text
- White: #ffffff — Backgrounds, text on dark
- Primary Green: #07b53b — CTAs, active states
- Swiper Blue: #007aff — Swiper component accents

## Typography
Fonts:
- Headings: "LINESeed", SFPro, Arial, Noto Sans JP, Noto Sans KR
- Body/UI: "SFPro", Arial, Noto Sans JP, Noto Sans KR

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | LINESeed | 70px | 700 | — | Hero |
| H1 | LINESeed | 60px | 700 | 1.33 | Large headings |
| H1 | SFPro | 40px | 700 | 1.20 | Mid headings |
| ... | ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px. Scale: 4px, 8px, 12px, 14px, 16px, 20px, 28px, 30px, 32px, 36px, 40px, 60px, 70px, 74.63px, 85px, 160px, 180px, 270px, 319.98px, 674.39px.

## Border Radius
- sm: 4px — small UI
- md: 10px — lists
- lg: 16px — images
- pill: 50px — buttons

## Shadows & Depth
- Large: rgba(0,0,0,0.1) 0px 20px 20px 0px
- Small: rgba(0,0,0,0.1) 0px 1px 0px 0px
- Inset: rgba(0,0,0,0.2) 0px -0.6px 0px 0px inset

## Components

### Primary Button
```css
.btn-primary {
  background: #07b53b;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid #07b53b;
}
.btn-primary:hover,
.btn-primary:focus {
  outline: none;
  opacity: 1;
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: rgba(30,30,30,0.7);
  padding: 8px 15px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(30,30,30,0.2);
}
```

### Navigation Links
```css
.nav-link {
  color: #1e1e1e;
  font-weight: 700;
  text-decoration: none;
}
.nav-link-blue {
  color: #0000ee;
  font-weight: 400;
}
```

## Layout & Responsive Rules
Breakpoints: 422px, 800px, 878px, 879px. Use fixed spacing tokens for padding/gaps.

## Interaction Rules
- Transitions: 150ms ease for state changes
- No outlines on focus — rely on color change or opacity

## DO List
- Use only colors from palette
- Maintain 8px grid
- Use LINESeed for headings
- Keep buttons pill-shaped
- Use bold weights for green text

## DON'T List
- Don't invent new greens
- Don't use shadows heavily
- Don't mix sharp and pill corners
- Don't underline links by default

## Code Examples

Primary Button:
```css
<button class="btn-primary">Send</button>
```

Secondary Button:
```css
<button class="btn-secondary">Cancel</button>
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: var(--space-20);
}
```

9. Summary

TL;DR: LINE’s design system is mobile-first, green-driven, and disciplined. 8px grid, pill buttons, multilingual sans fonts. Minimal shadows, maximum clarity.

Brand Keywords: mobile-first, green-centric, touch-optimized, multilingual-ready, flat-friendly