スタイルガイド デモ

カスタム W&B ブランドスタイルのデモ

スタイルガイド デモ

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

1. タイポグラフィ

Source Serif 4 を使用した見出し

H1 見出し - Source Serif 4

H2 見出し - Source Serif 4

H3 見出し - Source Serif 4

H4 見出し - Source Serif 4

本文には、各 プラットフォーム で最適な読みやすさを実現するために、システムフォントスタックを使用しています。

2. ブランドカラー

W&B Gold #ffcc33

W&B Teal #13a9ba

Moon 100 #f5f6f7

一貫性を保つため、リンクには ティールカラー を使用します。

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

ヘルプ ＆ サポートバナー

このバナーは、テキストシャドウ付きのサポート背景画像を使用しています。

カードバナー

情報コンテンツ向けの、落ち着いたグレー背景のバナーです。

グラデーションバナー

目を引くアナウンスメントのために、サンセットグラデーションを使用しています。

W&B ブランドバナー

公式の W&B ゴールドグラデーションを使用しています。

4. ボタンスタイル

CTA ボタンプライマリボタンブランドボタンお問い合わせボタン

5. グラデーション背景

グラデーション付きヒーローセクション

ヒーローセクションや重要なアナウンスメントに、サンセットグラデーションを使用します。

控えめなグラデーションのカード

カードコンポーネントに視覚的な面白さを加える、主張しすぎないオーバーレイグラデーションです。

W&B グラデーションテキスト効果

使用例

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 変数として定義されています
• グラデーションは一貫してブランドカラーを使用しています
• ホバーエフェクトにより、インタラクティブなフィードバックを提供します