Skip to content

style-demo.mdx

Latest commit

 

History

History
115 lines (89 loc) · 3.14 KB

style-demo.mdx

File metadata and controls

115 lines (89 loc) · 3.14 KB
title Style Guide Demo
description Preview custom W&B brand styles including typography, colors, banners, and UI component rendering examples.

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

CTA Button Primary Button Brand Button 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

Banner in MDX

<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