Design System Preview
COEDO Brewery

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

lorem ipsum lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Primary & Accent
Primary
#212121
CTA / lorem ipsum dolor
Primary Hover
#000000
lorem ipsum
Gold
#ab8c52
lorem ipsum CTA / lorem
Primary Light
#855656
lorem ipsum dolor
Text
Text Primary
#212121
lorem ipsum dolor
Text Light
#646464
lorem ipsum dolor
Text Dark
#000000
lorem ipsum dolor
Semantic
Sale
#d20000
lorem ipsum
Error
#721c24
lorem ipsum dolor
Error BG
#f8d7da
lorem ipsum
Cart Badge
#f50057
lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
BG Secondary
#f7f9fa
lorem ipsum dolor sit
BG Brighter
#f2f2f2
lorem ipsum dolor
Border
#f0f0f0
lorem ipsum
Border Dark
#bdbdbd
lorem ipsum dolor
Notification
#8b8888
lorem ipsum
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Section Title (H2)
27px / 400 / line-height: 1.2 / letter-spacing: normal / seriflorem ipsum dolor
lorem ipsum dolor — Subsection (H3)
22px / 400 / line-height: 1.2 / letter-spacing: 0.1em / seriflorem ipsum
lorem ipsum dolor — COEDO lorem -Ruri- 333ml lorem 6 lorem
14px / 400 / line-height: 1.375 / letter-spacing: 0.1em / seriflorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. lorem weight 400 lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. The quick brown fox jumps over the lazy dog. 0123456789
13.6px / 400 / line-height: 1.375 / letter-spacing: normal / seriflorem
¥3,080 (lorem)
14px / 400 / line-height: 1.375 / letter-spacing: 0.02em / seriflorem
lorem ipsum dolor BUTTON TEXT
13px / 400 / line-height: 1.375 / letter-spacing: 0.1em / seriflorem
lorem ipsum dolor — Footer Link
12px / 400 / line-height: 1.375 / letter-spacing: 0.1em / seriflorem ipsum
lorem ipsum
10px / 400 / line-height: 1.36 / letter-spacing: 0.1em / seriflorem
03 / Article

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

COEDO Craft Beer Story

COEDO lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit.

lorem -Ruri- Pilsner

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

lorem -Kyara- Indian Pale Lager

lorem ipsum dolor sit amet. 6 lorem ipsum 2 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet consectetur.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary Solid
lorem ipsum dolor
Gold Secondary
lorem ipsum lorem ipsum
Outline
lorem ipsum >
Text Button
lorem ipsum dolor sit lorem ipsum on lorem lorem ipsum dolor sit amet
05 / Cards

lorem ipsum

🍺

COEDO lorem -Ruri-

¥3,080 (lorem)
🍺
lorem ipsum

COEDO lorem -Beniaka-

¥3,520 (lorem)
🍺

COEDO lorem -Kyara-

¥3,080 (lorem)
🍺
SALE

COEDO lorem -Shikkoku-

¥2,640 ¥3,080
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #bdbdbd, radius: 0px
lorem ipsum — border: #212121
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #721c24, error-bg: #f8d7da
lorem ipsum — lorem ipsum dolor / lorem ipsum dolor
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor. lorem ipsum
Elevation 1
0px 2px 6px rgba(0,0,0,0.04), 0px 2px 2px rgba(0,0,0,0.02)
Elevation 2
0px 4px 12px rgba(0,0,0,0.08)
Gold Accent Border
border: 2px solid #ab8c52
08 / Layout

lorem ipsum & lorem ipsum dolor

Spacing Scale

4px
8px
16px
24px
32px
64px

Content Widths

Container 1200px
Content Area 940px
Article 620px

Product Grid

1/4
2/4
3/4
4/4
Desktop: 4 columns / gap: 16px / radius: 0px