カラー
私たちのパレットは意図的に抑制されています。ニュートラルを基盤として使用し、カラーは意味と強調のために予約します。
- 背景： ページには#FAFAFA（温かみのあるオフホワイト）、カードと浮かせた面には#FFFFFFを使用します。
- テキスト： プライマリテキストには#0A0A0A、セカンダリには#71717A、無効には#A1A1AA。
- アクセント： エンジニアリングはブルー、デザインはバイオレット、マーケティングはオレンジ、サクセスはエメラルド。
- セマンティック： ポジティブは緑、警告は黄、エラーは赤—控えめに使用します。
- データビジュアライゼーション： 訪問者価値のための青の濃度スケール、アトリビューションチャートのトラフィックソースカラー。
タイポグラフィ
2つの書体がすべてのニーズをカバーします。強い理由なしに新しいフォントを導入しません。
- Inter： 主力フォント。ボディテキスト、UI要素、ボタン、ラベル。ウェイト400〜700。
- Instrument Serif： インパクトのため。ヒーローヘッドライン、装飾的な数字、引用。控えめに使用します。
タイプスケールはモジュラー比に従います：12、14、16、18、20、24、30、36、48、60、72px。行高はボディで1.5、見出しで1.2です。
スペーシング
8pxのベースグリッドを使用します。一般的なスペーシング値：8、16、24、32、48、64、96。スペーシングの一貫性は視覚的なリズムを生み出します。
垂直方向のリズムは水平よりも重要です。セクションには余裕のあるパディング（64〜96px）があります。コンポーネントはより密なインターナルスペーシング（16〜24px）を持ちます。
コンポーネント
コンポーネントライブラリはデザインによって最小限に保たれています。ボタン、カード、入力、いくつかの特殊コンポーネントがあります。新しいものが必要な場合は、まず既存のコンポーネントが機能するかを確認します。
- ボタン： プライマリ（ソリッドブルー）、セカンダリ（アウトライン）、ゴースト（テキストのみ）。3つのサイズ：sm、md、lg。
- カード： 白背景、微妙なシャドウ、丸角（8px）。ホバー状態で少し浮かび上がります。
- 入力： クリーンなボーダー、余裕のあるパディング、ブルーリングの明確なフォーカス状態。
- モーダル： バックドロップブラーで中央配置。確認と集中タスクのために控えめに使用します。
モーション
アニメーションは装飾ではなく機能のためのものです。
- 期間： マイクロインタラクションは150ms、トランジションは300ms、ページ変更は500ms。
- イージング： 入場はease-out、退場はease-in、ループはease-in-out。
- モーション軽減： すべてのアニメーションはprefers-reduced-motionを通じてユーザー設定を尊重します。
アイコン
Lucide Iconsのみを使用します。一貫性があり、よく設計されており、優れたカバレッジを持っています。デフォルトサイズは20px、ストローク幅は1.5です。