​

スタイルガイド デモ

​

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>タイトル</h2>
  <p>コンテンツをここに記載</p>
</div>

​

MDX でのボタン

<button className="primary-button">クリック</button>

​

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

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

​

注意事項

• すべてのスタイルは自動的にダークモードに対応します
• メンテナンスを容易にするため、色は CSS 変数として定義されています
• グラデーションは一貫してブランドカラーを使用しています
• ホバーエフェクトにより、インタラクティブなフィードバックを提供します