Design System Preview

JILL STUART Beauty
Design Token Catalog

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, Shippori Mincho / EB Garamond / Inter Tight lorem 3 lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

View DESIGN.md
01 / Colors

lorem ipsum dolor

Brand Surface
Brand Surface
#f5f0ef
lorem ipsum dolor(count 40)
Accent Surface
#f3e8e6
lorem ipsum dolor sit
Accent Rose
#eed2cd
lorem ipsum dolor
Text
Text Primary
#4c4948
lorem ipsum dolor(lorem ipsum dolor)
Text Secondary
#3b4043
lorem ipsum dolor(lorem ipsum dolor)
Text Muted
#8a8584
lorem ipsum dolor / lorem
Surface & Border
Background
#ffffff
lorem ipsum
Border Default
#e7e7e7
lorem ipsum dolor
Border Focus
#b8a09a
lorem ipsum dolor
Dark Surface
#3b4043
lorem ipsum / lorem ipsum
Gradient System
#ffffff
#f5f0ef
#f3e8e6
#eed2cd
02 / Typography

lorem ipsum dolor sit

lorem ipsum, lorem ipsum dolor sit
Shippori Mincho / 30px / 500 / line-height: 1.5 / letter-spacing: 0.04em / palt: onh2 Heading
New Collection
Montserrat / 28px / 300 / line-height: 1.0 / letter-spacing: 0.1emh2 English
lorem ipsum dolor sit amet
Shippori Mincho / 22px / 500 / line-height: 1.5 / letter-spacing: 0.04em / palt: onh2 Small
Lip & Cheek
EB Garamond / 20px / 500 / letter-spacing: 0.08emCategory Label
Bloom Couture Eyes
EB Garamond / 13px / 400 / letter-spacing: 0.12emProduct Sub-label
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur 12px lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. Inter Tight + Noto Sans JP lorem ipsum dolor sit. ABCabc 123
Inter Tight + Noto Sans JP / 12px / 400 / line-height: 2.0 / letter-spacing: 0.02emBody
lorem ipsum dolor sit amet
Shippori Mincho / 11px / 500 / letter-spacing: 0.06emNav
03 / Product

lorem ipsum dolor sit amet

Lip
lorem ipsum dolor
¥3,080 (tax included)
Eye Shadow
lorem ipsum dolor sit lorem
¥6,380 (tax included)
Cheek
lorem ipsum lorem ipsum dolor sit lorem ipsum
¥4,620 (tax included)
Foundation
lorem ipsum dolor lorem ipsum dolor CC lorem ipsum
¥3,520 (tax included)
Fragrance
lorem ipsum dolor sit lorem ipsum dolor
¥5,280 (tax included)
Hand Cream
lorem ipsum lorem ipsum dolor
¥2,640 (tax included)
04 / Buttons

lorem ipsum dolor sit

View Details
Text Link (EN)
lorem ipsum
Text Link (JP)
lorem ipsum
Minimal
lorem
Tab Default
lorem
Tab Active
lorem ipsum
Reset
ADD TO CART
Dark CTA
WISHLIST
Outline Light
05 / Cards

lorem ipsum dolor sit

Beauty Tips

lorem ipsum dolor sit amet consectetur

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

Read More
New Arrival

lorem ipsum dolor lorem ipsum dolor sit

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

Read More
Gift

lorem ipsum dolor sit lorem ipsum dolor

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

Read More
06 / Forms

lorem ipsum dolor

Default -- border: #e7e7e7, radius: 0
Focus -- border: #b8a09a (warm rose)
lorem ipsum dolor sit amet consectetur
Error -- border: #c45c5c
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Elevation 1
0 1px 4px rgba(76,73,72,0.06)
Elevation 2
0 4px 16px rgba(76,73,72,0.08)
Elevation 3
0 8px 32px rgba(76,73,72,0.10)
Focus Ring
#b8a09a (warm rose)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
4
8
12
16
20
24
32
40
48
64
80
Content Widths
Main Content 940px
Product Grid 860px
Article Content 620px
Form Container 400px