Design System Preview
LAWSON (lorem ipsum) — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. LAWSON lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
LAWSON Blue
#0072ce
lorem ipsum dolor / CTA
Blue Dark
#1f5fa8
lorem / lorem ipsum dolor
Blue Light
#63b2ed
lorem ipsum dolor
Text
Text Primary
#333333
lorem ipsum dolor
Text Dark
#3b3b3b
lorem ipsum dolor
Text Secondary
#999999
lorem ipsum dolor
Semantic
Success
#4caf50
lorem / lorem
Danger
#cc0000
lorem / lorem
Warning
#f5a623
lorem / lorem
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f7f7f7
lorem / lorem ipsum dolor
Input BG
#f2f2f2
lorem ipsum
Border
#dddddd
lorem ipsum dolor
Border Light
#eeeeee
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

LAWSON lorem ipsum dolor
M PLUS Rounded 1c / 26px / 900 / line-height: 1.2 / color: #1f5fa8lorem ipsum
lorem ipsum dolor — Section Heading
Noto Sans JP / 26px / 100 / line-height: 1.4 / letter-spacing: 0.025emlorem
lorem ipsum — Sub Heading
Noto Sans JP / 20px / 200 / line-height: 1.4 / letter-spacing: 0.025emlorem
lorem ipsum dolor — Footer Heading
Noto Sans JP / 16px / 200 / line-height: 1.4 / letter-spacing: 0.0375emlorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit LAWSON lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed do. lorem ipsum dolor ProN lorem ipsum, lorem ipsum dolor sit amet consectetur.
lorem / 13-14px / 400 / line-height: 1.4-1.6 / letter-spacing: 0.05emlorem
lorem ipsum dolor — Small (11-12px)
11-12px / 400 / line-height: 1.4 / color: Text Secondary
lorem > lorem / lorem ipsum > lorem ipsum > lorem ipsum
lorem ipsum / 10px / 400 / line-height: 1.4lorem
03 / Article — lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor sit, lorem ipsum dolor

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

lorem ipsum dolor 35 lorem ipsum

1986 lorem ipsum dolor, lorem ipsum dolor LAWSON lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum, lorem, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. ABCabc 123

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. Specialty coffee experience at your neighborhood LAWSON.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
lorem ipsum
Outline
lorem ipsum
Region / Surface
lorem ipsum
Danger
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor

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

lorem ipsum dolor →

lorem ipsum

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

lorem ipsum dolor →

Ponta lorem

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

lorem ipsum dolor →
06 / Forms

lorem ipsum dolor

lorem ipsum — bg: #f2f2f2, border: #dddddd, radius: 10px
lorem ipsum — border: #0072ce (LAWSON Blue)
lorem — border: #cc0000 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
lorem, lorem ipsum dolor
Level 2
lorem ipsum dolor, lorem
Level 3
lorem ipsum / lorem ipsum
Focus Ring
#0072ce (LAWSON Blue)
08 / Layout

lorem ipsum & lorem ipsum dolor

Spacing Scale
4px
8px
16px
24px
32px
48px
lorem ipsum dolor
Container Max 1080px
Main Content 940px
Article Content 620px