Charte des couleurs & de la typographie — Association NOGAFAM · Dany Schweickhardt · Fully, Valais
Palette de couleurs
Cinq couleurs d’action et une gamme de gris UI. Chaque couleur a un rôle précis — on ne les intervertit pas. Clique sur une couleur pour copier son code hex.
Titre principal · Logo
Mot clé accent
Bouton action principale
Badge certification
Encart défense cash
Info box développeur
Typographie
Deux polices libres, téléchargées localement — zéro appel vers Google Fonts. Fraunces pour l’impact, Inter pour la lisibilité.
Le numérique au service des Gens
fw:300
Le numérique au service des Gens
fw:400
Le numérique au service des Gens
fw:700
Le numérique au service des Gens
fw:900
GAFAM
italic
Les ateliers NOGAFAM sont ouverts à toutes les générations, sans exception.
fw:300
Les ateliers NOGAFAM sont ouverts à toutes les générations, sans exception.
fw:400
Les ateliers NOGAFAM sont ouverts à toutes les générations, sans exception.
fw:500
Les ateliers NOGAFAM sont ouverts à toutes les générations, sans exception.
fw:600
Les ateliers NOGAFAM sont ouverts à toutes les générations, sans exception.
fw:700
Échelle typographique
Tailles standardisées pour garantir la cohérence entre toutes les pages du site, les articles de blog et les documents imprimés.
Une association libre
clamp(2–3.2rem)
Nos ateliers en Valais
clamp(1.6–2.4rem)
Quitter Gmail — guide complet
1.2rem
Paiement en espèces
0.95rem
Des vraies rencontres, des vraies personnes, sans écran entre les Gens.
1.1rem
Rejoindre NOGAFAM, c’est s’engager dans un cheminement vers plus de liberté numérique.
0.95rem
Hébergé en Suisse chez Infomaniak · Énergie renouvelable · Zéro GAFAM
0.85rem
PROGRAMME 2026 · VALAIS · SUISSE
0.72rem · caps
· #00B050 · contact@stopgafam.com
0.82rem mono
Passer de Gmail à Infomaniak Mail — sans rien perdre
Tu utilises encore Gmail mais tu voudrais t’en passer ? Bonne nouvelle : c’est plus simple que tu ne le crois. On a fait cette migration ensemble pendant les ateliers NOGAFAM à Fully — et ça marche à chaque fois.
Avant de commencer, sache que tu n’as rien à perdre : tous tes anciens emails restent accessibles pendant la transition. On avance à ton rythme, une étape à la fois.
— Dany Schweickhardt · Avril 2026 · contact@stopgafam.com
Composants & éléments UI
Les blocs réutilisables du site. À copier-coller tel quel pour garder la cohérence entre toutes les pages.
Cash = Orange #FF9900 · Ghost = transparent + bord gris
📰 Actualités
💵 Cash
🗣️ Témoignage
🌿 Nature
🔓 Libre
Règles éditoriales & d’usage
Des règles simples pour que le site et le blog gardent une voix cohérente — qu’il s’agisse d’un article de Dany ou d’un témoignage de la communauté.
✍️ Ton & écriture
- Tutoiement systématique — « Tu veux migrer ? Voici comment. »
- Les GENS avec une majuscule — c’est notre public, on les respecte
- Mots simples — jamais de jargon sans explication entre parenthèses
- Positif d’abord — ce qu’on gagne, pas ce qu’on quitte
- Concret — chaque conseil aboutit à une action possible immédiatement
- Patience visible — « Pas d’inquiétude, on y va étape par étape »
- Jamais de culpabilisation — « Tu devrais avoir honte d’utiliser Google »
- Jamais de jargon GAFAM non expliqué (cloud, tracking, API…)
🎨 Usage des couleurs
- Vert → succès, conformité, nature, actions positives
- Bleu → informatique, liens, boutons de navigation
- Orange → défense du cash, avertissements, attention
- Rouge → logo Stop GAFAM uniquement — très rare ailleurs
- Gris texte → contenu secondaire, méta-données, descriptions
- Jamais de violet, ni de dégradés pastel — ce n’est pas notre style
- Jamais de vert et rouge ensemble (confusion daltonisme)
- Le rouge n’est pas pour les erreurs — utiliser orange à la place
📝 Structure des articles
- Catégorie obligatoire — Tutoriel / Actu / Cash / Témoignage / Nature / Libre
- Niveau obligatoire — 🌱 🌿 🌳 🌲 pour les tutoriels
- Temps de lecture — estimé en minutes (250 mots ≈ 1 min)
- Date de mise à jour — les tutoriels doivent être datés et maintenus
- Résultat concret — le lecteur sait ce qu’il saura faire à la fin
- Issue de secours — toujours indiquer où trouver de l’aide
- Jamais de lien direct vers Gmail, Google Drive ou services GAFAM
🖼️ Images & médias
- Photos nature — de Dany Schweickhardt exclusivement (danyphoto.ch)
- Captures d’écran — outils libres uniquement (LibreOffice, KMail, Firefox…)
- Emojis — autorisés et encouragés pour les niveaux et catégories
- Icônes — open-source uniquement (pas de Font Awesome version non libre)
- Vidéos — hébergées chez Infomaniak Streaming, jamais YouTube embarqué
- Jamais de captures d’écran Google, Facebook ou Microsoft dans les tutos
- Jamais d’images de stock issues de banques GAFAM (Getty, Shutterstock payants)
Logo & identité de marque
Le logo StopGAFAM est typographique — il s’appuie uniquement sur Fraunces. Pas de fichier vectoriel externe nécessaire pour le web.
Association · Valais · Suisse
Informatique conviviale
→ Utiliser sur fond noir ou très sombre
→ Taille minimum : 120px de large sur écran
→ Garder le rouge sur « GAFAM » en toutes circonstances
→ Version fond blanc pour l’impression uniquement
→ Changer les couleurs du mot « GAFAM »
→ Mettre le logo sur fond de couleur vive (sauf bleu)
→ Déformer ou incliner le logo
→ Utiliser une police différente de Fraunces
Variables CSS — à coller en haut de chaque page
Copie ce bloc au début de chaque fichier CSS ou bloc freeform WordPress. C’est lui qui garantit la cohérence visuelle sur tout le site.
CHARTE VISUELLE STOPGAFAM.COM & NOGAFAM
Version 1.0 — Avril 2026 — Dany Schweickhardt
Hébergé en Suisse — Zéro GAFAM
================================================ */
:root {
/* === COULEURS D’ACTION === */
–vert: #00B050; /* Succès, NOGAFAM, nature, conformité */
–bleu: #1520EB; /* Action, informatique, liens, boutons */
–bleu-moy: #2E75B6; /* Variante bleu — documents, icônes */
–orange: #FF9900; /* Cash, alertes, avertissements */
–rouge: #FF0000; /* Logo Stop GAFAM uniquement */
/* === NEUTRALS UI === */
–noir: #000000; /* Fond header, hero, zones principales */
–blanc: #FFFFFF; /* Texte principal, titres */
–gris-fond: #0d0d0d; /* Fond sections alternées */
–gris-carte: #111111; /* Background cartes, encarts */
–gris-bord: #222222; /* Bordures éléments UI */
–gris-texte: #aaaaaa; /* Texte secondaire, descriptions */
/* === TYPOGRAPHIE === */
–font-titre: ‘Fraunces’, Georgia, serif; /* H1, H2, H3, Logo */
–font-corps: ‘Inter’, system-ui, sans-serif; /* Tout le reste */
}