design system preview

考えぬかれたスキンケア、
ヘアケア、ボディケアをご提案

Aesop（aesop.com/jp）から抽出したデザイントークンのカタログ。SuisseIntl + Zapf-Humanist、角型 CTA（radius 0）、シグネチャークリーム背景 #fffef2。computed style 実測値に基づく。

ソラスを詳しく見る カートに入れる
01 / colors

Color Palette

brand / signature
Aesop Cream
#fffef2
シグネチャー背景色
Warm Cream
#f7ecdd
温かみのある面色
Cream Alt
#f6f5e8
クリームの微細バリエーション
text
Text Primary
#333333
本文・見出し（純黒は使わない）
Text Muted
#666666
ラベル・選択肢
Text Disabled
#9b9b95
カートアイコン・無効
Text on Dark
#fffef2
ダーク面上のテキスト
accent
Teal
#006680
アクセント（ブルーグリーン）
Deep Blue
#27455c
アクセント（ディープブルー）
Forest Green
#346e4a
アクセント（フォレストグリーン）
surface
Surface Dark
#333333
フッター・CTA 背景
Surface Darker
#252525
ダークバリアント
Border
#ced4da
区切り線
02 / typography

Typography

カテゴリー別に探す
Zapf-Humanist / 31px / 400 / line-height: 1.33セクション見出し h2
ソラス リプレニッシング ハイドレーション ハンド セラム
SuisseIntl / 30px / 400 / line-height: 1.33ヒーロータイトル h1/h2
注文とサポート
SuisseIntl / 18px / 700 / line-height: 1.5フッター見出し h2
導き手のためのハンドケアデュエット
SuisseIntl-Medium / 16px / 400 / line-height: 1.5–1.7プロダクトタイル h2/h3
ナイアシンアミド、LHA、ダンデライオンルートを贅沢に配合し、精巧に作られた新しいセラム。軽快な付け心地で素早くなじみ、肌表面を均質に整え、艶と光を引き出します。
SuisseIntl / 16px / 400 / line-height: 1.6 (25.6px)本文 p
身近な人へ贈る贈り物
SuisseIntl / 14px / 400 / color: #666666サブキャプション p
新製品  ·  スキンケア  ·  ヘアケア  ·  ボディケア
SuisseIntl / 13px / 400 / line-height: 1.2ナビゲーション
イソップ 公式オンラインストア
SuisseIntl / 12px / 400 / line-height: 1.5 (18px)ベースサイズ / body
03 / products

Product Cards

Fabulous Face Cleanser

フェイシャル クレンジング ジェル

¥5,500
クレンザー
Resurrection Aromatique

レスレクション ハンドウォッシュ

¥4,400
ハンドケア
Departure Kit

デパーチャー キット

¥6,600
ギフト
04 / buttons

Buttons

Aesop の CTA はすべて角型（radius 0px）。pill ボタンは使わない。

カートに入れる
Primary (bg #333)
詳細を見る
Outline Dark
ソラスを詳しく見る
Outline Light (on dark)
カートに入れる
Primary (on dark)
05 / forms

Forms

デフォルト — border-bottom 1px solid #333333
デフォルト — SuisseIntl 14px / cream 背景
フォーカス — border-bottom teal #006680
06 / layout

Spacing & Width

Spacing Scale

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

Content Widths

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