Story of Tendo — 成形合板の家具づくり

DESIGN.md から抽出したデザイントークンのカタログ。カラー・フォント・コンポーネント・スペーシングの全値を可視化。computed style 実測値に基づく。

Online Store Showroom
01 / COLORS

カラーパレット

Brand / Core
Text Primary
#333333
見出し・本文・ナビ
Background
#ffffff
ページ背景
Accent Red
#b20000
NEW・選択中（少量）
Neutral / Line
Border Strong
#333333
主要ボタン枠線
Border Light
#b6b6b6
淡い罫線・枠線
Tile Grey
#e2e2e2
タイル・サムネイル地
Overlay Dark
#2d2d2d
メニュー反転面
02 / TYPOGRAPHY — 実測値

タイポグラフィ階層

セクション見出し — Section Heading
Helvetica / 24-28px / 400 / line-height: 1.4 / #333333
サブ見出し — Sub Heading
Helvetica / 18-20px / 400-700 / line-height: 1.4
本文テキスト — 天童木工は1940年創業の家具メーカーです。本文は 15px・line-height 1.3 とやや詰めて端正に組みます。letter-spacing は normal。ABCabc 123
Helvetica / ヒラギノ / 15px / 400 / line-height: 1.3 / normal / #333333
さらに古い記事を表示する — Emphasis Link
Helvetica / 15px / 700 / line-height: 1.3
2026.05.28 — Date / Meta
Helvetica / 14px / 400 / line-height: 1.14
Products — Category Label
Helvetica / 12px / 700 / line-height: 1.33
03 / BUTTONS — radius 0

ボタンバリエーション

Online Store
Primary Outline
Tendo Classics
Secondary Outline
お問い合わせ
Accent（少量）
NEW
"NEW" Badge
04 / CARDS — Product Tile

製品タイル

NEW
Products

バタフライスツール

2026.05.28
Chair

Tendo Classics ハイタイプ

2026.05.20
Table

Roll Press Wood テーブル

2026.04.30
NEW
Series

Bruno Mathsson イージーチェア

2026.04.12
06 / FORMS — radius 0

フォーム要素

デフォルト — border: #b6b6b6, radius: 0
フォーカス — border: #333333（リングなし）
エラー — border: #b20000
07 / ELEVATION

Depth & Elevation

Level 0: Flat
影なし（基本フラット）
Border Strong
奥行きは罫線の濃淡で #333 / #b6b6b6
Dark Overlay
反転面で立体感を出す