Référence complète du design system. Tokens, typographie, boutons, sections et composants. Tout ce qu'il faut pour construire de nouvelles pages sans décisions ad-hoc.
Texte courant. Barlow Regular, ligne de lecture confortable pour les paragraphes de contenu, descriptions et légendes de sections.
<section class="section-light">
<div class="s-header">
<span class="s-label">Label</span>
<h2 class="display-lg">Titre</h2>
</div>
<div class="s-body">...</div>
</section>Même structure.
Ajouter s-label dark override :
.section-dark .s-label {
color: rgba(255,255,255,.3);
}Toujours commencer une section par s-header avec un s-label et un titre de niveau display.
Alterner section-light et section-dark pour créer des ruptures visuelles naturelles entre les blocs de contenu.
Ne jamais créer de padding ou fond ad-hoc. Toujours utiliser section-light ou section-dark comme classe de base.
Le padding standard est 112px vertical / 40px horizontal. Ne modifier que sur breakpoints via les overrides Webflow.
Bon à savoir. Utiliser ce composant pour mettre en valeur une information clé, un conseil ou une mise en garde dans un article.
.callout { border-left: 3px solid var(--color-primary); padding: 16px 20px; background: rgba(57,116,247,.06); border-radius: 0 8px 8px 0; }Sites vitrine, applications, e-commerce, livrés en production.
.service-card { padding: 32px; background: #fff; border-radius: 12px; }.badge, 3 variantes : blue, dark, outline.stat { padding:24px; background:#f5f5f0; text-align:center; }HWS Agency, Toulouse, depuis 2024