LINE Design System · LDSG

라인 디자인 시스템 Global Family Service

Messenger LINE Pay LINE Music LINE Manga LINE Shopping

절제된 친근함. LDSG는 메신저·페이·뮤직·만화·쇼핑을 가로지르는 크로스-프로덕트 레이어로, LINE Green을 패밀리 공통 Primary로 약속하고 Hover 70% · Pressed 50% opacity 상태 모델 한 줄로 모든 피드백을 통합합니다. 일본 · 대만 · 태국 어디서나 같은 가족처럼 느껴지는 화면을 유지합니다.

LDSG Global Family Service 공용 시스템
oklch(0.73 0.197 152) LINE Green · Brand Primary
System-native EN · JP · TC · TH 언어팩 (커스텀 웹폰트 없음)
LAICON 공식 아이콘 라이브러리
01

컴포넌트 — Action Button

Contained · Outlined · Ghost · Full-Bleed
Contained
Outlined
Ghost
Sizes
Full-Bleed · iPhone X+
라운드 0 · 전체 너비 · 화면 최하단 고정. Home indicator 영역도 같은 색으로 칠하며 화면 최하단 1차 액션 한정으로만 사용한다.
02

컴포넌트 — Inputs & Indicators

Chip · Switch · Stepper · Badge · Icon Button · FAB · Radio
Chip · Pill 라운드

2개 이상 선택지 전용

전체 카페 맛집 쇼핑 휴무
Medium 선택 Medium 일반
Switch · 즉시 반영

On / Off / Error

알림 받기
중요 메시지만
읽음 표시
상대에게 표시
자동 다운로드
Wi-Fi 환경에서만
Stepper · 수량 입력

최솟값 도달 시 자동 Disabled

M · 46px (기본)
S · 32px
Badge · 상태 / 카운트

Dot · Number · 2-digit+

3
99+
기본 권장: Primary 또는 Red 계열.
두 자리 이상은 twoDigit 옵션.
Icon Button · 3타입

Contained · Outlined · Slot

S 32px · L 52px
Floating Action Button

Circle · Pill 2형

Circle: 단일 또는 Expandable (메인 채움 LINE Green).
Pill: 흰 배경 · gray-300 보더 · 보조 액션 유도용.
Radio Button · 상호 배타

한 번 선택 후 미선택 불가

Checkbox · 다중 선택

Selected · Unselected · Indeterminate

전체 약관 동의
자식이 섞이면 부모는 Indeterminate
이용약관 (필수)
마케팅 수신 (선택)
오류 상태
필수 항목입니다
Slider · 연속 값

Single · Double · Value Label

Single · value label
60
Double · range
0100
Side icons · disabled
03

컴포넌트 — Text Input & Pulldown

Contained · Outlined · Underlined · Error
Text Input · 3 컨테이너 타입

본문 system-native 16px / 1.4

이름 *
김라인
Contained · gray-150 배경
이메일
예: line@example.com
Outlined · gray-300 보더0/40
전화번호
010-1234-5678
Underlined · On Typing (erase)
인증 코드 *
12
코드는 6자리입니다.2/6
Pulldown (Select) + Pulldown Menu

Chevron-Down · 앵커 오버레이 리스트

카테고리
카페
지역
선택하세요
Pulldown Menu · min-width 112px · ≤6 항목
계정
김프로필 보기›
설정
관리자 (비활성)
04

컴포넌트 — Overlays

Popup · Bottom Sheet · Toast
Popup · Text Pattern

너비 288px · radius-400

대화방을 나가시겠어요?

나가기를 하면 채팅 내용이 모두 삭제돼요.

Bottom Sheet · List Pattern

Modal dimmer · Handlebar

공유하기
채팅으로 보내기
링크 저장
다른 앱으로
Toast Overlay · 약 4초 자동 소멸

Icon · Text · black-80 컨테이너

저장되었습니다
불러오는 중…
네트워크를 확인하세요
텍스트 text-m / gray-100 · 사용자가 닫을 수 없음 (강제 확인엔 popup).
05

컴포넌트 — Navigation

Tab · Side Drawer · Bottom Navigation · Page Indicator
Tab · Flexible & Fixed

underline 2px · 하나만 Selected

Flexible · 초과 시 가로 스크롤
전체 받은 메시지 보낸 메시지 보관함 스팸
Fixed · 2–4개 · 100% width
채팅 통화 친구
Side Drawer · 좌측 슬라이드

너비 280px · Icon+Text 항목

김
김라인
@line_kim
홈
채팅
친구
설정
이용약관 · 개인정보처리방침
Bottom Navigation · 5-up

selected = solid · enabled = outline · badge

홈
검색
5
채팅
친구
설정
selected 검정 solid · enabled gray-600 outline · disabled #E4E4E4 · 최대 5개 · 가로 스크롤 없음.
Page Indicator · Dot & Number

active gray-800 · inactive gray-300

3/ 8
Number 타입은 black-40 배경 · white-10 보더 · 이미지/캐러셀 위에 올립니다.
06

컴포넌트 — Skeleton & Footer

Shimmer 로딩 · 애플리케이션 Footer
Skeleton · Shimmer

좌상→우하 흐름 · gray-150 (변경 불가)

progress indicator와 동시 사용 금지.
Footer · 애플리케이션 (모바일)

Social · Items · Copyright

이용약관개인정보처리방침보안고객센터
© LY Corporation
items gray-500 · copyright gray-400 · 컨테이너 gray-150 · divider black-5 · 375px 고정.
07

화면 목업 — 1:1 채팅

LDSG 토큰이 실제 라인 채팅 화면에 적용된 모습
9:41
●●●●
박
박서연
온라인
안녕하세요! 내일 미팅 시간 다시 확인 부탁드려요
네 오후 3시 맞습니다. 신주쿠 카페에서 뵙겠습니다
오후 2:14
감사해요! 그럼 내일 뵐게요
좋은 하루 보내세요!
메시지 입력
LDSG · LY Corporation
어디서든 라인다운 화면.
그것이 패밀리 서비스의 약속.
1억+ 일본 MAU
22 컴포넌트
EN·JP·TC·TH 언어 팩
본 미리보기는 services/line-design-system.md의 토큰을 기준으로 시각화한 LDSG 카탈로그입니다. 공식 공개값은 LINE Green / Black / Disabled gray 3색뿐이며, 11단 그레이와 파생 Brand/Role hex (red-600 = #E8332E, blue-600 = #2C7DFA 등), 타입 px·spacing은 Claude Design 번들 재구성값입니다. 타이포는 언어별 system-native이며 한국어는 LDSG Language Pack 1급이 아니라 다운스트림 Pretendard 폴백으로 렌더됩니다. LDSM(LINE Messenger 본체)의 Semantic Colors 명명 체계는 포함되지 않습니다.