Design System Preview: lorem Yamatomichi

01 — COLORS

lorem ipsum dolor

lorem“lorem #0386f0 ＋ lorem ipsum #dfceaa”. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

Yamatomichi Blue

#0386f0

lorem ipsum. CTA / lorem

Trail Beige

#dfceaa

lorem ipsum. lorem ipsum

Text Black

#000000

lorem / lorem

Tag Grey

#ebebeb

lorem ipsum dolor

EDITORIAL CARD PALETTE — lorem ipsum dolor

Olive #9db033

Gold #d3ac45

Sky #47a2e3

Coral #f25745

Pink #f171c4

Slate #7f8896

Mint #bed387

Peach #fad7b9

Cream #fffaea

Lavender #e3dde1

02 — TYPOGRAPHY

lorem ipsum dolor

lorem lorem ipsum dolor＋lorem Helvetica Now lorem. lorem weight 300, lorem weight 600–700. (Web lorem Zen Kaku Gothic New lorem)

lorem ipsum H1

h1 · 48px · weight 600 · lh 1.4

lorem — lorem ipsum dolor UL

heading · 24px · weight 600

lorem ipsum dolor 20px

card title · 20px · weight 600

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

body · 16px · weight 300 · lh 1.4(lorem 1.7)

lorem / lorem — lorem ipsum

link · 16px · weight 600 · color #0085ee

03 — JOURNAL

lorem ipsum(lorem / lorem)

lorem ipsum dolor 1 lorem ipsum dolor sit amet. lorem 0, lorem ipsum dolor sit amet.

JOURNALUL Hike lorem? COMMUNITYHLC lorem ipsum PLAYLIST7 lorem ipsum dolor INFORMATIONlorem ipsum dolor sit amet

04 — BUTTONS

lorem

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

lorem ipsum lorem ipsum dolor UL COMMUNITY PLAYLIST

05 — CARDS

lorem ipsum(lorem ipsum dolor)

MINI2 lorem ipsum dolor

¥28,600

UL Shirt

¥17,600

DW 5-Pocket Pants

¥24,200

06 — FORMS

lorem ipsum

lorem ipsum / lorem ipsum / lorem ipsum 3 lorem. lorem 8px, lorem ipsum dolor.

lorem

lorem ipsum dolor(lorem ipsum)

lorem ipsum

lorem ipsum dolor sit amet consectetur.

lorem ipsum

07 — ELEVATION

lorem

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

Level 0 — none

Level 1 — card hover

Level 2 — modal

08 — LAYOUT

lorem ipsum dolor

4 / 8 / 16 / 24 / 40 / 64px. lorem ipsum 16px lorem.

XS 4

S 8

M 16

L 24

XL 40

XXL 64