Skip to main content

​
Style Guide Demo

This page demonstrates the custom brand styles implemented for W&B documentation.

​
1. Typography

​
Headings with Source Serif 4

​
H1 Heading - Source Serif 4

​
H2 Heading - Source Serif 4

​
H3 Heading - Source Serif 4

​
H4 Heading - Source Serif 4

Body text uses the system font stack for optimal readability across platforms.

​
2. Brand Colors

W&B Gold #ffcc33
W&B Teal #13a9ba
Moon 100 #f5f6f7
Links use teal colors for consistency.

​
3. Banner Components

​
Help & Support Banner

This banner uses the support background image with text shadows.

​
Card Banner

A subtle gray background banner for informational content.

​
Gradient Banner

Using the sunset gradient for eye-catching announcements.

​
W&B Brand Banner

Using the official W&B gold gradient.

​
4. Button Styles

Contact Button

​
5. Gradient Backgrounds

​
Hero Section with Gradient

This uses the sunset gradient for hero sections and important announcements.

​
Card with Subtle Gradient

A subtle gradient overlay for card components that adds visual interest without being overwhelming.

W&B Gradient Text Effect

​
Usage Examples

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

​
Button in MDX

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

​
Gradient Section

<div className="hero-gradient">
  <h1>Welcome to W&B</h1>
  <p>Build better models faster</p>
</div>

​
Notes

  • All styles respect dark mode automatically
  • Colors are defined as CSS variables for easy maintenance
  • Gradients use brand colors consistently
  • Hover effects provide interactive feedback