Aller au contenu principal
Goodassur

Référence interne · goodassur.com

Design System

Tokens, classes CSS et patterns visuels utilisés sur goodassur.com. À utiliser comme référence avant de créer un nouveau bloc — préférer toujours une classe existante à du Tailwind inline pour les patterns récurrents.

Couleurs tokens CSS

Tokens de marque exposés via var(--color-*) et utilisables en Tailwind via bg-primary, text-accent, etc.

primary
#015aa3
bg-primary
primary-dark
#013d6e
bg-primary-dark
primary-light
#E6F0F8
bg-primary-light
accent
#ef983f
bg-accent
accent-dark
#c97a2a
bg-accent-dark
accent-light
#FEF4E8
bg-accent-light
secondary
#2b9ebf
bg-secondary
secondary-dark
#1f7a94
bg-secondary-dark
secondary-light
#E8F6FA
bg-secondary-light
success
#0a8023
bg-success
warning
#a55c0c
bg-warning
error
#d71a1f
bg-error
Utilisation
<div class="bg-primary text-white">…</div>
<a class="text-accent hover:text-accent-dark">…</a>


<div style="background: var(--color-primary);">…</div>

Typographie Source Sans 3 + JetBrains Mono

Police sans-serif Source Sans 3 (200-900) chargée localement (/fonts/source-sans-3-latin.woff2), monospace JetBrains Mono pour le code. Aucune autre police — ne pas charger de Google Font additionnelle.

Heading 1 — texte principal de page

Heading 2 — section d'article

Heading 3 — sous-section

Paragraphe corps d'article : --font-size-body (1,125 rem) et line-height: 1,75. Texte normal lisible sur écran et imprimé. Les liens éditoriaux apparaissent en bleu primaire et en gras, soulignés.

Texte secondaire (légendes, méta) — 0,9 rem, color: #6b7280.

Échelle responsive : les tailles ci-dessus sont fixes côté preview. Dans les pages réelles, suivre l'échelle Tailwind (text-xl, text-2xl, text-3xl…) pour la cohérence avec la grille de breakpoints.

Tokens layout --max-width-* / --shadow-* / --radius-*

Tokens partagés (issus de themes/base/theme.css) que toute page goodassur peut consommer.

Largeurs --max-width-content : 1200 px
--max-width-article : 768 px
Rayons --radius-card : 0,5 rem
--radius-button : 0,5 rem
--radius-input : 0,375 rem
--radius-badge : 9999 px
Ombres --shadow-card : carte au repos
--shadow-card-hover : carte au survol
--shadow-dropdown : menu déroulant
--shadow-sticky : header sticky
Espacements --spacing-section : 3 rem
--spacing-section-lg : 4 rem
--spacing-card-padding : 1,5 rem

Boutons CTA .btn-cta

Bouton orange par défaut. Variantes --blue, --green. Modificateurs de taille --sm / --lg. Modificateur --block pour pleine largeur.

Code
<a href="..." class="btn-cta">Devis gratuit</a>
<a href="..." class="btn-cta btn-cta--blue">Comparer</a>
<a href="..." class="btn-cta btn-cta--green">Économisez</a>
<a href="..." class="btn-cta btn-cta--sm">Petit CTA</a>
<a href="..." class="btn-cta btn-cta--lg">Grand CTA</a>
<a href="..." class="btn-cta btn-cta--block btn-cta--blue">Pleine largeur</a>

Bloc d'intro .ga-intro / p.intro

Paragraphe d'ouverture d'article avec barre bleue à gauche. Optimisé pour Google position 0 — réponse directe en 40-60 mots.

L'assurance habitation est obligatoire pour les locataires en France. Comptez en moyenne 150 €/an pour un studio, 250 €/an pour un T3 et jusqu'à 600 €/an pour une maison de 100 m². Comparer les offres permet d'économiser jusqu'à 30 % sur la prime annuelle.

Code
<p class="intro">
    L'<strong>assurance habitation est obligatoire pour les locataires</strong>…
    <a href="/comparateur">Comparer les offres</a>…
</p>


<div class="ga-intro">
    <p>Premier paragraphe…</p>
    <p>Suite éventuelle…</p>
</div>

Listes ✓ / ✗ li.b--check / li.b--cross

Bullets en check vert ou croix rouge. À utiliser pour les listes « avantages » / « inconvénients » ou « inclus » / « non inclus ».

Inclus
  • Responsabilité civile vie privée
  • Vol et tentative de vol
  • Dégâts des eaux
  • Bris de glace.
