design system preview
21_21

JAPAN VALUE

Tokyo Midtown(tokyo-midtown.com)lorem ipsum dolor sit amet consectetur adipiscing. Morisawa lorem ipsum dolor BBB / lorem B101 / lorem ipsum L lorem ipsum dolor, lorem ipsum dolor / lorem ipsum dolor sit 3 lorem CTA. computed style lorem ipsum dolor.

lorem ipsum lorem ipsum dolor
01 / colors

Color Palette

lorem ipsum dolor

brand
Midtown Green
#009842
lorem / lorem ipsum
CTA Green
#1b9532
CTA lorem / lorem
Pager Dark
#288068
lorem ipsum
Mint
#4abb9d
lorem ipsum
accent
Warm Sand
#b8b081
lorem ipsum dolor
Pale Blue
#dce7eb
utility CTA lorem
Pale Mist
#eff3f5
lorem ipsum
text & surface
Text Primary
#101211
lorem ipsum dolor
Text Secondary
#333333
lorem ipsum
Background
#ffffff
lorem ipsum
02 / typography — lorem(3 lorem)

Typography

lorem ipsum dolor

21_21
HelveticaNeue-Thin / 72px / 400 / line-height: 1.0Hero Number
JAPAN VALUE
gidoleregular / 28px / 400 / line-height: 1.0 / letter-spacing: 2pxSection Title
lorem ipsum dolor — lorem ipsum dolor sit
lorem ipsum BBB / 18px / 700 / line-height: 1.5 (27px)h3
JAPAN VALUE –lorem ipsum
lorem ipsum L / 18px / 400 / letter-spacing: 2pxh2 (decorative)
lorem ipsum / lorem ipsum dolor
lorem B101 / 16px / 400 / line-height: 1.0utility lorem
lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. 21_21 DESIGN SIGHT, lorem ipsum dolor, lorem ipsum dolor / lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.
lorem ipsum BBB / 14px / 500 / line-height: 1.5 (21px)Body
lorem 4-lorem 9-1 lorem ipsum dolor / lorem
lorem ipsum L / 13px / 400 / line-height: 1.5 (19.5px)Caption
lorem ipsum dolor → lorem ipsum&lorem ipsum
lorem B101 / 12px / 400 / line-height: 1.5 (18px) / letter-spacing: 0.5pxutility CTA
JAPAN VALUE
lorem ipsum, lorem ipsum, lorem ipsum dolor.
03 / cards

Editorial Cards

lorem ipsum / lorem ipsum dolor

EVENT
EVENT

21_21 DESIGN SIGHT lorem ipsum

“JAPAN VALUE –lorem ipsum”lorem 4 lorem 1 lorem ipsum. lorem ipsum dolor sit amet consectetur.
SHOPS
SHOPS

lorem ipsum B1F lorem ipsum dolor

4 lorem 15 lorem, lorem ipsum B1F lorem ipsum dolor sit amet consectetur adipiscing.
ART
ART

lorem ipsum dolor / lorem

lorem ipsum dolor sit“lorem ipsum dolor”lorem ipsum. lorem: 4/1 - 6/30.
04 / buttons — 3 lorem ipsum dolor

Buttons

lorem ipsum dolor

lorem ipsum
Solid Pill (radius 56px)
lorem ipsum dolor
Outline Pill (radius 9999px)

Utility Square CTA — lorem 0px

lorem ipsum
Square Green
lorem ipsum dolor
Square Green
lorem&lorem ipsum dolor
Square Pale Blue
lorem ipsum dolor
Square Pale Blue
05 / forms

Forms

lorem ipsum

lorem ipsum — radius 3px / border 1px solid #ccc
lorem ipsum — border 1px solid #009842
06 / layout

Spacing & Width

lorem ipsum dolor sit

Spacing Scale

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

Content Widths

Full Bleed Hero 100vw
Article Section 1280px
Body Text 720px