Branding & Creative Direction

good design company

いいものを、ただしく届ける。

DESIGN.md から抽出したデザイントークンのカタログ。純白とライトグレーだけの無彩色パレットに、本文も見出しも明朝体をあてた静謐なエディトリアル組版。computed style 実測値(2026-06-29)に基づく。

works を見る contact DESIGN.md を読む →

01 / Colors

Color Palette

装飾色を持たない無彩色のみのパレット。白・ライトグレー・グレースケール14段で全体を構成する。

Core
White
#ffffff
背景・カード地
BG Secondary
#f5f5f5
セクション面
Divider
#e5e5e5
区切り線
Button Border
#d6d6d6
ボタン枠
Grayscale
Gray 25
#fcfcfc
Gray 50
#f7f7f7
btn hover 地
Gray 400
#a3a3a3
透明ボタン文字
Gray 500
#737373
補助テキスト
Gray 600
#525252
Gray 800
#292929
Text
Text Primary
#141414
本文・見出し
Text Muted
#737373
キャプション
Text Subtle
#e5e5e5
極薄テキスト
Link Underline
#d6d6d6
リンク下線

02 / Typography — 実測値

Typography

原典は本文・見出し・ナビすべて明朝体=century-old-style-std(Adobe Fonts)、太字のみ Noto Sans JP。本プレビューは代替の Shippori Mincho / EB Garamond で表示。font-feature-settings: normal(palt は使わない)。和文はベタ組み、欧文だけ letter-spacing 0.08em。

good design company
Display (en) — 明朝 / 400 / lh 1.3 / 欧文 ls 0.04em見出し
いいものをつくり、ただしく伝える
Heading (和文 L) — 明朝 / 400 / lh 1.5 / ls normal(ベタ組み)
相鉄グループ — works タイトル
Heading (works タイトル h3) — 明朝 18.72px / 400 / lh 1.5
本文テキスト — good design company は、ブランディングとクリエイティブ・ディレクションの会社です。商品やサービスの本質を見つけ、それを正しく伝わるかたちに翻訳します。ABCabc 0123
Body — 明朝 16px / 400 / lh 1.8 / 和文 ls normal・欧文 ls 0.08em
works news about contact recruit
Nav / Header — 明朝 16px / 400 / lh 1.5 / ls 1.28px (0.08em)
2013 — HOTEL THE MITSUI
Caption (en body) — 明朝 12.8px / 400 / lh 1.5 / ls 1.024px (0.08em)
太字ラベル — Noto Sans JP(強調用途のみ)
Bold — Noto Sans JP 15px / 700(--font-family-bold、限定用途)

03 / Works — editorial グリッド

Selected Works

works ビジュアルを主役に、その下に明朝の作例名と年号を添える。UI は無色透明に引く。画像枠は白銀比横長(1.414:1)。

IMAGE
相鉄グループ
Branding / 2013–
IMAGE
中川政七商店
Branding / 2008–
IMAGE
HOTEL THE MITSUI
Creative Direction / 2020
IMAGE
くまモン
Character / 2010

04 / Buttons — ghost

Buttons

塗りつぶしのブランドカラーボタンは持たない。白地+細グレー枠のゴーストが基本。ホバーで地 #f7f7f7・枠 #a3a3a3 の控えめな変化。

works を見る
Ghost(基本 / radius 4px)
contact
Ghost pill(radius 9999px)
送信する
Dark(#141414 地・白文字)
もっと見る →
Transparent(#a3a3a3 文字)

05 / Forms

Forms

フォームの抽出データは取れなかったため、トークンからの推定値で表示。フォーカスは枠 #141414 +薄い墨リング。

デフォルト — border: #d6d6d6, radius: 4px
フォーカス — border: #141414 + 薄い墨リング
エラー — border: #b23b32(無彩色基調に最小限の差し色)

06 / Elevation

Depth & Elevation

影はほぼ使わず、白地・ライトグレー面・細い区切り線で階層を作る。フラットが基本。

Level 0: Flat
影なし、区切り線で面を分ける(基本)
Level 1
0 1px 3px rgba(20,20,20,0.06)
Level 2
0 8px 24px rgba(20,20,20,0.10)

07 / Layout — Spacing Scale

Spacing

--spacing-* はフィボナッチ的(1,2,3,5,8,13,21,34)に拡大するトークン。base=16px 時の目安。横余白は 6.19vw。

xs 4
sm 8
md 16
lg 24
xl 40
2xl 64
3xl 104