私たちのデザインシステム
すべてのプロジェクトに一貫性をもたらすビジュアルの土台です。トークン、カラーパレット、タイポグラフィ、スペーシング — すべて公開し、ドキュメント化しています。
カラーパレット
--primary: 16 71% 42%唯一のアクションカラー：CTA、リンク。白地で5.3:1
--accent: 214 52% 25%見出し、構造。白地で11.3:1
--navy-deep: 213 56% 17%帯とフッターの背景
--gold-bright: 41 88% 62%ネイビー背景上の数字専用
--foreground: 215 28% 17%本文。白地で14.7:1
--muted-foreground: 215 14% 40%注記、キャプション。白地で6.0:1
--rose: 14 62% 40%拡張パレット、基調のトーンに合わせて調整
--violet: 214 52% 32%拡張パレット、基調のトーンに合わせて調整
--cyan: 205 48% 33%拡張パレット、基調のトーンに合わせて調整
--gold: 40 90% 30%レビュー、受賞。白地で4.5:1以上
--indigo: 213 56% 25%拡張パレット、基調のトーンに合わせて調整
--destructive: 0 72% 42%エラー、削除
タイポグラフィ
リヨン流のタイポグラフィの品格
見出し、CTA、アクセント。100–900。
長い段落でも読みやすく、丁寧に整えた編集のリズム。
本文、ナビゲーション、ラベル。200–800。
| 要素 | サイズ（可変） | 行間 | 用途 |
|---|---|---|---|
h1 | clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem) | 1.06 | ページタイトル、ファーストビュー |
h2 | clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem) | 1.14 | セクション見出し |
h3 | clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem) | 1.25 | サブタイトル、カード |
h4 | 1.125rem | 1.35 | 中見出し |
h5, h6 | 1rem | 1.4 | 小見出し |
body | 1rem | 1.65 | 本文（Plus Jakarta Sans） |
text-sm | 0.875rem | 1.25rem | 補助本文、注記 |
text-xs | 0.75rem | 1rem | メタ情報、バッジ、キャプション |
スペーシング（Tailwindスケール）
0.52px14px28px312px416px624px832px1248px1664px2496pxシャドウ
shadow-e1ほとんど見えない細線 — 入力欄、チップ
shadow-e2通常時のカード
shadow-e3ホバー時のカード、フローティングボタン
shadow-e4ダイアログ、パネル
カスタムCSSユーティリティ
.glass白いカード、細い枠線、やわらかな影 — カード、入力欄
.glass-strong同じ面で影を強めに — ダイアログ、ヘッダー
.glass-premium強調した面 — ファーストビュー、制作実績
.surface-sunkenクールグレーの交互セクション、端を40 pxでフェード
.section-yセクションの縦のリズム（--section-y）
.measure1行の長さを68文字までに制限
.text-gradient-warm見出しの一語にテラコッタの帯
.text-gradient-cool見出しの一語にネイビーの帯
.cta-gradientテラコッタの帯 + --primary-foreground の文字色
.section-divider1 pxの線、両端をフェード
.card-img-frame16/10の画像枠、CLSゼロ、ホバーでズーム
.spot-cardカーソルを追う光と縁取り
.btn-glow-fill塗りボタン：ホバーで光沢 + テラコッタのハロー
.btn-glow-ring枠線ボタン：ホバーで縁が光る
.link-grow左から伸びる下線
.skip-linkスキップリンク、フォーカス時に表示
コンポーネント一覧
ボタン
バッジ
グラデーション
Kayzen Premium
モダンエンジニアリング
Glass Strong
.glass-strong クラスを使ったカードの例です。
再利用できるデザインシステム
お客様のプロジェクトにも、この実績あるデザインシステムを活用します。ビジュアルの一貫性、アクセシビリティ、パフォーマンスは設計段階から担保されています。