--- 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 | Role | Value | Where | |------|-------|-------| | Green | `#07b53b` | Marks and links | | Ink | `#1e1e1e` | Headlines | | Secondary and muted | `#616161`, `#777777` | Supporting text | | Page and cards | `#f7f8f9`, `#ffffff` | Surfaces | ### 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.