Design System Preview
Creema — ハンドメイドマーケットプレイス

DESIGN.md から抽出したデザイントークンのカタログ。ゴシック体と明朝体の混植、パステルカラー、11px ベースの繊細な組版を可視化。computed style 実測値に基づく。

アクセサリー バッグ 陶器 木工 革小物 ガラス
01 / Colors

カラーパレット

カテゴリアクセント
Pastel Blue
#dfeff5
カテゴリアクセント
Pastel Green
#e3f1e0
カテゴリアクセント
Pastel Pink
#f5dcdc
カテゴリアクセント
Pastel Warm
#f3f1f1
暖色系サーフェス
テキスト
Text Primary
#333333
見出し・重要テキスト
Text Secondary
#666666
商品説明・タグ
Text Muted
#868686
補足・ヘッダー要素
Text Light
#999999
価格・注釈
Text Button
#555555
検索ボタン等
Text Favorite
#888888
お気に入りボタン
Gray
#b8b8b8
無効状態
サーフェスとボーダー
Background
#ffffff
ページ背景
Surface Tag
#f7f7f7
タグ・キーワード背景
Surface Alt
#f5f5f5
セカンダリサーフェス
Surface Card
#fdfdfd
カード・お気に入り背景
Border
#cccccc
メインの区切り線
Border Light
#e1e1e1
薄いボーダー
02 / Typography

タイポグラフィ階層 — ゴシック / 明朝 / 欧文の混植

最近の売り切れ作品 — セクション見出し (h2 Mincho)
Mincho / 12px / 700 / line-height: normalセクション見出し
カテゴリーから絞る — サブ見出し (h3 Mincho)
Mincho / 12px / 400 / line-height: 20px (1.67)サイドバー見出し
ハンドメイド、手仕事のマーケットプレイス — タグライン (h1 Gothic)
Gothic / 11px / 400 / line-height: 30px (2.73)サイト説明文
天然石のピアス（14kgf） — 商品名・本文テキスト (Body Gothic)
Gothic / 11px / 400 / line-height: normal商品名・説明
¥3,800 — 価格表示 (Price)
Gothic / 11px / 400 / color: #999999価格
SEARCH — 英語ラベル (Label EN)
Times New Roman / 11px / 400 / line-height: 10px英語ラベル
CATEGORY — 英語ラベル小 (Label EN small)
Times New Roman / 10px / 400 / line-height: normal英語ラベル小
検索する — ボタンテキスト (Button)
Gothic / 12px / 400 / line-height: 12-18px検索ボタン等
マイページ ｜ お気に入り ｜ メッセージ — ヘッダーリンク
Gothic / 11px / 400 / line-height: 30px (2.73) / color: #868686ナビゲーション
03 / Product

作品リスティングサンプル

新着作品
140 x 140
天然石のドロップピアス（アクアマリン / 14kgf）
透明感のあるアクアマリンを14金ゴールドフィルドのフレームに包みました。耳元で繊細にゆれる、春夏にぴったりのピアスです。金属アレルギーの方にも安心してお使いいただけます。
¥4,200
atelier michi
アクセサリー 天然石 14kgf
140 x 140
手びねりの飯碗（粉引 / 信楽土）
信楽の土を手びねりで成形し、粉引の釉薬をかけて焼き上げました。手のひらに馴染む丸みと、ひとつひとつ異なる貫入の表情をお楽しみください。
¥3,500
陶房ゆらり
陶器・食器 粉引 信楽
140 x 140
刺繍のブローチ（野の花 / リネン台布）
リネンの台布にフランス刺繍で野の花を一針ずつ刺しました。ジャケットの襟元やバッグのワンポイントに。裏面にはブローチピンとクリップの2way金具付き。
¥2,800
糸と布の手帖
刺繍・テキスタイル ブローチ リネン
04 / Buttons

ボタンバリエーション

アクセサリー
Tag Button
天然石
Tag Button
革小物
Tag Button
検索する
Search Button
♡ Myお気に入り
Favorite Button
カテゴリボタン（パステルアクセント）
アクセサリー
Pastel Blue
食器・キッチン
Pastel Green
ベビー・キッズ
Pastel Pink
インテリア
Pastel Warm
05 / Cards

商品カード

1:1
天然石のドロップピアス（アクアマリン）
¥4,200
atelier michi
1:1
手びねりの飯碗（粉引 / 信楽土）
¥3,500
陶房ゆらり
1:1
刺繍のブローチ（野の花 / リネン台布）
¥2,800
糸と布の手帖
1:1
栃の木のカッティングボード（Mサイズ）
¥6,500
木工房 風の杜
1:1
藍染めの手ぬぐい（板締め絞り）
¥1,800
染工房 紺邑
1:1
吹きガラスの一輪挿し（淡青）
¥5,200
硝子工房 ほたる
1:1
革のブックカバー（文庫本サイズ / キャメル）
¥3,800
Leather craft nui
1:1
真鍮のヘアピン（2本セット）
¥2,200
金属工房 en
06 / Forms

フォーム要素

SEARCH
Default / border: #cccccc / radius: 3px / font: 11px Gothic
SEARCH
Focus / border: #333333
正しいメールアドレスを入力してください
Error / border: red
FILTER:
07 / Elevation

Depth & Elevation — フラット基調

Level 0: Flat
通常状態 / border: #e1e1e1
Level 1: Hover
商品カードホバー時
Border: Main
#cccccc / 区切り線
Pastel Surface
パステル背景によるセクション分離
08 / Layout

レイアウト — サイドバー + 商品グリッド

CATEGORY
カテゴリーから絞る
アクセサリー・ジュエリー
ファッション
バッグ・財布・小物
インテリア・家具
食器・キッチン
文房具・ステーショナリー
ベビー・キッズ
アート・写真
ランキング
デイリーランキング
週間ランキング
新着作品
1:1
1:1
1:1
1:1
1:1
1:1
1:1
1:1
1:1
Sidebar: ~200px (Mincho headings) + Main: fluid grid (3-5 cols) / Gutter: compact