Non inclus
  • Catastrophes naturelles non déclarées
  • Objets de valeur sans déclaration préalable
  • Dommages volontaires.
Code
<ul>
    <li class="b--check">Responsabilité civile vie privée</li>
    <li class="b--check">Vol et tentative de vol</li>
</ul>

<ul>
    <li class="b--cross">Catastrophes naturelles non déclarées</li>
</ul>

Liste numérotée ol.list--num

Liste ordonnée avec pastilles bleues circulaires. Idéale pour décrire un processus en plusieurs étapes inline (en alternative à x-timeline-steps).

  1. Renseignez votre situation en 2 minutes (âge, situation familiale, code postal) ;
  2. Comparez les offres triées par prix et niveau de remboursement ;
  3. Choisissez la mutuelle qui correspond à votre profil ;
  4. Souscrivez en ligne ou par téléphone, sans engagement.
Code
<ol class="list--num">
    <li>Renseignez votre situation en 2 minutes ;</li>
    <li>Comparez les offres triées par prix ;</li>
    <li>Choisissez la mutuelle adaptée ;</li>
    <li>Souscrivez en ligne ou par téléphone.</li>
</ol>

Badge inline .mark.mark--success / .text--green

Petite étiquette inline orange (par défaut) ou verte (dans un .table--green-cta). Pour valoriser une économie ou un avantage tarifaire.

Avec Acheel, vous économisez en moyenne -32 % sur le prix par rapport à la concurrence directe.

Le tarif final sera de 28 €/mois au lieu de 41 €/mois.

Code
Vous économisez <span class="mark mark--success">-32 % sur le prix</span>.

Tarif <span class="text--green"><strong>de 28 €/mois</strong></span>.

Tableau éditorial .table--responsive

Tableau moderne sans bordures, avec lignes en cards et zébrage léger. Variantes : .table--swap (transformation mobile en cartes), .table--green-cta (CTA et badges verts).

Mutuelle Prix moyen Économie Devis
Acheel 589 €/an -32 % Devis
Alan 612 €/an -28 % Devis
Heyme 645 €/an -25 % Devis
Le wrapper .article-body est nécessaire car les styles tableau sont scopés à .article-body .table--responsive dans le CSS. Sur les pages article, ce wrapper est posé par x-layouts.article.
Code
<div class="table--responsive">
    <table>
        <thead>
            <tr><th>Mutuelle</th><th>Prix</th><th>Économie</th></tr>
        </thead>
        <tbody>
            <tr><td><strong>Acheel</strong></td><td>589 €</td><td><span class="mark mark--success">-32 %</span></td></tr>
        </tbody>
    </table>
</div>


<div class="table--responsive table--green-cta"> … </div>

Trust grid .ga-trust-grid + .ga-trust-card

Grille de 3 cartes « confiance » avec icône, statistique et étoiles. Utilisée en home et en bas de page assureur.

⭐
4,7/5
★★★★★
Note Trustpilot

Sur plus de 1 200 avis clients vérifiés.

💰
450 €
D'économies en moyenne

Par an et par foyer sur la mutuelle santé.

⚡
5 min
Pour comparer

Toutes les offres du marché en quelques clics.

Code
<div class="ga-trust-grid">
    <div class="ga-trust-card">
        <div class="ga-trust-card-icon">⭐</div>
        <div class="ga-trust-stat">4,7/5</div>
        <div class="ga-trust-stars">★★★★★</div>
        <div class="ga-trust-card-title">Note Trustpilot</div>
        <p class="ga-trust-card-text">Sur plus de 1 200 avis…</p>
    </div>
</div>

Garanties .ga-guarantee-grid + .ga-guarantee-card

Grille responsive de cartes « garanties incluses » (1 → 2 → 3 colonnes). Icône SVG dans une pastille bleue, titre, description.

Responsabilité civile

Couvre les dommages causés à des tiers, dans la vie privée comme à l'extérieur.

Vol & vandalisme

Indemnisation après dépôt de plainte, valeur de remplacement à neuf possible.

Bris de glace

Vitres, baies vitrées, vélux. Vitres optiques (lunettes) souvent en option.

Code
<div class="ga-guarantee-grid">
    <div class="ga-guarantee-card">
        <div class="ga-guarantee-card__icon"><svg>…</svg></div>
        <p class="ga-guarantee-card__title">Responsabilité civile</p>
        <p>Couvre les dommages causés à des tiers…</p>
    </div>
</div>

Grille devis .ga-devis-grid + .ga-devis-card

