Design System Preview
note.com — 日本語版

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

詳しく見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
note Green
#5ac8b8
ブランド・ロゴ
Text
Text Primary
#08131a
本文テキスト(ほぼ黒)
Text Secondary
rgba(8,19,26,0.66)
補足テキスト
Text Disabled
rgba(8,19,26,0.50)
無効・アイコン
Placeholder
#888
入力プレースホルダー
Semantic
Success
#1e7b65
成功・完了
Danger
#b22323
エラー・削除
Caution
#916626
警告・注意
Like
#d13e5c
スキ・お気に入り
Badge
#d53c21
通知バッジ
Surface & Border
Background Primary
#ffffff
ページ背景
Background Secondary
#f5f8fa
セクション背景
Surface Primary
#08131a
CTA・アクセント面
Border Default
rgba(8,19,26,0.14)
標準ボーダー
Border Focus
#292d9e
フォーカスリング
Gray Scale
Gray 900
#08131a
Gray 800
#202a30
Gray 700
#363f42
Gray 600
#5a656b
Gray 500
#7e888f
Gray 400
#9ca7ad
Gray 200
#c5ccd1
Gray 100
#dce0e3
Gray 50
#f5f8fa

02 / Typography — 実測値

タイポグラフィ階層

記事タイトル — Article Title (h1)
32px / 700 / line-height: 1.5 / letter-spacing: 0.04em / palt: あり記事ページ
セクション見出し — Heading 2
28px / 700 / line-height: 1.286 / letter-spacing: 0.04em / palt: あり記事ページ
小見出し — Heading 3
20px / 700 / line-height: 1.8 / letter-spacing: 0.04em / palt: あり記事ページ
カード見出し — Heading 3 (top)
16px / 600 / line-height: 1.5 / letter-spacing: normal / palt: なしトップページ
本文テキスト — 読みやすさを最優先にした組版。line-height: 2.0 のゆったりとした行間で、長文の記事でも疲れにくい読書体験を提供します。letter-spacing と palt は適用されていません。
18px / 400 / line-height: 2.0 / letter-spacing: normal / palt: なし記事ページ
補足テキスト — Small (14px)
14px / 400 / line-height: 1.5 / color: Text Secondary
キャプション — Caption (12px)
12px / 600 / line-height: 1.5トップページ
1,234,567
Open Sans (--family-number) / 数字専用フォントスタック

記事ページの組版サンプル

日本語タイポグラフィの基本原則

日本語の組版は、欧文とは根本的に異なるルールを持っています。文字の大きさ、行間、字間のバランスが、読みやすさに直結します。

和文と欧文の混植

日本語の文章にはアルファベットや数字が頻繁に混在します。font-familyのフォールバックチェーンを正しく設定することで、和文と欧文の両方を美しく表示できます。ABCabc 123

明朝体オプション — ヒラギノ明朝 ProN を使用した本文テキスト。文学的なコンテンツや、落ち着いた雰囲気を出したい場合に使用します。


04 / Buttons

ボタンバリエーション

投稿する
Primary CTA
Like

05 / Cards

カードコンポーネント

日本語UIの設計原則

和文フォントのフォールバックチェーン、行間設定、禁則処理など、日本語特有のタイポグラフィ仕様を解説します。

続きを読む

DESIGN.mdの書き方

AIエージェントが正確なUIを生成するためのデザイン仕様書。9セクション構成のテンプレートで、日本語タイポグラフィに対応。

続きを読む

computed styleの実測手法

Puppeteerを使った自動トークン抽出と、DevToolsでの手動検証の比較。実測値ベースのDESIGN.md作成ワークフロー。

続きを読む

06 / Forms

フォーム要素

デフォルト — border: rgba(8,19,26,0.14), radius: 8px
フォーカス — border: #292d9e (darkblue-600)
エラー — border: #b22323 (danger)

07 / Elevation — CSS Custom Properties 実測値

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
--elevation-1
カード
--elevation-4
ドロップダウン
--elevation-6
モーダル・ダイアログ
Focus Ring
#292d9e (darkblue-600)

08 / Layout — --size-content-* 実測値

コンテンツ幅

Main Content 940px
Article (Small) 620px
Timeline / Editor 580px
2-Column Main 610px
2-Column Sub 280px