LINE Design System · LDSG · Dark

라인 디자인 시스템 Global Family Service

Messenger LINE Pay LINE Music LINE Manga LINE Shopping

절제된 친근함. LDSG는 메신저·페이·뮤직·만화·쇼핑을 가로지르는 크로스-프로덕트 레이어로, LINE Green을 패밀리 공통 Primary로 약속하고 Hover 70% · Pressed 50% opacity 상태 모델 한 줄로 모든 피드백을 통합합니다. 다크 환경에서는 LINE Green의 명도를 +6 보강해 가독성을 확보합니다.

LDSG Global Family Service 공용 시스템
oklch(0.73 0.197 152) LINE Green 원본 (light 정전)
+6 명도 Dark 보강 oklch(0.79 0.197 152)
Known Gap LDSG 공식 다크 토큰 미공개
다크 모드 안내 — LDSG 공식 문서는 다크 모드 카운터파트 토큰을 정의하지 않습니다(Known Gaps). 본 미리보기는 토큰을 재정의하지 않고 표현 레이어에서만 셸·카드 배경을 어둡게 매핑하며, LINE Green primary는 명도 +6 보강 (oklch 0.79 0.197 152) 으로 대비를 확보합니다. 아래 컬러 스왓치는 source-of-truth design.md의 light 정전 OKLCH를 그대로 표기합니다.
01

컬러 — Rainbow Color

토큰값은 light 정전 OKLCH
Messenger Primary

기본 팔레트 · 공식 공개값

LINE Green
Brand Primary · 패밀리 공통
ldsg-color-linegreen · #06C755
oklch(0.73 0.197 152)
dark-resolved · oklch(0.79 0.197 152) (+6)
LINE Black
본문 텍스트 · primarytext
ldsg-color-black · #000000
oklch(0 0 0)
공식 공개값
Disabled Gray
비활성 컨텐츠 · 라벨
ldsg-color-disabled-gray · #E4E4E4
oklch(0.92 0 0)
공식 공개값
Brand Color · 테마 토큰

서비스가 재정의 가능

Brand Primary
= linegreen (default)
ldsg-color-brand-primary
oklch(0.73 0.197 152)
Brand Primary Alt
= lightgreen-700 · #04A647
ldsg-color-brand-primary-alt
oklch(0.63 0.171 151)
Brand Secondary
= linenavy · #1E2742
ldsg-color-brand-secondary
oklch(0.25 0.054 268)
brand-secondary-alt는 공식 "TBD" — 임의 값을 발명하지 않습니다.
Role Color · 의미 토큰

positive = LINE Green (정정)

Positive
= LINE green
oklch(0.73 0.197 152)
Negative
red-600 · #E8332E
oklch(0.59 0.221 25)
Link
blue-600 · #2C7DFA
oklch(0.61 0.197 258)
Disabled
role-disabled
oklch(0.92 0 0)
11-Stop Gray Scale · 번들 재구성 (light 정전)

150 · 350은 half-stop · gray-150이 가장 빈번한 표면

100
150
200
300
350
400
500
600
700
800
900
100 #FCFCFC · oklch(0.99 0 0) 150 #F5F5F5 · 기본 표면 300 #DFDFDF · 보더 350 #C8C8C8 · placeholder 500 #949494 · 보조 텍스트 600 #777777 · bottom-nav enabled 800 #303030 · active dot 900 #111111 · 닫기 · 메뉴 텍스트
Opacity State Model · 시스템 트레이트

컬러 토큰 대신 opacity로 상태 표현

Normal100%
Hover70% · PC 전용
Pressed50%
Disabled는 enabled 색과 무관하게 항상 #E4E4E4(role-disabled)를 씁니다. Hover(70%)는 PC·웹 전용이라 모바일에는 존재하지 않습니다.
프로비넌스: 공식 공개값은 LINE Green / Black / Disabled gray 3색뿐. 나머지(11단 그레이 · 파생 Brand/Role hex)는 Claude Design 번들 재구성값입니다.
02

타이포그래피 — System-native

언어별 Language Pack · 커스텀 웹폰트 없음
Title Type · 작은 line-height

헤딩 · 리스트 타이틀 · 서브타이틀

디자인 시스템
title-xxl
38px
라인 패밀리
title-xl
28px
글로벌 서비스
title-l
22px
팝업 타이틀 Medium
title-m-200
18px
스텝퍼 입력 라벨
title-s-100
16px
Text Type · 넉넉한 line-height 1.5

본문 · 버튼 라벨 · 캡션

본문 텍스트 샘플입니다. 한국어 본문 가독성은 다운스트림 Pretendard 폴백으로 렌더됩니다.
text-m
16px
팝업 디스크립션. 이 작업은 되돌릴 수 없어요.
text-s-100
14px
CAPTION · OVERLINE · BADGE LABEL
text-xs
12px
$ldsg-typography-title-m-200
en
Lang
title
Type
m
Size
18px
Px*
200
Wt→500
언어별 System-native 스택

EN 기본 · KR은 다운스트림 Pretendard 폴백

EN Design System -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto…
JP デザインシステム "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo…
TC 設計系統 "PingFang TC", "Heiti TC", "Microsoft JhengHei"…
TH ระบบการออกแบบ "Sukhumvit Set", "Helvetica Neue", "Noto Sans Thai"…
Weight 토큰 100/200/300 → 400 Regular / 500 Medium / 700 Bold. KR은 LDSG Language Pack 1급이 아니며, 여기 한글은 런타임 Pretendard 폴백으로 렌더됩니다.
Size → px 스케일 · RECONSTRUCTED*

캐노니컬 아님 · Figma 측정 필요

title-xxl / xl / l38 / 28 / 22 px
title-m / s / xs18 / 16 / 14 px
text-l / m / s / xs18 / 16 / 14 / 12 px
line-height tight / normal1.25 / 1.5
text-input · pulldown 본문16px / 1.4
* LDSG는 타입 사이즈를 이미지로만 공개해 px가 추출되지 않습니다 — 위 값은 번들 근사값(RECONSTRUCTED)입니다.
03

라운드 · 그림자

5단 라운드 · Dark에서는 그림자 알파 보강
Rounded · 5단 스케일 (공식)

기본 5px · Modal 12px까지

3
radius-100
3px · badge
5
radius-200
5px · button
7
radius-300
7px · card
12
radius-400
12px · modal
∞
radius-circle
FAB · avatar
Elevation · On Dark Surface

알파 보강 (Dark 가시성 확보)

on-white-100
chips · badges
on-white-200
mid · large btn
on-white-300
cards · sheets
공식 그림자는 알파 0.04~0.12로 매우 옅음 — 다크에서는 가시성 위해 알파만 표현 보강.
04

컴포넌트 — Action Button

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

컴포넌트 — 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
06

컴포넌트 — 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 항목
계정
김프로필 보기›
설정
관리자 (비활성)
07

컴포넌트 — 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).
08

컴포넌트 — 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 보더 · 이미지/캐러셀 위에 올립니다.
09

컴포넌트 — 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 고정.
10

화면 목업 — 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 번들 재구성값입니다. 다크 모드는 LDSG 공식 토큰이 없어(Known Gap) 표현 레이어에서만 매핑하며, LINE Green은 명도 +6 보강했습니다. 타이포는 언어별 system-native이며 한국어는 다운스트림 Pretendard 폴백으로 렌더됩니다.