Design System Preview
Francfranc

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

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Dusty Rose
#9c706d
lorem ipsum dolor sit / lorem
Blush
#f2e9e7
lorem ipsum dolor sit
Hot Pink
#ef4e96
SALE / lorem ipsum dolor
Text
Text Primary
#222222
lorem / lorem
Text Secondary
#7f7f7f
lorem ipsum dolor
Surface & Background
BG Primary
#ffffff
lorem ipsum
BG Secondary
#f3f2f3
lorem ipsum dolor
BG Blush
#f2e9e7
lorem ipsum
Surface Dark
#222222
CTA / lorem ipsum
Border
Border Default
#ababab
lorem ipsum / lorem ipsum
Border Light
#e0e0e0
lorem ipsum dolor
Semantic
Error
#c0392b
lorem / lorem ipsum dolor
Success
#27ae60
lorem / lorem
Warning
#f39c12
lorem / lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — H1 (36px)
36px / 500 / line-height: 1.5 / letter-spacing: 0.05em / palt: loremlorem ipsum dolor
lorem ipsum dolor — H2 (20px)
20px / 600 / line-height: 1.5 / letter-spacing: 0.05em / palt: loremlorem ipsum
lorem ipsum dolor — H3 (12px)
12px / 600 / line-height: 1.5 / letter-spacing: 0.05em / palt: loremlorem ipsum / lorem
lorem ipsum — H4 (16px)
16px / 500 / line-height: 1.5 / letter-spacing: 0.05em / palt: loremlorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit, lorem ipsum dolor sit. Francfranc lorem“lorem, lorem ipsum dolor sit”lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
13px / 400 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor — Small (10px)
10px / 400 / line-height: 1.5 / color: Text Secondarylorem ipsum / lorem
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit amet

◆
lorem ipsum lorem ipsum dolor L
¥5,800
◆
SALE
lorem ipsum lorem ipsum dolor
¥1,980 ¥3,200
◆
lorem ipsum dolor lorem ipsum dolor sit
¥3,500
◆
lorem ipsum lorem ipsum dolor S
¥2,200
◆
SALE
lorem ipsum lorem ipsum dolor
¥4,500 ¥7,800
◆
lorem ipsum lorem ipsum dolor
¥3,800
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary — bg #222, radius 0
lorem ipsum
Secondary — border #222, radius 0
SALE
SALE Badge — bg #ef4e96
lorem ipsum
Text Link — underline on hover
Disabled
lorem ipsum dolor
Brand Accent — bg #9c706d
05 / Cards

lorem ipsum dolor sit

◆

lorem ipsum dolor sit amet consectetur

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

lorem ipsum
◆

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor
◆

lorem ipsum dolor sit amet consectetur

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

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #ababab, radius: 0
lorem ipsum — border: #222222
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #c0392b
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem ipsum)
Level 1
0 1px 3px rgba(0,0,0,0.06)
Level 2
0 2px 8px rgba(0,0,0,0.08)
Focus Ring
border: #222222
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
4px
8px
12px
16px
24px
32px
48px
64px
80px
Content Widths
Max Container 1200px
Content Area 940px
Product Grid (4-col) ~280px per col
Side Padding (Desktop) 32px