Typography
デザインシステムの
すべてがここに
Type Scale
Huge — 大胆な見出し
XX-Large — セクション見出し
X-Large — 小見出し・リード
Large — カードタイトル
Medium — 本文のデフォルト。読みやすさを追求したサイズ設計。
Small — 注釈、キャプション、日付表示に。
Headings
H1 見出し
H2 見出し
H3 見出し
H4 見出し
Colors
Primary
Accent
Base
Secondary
Muted
Contrast
Body Copy
これは標準の本文テキストです。日本語のWebサイトでは、読みやすさを重視して適切な文字サイズと行間を設定することが重要です。line-height: 2を採用し、ゆったりとした読み心地を実現しています。
リンクテキストはプライマリカラーで表示され、ホバー時にはアクセントカラーに変化します。自然で視線を誘導するインタラクション。
デザインとは、単に見た目を美しくすることではない。問題を解決し、価値を生み出すこと。
— Design Philosophy
- リスト項目 A
- リスト項目 B
- リスト項目 C
- 順序付き 1
- 順序付き 2
- 順序付き 3
Buttons
Spacing
10 — 0.5rem
20 — 1rem
30 — 1.5rem
40 — 2.5rem
50 — 4rem
60 — 6rem
Shadows
Small
Medium
Large
Table
| Property | Value |
|---|---|
| Font Size | medium (1rem) |
| Line Height | 2 |
| Letter Spacing | 0.02em |
Cards
カードタイトル
シャドウ付きカード
ボーダーカード
ボーダースタイル
Images
Separators
Default
Wide
Dots
Gradients
Primary → Accent
Light → Base
Code
インラインコード: var(--wp--preset--color--primary)
/* CSS Variables */
:root {
--color-primary: #4a90a4;
--color-accent: #c9a962;
}Details
アコーディオン（クリックで展開）
詳細コンテンツがここに表示されます。FAQ等に活用。
もう一つのアコーディオン
複数配置で情報を整理して表示できます。
Cover
カバーブロック
背景画像やオーバーレイを使った印象的なセクション。ヒーローエリアやCTAに活用。
Media & Text
画像とテキストの横並び
メディアとテキストブロック。モバイルでは縦積みに。
Columns
カラム 1
カラム 2
カラム 3
Pullquote
プルクオートは記事内の重要な一節を強調表示するために使用します。
— 引用元
Gallery
