Design System Preview
Creema — lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor lorem lorem lorem lorem lorem
01 / Colors

lorem ipsum dolor

lorem ipsum dolor sit
Pastel Blue
#dfeff5
lorem ipsum dolor sit
Pastel Green
#e3f1e0
lorem ipsum dolor sit
Pastel Pink
#f5dcdc
lorem ipsum dolor sit
Pastel Warm
#f3f1f1
lorem ipsum dolor
lorem ipsum
Text Primary
#333333
lorem / lorem ipsum dolor
Text Secondary
#666666
lorem ipsum / lorem
Text Muted
#868686
lorem / lorem ipsum dolor
Text Light
#999999
lorem / lorem
Text Button
#555555
lorem ipsum dolor
Text Favorite
#888888
lorem ipsum dolor
Gray
#b8b8b8
lorem ipsum
lorem ipsum dolor sit
Background
#ffffff
lorem ipsum
Surface Tag
#f7f7f7
lorem / lorem ipsum dolor
Surface Alt
#f5f5f5
lorem ipsum dolor sit
Surface Card
#fdfdfd
lorem / lorem ipsum dolor
Border
#cccccc
lorem ipsum dolor
Border Light
#e1e1e1
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit — lorem ipsum / lorem / lorem ipsum

lorem ipsum dolor sit — lorem ipsum dolor (h2 Mincho)
Mincho / 12px / 700 / line-height: normallorem ipsum dolor
lorem ipsum dolor sit — lorem ipsum (h3 Mincho)
Mincho / 12px / 400 / line-height: 20px (1.67)lorem ipsum dolor
lorem ipsum dolor, lorem ipsum dolor sit amet consectetur — lorem ipsum (h1 Gothic)
Gothic / 11px / 400 / line-height: 30px (2.73)lorem ipsum dolor
lorem ipsum dolor(14kgf) — lorem / lorem ipsum dolor (Body Gothic)
Gothic / 11px / 400 / line-height: normallorem / lorem
¥3,800 — lorem ipsum (Price)
Gothic / 11px / 400 / color: #999999lorem
SEARCH — lorem ipsum (Label EN)
Times New Roman / 11px / 400 / line-height: 10pxlorem ipsum
CATEGORY — lorem ipsum dolor (Label EN small)
Times New Roman / 10px / 400 / line-height: normallorem ipsum dolor
lorem ipsum — lorem ipsum dolor (Button)
Gothic / 12px / 400 / line-height: 12-18pxlorem ipsum dolor
lorem ipsum ｜ lorem ipsum ｜ lorem ipsum — lorem ipsum dolor
Gothic / 11px / 400 / line-height: 30px (2.73) / color: #868686lorem ipsum dolor
03 / Product

lorem ipsum dolor sit amet

lorem ipsum
140 x 140
lorem ipsum dolor sit amet(lorem ipsum dolor / 14kgf)
lorem ipsum dolor sit amet consectetur 14 lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.
¥4,200
atelier michi
lorem ipsum dolor lorem 14kgf
140 x 140
lorem ipsum dolor(lorem / lorem)
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.
¥3,500
lorem ipsum
lorem / lorem lorem lorem
140 x 140
lorem ipsum dolor(lorem / lorem ipsum)
lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur 2way lorem ipsum.
¥2,800
lorem ipsum dolor
lorem / lorem ipsum dolor lorem ipsum lorem
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Tag Button
lorem
Tag Button
lorem
Tag Button
lorem ipsum
Search Button
♡ My lorem ipsum
Favorite Button
lorem ipsum dolor(lorem ipsum dolor sit)
lorem ipsum dolor
Pastel Blue
lorem / lorem ipsum
Pastel Green
lorem / lorem
Pastel Pink
lorem ipsum
Pastel Warm
05 / Cards

lorem ipsum

1:1
lorem ipsum dolor sit amet(lorem ipsum dolor)
¥4,200
atelier michi
1:1
lorem ipsum dolor(lorem / lorem)
¥3,500
lorem ipsum
1:1
lorem ipsum dolor(lorem / lorem ipsum)
¥2,800
lorem ipsum dolor
1:1
lorem ipsum dolor sit amet consectetur(M lorem)
¥6,500
lorem lorem
1:1
lorem ipsum dolor(lorem ipsum)
¥1,800
lorem lorem
1:1
lorem ipsum dolor sit(lorem)
¥5,200
lorem ipsum lorem
1:1
lorem ipsum dolor(lorem ipsum dolor / lorem ipsum)
¥3,800
Leather craft nui
1:1
lorem ipsum dolor(2 lorem ipsum)
¥2,200
lorem ipsum en
06 / Forms

lorem ipsum dolor

SEARCH
Default / border: #cccccc / radius: 3px / font: 11px Gothic
SEARCH
Focus / border: #333333
lorem ipsum dolor sit amet consectetur adipiscing
Error / border: red
FILTER:
07 / Elevation

Depth & Elevation — lorem ipsum dolor

Level 0: Flat
lorem ipsum / border: #e1e1e1
Level 1: Hover
lorem ipsum dolor sit
Border: Main
#cccccc / lorem ipsum
Pastel Surface
lorem ipsum dolor sit amet consectetur
08 / Layout

lorem ipsum — lorem ipsum + lorem ipsum dolor

CATEGORY
lorem ipsum dolor sit
lorem ipsum dolor / lorem ipsum
lorem ipsum dolor
lorem / lorem / lorem
lorem ipsum / lorem
lorem / lorem ipsum
lorem / lorem ipsum dolor
lorem / lorem
lorem / lorem
lorem ipsum
lorem ipsum dolor sit
lorem ipsum dolor
lorem ipsum
1:1
1:1
1:1
1:1
1:1
1:1
1:1
1:1
1:1
Sidebar: ~200px (Mincho headings) + Main: fluid grid (3-5 cols) / Gutter: compact