★

Design System Preview
SAPPORO BEER

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor. YakuHanJP lorem ipsum dolor sit amet.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Star Gold
#f3be00
lorem ipsum dolor sit / lorem ipsum dolor
Star Gold Dark
#d4a600
lorem ipsum(lorem)
Interactive
Link Blue
#186cc2
lorem ipsum dolor
Nav Dark
#222222
lorem ipsum / lorem ipsum
Semantic
Notice Red
#e51b33
lorem ipsum dolor / lorem ipsum
Success
#1e8e3e
lorem / lorem(lorem)
Warning
#d97706
lorem(lorem)
Text
Dark
#222222
lorem / lorem
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#777777
lorem ipsum dolor / lorem ipsum dolor
Text Muted
#aaaaaa
lorem ipsum dolor sit
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f1f2f6
lorem ipsum dolor
Footer Surface
#f5f6f9
lorem ipsum dolor
Input Border
#dddddd
lorem ipsum dolor
Dropdown Border
#e4e5ec
lorem ipsum dolor sit
Select Border
#cccccc
lorem ipsum dolor sit
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Page Title (h1)
40px / 400 / line-height: 1.3 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — Section Heading (h2)
30px / 400 / line-height: 1.3 / letter-spacing: normallorem ipsum dolor
lorem / lorem — Nav Link Primary
15px / 700 / line-height: 1.3 / color: #222222lorem ipsum dolor
lorem ipsum dolor — Category Label
14px / 500 / line-height: 1.0 / color: #333333lorem ipsum
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. 1876 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. “lorem ipsum dolor sit. ”
14px / 400 / line-height: 1.71 / letter-spacing: normallorem
lorem ipsum dolor — Notice Title
14px / 400 / line-height: 1.5 / color: #e51b33lorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor / lorem(12px / line-height: 1.9)
12px / 400 / line-height: 1.9 / color: #777777lorem
lorem ipsum dolor sit — Utility Nav
12px / 700 / line-height: 1.3 / color: #aaaaaaIR / CSR / lorem ipsum

YakuHanJP lorem ipsum dolor

YakuHanJP OFF(Noto Sans JP lorem)
“lorem ipsum dolor sit amet”lorem, lorem ipsum dolor sit amet consectetur adipiscing. (1876 lorem)
YakuHanJP ON(lorem ipsum dolor)
“lorem ipsum dolor sit amet”lorem, lorem ipsum dolor sit amet consectetur adipiscing. (1876 lorem)
YakuHanJP lorem / lorem ipsum dolor sit amet. lorem ipsum dolor Noto Sans JP lorem ipsum dolor.
03 / Article

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet

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

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

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur. lorem, lorem, lorem, lorem — lorem 4 lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet consectetur, lorem ipsumlorem ipsumlorem ipsum dolor.

lorem ipsum dolor, lorem / lorem / lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum, lorem ipsum, lorem ipsum dolor — lorem ipsum“lorem ipsum”lorem ipsum dolor sit amet consectetur. ABCabc 123

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Brand Accent
lorem ipsum
Ghost
lorem
Dark
lorem ipsum dolor sit
Text Link

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. filled lorem ipsum pill CTA lorem ipsum, border-radius 3px lorem ipsum dolor sit amet.

05 / Cards

lorem ipsum dolor sit

★
Beer

lorem ipsum dolor sit amet

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

lorem ipsum
★
Premium

lorem ipsum dolor

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

lorem ipsum
★
Craft

lorem ipsum SORACHI 1984

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

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dddddd, radius: 3px
lorem ipsum — border: #186cc2 (Link Blue)
lorem ipsum dolor sit amet consectetur
lorem — border: #e51b33 (Notice Red)
lorem ipsum — border: #cccccc
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Level 1
0 2px 4px rgba(0,0,0,0.08)
Level 2
0 4px 12px rgba(0,0,0,0.10)
Level 3
0 8px 24px rgba(0,0,0,0.12)
Focus Ring
#186cc2 (Link Blue)
Surface
#f1f2f6 lorem ipsum dolor
08 / Layout

lorem ipsum dolor & lorem ipsum dolor

Spacing Scale

4px
8px
10px
20px
40px
45px

Content Widths

Main Content 1100px (lorem)
Article Body 620px
Side Padding 40px

Border Radius

0px (lorem)
3px (lorem ipsum)
50% (lorem ipsum)