Design System Preview: lorem

01 / COLORS

lorem

lorem(lorem ipsum)lorem ipsum dolor, lorem ipsum dolor sit×lorem. lorem ipsum, lorem ipsum dolor sit amet consectetur.

Brand / lorem

lorem Moss

#5b5d22

lorem ipsum

lorem Brown

#1c130a

lorem ipsum / lorem

White

#ffffff

lorem ipsum dolor

Accent / Text

lorem Khaki Gold

#8f7e4b

lorem ipsum

lorem Vermilion

#9f0e14

lorem ipsum

Ink

#000000

lorem / lorem

Border Gray

#827e7a

CTA lorem

Muted

#bbbbbb

lorem ipsum dolor

02 / TYPOGRAPHY — lorem

lorem

lorem ipsum / lorem / lorem ipsum dolor sit(FOT-lorem ipsum Pr6). lorem ipsum dolor Baskerville, lorem ipsum dolor sit amet. lorem ipsum dolor sit Shippori Mincho / Libre Baskerville / Zen Kaku Gothic New lorem.font-feature-settings: normal(palt lorem).

Hero Date — Baskerville / 160px / lh 1.0(lorem #fff)lorem ipsum

lorem

H1 — lorem 32px / 400 / lh 1.7 / ls 0.02em

lorem ipsum／lorem ipsum

H2 — lorem M 24px / 400 / lh 1.5 / ls normal

lorem

lorem(lorem)— lorem 24px / 400 / ls 7.2px (0.3em)

lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet.ABCabc 0123

Body — lorem 16px / 400 / lh 1.7 (27.2px) / ls 0.32px (0.02em)

lorem ipsum dolor　lorem ipsum dolor sit　lorem ipsum dolor

Nav — lorem M 18px / 400 / lh 1.7 / ls 0.32px (0.02em)

lorem ipsum　 lorem ipsum

Label(lorem / lorem ipsum)— lorem ipsum 12px / 400 / lh 2.0(lorem #8f7e4b ／ lorem #9f0e14)

03 / PRODUCTS — lorem ipsum dolor sit

lorem ipsum dolor

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur(lorem / lorem)lorem ipsum. lorem ipsum dolor, lorem ipsum / lorem ipsum dolor.

lorem ipsum

8g×30 lorem

lorem ipsum

8g×24 lorem

lorem ipsum dolor

lorem ipsum

8g×18 lorem

lorem ipsum

lorem lorem ipsum

9g×20 lorem

04 / BUTTONS

lorem

lorem ipsum(radius 0). lorem ipsum dolor sit amet＋lorem ipsum, lorem ipsum dolor sit＋lorem.

lorem ipsum dolor sit amet consectetur

Hero Veil(#1c130a/0.5＋lorem #827e7a)

lorem ipsum

Content Dark(#000 lorem / lorem)

lorem ipsum dolor sit

Moss(lorem #5b5d22)

lorem ipsum

Ghost(lorem＋lorem #827e7a)

05 / FORMS

lorem ipsum

lorem ipsum. lorem ipsum dolor #1c130a(lorem)＋lorem ipsum. lorem ipsum #9f0e14.

lorem

lorem ipsum — border: #827e7a, radius: 0

lorem ipsum dolor

lorem ipsum — border: #1c130a + lorem ipsum

lorem ipsum dolor

lorem — border: #9f0e14(lorem)

06 / ELEVATION

lorem

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

Level 0: Flat

lorem, lorem ipsum dolor sit(lorem)

Level 1

0 1px 3px rgba(28,19,10,0.10)

Level 2

0 8px 24px rgba(28,19,10,0.16)