> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wandb.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<div id="style-guide-demo">
  # Démonstration du guide de style
</div>

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

<div id="1-typography">
  ## 1. Typographie
</div>

<div id="headings-with-source-serif-4">
  ### Titres avec Source Serif 4
</div>

<div id="h1-heading-source-serif-4">
  # Titre de niveau 1 - Source Serif 4
</div>

<div id="h2-heading-source-serif-4">
  ## Titre H2 - Source Serif 4
</div>

<div id="h3-heading-source-serif-4">
  ### Titre de niveau 3 - Source Serif 4
</div>

<div id="h4-heading-source-serif-4">
  #### Titre H4 - Source Serif 4
</div>

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

<div id="2-brand-colors">
  ## 2. Couleurs de la marque
</div>

<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '1rem', marginBottom: '2rem'}}>
  <div style={{padding: '1rem', background: 'var(--wandb-gold)', color: 'var(--moon-900)', borderRadius: '8px'}}>
    W\&B Gold
    \#ffcc33
  </div>

  <div style={{padding: '1rem', background: 'var(--wandb-teal-500)', color: 'white', borderRadius: '8px'}}>
    W\&B Teal
    \#13a9ba
  </div>

  <div style={{padding: '1rem', background: 'var(--moon-100)', color: 'var(--moon-800)', borderRadius: '8px'}}>
    Moon 100
    \#f5f6f7
  </div>
</div>

Les liens utilisent des <a href="#">teintes teal</a> pour assurer une cohérence visuelle.

<div id="3-banner-components">
  ## 3. Composants de bannière
</div>

<div className="help-banner custom-banner">
  <h2>Bannière d’aide et d’assistance</h2>
  <p>Cette bannière utilise l’image d’arrière-plan d’assistance avec des ombres portées sur le texte.</p>
</div>

<div className="card-banner custom-banner">
  <h3>Bannière de carte</h3>
  <p>Une bannière à fond gris discret pour le contenu informatif.</p>
</div>

<div className="gradient-banner custom-banner">
  <h3>Bannière gradient</h3>
  <p>Utilise un gradient coucher de soleil pour des annonces percutantes.</p>
</div>

<div className="wandb-banner custom-banner">
  <h3>Bannière de marque W\&B</h3>
  <p>Utilise le gradient doré officiel de W\&B.</p>
</div>

<div id="4-button-styles">
  ## 4. Styles de boutons
</div>

<div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '2rem'}}>
  <button className="cta-button">Bouton CTA</button>
  <button className="primary-button">Bouton principal</button>
  <button className="brand-button">Bouton de marque</button>
  <a href="#" className="contact-button">Bouton de contact</a>
</div>

<div id="5-gradient-backgrounds">
  ## 5. Arrière-plans en gradient
</div>

<div className="hero-gradient">
  <h2>Section Hero avec gradient</h2>
  <p>Cette section utilise le gradient sunset pour les sections Hero et les annonces importantes.</p>
</div>

<div className="card-gradient">
  <h3>Carte avec gradient subtil</h3>
  <p>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é.</p>
</div>

<div style={{fontSize: '2rem', fontWeight: 'bold', marginTop: '2rem'}}>
  <span className="text-gradient-wandb">Effet de texte en gradient W\&B</span>
</div>

<div id="usage-examples">
  ## Exemples d'utilisation
</div>

<div id="banner-in-mdx">
  ### Bannière en MDX
</div>

```mdx theme={null}
<div className="help-banner custom-banner">
  <h2>Your Title</h2>
  <p>Your content here</p>
</div>
```

<div id="button-in-mdx">
  ### Bouton en MDX
</div>

```mdx theme={null}
<button className="primary-button">Click Me</button>
```

<div id="gradient-section">
  ### Section Gradient
</div>

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

<div id="notes">
  ## Notes
</div>

* 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