Design System Preview
lorem ipsum — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. Shopify lorem ipsum CSS Custom Properties lorem computed style lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand / Accent
Soft Blue
#c8dce6
lorem ipsum / lorem ipsum bg
Coffee Brown
#9d826e
lorem / lorem bg
Price Brown
#663300
lorem ipsum
Tag Light Blue
#e9f1f5
lorem ipsum dolor bg
Text
Text Primary
#000000
lorem ipsum dolor
Product Name
rgba(0,0,0,0.75)
lorem
Text Secondary
#290200
lorem ipsum dolor
Price
#663300
lorem ipsum dolor
Semantic / Ranking
Wishlist
#ff4500
lorem ipsum
Gold (No.1)
#ffc107
lorem ipsum 1 lorem
Silver (No.2)
#9e9e9e
lorem ipsum 2 lorem
Bronze (No.3)
#b87333
lorem ipsum 3 lorem
Surface / Border
Background
#ffffff
lorem ipsum
Surface Secondary
#c8dce6
lorem ipsum / lorem ipsum bg
CTA Surface
#121212
CTA lorem bg
Border
#dfdfdf
lorem ipsum / lorem ipsum
Placeholder
#e0e0e0
lorem ipsum dolor sit
02 / Typography

lorem ipsum dolor sit

SARUTAHIKO COFFEE — Display
Zen Kaku Gothic New (brothers lorem) / 28px / 700 / letter-spacing: 0.06emlorem ipsum dolor
lorem ipsum dolor — Nav Item (15px/700)
15px / 700 / letter-spacing: 0.06emlorem ipsum dolor
lorem ipsum — Announcement / H1 (14px/400)
14px / 400 / letter-spacing: 0.046emlorem ipsum
lorem ipsum dolor — Heading 2 (13px/700)
13px / 700 / letter-spacing: 0.05emlorem ipsum
lorem ipsum dolor — lorem ipsum dolor 2011 lorem ipsum dolor sit amet consectetur adipiscing elit. “lorem ipsum dolor sit amet consectetur”lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.
14px / 500 / line-height: 1.5 / letter-spacing: 0.043emlorem
¥1,680(lorem)
16px / 700 / color: #663300lorem
lorem ipsum dolor / lorem ipsum dolor — Tag / Caption (10–12px)
10–12px / 400lorem
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit

lorem ipsum dolor — lorem ipsum dolor

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

lorem ipsum dolor sit

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

¥1,680 lorem / 200g
NEW lorem ipsum
lorem ipsum lorem lorem lorem ipsum
lorem ipsum dolor
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA (#121212)
lorem ipsum
Outline (shadow lorem)
Wishlist (#ff4500)

Badges

NEW lorem ipsum No.1 No.2 No.3

Tags

lorem lorem ipsum lorem lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor

Variant Pill

lorem ipsum lorem lorem
05 / Cards

lorem ipsum dolor sit

No.1 240 x 240
lorem ipsum dolor 200g
¥1,680(lorem)
NEW 240 x 240
lorem ipsum lorem ipsum dolor 200g
¥1,980(lorem)
lorem ipsum 240 x 240
lorem ipsum dolor lorem ipsum dolor 10 lorem
¥2,400(lorem)
240 x 240
lorem ipsum dolor lorem ipsum 200g
¥1,780(lorem)
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dfdfdf, radius: 5px
lorem ipsum — border: #121212, shadow ring
lorem ipsum dolor sit amet consectetur
lorem — border: #c0392b
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem ipsum dolor)
Button Shadow
0 2px 2px rgba(0,0,0,0.25)
Card Hover
0 4px 12px rgba(0,0,0,0.1)
Dropdown / Menu
0 8px 24px rgba(0,0,0,0.12)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale

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

Grid

lorem ipsum dolor(Desktop)4 col / gap 8px
lorem ipsum dolor(Mobile)2 col / gap 4px