lorem ipsum dolor sit amet consectetur Shop Now

Design System Preview
Blue Bottle Coffee Japan

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.

Shop Now Read Design.md
01 / Colors

lorem ipsum dolor

Brand
Brand Blue
#00a9e0
CTA / lorem ipsum dolor sit
Link Gold
#a17c51
lorem ipsum dolor
Warm Beige
#f1e4d8
lorem ipsum dolor
Text
Text Primary
#454545
lorem / lorem
Header Text
#333333
lorem ipsum / lorem
Text Secondary
#7e7e7e
lorem / lorem ipsum dolor
Semantic
Sale Red
#f94c43
lorem ipsum
Star Rating
#f6a429
lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Border
#e3e3e3
lorem ipsum dolor
Header Border
#e0e0e0
lorem ipsum / lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit — Display (h1)
Zen Kaku Gothic New (AXIS Font lorem) / 40px / 400 / line-height: 1.5 / letter-spacing: 0.04emlorem ipsum dolor
lorem ipsum dolor — Heading 2
24px / 400 / line-height: 2.0 / letter-spacing: 0.04emlorem ipsum dolor
lorem ipsum dolor sit amet
22px / 400 / line-height: 1.375 / letter-spacing: 0.04emlorem
lorem ipsum dolor sit — Nav (15px)
15px / 400 / line-height: 2.0 / letter-spacing: 0.04em / color: #333333lorem ipsum
lorem ipsum dolor — line-height 2.0 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. Blue Bottle Coffee lorem UI lorem ipsum dolor sit amet weight 400 lorem ipsum dolor sit. ABCabc 123
14px / 400 / line-height: 2.0 / letter-spacing: normallorem
lorem ipsum dolor sit amet consectetur — Subtitle (13px)
13px / 400 / line-height: 1.5 / letter-spacing: 0.04emlorem
lorem ipsum dolor — Product Title (12px)
12px / 400 / line-height: 2.0 / letter-spacing: 0.04emlorem ipsum
lorem ipsum dolor sit — Caption (10px)
10px / 400 / line-height: 2.0 / letter-spacing: normallorem ipsum
Shop Now — CTA Label (Figtree)
Figtree / 12px / 400 / letter-spacing: 0.2em / uppercase / color: #00a9e0CTA
03 / Article

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit amet

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

lorem ipsum dolor, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. Blue Bottle Coffee lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.

04 / Buttons

lorem ipsum dolor sit

Shop Now
Ghost CTA
Subscribe
Filled CTA
lorem ipsum
Category Tag
lorem ipsum dolor
Category Tag
←
Carousel
→
Carousel
lorem ipsum dolor
Text Link (Gold)
05 / Cards

lorem ipsum

☕

lorem ipsum / lorem ipsum dolor lorem ipsum 12 lorem

¥2,138
★★★★☆ 4.0
☕

lorem / lorem ipsum

¥1,782
★★★★★ 5.0
☕

lorem / lorem ipsum

¥1,296 ¥1,620
★★★★☆ 4.2
☕

lorem ipsum dolor / lorem ipsum

¥1,782
lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #e3e3e3, radius: 0
lorem ipsum — border: #00a9e0 (Brand Blue)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #f94c43 (Sale Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum / lorem(lorem)
Carousel
0px 2px 10px rgba(54,54,54,0.15)
Hover
0px 4px 16px rgba(0,0,0,0.08)
Modal
0px 8px 24px rgba(0,0,0,0.10)
Focus
#00a9e0 (Brand Blue)
08 / Layout

lorem ipsum dolor sit amet consectetur

Spacing Scale
4px
8px
16px
24px
48px
80px
Content Widths
Container 1200px
Main Content 940px
Article 620px
Form 400px