YOUR FREEDOM lorem ipsum dolor sit amet.

lorem ipsum dolor sit amet consectetur. GU lorem ipsum dolor sit amet consectetur.

¥990
¥1,490
5 lorem 12 lorem ipsum dolor sit
lorem ipsum dolor lorem ipsum dolor
01 / Colors

lorem ipsum dolor

Brand
Brand Red
#ee0000
lorem / SALE lorem ipsum dolor
Dark Teal
#274558
lorem ipsum dolor sit amet
Semantic
Danger / Sale
#ee0000
lorem / lorem ipsum
Success / Eco
#468254
lorem ipsum dolor / lorem
Cookie Toggle
#3860be
Cookie UI lorem
Text
Text Primary
#000000
lorem ipsum dolor(lorem)
Text Dark
#1b1b1b
lorem ipsum dolor sit
Text Secondary
#696969
lorem ipsum dolor
Surface & Border
Background Primary
#ffffff
lorem ipsum
Background Secondary
#f4f4f4
lorem ipsum dolor(185 lorem ipsum)
CTA Surface
#000000
Primary CTA lorem
Border
#dadada
lorem ipsum / lorem ipsum
02 / Typography

lorem ipsum dolor sit

YOUR FREEDOM lorem ipsum dolor sit amet.
GUNextLight (Inter 300) / 32px / 300 / lh: 1.4 / ls: 0.015emHero Title
lorem ipsum dolor sit
GUNextLight (Inter 300) / 24px / 300 / lh: 1.4 / ls: 0.015emSection H3
lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur. GU lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.
GUNextLight (Inter 300) / 17px / 300 / lh: 1.5 / ls: 0.015emBody
Cookie lorem ipsum dolor
Hiragino Pro (Noto Sans JP 700) / 16px / 700 / lh: 1.5Cookie H2
5 lorem 12 lorem ipsum dolor sit
GUNextLight (Inter 300) / 13px / 300 / lh: 1.5 / color: #ee0000Sale Term
¥1,990
GUNextRegular (Inter 700) / 30px / 700 / lh: 1.2 / ls: 0.015em / color: #ee0000Price
¥990
GUNextRegular (Inter 700) / 36px / 700 / lh: 1.2 / Hero PricePrice (Large)
lorem ipsum dolor — lorem ipsum dolor sit amet
GUNextLight (Inter 300) / 14px / 300 / lh: 1.5 / color: #696969Sub Text
03 / Product

lorem ipsum

BEIGE
SALE
lorem ipsum dolor sit amet consectetur(lorem)
lorem ipsum / lorem 6 lorem
¥990¥1,490
5 lorem 12 lorem ipsum dolor sit
BLACK
lorem ipsum dolor sit T lorem(5 lorem)
lorem / lorem 8 lorem
¥790
LIGHT BLUE
SALE
lorem ipsum dolor sit amet consectetur
lorem / lorem 4 lorem
¥1,290¥1,990
5 lorem 15 lorem ipsum dolor sit
PINK
lorem ipsum dolor sit amet consectetur T
lorem ipsum / lorem 10 lorem
¥990
OLIVE
lorem
lorem ipsum dolor
lorem / lorem 5 lorem
¥1,990
LAVENDER
lorem ipsum dolor sit amet
lorem ipsum / lorem 6 lorem
¥1,490
¥990
5 lorem 12 lorem ipsum dolor sit
lorem
04 / Buttons

lorem ipsum dolor sit

GU loremborder-radius: 2px(lorem ipsum)lorem. Pill lorem App Download lorem ipsum dolor. UNIQLO(radius: 0)lorem ipsum dolor.

lorem ipsum dolor(radius: 2px)

Primary CTA
bg #000 / color #fff / radius 2px / 14px 700
lorem ipsum Secondary
border #000 / radius 2px / 14px 300
lorem ipsum dolor Eco
bg #468254 / radius 2px
lorem ipsum Dark Teal
bg #274558 / radius 2px

Pill lorem(radius: 999px)

App lorem ipsum dolor App Download Pill
bg rgba(255,255,255,0.9) / border #dadada / radius 999px

Cookie Toggle

ON (#3860be)
OFF (#dadada)
Cookie Toggle / radius 17px
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur

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

¥1,990
lorem ipsum

lorem ipsum dolor sit

lorem ipsum 1000 lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.

¥1,490
lorem ipsum

GU ACTIVE

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

¥990
lorem ipsum
06 / Forms

lorem ipsum dolor

Default --- border: #dadada / radius: 2px
Focus --- border: #000000 / box-shadow: 0 0 0 1px #000
lorem ipsum dolor sit amet
Error --- border: #ee0000 / box-shadow: 0 0 0 1px #ee0000
07 / Elevation

lorem ipsum

GU lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, lorem ipsum / lorem ipsum dolor.

Level 0: Flat
shadow: none
lorem ipsum dolor
Level 1
0 2px 4px rgba(0,0,0,0.1)
lorem ipsum dolor
Level 2
0 4px 12px rgba(0,0,0,0.15)
lorem ipsum / lorem ipsum
08 / Layout

lorem ipsum dolor

HEADER: Sticky / lorem 64px / lorem + lorem ipsum dolor + lorem ipsum
HERO: lorem ipsum / bg #f4f4f4 / Light lorem (300) + lorem (700)
PRODUCT GRID: minmax(200px, 1fr) / lorem ipsum 2 lorem / lorem ipsum dolor 4 lorem
MAX WIDTH: 1440px / padding 16px (mobile) / 24px (desktop)
GUTTER: 8px - 16px
SECTIONS: #ffffff lorem #f4f4f4 lorem ipsum

Spacing Scale

4px
XS
8px
S
16px
M
24px
L
32px
XL
48px
XXL
Font Note

lorem ipsum dolor

GU lorem ipsumGUNextLight(weight 300)loremGUNextRegular(weight 700)lorem 2 lorem Web lorem ipsum dolor sit amet. lorem ipsum dolor sitInter(Google Fonts, weight 300/700)lorem ipsum dolor sit amet consectetur. loremNoto Sans JP(weight 300/700)lorem ipsum dolor.

lorem ipsum dolorfont-weight 300 lorem ipsumlorem ipsum. lorem / lorem / lorem ipsum dolor weight 300 lorem ipsum, lorem ipsum dolor(GUNextRegular, 700)lorem Cookie UI(700)lorem ipsum dolor sit amet. lorem“lorem ipsum dolor sit amet consectetur”lorem GU lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sitletter-spacing: 0.015em(0.48px)lorem ipsum dolor sit amet. UNIQLO lorem letter-spacing: normal lorem ipsum dolor sit, GU lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor“lorem”lorem ipsum dolor sit amet.

lorem ipsum dolor sitHiragino Kaku Gothic Pro(ProN lorem ipsum Pro)lorem ipsum.BIZ UDGothic / BIZ UDPGothic lorem ipsum dolor UNIQLO lorem ipsum dolor, UD(lorem ipsum dolor sit)lorem ipsum dolor sit amet consectetur adipiscing.palt / kern lorem ipsum dolor, lorem(lorem ipsum)lorem ipsum dolor sit.