Life on LINE

lorem ipsum dolor sit amet LINE lorem ipsum dolor sit amet consectetur. DESIGN.md lorem ipsum dolor sit, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor DESIGN.md lorem

01 / Colors

lorem ipsum dolor

Brand

LINE Green

#06c755

lorem ipsum dolor / CTA

LINE Green Dark

#05b34c

lorem / lorem

Text

Text Primary

#000000

lorem ipsum dolor

Text Secondary

#666666

lorem ipsum dolor

Text Disabled

#999999

lorem ipsum

Semantic

Success

#06c755

lorem / lorem

Danger

#d93025

lorem / lorem

Warning

#f9ab00

lorem / lorem

Surface & Border

Background

#ffffff

lorem ipsum

Surface

#f7f8f9

lorem / lorem ipsum dolor

Border

#e5e5e5

lorem ipsum / lorem

02 / Typography

lorem ipsum dolor sit

Life on LINE

70px / 700 / line-height: normal / letter-spacing: normallorem ipsum dolor

lorem ipsum dolor sit amet

60px / 700 / line-height: 80.04px (x1.334) / letter-spacing: normalh2 lorem

LINE lorem ipsum dolor

60px / 700 / line-height: 76.2px (x1.27) / letter-spacing: normalh2 lorem

lorem ipsum dolor — body font-size lorem 20px lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur. SFPro + Noto Sans JP lorem ipsum dolor sit.

20px / 400 / line-height: normal / letter-spacing: normal / palt: normallorem

lorem ipsum dolor — Small (14px)

14px / 400 / line-height: normal / color: Text Secondary

03 / Chat — lorem ipsum dolor UI

lorem ipsum dolor

lorem ipsum!lorem ipsum dolor sit amet consectetur?

14:30

15 lorem ipsum. lorem A lorem ipsum dolor

14:31

lorem ipsum!lorem ipsum dolor sit amet

14:31

lorem ipsum dolor sit. lorem ipsum dolor sit!

14:32

04 / Buttons

lorem ipsum dolor sit

Primary CTA

Outline

Danger

Ghost

05 / Cards

lorem ipsum dolor

💬

lorem

lorem ipsum, lorem ipsum, lorem, lorem, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum

📞

lorem / lorem ipsum

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum

📰

LINE NEWS

lorem ipsum dolor LINE lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum

06 / Forms

lorem ipsum dolor

lorem ipsum — border: #e5e5e5, radius: 8px

lorem ipsum

lorem ipsum — border: #06c755 (LINE Green)

lorem ipsum

lorem — border: #d93025 (Danger)

07 / Elevation

Depth & Elevation

Level 0: Flat

lorem, lorem ipsum dolor

Level 1

0 2px 8px rgba(0,0,0,0.08)

Level 2

0 4px 16px rgba(0,0,0,0.12)

Level 3

0 8px 24px rgba(0,0,0,0.16)

Focus Ring

#06c755 (LINE Green)