World's Design Journal

デザインの視点で、人間の可能性や創造性を伝えるメディア

DESIGN.md から抽出したデザイントークンのカタログ。純白の地に黒〜濃グレーのモノクロームだけで組み、AXIS Font の硬質でニュートラルな版面を再現する。computed style 実測値(2026-06-29)に基づく。

記事を読む #プロダクトデザイン 購読する

01 / Colors

Color Palette

Brand / Core(モノクローム)
White
#ffffff
ページ背景
Ink
#000000
ナビ・最重要
Text
#333333
見出し・本文
Muted
#666666
メタ・タグ枠線
Surface(面のグレー濃淡)
Surface
#f1f1f1
ナビ・タグ面
Image
#eeeeee
画像プレースホルダ
Surface Light
#f9f9f9
薄い区画面
Surface Light 2
#f5f5f5
補助面
Dark
#2b2b2b
ニュースレター帯
Semantic(最小限)
Error
#cf2e2e
汎用エラー(WP vivid-red)

AXIS は色相を持つブランドカラーを使わない徹底したモノクローム。WordPress プリセットの vivid 系・gradient・--swiper-theme-color #01aeeb はブランド色ではない。


02 / Typography — 実測値

Typography

原典は和欧ともに AXIS Font("AXIS ProN M" / "AXIS ProN B"、Type Project)、英字ラベルに DIN Next LT Pro。本プレビューは代替の IBM Plex Sans JP / Archivo で表示。letter-spacing: normal / font-feature-settings: normal(palt オフ)。

循環型デザインを体験できる子ども向けプロダクト
Heading (Feature) — AXIS ProN M 32px / 500 / lh 1.4 (44.8px) / ls normal
World's Design Journal
Section Title — AXIS ProN M 24px / 400 / lh 1.0 / ls normalsection
記事のカテゴリー
Article Title — AXIS ProN B 18px(Bold 書体)/ lh 1.0
Product
English Label — DIN Next LT Pro 16px / 400 / lh 1.0 / ls 0.32px(0.02em)
本文・グローバルナビ — デザインの視点で語る
Body / Nav — AXIS ProN M 16px / 400 / lh 1.0
段落本文(推奨 lh) — AXIS は、デザインの視点で人間の可能性や創造性を伝えるメディアです。建築・プロダクト・グラフィック・テクノロジーなど、領域を横断してデザインの今を記事化します。実サイトの一覧は line-height 1.0 ですが、長文本文は可読性のため 1.6〜1.8 を推奨します。ABCabc 123
Body (段落) — 16px / 400 / lh 1.8(推奨。実サイト一覧の lh 1.0 を長文に使わない)
サブナビ・カテゴリ — 建築 / プロダクト / インテリア / グラフィック
Sub Nav — AXIS ProN M 14px / 400 / lh 1.0 / #f1f1f1 面
NEWS | 展覧会 / 建築 2026.06.23
Caption / Meta — AXIS ProN M 12px / 400 / lh 1.3 / #666

03 / Journal — editorial グリッド

World's Design Journal

IMAGE
REPORT | 展覧会
循環型デザインを体験できる子ども向けヘッドホン
2026.06.23
IMAGE
NEWS | 建築
都市の余白を編集する、新しい公共空間の設計
2026.06.20
IMAGE
INTERVIEW | プロダクト
道具の佇まいを問い直すプロダクトデザイナーの視点
2026.06.18
IMAGE
FEATURE | テクノロジー
AIと共につくる、これからのデザインプロセス
2026.06.15

04 / Buttons — 役割で形を分ける

Buttons

Category Nav(矩形 radius 0)
記事を読む
Nav(矩形・グレー面)
#TAKT PROJECT
Tag(完全 pill radius 46px)
購読する
Newsletter(pill radius 25px)

05 / Forms

Forms

デフォルト — bg: #f1f1f1, radius: 0(矩形・枠線なし)
フォーカス — 白地+濃グレー枠(inset 1px #000)
エラー — 白地+赤枠(#cf2e2e)

06 / Elevation

Depth & Elevation

AXIS は影をほとんど使わず、グレーの面とテキスト濃度で階層を作るフラット設計。

Level 0: Flat
影なし、グレー面で区切る(基本)
Level 1
0 1px 3px rgba(0,0,0,0.08)
Level 2
0 6px 18px rgba(0,0,0,0.12)

07 / Layout — Spacing Scale

Spacing

WordPress スペーシングプリセット(rem基準)を px 換算した目安。

XS 7
S 11
M 16
L 24
XL 36
XXL 54
XXXL 81