スタイルガイドデモ

タイポグラフィ、色、バナー、UI コンポーネントの表示例を含む、カスタムの 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>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変数として定義されています
• グラデーションではブランドカラーを一貫して使用しています
• ホバー効果により、視覚的にわかりやすい反応が得られます