デザインシステム

varshaのデザインシステムは、プロダクション品質のウェブサイトに一貫性、美しさ、アクセシビリティを提供するために構築されています。ゼロから作成するのではなく、検証済みのパターンに基づいて構築できます。

設計原則

デフォルトで美しい

すべてのデフォルトは慎重に選択されています。カラー、タイポグラフィ、スペーシング、コンポーネントはブランドに合わせて調整され、洗練されたルックアンドフィールを提供します。

デフォルトで高速

AstroのゼロJSアーキテクチャを活用し、マーケティングページを可能な限り軽量に保ちます。インタラクティビティは必要な場合にのみ追加されます。

デフォルトでアクセシブル

セマンティックHTML、適切なコントラスト比、キーボードナビゲーション、スクリーンリーダーサポートが標準です。

カスタマイズ可能

トークンベースのシステムにより、基本的な構造を壊すことなくカラー、フォント、スペーシングを変更できます。

タイポグラフィ階層

varshaは3つのタイプフェイスを使用しています：

トークン	使用用途	フォールバック
--font-display	ヒーローの見出し、大きなタイトル	システムsans-serif
--font-sans	本文、ナビゲーション、UIテキスト	system-ui
--font-mono	コードブロック、技術的なラベル	ui-monospace

フォントサイズは流動的なタイプスケールに従います：

• ヒーロー： clamp(2.5rem, 5vw, 4rem) — ビューポートに応じて調整
• h1： clamp(2rem, 4vw, 3rem)
• h2： clamp(1.5rem, 3vw, 2.25rem)
• h3： 1.25rem
• 本文： 1rem（16px、アクセシビリティのベースライン）
• スモール： 0.875rem

行の高さ：見出しは1.2、本文は1.6-1.7。

スペーシングシステム

スペーシングは一貫したリズムのために4pxベースラインを使用しています：

--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-6: 1.5rem;   /* 24px */
--space-8: 2rem;     /* 32px */
--space-12: 3rem;    /* 48px */
--space-16: 4rem;    /* 64px */
--space-24: 6rem;    /* 96px */

セクションのパディングはレスポンシブにclamp(3rem, 8vw, 6rem)を使用します。

カラーシステム

すべてのカラーはセマンティックトークンを通じて適用されます。生のHEX値を直接使用しないでください — テーマが正しく切り替わるようにトークンを使用してください。

--color-bg:        /* ページ背景 */
--color-fg:        /* プライマリテキスト */
--color-muted:     /* セカンダリテキスト */
--color-accent:    /* プライマリアクションカラー */
--color-surface:   /* カード/パネルの背景 */
--color-border:    /* 境界線 */

各色は手動で調整されたライト/ダークバリアントを持ち、WCAG AAコントラスト（4.5:1以上）を満たしています。

コンポーネントパターン

セクション構造

マーケティングページは繰り返し可能なパターンに従います：

hero → section → section.alt → section → CTA

• .hero — 大きな見出しとCTAを持つ導入セクション
• .section — 標準パディングのコンテンツセクション
• .section.alt — 視覚的な区切りのための代替背景
• コンテンツは常に.containerでラップして最大幅を制限

カード

カードはborder-radius: var(--radius-lg)、微妙なシャドウ、一貫したパディングを使用します：

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

ボタン

バリアント	使用用途
.btn-primary	ページの主要なアクション（CTA）
.btn-secondary	セカンダリアクション
.btn-ghost	控えめなアクション

ボタンには常に明確なfocus-visibleスタイルがあります。

角丸とシャドウ

--radius-sm: 0.25rem;  /* 小さな要素 */
--radius-md: 0.5rem;   /* ボタン、入力欄 */
--radius-lg: 0.75rem;  /* カード */
--radius-xl: 1rem;     /* 大きなパネル、モーダル */
--radius-full: 9999px; /* ピル、バッジ */

--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);

アクセシビリティ

varshaは以下のアクセシビリティ基準を満たしています：

• コントラスト： すべてのテキストは背景に対してWCAG AAを満たす
• キーボードナビゲーション： すべてのインタラクティブ要素はTabキーで到達可能
• フォーカスインジケーター： 明確なfocus-visibleスタイル
• セマンティックHTML： 適切な<nav>、<main>、<section>、<h1>-<h3>の使用
• スクリーンリーダー： ランドマーク、ariaラベル、適切なaltテキスト

レスポンシブデザイン

ブレークポイントはモバイルファーストです：

@media (min-width: 640px)  { /* sm: 大きな携帯 */ }
@media (min-width: 768px)  { /* md: タブレット */ }
@media (min-width: 1024px) { /* lg: ラップトップ */ }
@media (min-width: 1280px) { /* xl: デスクトップ */ }

• モバイル：単一カラムレイアウト、ハンバーガーメニュー
• タブレット以上：マルチカラムグリッド、水平ナビゲーション

テーマシステム

テーマはCSSカスタムプロパティを通じて実装され、data-theme属性で切り替えられます：

:root[data-theme="tokyo-night"] {
  --color-bg: #1a1b26;
  --color-fg: #c0caf5;
  --color-accent: #7aa2f7;
}

:root[data-theme="tokyo-day"] {
  --color-bg: #f7f7f7;
  --color-fg: #3760bf;
  --color-accent: #2e7de9;
}

すべての18以上のビルトインテーマはこのパターンに従います。テーマガイドで独自のテーマを作成できます。

関連ガイド

CSSトークン

すべてのCSSカスタムプロパティとデザイントークンの完全リファレンス。

CSSトークン →

テーマ

テーマの切り替えとカスタムテーマの作成。

テーマ →

コンポーネントリファレンス

ビルトインコンポーネントとその使用方法。

コンポーネント →