THE

Design System Preview — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。カラー、タイポグラフィ、コンポーネント、スペーシングの全値を可視化しています。computed style 実測値（2026-06-23 取得）に基づく。

商品を見る THE について

01 / Colors

Color Palette

Accent

Accent Gold

#a26b25

唯一の暖色。カート系アクション

Accent Alert

#ff4f33

通知ドット（アラート）

Text & Dark

Text Primary

#1c1d1d

本文・見出し・枠線・リンク

Header Text

#222222

ヘッダーのテキスト

Checkout BG

#333333

チェックアウトボタン背景

Footer Dark

#111111

フッターの暗色面

Announcement Bar

#000000

最下部固定バー背景

Text Secondary

#999999

補足テキスト・サブ情報

Surface & Background

White

#ffffff

ページ背景・カード・ヘッダー

Surface Dim

#f2f2f2

薄いサーフェス・区切り面

Image Dim

#e6e6e6

画像地・入力地・ヘアライン

Image BG

#eeeeee

小さな画像の地色

Semantic（推奨補完値）

Danger / Alert

#ff4f33

エラー・アラート

Success

#2e7d32

成功・完了

02 / Typography — 実測値

Typography

道具の佇まいを整える

Noto Serif JP / 40px / 400 / line-height: 1.2 / letter-spacing: 0.025emDisplay Heading

「これこそは」と呼べる定番を、ひとつひとつ。THE は、暮らしの道具のスタンダードを問い直すブランドです。

Noto Serif JP / 20px / 400 / line-height: 1.8 / letter-spacing: 0.025emLead Paragraph

本文テキスト — 余計な装飾をそぎ落とし、機能と佇まいの両立を追求しました。日々の暮らしに長く寄り添う、確かな道具をお届けします。ABCabc 123

Noto Serif JP / 14px / 400 / line-height: 1.8 / letter-spacing: 0.025emBody

ナビゲーション・1行ラベル — オンラインストア / ブランドについて

Noto Serif JP / 14px / 400 / line-height: 1.3 / color: #222222Nav / Link

THE SHOP ONLINE

Roboto / 16px / 400 / line-height: 1.3 / letter-spacing: 0.1emLatin Caption

Roboto / 10px / 400 / line-height: 1.4 / letter-spacing: 0.1em / color: #999999Small / Footer

03 / Product — 商品詳細組版

Product Detail

🧴

Kitchen / Tabletop

THE 卓上醤油差し

液だれしない、これこそはの醤油差し。注ぎ口の設計を見直し、最後の一滴まで美しく切れる。

毎日の食卓に置きっぱなしでも様になる、静かな佇まい。耐熱ガラスと真鍮のキャップを組み合わせ、清潔に保てるシンプルな構造にしました。容量 100ml。電子レンジ・食洗機の使用については取扱説明書をご確認ください。

¥3,300 (税込)

カートに入れる今すぐ購入お気に入り

04 / Buttons

Buttons

カートに入れる

Primary
#1c1d1d / radius 0 / 14px / 400

レジに進む

Checkout
#333333 / radius 0 / padding 17px

今すぐ購入

Cart / Gold Accent
#a26b25 / radius 0

お気に入り

Outline / Ghost
1px solid #1c1d1d / radius 0

詳しく見る

Small Primary
#1c1d1d / radius 0 / 13px

NEW

Tag
#1c1d1d / 白文字 / Roboto 10px

05 / Cards

Product Cards

🥃

NEW

Glass

THE GLASS

¥1,650

🧴

Tabletop

THE 卓上醤油差し

¥3,300

🧼

Bath

THE SOAP for HAND & BODY

¥1,980

☕️

Kitchen

THE COFFEE MILL

¥8,800

06 / Forms

Forms

商品を検索

デフォルト — border: 1px solid #1c1d1d / radius: 0

メールアドレス

フォーカス — box-shadow: 0 0 0 2px rgba(28,29,29,0.15)

郵便番号

郵便番号は7桁で入力してください

エラー — border-color: #ff4f33 / box-shadow: rgba(255,79,51,0.25)

お問い合わせ

Textarea — border: 1px solid #1c1d1d / radius: 0 / line-height 1.8

07 / Elevation

Depth & Elevation

Level 0 — Flat

影なし。カード・ボタン・画像の基本フラット。

Level 1 — Hairline

0 1px 0 #e6e6e6
ヘッダー下端・区切り

Level 2 — Drawer

0 8px 24px rgba(0,0,0,0.08)
ドロワー・ポップオーバー

Level 3 — Modal

0 16px 48px rgba(0,0,0,0.12)
モーダル

立体感・分離は主に余白とヘアライン（#e6e6e6）で表現します。ドロップシャドウは多用せず、白地と直角の構成で静謐さを保ちます。

08 / Layout

Spacing & Layout

Spacing Scale (8px グリッド)

4px

8px

16px

24px

48px

XXL

80〜96px

Border Radius — None（直角が identity）

None

0px — 全要素

ボタン・入力・カード・画像、すべて radius 0px。ピル・角丸は一切使いません。ハードエッジが THE のアイデンティティです。

Container Widths

Max Container 1200px

推奨最大コンテナ幅

Desktop Padding 24〜32px

水平パディング（デスクトップ）

Mobile Padding 16px

水平パディング（モバイル）