design system preview

Tomorrow is Beautiful.

TOMORROWLAND（tomorrowland.co.jp）から抽出したデザイントークンのカタログ。Cormorant Garamond + Noto Sans JP、weight 300 の超軽量エレガンス、純黒×純白のハイコントラスト。computed style 実測値に基づく。

TOMORROWLAND ONLINE STORE
01 / colors

Color Palette

base
Black
#000000
テキスト・ボーダー（純黒）
White
#ffffff
背景（純白）
Divider
#eaeaea
区切り線
Muted
#cdcdcd
ミュート要素
seasonal accent
Sky Blue
#a0c9e3
季節アクセント（空色）
Terracotta
#e67f60
季節アクセント（テラコッタ）
Sage
#a1b2a1
季節アクセント（セージ）
Warm Beige
#d9d4c3
季節アクセント（ウォームベージュ）
02 / typography

Typography

Tomorrow is Beautiful.
Cormorant Garamond / 72px / 300 / line-height: normalヒーロータイトル h2
BRAND
Cormorant Garamond / 46px / 300 / line-height: normalセクションラベル p
MESSAGE
Cormorant Garamond / 20.8px / 300 / line-height: normalサブヘッディング p
1978年の設立以来、トゥモローランドは「上質で美しい日常着」をコンセプトに、トレンドに左右されない普遍的なスタイルを追求し続けています。
Noto Sans JP / 16px / 300 / line-height: 1.6本文 body/p
INFORMATION
Noto Sans JP / 12.8px / 300 / line-height: normalインフォメーションラベル
03 / editorial

Brand Cards

Collection

2026 Spring / Summer

TOMORROWLAND COLLECTION
Lookbook

GALERIE VIE

BRAND
Editorial

MACPHEE

BRAND
04 / buttons

Buttons

TOMORROWLAND の CTA は outline のみ。塗りボタンは使わない。角丸 5px の控えめな丸み。

TOMORROWLAND ONLINE STORE
Outline (5px radius)
ニュースを見る
Text Link Style
05 / forms

Forms

デフォルト — border 1px solid #eaeaea / radius 0
フォーカス — 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