> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wandb.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# スタイルガイドデモ

> タイポグラフィ、色、バナー、UI コンポーネントの表示例を含む、カスタムの W&B ブランドスタイルをプレビューします。

<div id="style-guide-demo">
  # スタイルガイドデモ
</div>

このページでは、W\&Bドキュメントに実装されている独自のブランドスタイルを紹介します。

<div id="1-typography">
  ## 1. タイポグラフィ
</div>

<div id="headings-with-source-serif-4">
  ### Source Serif 4の見出し
</div>

<div id="h1-heading-source-serif-4">
  # H1 見出し - Source Serif 4
</div>

<div id="h2-heading-source-serif-4">
  ## H2 見出し - Source Serif 4
</div>

<div id="h3-heading-source-serif-4">
  ### H3 見出し - Source Serif 4
</div>

<div id="h4-heading-source-serif-4">
  #### H4見出し - Source Serif 4
</div>

本文には、プラットフォームを問わず最適な可読性を実現するため、システムフォントスタックを使用します。

<div id="2-brand-colors">
  ## 2. ブランドカラー
</div>

<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '1rem', marginBottom: '2rem'}}>
  <div style={{padding: '1rem', background: 'var(--wandb-gold)', color: 'var(--moon-900)', borderRadius: '8px'}}>
    W\&B Gold
    \#ffcc33
  </div>

  <div style={{padding: '1rem', background: 'var(--wandb-teal-500)', color: 'white', borderRadius: '8px'}}>
    W\&B Teal
    \#13a9ba
  </div>

  <div style={{padding: '1rem', background: 'var(--moon-100)', color: 'var(--moon-800)', borderRadius: '8px'}}>
    Moon 100
    \#f5f6f7
  </div>
</div>

リンクには、一貫性を保つため <a href="#">ティール系の色</a> を使用します。

<div id="3-banner-components">
  ## 3. バナーコンポーネント
</div>

<div className="help-banner custom-banner">
  <h2>ヘルプ＆サポートバナー</h2>
  <p>このバナーでは、サポート用の背景画像とテキストシャドウを使用しています。</p>
</div>

<div className="card-banner custom-banner">
  <h3>カードバナー</h3>
  <p>情報コンテンツ向けの、落ち着いたグレー背景のバナーです。</p>
</div>

<div className="gradient-banner custom-banner">
  <h3>グラデーションバナー</h3>
  <p>人目を引くお知らせ向けに、サンセットグラデーションを使用しています。</p>
</div>

<div className="wandb-banner custom-banner">
  <h3>W\&B ブランドバナー</h3>
  <p>W\&B公式のゴールドグラデーションを使用しています。</p>
</div>

<div id="4-button-styles">
  ## 4. ボタンのスタイル
</div>

<div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '2rem'}}>
  <button className="cta-button">CTA ボタン</button>
  <button className="primary-button">プライマリ ボタン</button>
  <button className="brand-button">ブランド ボタン</button>
  <a href="#" className="contact-button">お問い合わせボタン</a>
</div>

<div id="5-gradient-backgrounds">
  ## 5. グラデーション背景
</div>

<div className="hero-gradient">
  <h2>グラデーション付きヒーローセクション</h2>
  <p>ヒーローセクションや重要なお知らせには、サンセットグラデーションを使用します。</p>
</div>

<div className="card-gradient">
  <h3>控えめなグラデーション付きカード</h3>
  <p>カードコンポーネント向けの控えめなグラデーションオーバーレイで、主張しすぎることなく視覚的なアクセントを加えます。</p>
</div>

<div style={{fontSize: '2rem', fontWeight: 'bold', marginTop: '2rem'}}>
  <span className="text-gradient-wandb">W\&B グラデーションテキストエフェクト</span>
</div>

<div id="usage-examples">
  ## 使用例
</div>

<div id="banner-in-mdx">
  ### MDXでのバナー
</div>

```mdx theme={null}
<div className="help-banner custom-banner">
  <h2>Your Title</h2>
  <p>Your content here</p>
</div>
```

<div id="button-in-mdx">
  ### MDXでのボタン
</div>

```mdx theme={null}
<button className="primary-button">Click Me</button>
```

<div id="gradient-section">
  ### グラデーション セクション
</div>

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

<div id="notes">
  ## メモ
</div>

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