Design System Preview
SUQQU

DESIGN.md から抽出したデザイントークンのカタログ。3書体構成(明朝 + ゴシック + サンセリフ)と角張った矩形 CTA が特徴的なラグジュアリーコスメティクスブランドの仕様を可視化。computed style 実測値に基づく。

詳細はこちら DESIGN.md を読む

01 / Colors

Color Palette

Brand
Brand Black
#000000
ヘッダー・CTA 背景
Orange Accent
#ec7205
検索アイコン・メニューバー
Text
Text Primary
#19212b
本文テキスト(極濃紺黒)
Text Heading
#333333
セクション見出し
Text on Black
#ffffff
ヘッダー・CTA テキスト
Text Muted
#696969
補足テキスト・クッキー
Surface & Border
Background
#ffffff
ページ背景
Surface Black
#000000
ヘッダー・フッター
Border Default
#cccccc
入力欄枠線
Border Button
#696969
セカンダリボタン枠線

02 / Typography

3-Font Typography System

TOPICS
34px / 400 / line-height: 1.4 / letter-spacing: normal IwaNMNewsPro-Th セクション見出し
STAFF REVIEW
18px / 400 / line-height: 1.0 / letter-spacing: normal IwaNMNewsPro-Th サブセクション見出し
人気ランキング
18px / 400 / line-height: 1.4 / letter-spacing: normal Noto Sans JP ランキング見出し
シグニチャー カラー アイズ
13px / 400 / line-height: 1.7 / letter-spacing: normal FOT-ロダン Pro B 商品名
肌の奥深くからにじみ出るような血色感。日本人の肌に溶け込む繊細な色彩設計で、上品な印象を長時間キープします。素肌の美しさを引き立てる処方。
14px / 400 / line-height: 1.8 / letter-spacing: normal FOT-ロダン Pro M 本文テキスト
ベーステキスト — base text (16px Noto Sans JP)
16px / 400 / line-height: 1.5 / letter-spacing: normal Noto Sans JP ベース
ナビゲーション
13px / 400 / line-height: 1.7 / color: #ffffff on #000000 FOT-ロダン Pro B ヘッダーナビ
詳細はこちら
16px / 400 / line-height: 1.5 / CTA ボタンテキスト FOT-ロダン Pro M CTA

商品ページ組版サンプル

SIGNATURE COLOR EYES
シグニチャー カラー アイズ

日本人の骨格と肌色を研究し尽くした4色のグラデーション。密着度の高いパウダーが瞼に溶け込み、奥行きのある目もとを演出します。ブラシを含めた全6アイテムで、SUQQU ならではの「顔立ちメイク」を実現。

使い方

左上のハイライトカラーをアイホール全体になじませ、右上のミディアムカラーを二重幅に重ねます。右下のシェードカラーでキワを引き締め、左下のアクセントカラーを下まぶたに入れて完成。

成分特長

スムースフィットオイル配合。肌への密着力を高め、粉飛びを防ぎます。保湿成分として椿オイルとシルクパウダーを採用し、長時間美しい発色をキープ。

詳細はこちら

04 / Buttons

Button Variations

SUQQU の CTA は border-radius: 0px の完全矩形。ラグジュアリーブランドに特徴的なシャープなデザイン。

詳細はこちら
Primary CTA (0px radius)
店舗一覧
Secondary (0px radius)
OK
Cookie OK (2px radius)
設定
Cookie Settings (2px radius)
Carousel Dots

05 / Cards

Product Cards

375 x 200

シグニチャー カラー アイズ

洗練されたグラデーションで奥行きのある目もとを演出。日本人の骨格に合わせた4色パレット。

¥7,700 (税込)
375 x 200

ザ クリーム ファンデーション

素肌から美しいと感じる仕上がり。みずみずしいクリームが肌に溶け込み、自然な艶を生む。

¥11,000 (税込)
375 x 200

モイスチャー リッチ リップスティック

凛とした発色と潤いを両立。唇の形状に沿って美しく色づき、しなやかなフィット感が持続。

¥5,500 (税込)

06 / Forms

Form Elements

デフォルト / border: #cccccc / radius: 0px
フォーカス / border: #000000
正しいメールアドレスを入力してください
エラー / border: #cc0000

07 / Elevation

Depth & Elevation

SUQQU は基本フラット。影はほぼ使わず、黒と白のコントラストで階層を表現する。

Level 0: Flat
影なし(基本)
Elevation 1
0 1px 3px rgba(0,0,0,0.08)
Elevation 2
0 4px 12px rgba(0,0,0,0.12)
Surface Black
ヘッダー・フッター・CTA

08 / Layout

Spacing & Widths

Spacing Scale
4px
8px
16px
24px
40px
80px
Content Widths
Max Container 1200px
Content Area 960px
Article / Product 640px
Form 400px