Design System Preview
lorem ipsum — lorem ipsum

lorem ipsum dolor. “lorem ipsum”lorem ipsum dolor. 1919 lorem ipsum dolor sit amet consectetur.

lorem ipsum lorem ipsum dolor sit
01 / Colors

lorem ipsum dolor

Brand
Calpis Blue
#0033ff
CTA
Dark Navy
#27455c
lorem ipsum
Medium Blue
#0053c5
lorem / lorem ipsum
Accent
Medium Navy
#3860be
lorem ipsum
Light Blue
#cddcf2
lorem ipsum
Blue Link
#003399
lorem ipsum dolor
Text
Primary
#000000
lorem ipsum dolor
Dark
#3c3c3c
lorem ipsum dolor
Gray
#696969
lorem ipsum
Surface & Background
Background
#ffffff
lorem ipsum
Light Blue
#e8f0fa
lorem ipsum dolor
Alt
#f8f8f8
lorem ipsum dolor sit
Footer
#ffffff
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Product Title (22px)
22px / 700 / line-height: 1.2 / color: #0053c5lorem ipsum dolor
lorem ipsum dolor — 1919 lorem ipsum dolor“lorem ipsum”lorem, 100 lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 1.5 / letter-spacing: normallorem
lorem ipsum — Small (12px) — lorem ipsum dolor sit amet consectetur adipiscing
12px / 400 / line-height: 1.5 / color: #3c3c3clorem ipsum dolor
lorem ipsum dolor — Footer (10px) — ©ASAHI SOFT DRINKS Co.,LTD.
10px / 400 / line-height: 1.5lorem ipsum
lorem ipsum dolor — Link (14px)
14px / 400 / color: #003399lorem ipsum dolor
03 / Article

lorem ipsum dolor sit

100 lorem ipsum dolor sit amet consectetur

100 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit. lorem ipsum dolor sit amet. “lorem ipsum”lorem 1919 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

lorem / lorem ipsum dolor sit amet consectetur adipiscing, “lorem ipsum”lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA (radius: 2px)
lorem ipsum dolor sit
Secondary (Blue Border)
lorem ipsum dolor
Pill (radius: 17px)
Disabled
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit

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

lorem ipsum →

lorem ipsum dolor

“lorem ipsum”lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum →

lorem ipsum lorem

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #ccc, radius: 2px
lorem ipsum — border: #0033ff (Calpis Blue)
lorem — border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem / lorem ipsum dolor(lorem ipsum dolor)
Level 1: Subtle
0 1px 3px rgba(0,0,0,0.08)
Brand Border
#0053c5 (Medium Blue)
Focus Ring
#0033ff (Calpis Blue)
08 / Layout

lorem ipsum dolor

Main Content 960px
Article 620px