z-flag / Bricks Builder + WindPress (Tailwind v4)

Style Guide

デザイントークン・コンポーネントの一覧 — / Tailwind v4 / Bricks Global Variables

1. Colors

Neutral

neutral-50

#f8fafc

neutral-100

#f1f5f9

neutral-200

#e2e8f0

neutral-300

#cbd5e1

neutral-400

#94a3b8

neutral-500

#64748b

neutral-600

#475569

neutral-700

#334155

neutral-800

#1e293b

neutral-900

#0f172a

Primary（青系）

primary-50

#eff6ff

primary-100

#dbeafe

primary-200

#bfdbfe

primary-300

#93c5fd

primary-400

#60a5fa

primary-500 ★

#3b82f6

primary-600

#2563eb

primary-700

#1d4ed8

primary-800

#1e40af

primary-900

#1e3a8a

Secondary（青緑系）

secondary-50

#f0fdfa

secondary-100

#ccfbf1

secondary-200

#99f6e4

secondary-300

#5eead4

secondary-400

#2dd4bf

secondary-500 ★

#14b8a6

secondary-600

#0d9488

secondary-700

#0f766e

secondary-800

#115e59

secondary-900

#134e4a

Accent（オレンジ系・CTA）

accent-50

#fffbeb

accent-100

#fef3c7

accent-200

#fde68a

accent-300

#fcd34d

accent-400

#fbbf24

accent-500 ★

#f59e0b

accent-600

#d97706

accent-700

#b45309

accent-800

#92400e

accent-900

#78350f

2. Typography

Fluid Type Scale（ratio = √2 = 1.414）

--text-fluid-4xl

Display

--text-fluid-3xl

Hero Heading

--text-fluid-2xl

H1 — Page Title

--text-fluid-xl

H2 — Section Title

--text-fluid-lg

H3 — Subsection

--text-fluid-base

Body — 本文テキスト。段落やリードコピーなど、読み物コンテンツに使用します。

--text-fluid-sm

Small — キャプション・補足・注釈・メタ情報などに使用します。

Line Height（--leading-*）

--leading-tight (1.25)

見出しに最適。高さを詰めてメリハリを出す。

--leading-normal (1.5)

本文の標準。読みやすさのバランスが良い。

--leading-relaxed (1.625)

小さいテキストや長文に使用する。

--leading-loose (2)

ゆったりとした余白が欲しい時。

3. Spacing

Fluid Spacing Scale

--spacing-fluid-xs

clamp(0.5rem, 1vw, 1rem)

--spacing-fluid-sm

clamp(1rem, 2vw, 1.5rem)

--spacing-fluid-md

clamp(1.5rem, 3vw, 2.5rem)

--spacing-fluid-lg

clamp(2rem, 4vw, 4rem)

--spacing-fluid-xl

clamp(3rem, 6vw, 6rem)

--spacing-fluid-2xl

clamp(4rem, 8vw, 8rem)

4. Radius & Shadow

Border Radius

--radius-sm0.25rem

--radius-md0.375rem

--radius-lg0.5rem

--radius-xl0.75rem

--radius-2xl1rem

--radius-3xl1.5rem

full9999px

Box Shadow

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

5. Components

Buttons

PrimarySecondaryAccent / CTAOutlineGhost

Badges

Primary

Secondary

Accent

Neutral

Alerts

Cards

Feature

カードタイトルのサンプル

カードのボディテキストです。説明文や要約をここに入れます。

Story

Fluid Typography の魅力

Viewport に応じて滑らかにスケールするタイポグラフィを採用しています。

Tech

Design Token 管理

wizard.css と Tailwind v4 の CSS 変数でトークンを一元管理しています。