Design System Preview: Graphpaper

01 / Colors

Color Palette

lorem＋lorem ipsum dolor. lorem #212121 lorem α lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

Core / Text

White

#ffffff

lorem --color-bg

Ink

#212121

lorem ipsum dolor

Text Dark

#000000

lorem

Text Light

#646464

lorem ipsum dolor

Primary

#333333

lorem ipsum

Accent / Border

Slate Blue

#8191a4

secondary

Announce Gold

#ab8c52

lorem ipsum

Border

#f1f1f1

lorem ipsum dolor

Border Dark

#bebebe

lorem

Gold Border

#e6ddcb

lorem ipsum

02 / Typography — lorem

Typography

lorem Helvetica, Arial, sans-serif lorem ipsum dolor(lorem ipsum dolor sit amet consectetur). lorem ipsum dolor system Helvetica/Arial＋lorem Noto Sans JP lorem. lorem ipsum dolor sit amet consectetur.font-feature-settings: normal(palt lorem)／ letter-spacing normal.

Graphpaper

Hero (en) — Helvetica 28px / 400 / lh 1.1lorem ipsum

lorem ipsum dolor sit — Section Heading

Section Heading (h2) — Helvetica 13px / 700 / lh 1.5

Linen L/S Oversized Shirt — lorem

Product Name — Helvetica 11px / 400 / lh 1.4（#000）

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

Body / Detail — Helvetica 9.6–10px / 400 / lh 1.4 / ls normal

Web Store　Collection　Concept　Stockist　Contact

Nav Item — Helvetica 10px / 700 / lh 1.3 / lorem / ls normal

Instagram　Contact　Stockist — Footer Label

Footer Label — Helvetica 9.6px / 400 / lh 1.2 / lorem

03 / Products — lorem ipsum dolor

Web Store

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum(radius 0), lorem ipsum dolor. UI lorem ipsum dolor sit.

Image

Linen L/S Oversized Shirt

¥33,000

Image

Suvin Cotton Wide Trousers

¥35,200

Image

Wool Gabardine Jacket

¥68,200

Image

Hard Twist Knit

¥29,700

04 / Buttons

Buttons

lorem ipsum(radius 0)lorem. lorem＋lorem ipsum dolor, #212121 lorem ipsum dolor, lorem ipsum dolor. lorem ipsum dolor.

View All

Ghost(lorem＋1px solid #333 / radius 0)

Join

Dark(#212121 lorem / lorem / lorem)

Slate（#8191a4）

Text link(lorem)

05 / Forms

Forms

lorem ipsum. lorem ipsum dolor #212121 ＋lorem ipsum dolor. lorem #bebebe.

Name

lorem ipsum — border: #bebebe, radius: 0

lorem ipsum — border: #212121 + lorem ipsum dolor

lorem — border: #b23b32(lorem ipsum dolor sit amet consectetur)

06 / Elevation

Depth & Elevation

lorem ipsum dolor sit amet consectetur. lorem ipsum #f1f1f1 / lorem / lorem ipsum dolor sit. lorem #212121 lorem α lorem.

Level 0: Flat

lorem, lorem ipsum dolor sit amet(lorem)

Level 1

0 1px 2px rgba(33,33,33,0.06)

Level 2

0 8px 24px rgba(33,33,33,0.10)

Womens

Color Palette

Typography

Web Store

Buttons

Forms

Depth & Elevation

Spacing