Cartes de redirection vers les comparateurs (auto, mutuelle, habitation). Préférer le composant <x-devis-grid> (voir shortcodes) — la classe CSS reste utile pour des cas custom.

🩺 Mutuelle santé Devis gratuit 🚗 Assurance auto Devis gratuit 🏠 Habitation Devis gratuit

Podium 1-2-3 .ga-podium + .ga-podium-card--{1,2,3}

Cartes or / argent / bronze pour le top 3. Préférer le composant <x-podium-top3> qui gère les médailles et logos automatiquement (voir shortcodes).

Sur mobile, le podium s'empile verticalement dans l'ordre 1, 2, 3. Sur desktop, l'ordre devient 2, 1, 3 avec la carte 1 plus haute pour le « podium effect ».

Accordéon .collapse / .collapse-box

Bloc dépliant. Utile pour les FAQ, les blocs longs ou les détails optionnels. Le toggle est géré par le script global #ga-collapse-handler dans le layout — aucun JS supplémentaire à charger.

Quelle est la différence entre franchise et plafond ?

La franchise est la somme qui reste à votre charge après un sinistre, avant que l'assureur ne rembourse. Le plafond est le montant maximum que l'assureur paiera pour un sinistre donné.

Puis-je résilier ma mutuelle à tout moment ?

Oui, depuis la loi du 1er décembre 2020, vous pouvez résilier votre mutuelle après un an de contrat, à tout moment et sans frais.

Code
<div class="collapse-box">
    <div class="collapse" data-opened="true">
        <h3>Quelle est la différence entre franchise et plafond ?</h3>
        <div class="collapse__content">
            <p>La <strong>franchise</strong> est la somme qui reste à votre charge…</p>
        </div>
    </div>
</div>

CSS uniquement règle de conventions

Toute page de sites/goodassur.com/pages/ doit être stylée avec des classes CSS nommées uniquement. Tailwind est interdit sur les pages.

❌ Interdit sur les pages

Classes utilitaires Tailwind composées dans class="...". Difficile à relire pour la rédaction, dérive visuelle entre pages, impossible à maintenir depuis un seul endroit. 

<!-- À NE PAS FAIRE sur une page -->
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg border border-blue-200">
    <span class="text-2xl">💡</span>
    <p class="text-sm text-blue-900">Astuce du jour</p>
</div>

✅ À faire

Soit un composant Blade (<x-info-card>, <x-alert>…), soit une classe CSS du design system. Si la classe n'existe pas, l'ajouter dans sites/goodassur.com/css/app.css avant de l'utiliser. 

<x-info-card icon="💡" title="Astuce du jour">
    Texte de l'astuce…
</x-info-card>


<a href="..." class="btn-cta btn-cta--blue">Comparer</a>

Pourquoi cette règle ?

  • La rédaction lit et écrit les pages — un class="..." avec 12 utilitaires est illisible, une classe nommée comme .btn-cta dit ce qu'elle fait ;
  • Le design est centralisé : changer la couleur primaire ou le rayon des cartes se fait dans un seul fichier, pas dans 200 pages ;
  • La cohérence visuelle est garantie : impossible qu'une page ait un bouton à rounded-lg et une autre à rounded-xl ;
  • Les revues PR vont plus vite — la review se concentre sur le contenu, pas sur les classes utilitaires.

Champ d'application

Type de fichier Tailwind autorisé ? Pourquoi
Pages — sites/goodassur.com/pages/** Non Territoire de la rédaction. CSS classes + composants <x-...> uniquement.
Composants — sites/goodassur.com/components/** Oui Territoire des développeurs. Tailwind est encapsulé dans le composant et n'est pas exposé à la rédaction.
Layout — components/layouts/** Oui Idem — modifié par les développeurs uniquement.
Internals partagés — departments/**/views/**, resources/views/** Oui Composants techniques partagés entre plusieurs sites.

Et le style="..." inline ?

Toléré pour les vraies one-shot : un dégradé spécifique au hero d'une seule page, une marge unique, une animation custom. Dès que vous le ré-écrivez ailleurs, il faut le promouvoir en classe CSS.

Si la classe dont vous avez besoin n'existe pas : ouvrez sites/goodassur.com/css/app.css, ajoutez la définition avec un préfixe cohérent (.ga-*, .btn-*, etc.), documentez-la sur cette page, puis utilisez-la. Ne pas contourner la règle en mettant du Tailwind à la place.

Appelez un expert en assurance

01 86 65 20 05

Ouvert actuellement