Design System Preview
TABIO — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。Koburina Gothic（小振仮名ゴシック）のワイドトラッキングとミューテッドグレーパレットで構成されるクラフト系 EC の仕様。computed style 実測値に基づく。

商品を見る DESIGN.md を読む
01 / Colors

カラーパレット

Neutral — グレースケール
Text Black
#000000
body テキスト
Text Primary
#222222
見出し・ラベル
Text Dark
#404040
ロゴ SVG fill
Text Secondary
#737373
補足・キャプション
Button Primary
#a6a6a6
主要ボタン背景
Border
#d9d9d9
枠線・区切り
Surface Footer
#f2f2f2
フッター・セカンダリ面
Background Page
#f7f7f7
ページ背景
Surface Content
#ffffff
カード・コンテンツ面
Accent（控えめ）
Link Blue
#5d9cec
テキストリンク
Badge Dark
#4d5057
レビューバッジ
Semantic（推奨）
Success
#468254
成功・完了
Danger
#cc3333
エラー・削除
Warning
#d9a825
警告・注意
02 / Typography — 実測値

タイポグラフィ階層

ヒーロー見出し — H2 Hero (26px)
26px / Koburina W6 / line-height: 1.31 / letter-spacing: 0.08emヒーローバナー
特集セクション見出し — H2 Feature (18px)
18px / Koburina W6 / line-height: 1.23 / letter-spacing: 0.08em特集セクション
セクションタイトル — H2 Section (17px)
17px / Koburina W6 / line-height: 1.23 / letter-spacing: 0.08emカテゴリ見出し
ナビゲーション区分 — H3 Nav (14px)
14px / Koburina W6 / line-height: 1.0-1.5 / letter-spacing: 0.08emナビゲーション
LADIES   MEN   KIDS
16px / Koburina W3 (weight 700) / EN ラベルカテゴリラベル
本文テキスト — 素材にこだわり、日本の職人の手で一足ずつ丁寧に編み上げる。履き心地と美しさを両立する靴下づくり。letter-spacing: 0.08em のワイドトラッキングが、ゆったりとした上品さを生む。
14px / Koburina W3 (weight 300) / line-height: 1.23-1.6 / letter-spacing: 0.08em商品説明
ナビゲーションリンク — Nav Label (14px / 0.04em)
14px / Koburina W3 / line-height: 1.0 / letter-spacing: 0.04emナビゲーション
フッターリンク・補足テキスト — Small (12px)
12px / Koburina W3 / line-height: 1.23 / letter-spacing: 0.08emフッター
キャプション・ブランド名 — Caption (11px)
11px / Koburina W3 / line-height: 1.23 / letter-spacing: 0.08em商品カード
商品名（太字） — Item Name (14.6px / 游ゴシック)
14.6px / Yu Gothic / weight 700 / letter-spacing: 0.08em商品詳細
03 / Product — 商品ページ組版

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

TABIO PREMIUM  |  LADIES

プレミアムコンフォート リブショートソックス

上質なコットンを使用し、日本の職人が一足ずつ丁寧に仕上げたショートソックス。リブ編みが足首にやさしくフィットし、長時間の着用でも快適な履き心地を保ちます。

素材とこだわり

厳選されたスーピマコットンを使用。通常のコットンに比べて繊維が長く、なめらかな肌触りと光沢感が特徴です。つま先は手縫いで仕上げ、縫い目のゴロつきを抑えました。

素材: 綿 78%、ナイロン 20%、ポリウレタン 2%  |  サイズ: 22.0-24.0cm  |  日本製

04 / Buttons

ボタンバリエーション

カートに入れる
Primary
お気に入りに追加
Secondary
キャンセル
Cancel
商品詳細を見る
Link
REVIEW
Badge
SOLD OUT
Badge (Danger)
NEW
Badge (Success)
05 / Cards — 商品カード

カードコンポーネント

260 x 260
TABIO PREMIUM

プレミアムコンフォート リブショートソックス

¥1,320
全6色
260 x 260
靴下屋

スーピマコットン 無地カバーソックス

¥880
全12色
260 x 260
Tabio MEN

ビジネス ベーシック リブソックス

¥990
全4色
260 x 260
TABIO SPORTS

レーシングラン 五本指ソックス

¥2,200
全3色
06 / Forms

フォーム要素

デフォルト — border: #d9d9d9, radius: 2px
フォーカス — border: #222222
正しいメールアドレスを入力してください
エラー — border: #cc3333
07 / Elevation — 実測値

Depth & Elevation

Level 0: Flat
影なし（基本）
Level 1: Button
0 0 8px rgba(0,0,0,0.15)
Level 2: Hover
0 4px 16px rgba(0,0,0,0.10)
Level 3: Modal
0 8px 24px rgba(0,0,0,0.12)
08 / Layout — Spacing & Content Width

スペーシングとレイアウト

Spacing Scale
4px
8px
16px
24px
48px
80px
Content Width
Max Container 1200px
Product Content 940px
Article / Detail 620px
Border Radius
2px
全コンポーネント