design system preview

正直品質。

FANCL（fancl.co.jp）から抽出したデザイントークンのカタログ。Zen Kaku Gothic New + ヒラギノ角ゴ、広い letter-spacing、ブルー基調の清潔感。computed style 実測値に基づく。

スキンケアを見る DESIGN.md を読む
01 / colors

Color Palette

brand / action
Brand Blue
#1e4d9e
Zen Kaku 見出し色
Dark Navy
#072b4d
システムフォント見出し
CTA Blue
#0070c0
pill ボタン、CTA
Link Blue
#0067cc
テキストリンク
Promo Orange
#f0ac00
プロモバッジ、特価ラベル
text
Text Primary
#000000
本文テキスト
Text Dark Navy
#00254d
強調テキスト
Text Gray
#5c6063
ナビ、非アクティブタブ
Text Muted
#757575
検索、補足テキスト
surface
Page Background
#f7fafd
ページ背景（ブルーホワイト）
Surface White
#ffffff
カード、モーダル
Surface Light Blue
#f1f8ff
プロモセクション bg
Surface Gray
#eff0f4
カテゴリヘッダー bg
Inactive Tab
#f0f0f0
非アクティブタブ bg
02 / typography

Typography

無添加スキンケア
Zen Kaku Gothic New / 16px / 700 / letter-spacing: 0.44em (7px) / color: #1e4d9eヒーロー見出し
うるおい美肌へのこだわり
Zen Kaku Gothic New / 24px / 400 / letter-spacing: 0.30em (7px) / color: #000000セクションタイトル
商品ラインナップ
Zen Kaku Gothic New / 22px / 400 / letter-spacing: 0.30em (6.6px) / color: #000000サブセクションタイトル
スキンケア・基礎化粧品
System Stack / 22px / 700 / letter-spacing: normal / color: #072b4dエリア見出し
人気のセットをチェック
Zen Kaku Gothic New / 18px / 700 / letter-spacing: 0.11em (2px) / color: #1e4d9e / bg: #f1f8ffプロモ見出し
化粧液・美容液
System Stack / 16px / 700 / letter-spacing: normal / color: #072b4d / bg: #eff0f4カテゴリラベル
ファンケルの「無添加」は、防腐剤・香料・合成色素・石油系界面活性剤・紫外線吸収剤を一切使っていません。肌本来の美しさを引き出すスキンケアをお届けします。
System Stack / 16px / 400 / line-height: 1.4 / letter-spacing: normal本文
スキンケア | サプリメント | ボディケア
System Stack / 16px / 400 / color: #5c6063ナビゲーション
エイジングケア・美白
System Stack / 12.32px / 400 / color: #757575小カテゴリ

肌にやさしい、正直品質。

防腐剤・香料・合成色素・石油系界面活性剤・紫外線吸収剤を一切使わない「無添加」。ファンケルは、肌本来の美しさを引き出すスキンケアをお届けします。

03 / products

Product Cards

Mild Cleansing Oil
BEST SELLER
スキンケア > クレンジング

マイルドクレンジング オイル

1,870円（税込）
★★★★★ 4.7
Enrich Plus
スキンケア > 化粧液

エンリッチプラス 化粧液 II しっとり

1,870円（税込）
★★★★☆ 4.5
Deep Charge Collagen
限定セット
サプリメント > 美容

ディープチャージ コラーゲン 30日分

1,717円（税込）
★★★★★ 4.8
Calorie Limit
サプリメント > ダイエット

カロリミット 30回分

1,563円（税込）
★★★★☆ 4.3
04 / buttons

Buttons

カートに入れる
Pill Active (30px)
サプリメント
Pill Inactive (30px)
商品一覧を見る
Outline Pill (30px)
badges
BEST SELLER
Promo Badge (半pill / 右のみ丸い)
限定セット
Promo Badge (日本語)
この商品も一緒にいかがですか
Cross-sell Badge
tab group
すべて スキンケア サプリメント ボディケア メイク
05 / cards

Cards

無添加へのこだわり
ファンケルの「無添加」は、防腐剤・香料・合成色素・石油系界面活性剤・紫外線吸収剤を使っていません。
詳しく見る →
初回限定 お試しセット
はじめてのお客様限定。人気のスキンケア3点セットを特別価格でお届けします。
お試しセットを見る
カテゴリから探す
クレンジング 洗顔 化粧液 乳液 美容液
06 / forms

Forms

半角英数字で入力してください
デフォルト -- border 1px solid #cccccc / radius 5px
フォーカス -- border 1px solid #0070c0 / shadow 0 0 0 3px rgba(0,112,192,0.12)
正しい電話番号を入力してください
エラー -- border 1px solid #d32f2f
07 / elevation

Depth & Elevation

Level 0
Flat
border: 1px solid #e8e8e8
Level 1
Hover
0 2px 4px rgba(0,0,0,0.08)
Level 2
Dropdown
0 4px 12px rgba(0,0,0,0.10)
Level 3
Modal
0 8px 24px rgba(0,0,0,0.12)
08 / layout

Spacing & Width

Spacing Scale

4px
8px
16px
24px
32px
64px

Content Widths

Full Bleed 100vw
Container 1200px
Content 1100px
Body Text 640px