design system preview

lorem ipsum dolor sit amet,
lorem ipsum, lorem ipsum dolor sit

Aesop(aesop.com/jp)lorem ipsum dolor sit amet consectetur adipiscing. SuisseIntl + Zapf-Humanist, lorem CTA(radius 0), lorem ipsum dolor sit amet #fffef2. computed style lorem ipsum dolor.

lorem ipsum dolor sit lorem ipsum dolor
01 / colors

Color Palette

brand / signature
Aesop Cream
#fffef2
lorem ipsum dolor sit
Warm Cream
#f7ecdd
lorem ipsum dolor
Cream Alt
#f6f5e8
lorem ipsum dolor sit amet consectetur
text
Text Primary
#333333
lorem / lorem(lorem ipsum dolor)
Text Muted
#666666
lorem / lorem
Text Disabled
#9b9b95
lorem ipsum dolor / lorem
Text on Dark
#fffef2
lorem ipsum dolor sit
accent
Teal
#006680
lorem ipsum(lorem ipsum dolor)
Deep Blue
#27455c
lorem ipsum(lorem ipsum dolor)
Forest Green
#346e4a
lorem ipsum(lorem ipsum dolor sit)
surface
Surface Dark
#333333
lorem ipsum / CTA lorem
Surface Darker
#252525
lorem ipsum dolor
Border
#ced4da
lorem ipsum
02 / typography

Typography

lorem ipsum dolor sit
Zapf-Humanist / 31px / 400 / line-height: 1.33lorem ipsum dolor h2
lorem lorem ipsum dolor lorem ipsum dolor lorem lorem
SuisseIntl / 30px / 400 / line-height: 1.33lorem ipsum dolor h1/h2
lorem ipsum dolor
SuisseIntl / 18px / 700 / line-height: 1.5lorem ipsum dolor h2
lorem ipsum dolor sit amet consectetur
SuisseIntl-Medium / 16px / 400 / line-height: 1.5–1.7lorem ipsum dolor h2/h3
lorem ipsum dolor, LHA, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit, lorem ipsum dolor sit.
SuisseIntl / 16px / 400 / line-height: 1.6 (25.6px)lorem p
lorem ipsum dolor sit
SuisseIntl / 14px / 400 / color: #666666lorem ipsum dolor p
lorem  ·  lorem ipsum  ·  lorem ipsum  ·  lorem ipsum
SuisseIntl / 13px / 400 / line-height: 1.2lorem ipsum dolor
lorem ipsum lorem ipsum dolor sit
SuisseIntl / 12px / 400 / line-height: 1.5 (18px)lorem ipsum dolor / body
03 / products

Product Cards

Fabulous Face Cleanser

lorem ipsum dolor lorem ipsum dolor lorem

¥5,500
lorem ipsum
Resurrection Aromatique

lorem ipsum dolor lorem ipsum dolor

¥4,400
lorem ipsum
Departure Kit

lorem ipsum dolor lorem

¥6,600
lorem
04 / buttons

Buttons

Aesop lorem CTA lorem ipsum dolor(radius 0px). pill lorem ipsum dolor.

lorem ipsum dolor
Primary (bg #333)
lorem ipsum
Outline Dark
lorem ipsum dolor sit
Outline Light (on dark)
lorem ipsum dolor
Primary (on dark)
05 / forms

Forms

lorem ipsum — border-bottom 1px solid #333333
lorem ipsum — SuisseIntl 14px / cream lorem
lorem ipsum — border-bottom teal #006680
06 / layout

Spacing & Width

Spacing Scale

8px
16px
24px
32px
64px
120px

Content Widths

Full Bleed Hero 100vw
Content Area 1100px
Body Text 640px