Maison KOSE Design System

Design System Preview
KOSE -- 美しさを、もっと身近に。

maison.kose.co.jp のデザイントークンをカタログ化。コーラルピンクのCTA、Josefin Sans のディスプレイ見出し、游ゴシック体の和文本文。computed style 実測値に基づく。

DESIGN.md を読む ブランドサイトを見る
01 / Colors

Color Palette

Brand
KOSE Coral
#ee696f
CTA、カート、メイン強調
Dark Accent
#3b4043
テキスト・セカンダリCTA
Semantic
Info / Reservation
#56bbdc
予約受付中ラベル
Pagination Blue
#4493c8
ページネーション番号
Promo Yellow
#fbd10b
セール・キャンペーンバナー
Neutral
Background
#ffffff
ページ背景
Surface
#f3f3f3
カテゴリセクション面
Surface Subtle
#f7f7f7
控えめなセクション背景
Neutral Button
#efefef
中立的ボタン面
Border
#c8c8c8
チップ枠線・区切り
Footer Background
#3b4043
フッター背景
02 / Typography

Typography

Trend Item -- Section Display
Josefin Sans / 28px / 300 / letter-spacing: 0.18emsection heading
Information -- Sub Display
Josefin Sans / 20px / 300 / letter-spacing: 0.18emsub section
コンテンツ見出し -- Heading 2
Yu Gothic / 24px / 400 / line-height: normalcontent h2
本文テキスト -- Body。KOSE のサイトは本文 16px / weight 500 で統一されています。ECサイトとして商品情報の可読性を確保しつつ、やや太めのウェイトで安定感を出しています。letter-spacing は normal、palt は使用しません。
Yu Gothic / 16px / 500 / line-height: normal / letter-spacing: normal / palt: なしbody
商品名テキスト -- Product Name（ヴィセ リシェ カラーリング アイブロウマスカラ）
Yu Gothic / 14px / 400 / letter-spacing: 0.03emproduct name
¥3,520 （税込） -- Product Price
Yu Gothic / 14px / 500 / letter-spacing: 0.03emproduct price
DECORTE -- Brand Label
Yu Gothic / 12px / 600 / letter-spacing: 0.03embrand label
カートに入れる -- CTA Button
Yu Gothic / 13px / 600 / bg: #ee696fCTA
ナビゲーション -- Nav Links
Yu Gothic / 12px / 500 / letter-spacing: 0.04-0.1emnav
カテゴリタグ -- Tag Chip
Yu Gothic / 11px / 500 / border: 1px solid #c8c8c8 / radius: 18px (pill)tag chip

Web フォント方針: Josefin Sans（Google Fonts）を英語ディスプレイ見出しに使用。和文は Noto Sans JP（Google Fonts）で游ゴシック体を代替。
詳細は DESIGN.md §3.2 注記を参照。

03 / Article & Product

Article & Product

Beauty Column

春のベースメイク、崩れにくさの秘密。

2026.05.09 / Maison KOSE Editorial / Reading time: 3 min

季節の変わり目、気温と湿度が上がるにつれてファンデーションの崩れが気になりはじめます。KOSEが長年研究してきたのは、肌表面の皮脂と水分のバランスを整えながら、化粧膜そのものを安定させる技術です。下地からパウダーまで、ひとつひとつのステップに意味があります。

皮脂コントロール下地の選び方

Tゾーンのテカリが気になる方は、皮脂吸着パウダー配合の下地を。頬の乾燥が気になる方は、保湿成分を含むタイプを部分的に使い分けるのがおすすめです。KOSEの店頭では、肌測定に基づいたパーソナルアドバイスもご利用いただけます。

ベースメイク スキンケア UV対策 下地 ファンデーション 新商品
SKINCARE
DECORTE
リポソーム アドバンスト リペアセラム
¥8,250 （税込／30mL）
MAKEUP
VISEE
リシェ カラーリング アイブロウマスカラ
¥1,210 （税込）
BASE
ESPRIQUE
パーフェクト キープ ベース
¥2,860 （税込）
FRAGRANCE
JILL STUART
クリスタルブルーム オードパルファン
¥5,500 （税込／30mL）
すべての商品
04 / Buttons

Buttons

CTA ボタンは border-radius: 0px でシャープに。タグチップのみ border-radius: 18px の pill 形状で柔らかさを添える。

カートに入れる
Primary CTA (Coral)
13px / 600 / radius: 0
すべての商品
Secondary (Dark)
14px / 500 / radius: 0
もっと見る
Secondary Alt
14px / 500 / radius: 2px
やり直す
Neutral
14px / 500 / radius: 0
予約受付中
Info (Reservation)
13px / 600 / radius: 0
もっと見る
Outline
14px / 400 / radius: 0
カテゴリ
Tag Chip (Pill)
11px / 500 / radius: 18px
05 / Cards

Cards

SKINCARE
Beauty Tips

朝のスキンケア、5分で完了する時短テクニック

化粧水・美容液・乳液の3ステップを効率よく行うための手順と、おすすめアイテムの組み合わせをご紹介します。

続きを読む →
MAKEUP
New Arrival

2026年春の新色リップ、全ラインナップ

VISEE、ESPRIQUE、FASIO の春コレクションから、トレンドカラーをピックアップ。パーソナルカラー別のおすすめも。

続きを読む →
BRAND
Brand Story

DECORTE の美容哲学

1970年の誕生以来、皮膚科学に基づくスキンケア研究を続けてきた DECORTE。そのものづくりの根底にある思想を紹介します。

続きを読む →
06 / Forms

Forms

入力欄は角丸なし、44px のタッチターゲット高さを基準に。フォーカス時は border を #3b4043（Dark Accent）に切り替え、エラーは KOSE Coral を最小限に使います。

デフォルト -- border: 1px solid #c8c8c8 / radius: 0px / height: 44px
フォーカス -- border: 1px solid #3b4043（Dark Accent）
エラー -- border: 1px solid #ee696f（KOSE Coral）
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
Level 1
0 2px 4px rgba(0,0,0,0.06)
Level 2
0 4px 12px rgba(0,0,0,0.08)
Level 3
0 8px 24px rgba(0,0,0,0.12)

基本はフラット。商品カードのホバー時に Level 1 程度の影を足すのみ。Level 2 / 3 はモーダル・ダイアログ用の推奨値。

08 / Layout

Layout

Spacing Scale
XS
4px
S
8px
M
16px
L
24px
XL
40px
XXL
64px
Container & Content Widths
Container Max 1200px
Main Content 940px
Article 680px
Breakpoints

Mobile: ≤ 767px / Tablet: 768 -- 1024px / Desktop: > 1024px
タッチターゲットは 44px × 44px 以上（WCAG 基準）。