Design System Preview
IPSA — イプサ

DESIGN.md から抽出したデザイントークンのカタログ。ヒラギノ角ゴ ProN Web Font(MFW-HiraKakuProN)の4ウェイト体系、ウォームカラーパレット、kern ベースのタイポグラフィを可視化。computed style 実測値に基づく。

化粧水 乳液 ME 美容液 ギフト すべて見る

01 / Colors

カラーパレット

Brand — Warm Palette
Cream
#fffef8
ウォームサーフェス
Warm Yellow
#fffae7
ハイライト面
Warm Off-White
#fffcf4
フッターテキスト
Text
Text Primary
#181818
本文(ニア・ブラック)
Text Secondary
#323232
補助テキスト・ヒーロー
Text Muted
#969696
フッターサブメニュー
Surface
Background
#ffffff
メインページ背景
Light Gray
#f9f9f9
タブ非活性
Footer Dark
#323232
フッター背景
Dark Hero
#090f27
アバウトセクション
Border
Border Primary
#c9c9c9
フォーム入力欄
Border Secondary
#d6d6d6
セレクトボックス
Separator
#dcdcdc
区切り線
Overlay
Dark Overlay
rgba(50,50,50,0.5)
メニューオーバーレイ
Search Overlay
rgba(239,237,234,0.5)
検索オーバーレイ(ウォーム)

02 / Typography — 実測値(Noto Sans JP で代替表示)

タイポグラフィ階層

肌の美しさは、生命力
49px / W4 (400) / line-height: 1.5 / letter-spacing: normal / kern: ありヒーロー
ページタイトル — H1
28px / 700 / line-height: 1.2 / system-ui stackh1
セクションタイトル — Section Title
20px / W5 (500) / line-height: 1.5 / letter-spacing: normalセクション見出し
本文テキスト — 肌本来の美しさを引き出すために、一人ひとりの肌を見つめ、最適なケアを提案します。letter-spacing は normal。kern のみ適用し、palt は使いません。
16px / W3 (300) / line-height: 1.5 / letter-spacing: normal / kern: あり / palt: なし本文
ニュース本文 — 行間を広めに取り、長文でも読みやすさを確保します。line-height: 1.87 は IPSA ニュースページの実測値です。
15px / W3 (300) / line-height: 1.87 / letter-spacing: normalニュース
フッタータイトル — Footer Title
14px / W6 (700) / line-height: 1.5 / letter-spacing: 0.036emフッター
ナビリンク — Nav Link (12px)
12px / W5 (500) / line-height: 1.5ナビゲーション
ニューストピック — News Topic (11px)
11px / W5 (500) / line-height: 1.55トピックラベル
キャプション — Caption (10px)
10px / W5 (500) / line-height: 1.5キャプション
スモールリンク — Small Link (-0.05em)
10px / W5 (500) / line-height: 1.2 / letter-spacing: -0.05em — 唯一の負トラッキング小テキスト

記事ページの組版サンプル

パーソナライズドスキンケアの科学

肌は一人ひとり異なります。季節や体調、生活環境によっても日々変化する肌の状態を正確に捉え、最適なケアを提案することが、美しさを引き出す第一歩です。

肌診断テクノロジー

独自の肌測定技術により、水分量・皮脂量・キメ・透明感など複数の指標を総合的に分析します。17タイプに分類されたレシピから、あなたの肌に最適な1本を導き出します。ABCabc 123

※ 肌診断は店頭カウンターにて無料で受けられます

04 / Buttons

ボタン・タグバリエーション

カートに入れる
Dark (radius: 2px)
詳しく見る
Outline (radius: 2px)
検索する
Square (radius: 0)
肌診断を始める
Chakra (radius: 4px)
Tags
化粧水
Tag Dark
ME
Tag Dark
ギフト
Tag Dark
美容液
Tag Outline
すべて
Tag Outline

カードコンポーネント

ME レギュラー 1

ME レギュラー 1

みずみずしいうるおいで満たし、キメの整ったみずみずしい肌へ導く薬用化粧液。

¥6,050(税込)
化粧水ME
ザ・タイムR アクア

ザ・タイムR アクア

独自の保湿技術「アクアプレゼンターIII」を搭載。うるおい持続力に優れた薬用化粧水。

¥4,400(税込)
化粧水ベストセラー
クリエイティブオイル

クリエイティブオイル シアーゴールド

肌にも髪にも使えるマルチユースオイル。ツヤと輝きを与えるシアーゴールドの仕上がり。

¥4,950(税込)
美容液マルチユース

06 / Forms

フォーム要素

デフォルト — border: #c9c9c9, radius: 4px
フォーカス — border: #323232
正しい電話番号を入力してください
エラー — border: #b22323
セレクト — border: #d6d6d6, radius: 4px

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ(基本)
Elevation 1
0 1px 3px rgba(0,0,0,0.08)
Elevation 2
0 4px 12px rgba(0,0,0,0.1)
Dark Overlay
rgba(50,50,50,0.5)
Search Overlay
rgba(239,237,234,0.5) — ウォーム

08 / Layout

スペーシング & コンテンツ幅

Spacing Scale(Chakra UI ベース)
4px
8px
16px
24px
40px
64px
Content Widths
Main Content 1200px
Article Content 940px
Narrow Content 620px