Design System Preview
FELISSIMO — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。シアンブルー #00a1e0 をアクセントとした親しみやすい EC デザイン。computed style 実測値に基づく。

お買い物をはじめる DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Felissimo Cyan
#00a1e0
プライマリ・CTA
Light Cyan
#7ed0ee
サブアクセント
Link Blue
#0070d2
リンクテキスト
Text
Text Primary
#202020
本文テキスト
Text Menu
#444444
メニューリンク
Text Dark
#222222
強調テキスト
Text Muted
#999999
補助テキスト
Text Light
#bbbbbb
タグライン
Surface & Background
Background
#ffffff
ページ背景
Section (Greige)
#edece2
セクション背景
Light
#f9f9f9
明るいセクション
Border
#cccccc
区切り線
Search Button
#777576
検索ボタン
Semantic
Success
#008827
成功・完了
Danger
#cc0000
エラー・削除
Warning
#ffc107
警告

02 / Typography — 実測値

タイポグラフィ階層

セクション見出し — Section Title (h2, 24px)
游ゴシック / 24px / 700 / line-height: 1.2 / palt: ありセクション見出し
本文テキスト — ファッション、雑貨、手づくりキットなど暮らしを楽しむフェリシモ。毎月届く定期便で、新しい発見と出会いをお届けします。お気に入りのアイテムがきっと見つかります。
游ゴシック / 16px / 500 / line-height: 1.5 / palt: あり本文
フッターリンクグループ — Footer Heading (15px)
游ゴシック / 15px / 700 / line-height: 1.3フッター見出し
カテゴリ名 — Category Title (13px)
游ゴシック / 13px / 700 / line-height: 1.2カテゴリ
タグライン — Tagline (12px)
游ゴシック / 12px / 500 / color: #bbbbbbタグライン
FELISSIMO
Dosis / 22px / 600 / ヘッダーブランドブランドロゴ

注目のキーワード

手芸 ハンドメイド ヨガブラ 財布 猫グッズ DIY コーディネート

商品ページの組版サンプル

暮らしを楽しむフェリシモ

フェリシモは「ともにしあわせになるしあわせ」をコンセプトに、ファッション、雑貨、手づくりキットなど多彩なアイテムを定期便でお届けしています。

定期便のしくみ

毎月1回、デザイン違いのアイテムが届く「コレクション」方式。届くまでのワクワク感と、届いてからの発見が楽しみになる、フェリシモならではのお買い物スタイルです。


04 / Buttons

ボタンバリエーション

Search

05 / Cards

商品カード

Image
el:ment

身軽で、快適で、安心。いい旅は、いい相棒と。

¥3,850(税込)

Image
Couturier

はじめてさんの手芸キット 刺繍入門

¥1,980(税込)

Image
THREE FIFTY STANDARD

大人の定番 きれいめカジュアル

¥5,390(税込)

Image
YOU+MORE!

猫が気持ちよさそうに寝ている おなかクッション

¥3,300(税込)


06 / Forms

フォーム要素

デフォルト — border: #cccccc, radius: 4px
フォーカス — border: #00a1e0 (Felissimo Cyan)
エラー — border: #cc0000 (Danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
基本フラット(シャドウなし)
Section (Greige)
#edece2 背景で区切り
Section (Light)
#f9f9f9 背景で区切り
Search Overlay
rgba(255,255,255,0.7)

08 / Layout

コンテンツ幅

Container 1200px
Content Area 940px
Article 620px