Design System Preview
KAO

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

ブランド一覧 DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Kao Teal
#00806d
ブランドカラー・フッター
Kao Teal Dark
#005856
ホバー・ダークバリアント
Kao Green
#6cc04a
アクセント・サステナビリティ
Teal Tints
Search Surface
#ebf7f5
検索ボタン・タグ背景
Light Teal
#b5e2dd
装飾・ハイライト
Text
Text Primary
#3c3c3c
本文・見出し
Text Secondary
#4e4d4e
ナビ・補足テキスト
Text Muted
#767676
パンくず・メタ情報
Text White
#ffffff
Teal 背景上の反転
Surface & Background
Background
#ffffff
ページ背景
Surface Warm
#f6f6f4
セクション背景(ウォームグレー)
Border
#d7d7cf
ボーダー・区切り線
Footer Background
#00806d
フッター背景

02 / Typography

タイポグラフィ階層

ロゴ・サイトタイトル --- H1 (32px)
32px / 700 / line-height: normal / W3ロゴ
セクション見出し --- H2 Section (32px)
32px / 700 / line-height: 1.25 (40px) / letter-spacing: 0.01em / W6セクション
白抜き見出し --- H2 on Teal (32px)
32px / 700 / line-height: 1.25 / color: #ffffff / on #00806dTeal 背景
トピック見出し --- H2 Topic (24px)
24px / 700 / line-height: 1.5 (36px) / letter-spacing: 0.013em / W3トピック
カテゴリ見出し --- H2 Sub (24px / 400)
24px / 400 / line-height: 1.5 / letter-spacing: 0.02em / W6 font, weight 400カテゴリ
フッター見出し --- H2 Footer (20px)
20px / 700 / line-height: 1.1 (22px) / W6フッター
本文テキスト --- Body (16px)。FP-HiraginoUDSansStdN(UD フォント)を使用し、可読性を重視した組版。letter-spacing は 0.02em、palt は非適用。ABCabc 123
16px / 400 / line-height: 1.75 (28px) / letter-spacing: 0.02em / palt: なし / W3
ナビゲーション --- Nav (14px)。カテゴリ選択やサイト内遷移に使用。
14px / 400 / line-height: 1.5 (21px) / color: #4e4d4eグローバルナビ
パンくず --- Breadcrumb (14px)。現在位置の表示に使用。
14px / 400 / color: #767676パンくず

ブランド一覧サンプル

B
スキンケア
Biore
洗顔・日やけ止め・メイク落としの定番ブランド
A
ランドリー
Attack
抗菌・消臭に優れた衣料用洗剤
M
ヘアケア
Merit
地肌にやさしいシャンプーの定番
K
キッチン
CuCute
泡切れが良い食器用洗剤

花王グループ --- いっしょにeco


04 / Buttons

ボタンバリエーション

ブランド一覧
Primary CTA
radius: 10px
詳しく見る
Secondary
radius: 10px
カテゴリ
Nav Pill
radius: 16px
検索
Search
radius: 0 8 8 0
Carousel
radius: 50%

Button Spec

Primary: bg #00806d / text #ffffff / border-radius 10px / padding 12px 28px
Nav Pill: bg rgba(255,255,255,0.8) / text #4e4d4e / border-radius 16px


カードコンポーネント

ESG

サステナビリティへの取り組み

花王は「よきモノづくり」を通じて、豊かな共生世界の実現を目指しています。環境負荷低減と生活者の満足を両立するものづくり。

詳しく見る →
R&D

研究開発の力

界面科学をコア技術に、スキンケア・ヘルスケア・ケミカルの3領域で革新的な素材・製品を開発しています。

詳しく見る →
ブランド

暮らしに寄り添うブランド

Biore・Attack・Merit をはじめ、毎日の暮らしに欠かせないブランドを展開。世界中で愛されるロングセラー製品。

詳しく見る →

06 / Forms

フォーム要素

デフォルト --- border: 1px solid #d7d7cf, radius: 8px
フォーカス --- border: 1px solid #00806d (Kao Teal)
正しいメールアドレスを入力してください
エラー --- border-color: #cc3333
セレクト --- border: 1px solid #d7d7cf, radius: 8px

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし・ボーダーのみ
Elevation 1
0px 1px 3px rgba(0,0,0,0.08)
Elevation 2
0px 2px 8px rgba(0,0,0,0.12)
Elevation 3
0px 4px 16px rgba(0,0,0,0.14)
Focus Ring
2px solid #00806d

08 / Layout

レイアウト

Header Padding

Header Horizontal Padding 48px

Section Backgrounds

#ffffff
Default
#f6f6f4
Warm Gray
#00806d
Footer

Border Radius

10px (Card / CTA)
16px (Nav Pill)
0 8 8 0 (Search)
50% (Carousel)
8px (Input)