démonstration du guide de style

Aperçu des styles de marque W&B personnalisés, avec la typographie, les couleurs, les bannières et des exemples de rendu de composants UI.

Démonstration du guide de style

Cette page présente les styles de marque personnalisés appliqués à la documentation W&B.

1. Typographie

Titres avec Source Serif 4

Titre de niveau 1 - Source Serif 4

Titre H2 - Source Serif 4

Titre de niveau 3 - Source Serif 4

Titre H4 - Source Serif 4

Le corps de texte utilise la pile de polices du système pour une lisibilité optimale sur toutes les plateformes.

2. Couleurs de la marque

W&B Gold #ffcc33

W&B Teal #13a9ba

Moon 100 #f5f6f7

Les liens utilisent des teintes teal pour assurer une cohérence visuelle.

3. Composants de bannière

Bannière d’aide et d’assistance

Cette bannière utilise l’image d’arrière-plan d’assistance avec des ombres portées sur le texte.

Bannière de carte

Une bannière à fond gris discret pour le contenu informatif.

Bannière gradient

Utilise un gradient coucher de soleil pour des annonces percutantes.

Bannière de marque W&B

Utilise le gradient doré officiel de W&B.

4. Styles de boutons

Bouton CTABouton principalBouton de marqueBouton de contact

5. Arrière-plans en gradient

Section Hero avec gradient

Cette section utilise le gradient sunset pour les sections Hero et les annonces importantes.

Carte avec gradient subtil

Un léger effet de superposition en gradient pour les composants de carte, qui ajoute de l’intérêt visuel sans être trop marqué.

Effet de texte en gradient W&B

Exemples d’utilisation

Bannière en MDX

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

Bouton en MDX

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

Section Gradient

<div className="hero-gradient">
  <h1>Bienvenue sur W&B</h1>
  <p>Créez de meilleurs modèles plus rapidement</p>
</div>

Notes

• Tous les styles s’adaptent automatiquement au mode sombre
• Les couleurs sont définies sous forme de variables CSS pour faciliter la maintenance
• Les gradients utilisent les couleurs de la marque de façon cohérente
• Les effets de survol offrent un retour visuel interactif