Design System Preview
Asahi Beer

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. CSS Custom Properties lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Brand Blue
#074194
--logo-color / lorem / lorem ipsum / lorem
Attention Gold
#ffd742
--attention-color / lorem / lorem
Semantic
Important / Danger
#cc111a
--important-color / lorem / lorem
Cookie Blue
#0033ff
Cookie lorem CTA
Text
Text Primary
#333333
--text-color / lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text White
#ffffff
lorem / lorem ipsum dolor sit
Surface & Border
Page Background
#ffffff
lorem ipsum
Background
#f9f9f9
--bg-color / lorem / lorem ipsum dolor
Button BG
#f2f2f2
--btn-color / lorem ipsum
Light Blue BG
#edf4fc
lorem ipsum / SNS lorem ipsum
Lighter Blue BG
#cddcf2
lorem ipsum dolor
Border
#dfdfdf
--border-color / lorem ipsum
Close Btn Border
#cfcfcf
lorem ipsum dolor
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor -- Heading 1 (h1/h2)
36px / 700 / line-height: 1.4 / color: #074194 / palt: loremlorem ipsum dolor
lorem ipsum -- Heading 2 (sub)
28px / 500 / line-height: 1.75 / palt: loremlorem ipsum
lorem ipsum -- Heading 3
28px / 400 / line-height: 1.18 / palt: loremlorem ipsum
lorem ipsum dolor -- Product Name (p)
16px / 700 / line-height: 1.75 / palt: loremlorem ipsum
lorem ipsum dolor -- Body Default (16px). lorem ipsum dolor sit. line-height: 1.75 lorem ipsum dolor sit amet consectetur. letter-spacing lorem palt lorem ipsum dolor sit. Noto Sans JP lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 1.75 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor -- Small Body (13px). lorem ipsum dolor sit amet consectetur adipiscing.
13px / 400 / line-height: 1.75lorem ipsum
lorem ipsum dolor -- Footer Link (14px)
14px / 400 / line-height: 1.75lorem ipsum
lorem ipsum -- Nav Link (16px)
16px / 700 / lorem on #074194lorem ipsum dolor
03 / Article -- lorem ipsum

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit 130 lorem ipsum dolor sit, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, lorem ipsum / lorem ipsum dolor sit amet consectetur adipiscing elit sed.

lorem ipsum dolor

lorem ipsum, lorem, lorem, lorem. lorem ipsum dolor sit 4 lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed. ABCabc 123

2024 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur 2.5 lorem. lorem ipsum / lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet.

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary (Brand Blue)
lorem ipsum dolor
Attention (Gold)
lorem ipsum
Secondary (Gray)
lorem ipsum dolor
Danger / Important
lorem
Pill (Close)
lorem ipsum
Cookie Consent
5/12 lorem
Badge (Gold)
lorem ipsum
Badge (Important)
05 / Cards

lorem ipsum dolor sit

5/12 lorem

lorem ipsum dolor lorem ipsum dolor

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

lorem ipsum →
lorem

lorem ipsum lorem ipsum dolor

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

lorem ipsum →
lorem ipsum

lorem ipsum dolor lorem ipsum dolor

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #dfdfdf, radius: 4px
lorem ipsum -- border: #074194 (Brand Blue)
20 lorem ipsum dolor sit amet consectetur
lorem -- border: #cc111a (Important Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
--elevation-1
lorem / lorem ipsum dolor
--elevation-2
lorem ipsum dolor
--elevation-3
lorem ipsum / lorem ipsum dolor
Focus Ring
#074194 (Brand Blue)
08 / Layout

lorem ipsum dolor & lorem ipsum dolor

Spacing Scale

4px
8px
16px
24px
32px
48px

Content Widths

Main Content 1080px
Article 620px
Product Grid (3col) 940px