​

スタイルガイドデモ

​

1. タイポグラフィ

​

Source Serif 4の見出し

​

H1 見出し - Source Serif 4

​

H2 見出し - Source Serif 4

​

H3 見出し - Source Serif 4

​

H4見出し - Source Serif 4

​

2. ブランドカラー

​

3. バナーコンポーネント

​

4. ボタンのスタイル

​

5. グラデーション背景

​

使用例

​

MDXでのバナー

<div className="help-banner custom-banner">
  <h2>Your Title</h2>
  <p>Your content here</p>
</div>

​

MDXでのボタン

<button className="primary-button">Click Me</button>

​

グラデーション セクション

<div className="hero-gradient">
  <h1>W&Bへようこそ</h1>
  <p>より優れたモデルをより速く構築</p>
</div>

​

メモ

• すべてのスタイルは自動的にダークモードに対応します
• 色は保守しやすいようにCSS変数として定義されています
• グラデーションではブランドカラーを一貫して使用しています
• ホバー効果により、視覚的にわかりやすい反応が得られます