Design System Preview
RMK — Warm Sophistication

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、レイアウトの全値を可視化。computed style 実測値に基づく。Neue Helvetica World の代替として Inter を使用。

インフォメーション一覧へ DESIGN.md を読む
01 / Colors

Color Palette

カラーパレット
Brand — Warm Gray Family
Warm Brown Gray
#776F6B
ヘッダー・フッター・CTA
Warm Dark Gray
#4F4F4F
TOP 背景・テキスト
Dark Section
#434343
ランキング・セクション背景
Button Gray
#6F6F6F
セカンダリボタン
Warm Beige
#CBC4BC
商品ページ ヘッダー
Theme: TOP (Dark)
--main-bg
#4F4F4F
ページ背景
--header-bg
#776F6B
ヘッダー背景
--main-text
#ffffff
テキスト色
Theme: Products (Light)
--main-bg
#F4F4F4
ページ背景
--header-bg
#CBC4BC
ヘッダー背景
--main-text
#4F4F4F
テキスト色
Functional
Alert Orange
#F84300
閉じるボタンアクセント
New Badge
#000000
新商品バッジ
Border
#E2E2E2
タグ・区切り線
Input Border
#D1D1D1
検索入力欄
02 / Typography

Typography

タイポグラフィ階層
RMK Luminous Pen Brush Concealer
36px / 500 / line-height: 1.1 / letter-spacing: normalH1 ヒーロー
NEW ARRIVALS
30px / 500 / line-height: 1.6 / letter-spacing: 0.067em (2px)H2 英語見出し
新着アイテム
20px / 400 / line-height: 1.0 / letter-spacing: normalH2 日本語見出し
RMK リクイドファンデーション #103
14px / 700 / line-height: 1.71 / font: 游ゴシック体のみ（Helvetica なし）H3 商品名
スキンケアコレクション
14px / 700 / line-height: 1.2 / letter-spacing: 0.143em (2px)ja-title サブタイトル
透明感のある肌を叶えるリクイドファンデーション。素肌のような軽い仕上がりで、一日中崩れない。
14px / 400 / line-height: 1.43Body 標準本文
肌にのせた瞬間、すっと広がるなめらかなテクスチャー。SPF27・PA++で紫外線もしっかりカット。石鹸でオフできるやさしさも魅力です。毎日のメイクに取り入れたい逸品。
14px / 400 / line-height: 1.71Body Description 商品説明
4,950 (税込) / SPF27 PA++ / 全10色
12px / 400 / line-height: 1.5Small / Price
SKINCARE
12px / 400 / line-height: 1.0Nav Link
03 / Product Showcase

Product

プロダクト組版サンプル

THE FOUNDATION

ファンデーション

肌そのものの美しさを引き出す、RMK のファンデーションコレクション。素肌感を大切にしながら、気になる部分はしっかりカバー。光と影を味方につけた仕上がりで、一日中美しい肌が続きます。

RMK リクイドファンデーション
4,950 (税込) / 全10色

RMK が大切にしているのは「素肌からつくる美しさ」。スキンケア発想のベースメイクで、メイクをしている時間もスキンケアタイムに。日本の繊細な美意識を、テクノロジーとクリエイティビティで形にしています。

03.5 / Theme Comparison

Dual Theme

デュアルテーマの比較
RMK

TOP Page (Dark)

bg: #4F4F4F
header: #776F6B
text: #ffffff
megamenu: rgba(119,111,108,0.95)

RMK

Products (Light)

bg: #F4F4F4
header: #CBC4BC
text: #4F4F4F
megamenu: rgba(255,255,255,0.95)

04 / Buttons

Buttons

ボタンバリエーション
インフォメーション一覧へ
Primary CTA
#776F6B / radius 5px
販売終了のお知らせ
Secondary CTA
#6F6F6F / radius 5px
リップカラー ファンデーション アイシャドウ スキンケア 下地・コンシーラー
Tags — bg #ffffff / text #4F4F4F / border #E2E2E2 / radius 5px
05 / Cards

Cards

カードコンポーネント
Product Cards
RMK
NEW

RMK リクイドファンデーション

4,950 (税込)
RMK

RMK カラーリップグロス

3,850 (税込)
RMK

RMK スムージングスティック

3,520 (税込)
Service Cards (bg #434343)

ギフトサービス

大切な方への贈り物に、RMK のギフトラッピングサービスをご利用いただけます。

送料無料

5,500円以上のご注文で送料無料。最短翌日お届けで、すぐにお使いいただけます。

06 / Forms

Forms

フォーム要素
border: #D1D1D1, radius: 50px
デフォルト — border: #D1D1D1, radius: 5px
フォーカス — border: #776F6B (Warm Brown Gray)
エラー — border: #F84300 (Alert Orange)
07 / Elevation

Depth & Elevation

面の色で空間を構成（シャドウなし）
Main BG
#4F4F4F
Dark Section
#434343
Header / Footer
#776F6B
Beige Header
#CBC4BC
Mega Menu (TOP)
rgba(119,111,108,0.95)
New Badge
#000000
08 / Layout

Layout

レイアウト構成
Full Width Hero 100%
Content Max Width 960px
Article / Product 620px
Product Grid (4-col) 4 x 25%