design system preview

Tomorrow is Beautiful.

TOMORROWLAND(tomorrowland.co.jp)lorem ipsum dolor sit amet consectetur adipiscing. Cormorant Garamond + Noto Sans JP, weight 300 lorem ipsum dolor sit, lorem×lorem ipsum dolor sit amet. computed style lorem ipsum dolor.

TOMORROWLAND ONLINE STORE
01 / colors

Color Palette

base
Black
#000000
lorem ipsum / lorem ipsum(lorem)
White
#ffffff
lorem(lorem)
Divider
#eaeaea
lorem ipsum
Muted
#cdcdcd
lorem ipsum dolor
seasonal accent
Sky Blue
#a0c9e3
lorem ipsum dolor(lorem)
Terracotta
#e67f60
lorem ipsum dolor(lorem ipsum)
Sage
#a1b2a1
lorem ipsum dolor(lorem)
Warm Beige
#d9d4c3
lorem ipsum dolor(lorem ipsum dolor)
02 / typography

Typography

Tomorrow is Beautiful.
Cormorant Garamond / 72px / 300 / line-height: normallorem ipsum dolor h2
BRAND
Cormorant Garamond / 46px / 300 / line-height: normallorem ipsum dolor p
MESSAGE
Cormorant Garamond / 20.8px / 300 / line-height: normallorem ipsum dolor p
1978 lorem ipsum dolor, lorem ipsum dolor sit“lorem ipsum dolor sit”lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do.
Noto Sans JP / 16px / 300 / line-height: 1.6lorem body/p
INFORMATION
Noto Sans JP / 12.8px / 300 / line-height: normallorem ipsum dolor sit amet
03 / editorial

Brand Cards

Collection

2026 Spring / Summer

TOMORROWLAND COLLECTION
Lookbook

GALERIE VIE

BRAND
Editorial

MACPHEE

BRAND
04 / buttons

Buttons

TOMORROWLAND lorem CTA lorem outline lorem. lorem ipsum dolor sit. lorem 5px lorem ipsum dolor.

TOMORROWLAND ONLINE STORE
Outline (5px radius)
lorem ipsum dolor
Text Link Style
05 / forms

Forms

lorem ipsum — border 1px solid #eaeaea / radius 0
lorem ipsum — border 1px solid #000000
06 / layout

Spacing & Width

Spacing Scale

8px
16px
32px
40px
80px
140px

Content Widths

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