SUMMER SALE lorem 50%OFF loremSHOP NOW

Design System Preview
graniph — lorem ipsum T lorem ipsum dolor

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

lorem ipsum dolor
01 / Colors

lorem ipsum dolor

Brand
Brand Red
#dc0816
lorem / lorem / CTA
Neutrals
Text Primary
#282828
lorem ipsum dolor / lorem ipsum
Text Secondary
#505050
lorem ipsum dolor / lorem ipsum dolor
Text Tertiary
#b4b4b4
lorem ipsum dolor / lorem ipsum
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f8f8f8
lorem ipsum dolor / lorem ipsum
Border
#e8e8e8
lorem ipsum / lorem ipsum
Dark Surface
#282828
lorem ipsum / CTA lorem
02 / Typography — lorem ipsum EC lorem

lorem ipsum dolor sit

lorem ipsum dolor — H2 (18px / 600)
18px / 600 / line-height: 1.5 / letter-spacing: 0.01emlorem ipsum dolor
lorem ipsum dolor — EC lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. Body (16px / 400)
16px / 400 / line-height: 1.15 / letter-spacing: 0.01emlorem
lorem ipsum dolor sit — Nav Label (15px / 700)
15px / 700 / line-height: 1.15 / letter-spacing: 0.01emlorem ipsum dolor
lorem ipsum — lorem ipsum dolor sit amet consectetur adipiscing. Sub Label (14px / 400)
14px / 400 / line-height: 1.4 / letter-spacing: 0.01em / color: Text Secondarylorem
META LABEL — lorem ipsum / lorem ipsum (12px / 700)
12px / 700 / line-height: 1.15 / letter-spacing: 0.04em / uppercaselorem ipsum
lorem ipsum / lorem — Small (11px / 700)
11px / 700 / line-height: 1.15 / letter-spacing: 0.02emlorem / lorem
¥3,300 (lorem)
lorem ipsum: 14px / 700 + lorem 11px / 400lorem ipsum
03 / Product — lorem ipsum

lorem ipsum dolor sit

ALL MEN WOMEN KIDS
graniph
lorem ipsum lorem T lorem
¥3,300 (lorem)
NEW
graniph
lorem ipsum dolor sit amet lorem ipsum T lorem
¥2,750 (lorem)
graniph
lorem ipsum dolor lorem ipsum
¥4,400 (lorem)
SALE
graniph
lorem ipsum dolor lorem ipsum
¥2,200 ¥3,300
SALE
graniph
lorem ipsum lorem ipsum dolor T lorem
¥3,300 (lorem)
NEW
graniph
lorem lorem ipsum dolor T lorem
¥2,200 (lorem)
graniph
lorem ipsum dolor lorem ipsum
¥6,600 (lorem)
graniph
lorem ipsum dolor lorem ipsum T lorem
¥3,850 (lorem)
lorem ipsum
04 / Buttons

lorem ipsum dolor sit

Login (pill / dark)
lorem ipsum dolor
Register (pill / outline)
SHOP NOW
Promo CTA (square / red)
ALL
Tab Active
MEN
Tab Default
lorem ipsum dolor
Add to Cart (square / dark)
♡ lorem ipsum
Wishlist (outline)
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor

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

VIEW MORE →

lorem ipsum dolor sit

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

VIEW MORE →

lorem ipsum dolor sit

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

VIEW MORE →
06 / Forms

lorem ipsum dolor

lorem ipsum — background: #f8f8f8, border-radius: 0
lorem ipsum — border: #e8e8e8, radius: 0
lorem ipsum — border: #282828
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #dc0816 (Brand Red)
07 / Elevation — lorem ipsum dolor sit

Depth & Elevation

Level 0: Flat
lorem / lorem ipsum dolor(lorem ipsum dolor)
Elevation 1
lorem ipsum dolor(lorem ipsum)
Elevation 2
lorem ipsum dolor / lorem ipsum dolor
Elevation 3
lorem ipsum / lorem ipsum
Focus
border: 2px solid #282828
08 / Layout — lorem ipsum dolor

lorem ipsum dolor

Max Width (lorem ipsum dolor)1200px
Content Width 960px
4-Column Grid (lorem ipsum)4 × 25%
Grid Gap 16px
Nav Height 56px
Grid Visual
1/4
2/4
3/4
4/4