Guidelines & Usage — Swellr Charte Graphique

Principes de design

Les 5 piliers fondateurs qui guident chaque décision de design dans l'univers Swellr.

🎯

Clarté avant tout

L'information surf doit être immédiatement lisible, même en plein soleil ou en conditions extrêmes. La lisibilité prime sur l'esthétique.

🌊

Identité surf lifestyle

Chaque élément de l'interface doit évoquer la culture surf : les gradients ocean, les typographies dynamiques, les couleurs marines.

📱

Mobile-first

Pensé et conçu pour le mobile d'abord, puis adapté au web. Les interactions au pouce, les zones de tap généreuses, l'interface épurée.

♿

Accessibilité

Lisible pour tous : contraste WCAG AA minimum (4.5:1), taille de texte adaptée, contrastes testés sur fond clair et foncé.

⚡

Légèreté

Interface épurée, sans publicité, sans surcharge visuelle. Chaque élément ajouté doit avoir une raison d'être. Moins mais mieux.

Do's & Don'ts — Couleurs

Les règles d'usage pour les couleurs de la palette Swellr. Les couleurs sémantiques ont un rôle précis et ne doivent pas être détournées.

🎨

Couleur principale

✓ À faire

#028490 — Couleur principale

Utiliser #028490 comme couleur primaire systématiquement. C'est la couleur signature Swellr — teal ocean.

#028490 rgb(2,132,144) Primaire

Applicable sur les CTAs, les liens, les éléments de navigation active, les accents, les puces et les titres de sections.

✕ À ne pas faire

#2a7f99 — Variante non officielle

Ne pas utiliser des variantes non officielles du teal comme #1a8fa0, #0096a8, #2a7f99 ou toute autre teinte approchante non validée.

Même un léger écart crée une incohérence visuelle perceptible. Toujours utiliser la valeur exacte de la palette officielle.

🚦

Couleurs sémantiques

✓ À faire

#22C55E — Succès, confirmation, éco-événement

Utiliser les couleurs sémantiques uniquement dans leur contexte : vert pour les succès et événements écolo, rouge pour les suppressions et alertes, orange pour les écoles surf, teal pour les spots.

Succès Erreur Alerte

✕ À ne pas faire

Rouge pour éléments positifs — INTERDIT

Ne jamais utiliser #C62828 (rouge) pour des éléments positifs ou neutres. Ne pas utiliser le vert pour des erreurs, ni l'orange pour des validations.

La sémantique des couleurs crée une cohérence cognitive pour l'utilisateur. En briser les règles provoque de la confusion et nuit à la confiance.

👁️

Contraste et lisibilité

Texte lisible

Blanc sur fond teal très sombre

12.8:1 — AAA

Texte lisible

Blanc sur teal principal

4.8:1 — AA

Texte illisible

Blanc sur teal clair

2.1:1 — Échec

Texte lisible

Gris foncé sur blanc

5.9:1 — AA

Seuil minimum WCAG AA pour le texte courant : 4.5:1 — Grand texte (≥18px bold) : 3:1

Do's & Don'ts — Typographie

Le système typo Swellr repose sur 3 familles aux rôles strictement définis. Le mélange de familles hors règles est interdit.

🔤

Familles de polices

✓ À faire

Titre en Manrope Bold

Corps de texte en Inter Regular pour la description et les explications.

Utiliser Manrope pour tous les titres (H1 à H4) et Inter pour le corps, les labels, les descriptions. Maximum 2 familles sur une même vue.

✕ À ne pas faire

Titre en Georgia (tiers)

Corps en Arial Black, une 3e famille.

Ne jamais introduire une 3e famille de polices sur la même vue. Ne pas utiliser Georgia, Times New Roman, Arial Black ou toute autre police non prévue dans la charte.

🔢

DIN Alternate — données numériques uniquement

✓ À faire

1.8m

Hauteur des vagues — DIN Alternate Bold

14°C 12s 280°

Température / Période / Direction — DIN Alternate

DIN Alternate est réservé aux données météo et numériques : hauteur des vagues, température de l'eau, vitesse du vent, direction, période.

✕ À ne pas faire

Rejoins la communauté Swellr pour surfer avec des passionnés de toute la côte Atlantique.

DIN Alternate utilisé pour du texte courant — INTERDIT

Ne jamais utiliser DIN Alternate pour le texte courant — descriptions, paragraphes, boutons, labels de formulaires. Elle est illisible en petite taille et inadaptée aux longs textes.

Do's & Don'ts — Logo

Le logo Swellr existe en 3 versions officielles. Toute modification des proportions, couleurs ou effets est strictement interdite.

Swellr

Version bleue — Fond clair

Usage principal sur fonds blancs et clairs

Swellr

Version blanche — Fond sombre

Usage sur gradients et fonds sombres

Swellr

Version noire — Monochrome

Impression N&B, documents techniques

Swellr

Fond couleur similaire — INTERDIT

Contraste insuffisant, logo illisible

Swellr

Logo étiré — INTERDIT

Ne jamais modifier les proportions

Swellr

Ombre portée — INTERDIT

Aucun drop-shadow sur le logo

Zone de protection : Toujours laisser un espace libre autour du logo égal à la hauteur du logomark "S" sur chaque côté. Aucun autre élément graphique ne doit pénétrer dans cette zone de protection.

Ton de voix

Le ton varie selon le contexte mais reste toujours authentique, direct et surf lifestyle. Chaque surface de communication a son registre.

Contexte	Ton	Exemple	À éviter
🔔 Notification push	Direct Actif Court	"Les vagues sont là ! 🌊 Lacanau — 1.8m, conditions parfaites."	❌ "Bonjour, nous vous informons que des conditions favorables..."
⚠️ Message d'erreur	Clair Calme Actionnable	"Connexion interrompue. Réessaie dans un instant."	❌ "Erreur 503 : Service temporairement indisponible."
👋 Onboarding	Chaleureux Invitant Communautaire	"Bienvenue dans la communauté Swellr ! Des milliers de surfeurs t'attendent."	❌ "Votre inscription est confirmée. Veuillez compléter votre profil."
🚀 Landing page	Inspirant Lifestyle Expert	"Surf smarter, live better. Les meilleures conditions, en temps réel."	❌ "Application de météo surf avec fonctionnalités avancées."
📅 Communication événement	Énergique Visuel Fun	"Grande Plage, Biarritz — 13 Mars. Sois là."	❌ "Nous avons le plaisir de vous convier à notre prochain événement..."
📱 UI application	Utile Direct Sans fioriture	"Hauteur : 1.8m — Période : 12s — Vent : SO 15km/h"	❌ "La hauteur significative des vagues est actuellement estimée à..."

Hiérarchie UI — Application

L'information dans l'app Swellr suit une hiérarchie visuelle stricte à 4 niveaux. Chaque niveau a sa police, sa taille et sa couleur propres.

Données clés

Hauteur de vague, température, direction

1.8m

DIN Alternate Bold 36–48px #121417 (fond clair) letter-spacing: -1px

Localisation / Spot

Nom du spot, région, point GPS

Grande Plage, Biarritz

Manrope Bold 700 16–20px #028490 (teal primaire) letter-spacing: -0.3px

Informations secondaires

Période, vent, dernière mise à jour

Période 12s — Vent SO 18km/h — Mise à jour il y a 5 min

Inter Regular 400 13–14px #637887 (gris 700) line-height: 1.5

Actions

Boutons CTA, liens d'action primaires

Voir la session

Inter SemiBold 600 13–15px #FFFFFF sur #028490 border-radius: 9999px

Principe de lecture rapide : Un surfeur qui consulte l'app dans l'eau (sur tablette waterproof) ou sur la plage en plein soleil doit pouvoir lire l'information de Niveau 1 en moins de 2 secondes. Ne jamais compresser la taille des données clés.

Checklist livrable

Vérifications à effectuer avant toute publication ou livraison d'un écran, d'une affiche ou d'un composant Swellr.

Contraste texte ≥ 4.5:1 Critique

Tester chaque combinaison texte / fond avec un outil de vérification de contraste (WebAIM, Figma plugin Contrast). Le minimum WCAG AA (4.5:1) est non négociable. Grand texte bold (≥18px) : seuil 3:1.

Zone de protection du logo respectée Marque

La zone de protection autour du logo est égale à la hauteur du logomark "S" sur chaque côté. Aucun élément graphique, texte ou image ne doit y pénétrer.

Maximum 2 familles de polices utilisées Marque

Sur une même vue ou document, ne jamais dépasser 2 familles : Manrope (titres) + Inter (corps). DIN Alternate est autorisé pour les données numériques et compte comme une 3e famille — à réserver aux contextes data-first (météo, statistiques).

Couleurs de la palette officielle uniquement Critique Marque

Toutes les couleurs utilisées doivent correspondre exactement aux valeurs de la palette officielle Swellr. Vérifier les valeurs HEX à l'aide de l'eyedropper si nécessaire. Primaire : #028490

Boutons CTA en pill (radius 9999px) Marque

Tous les boutons d'action primaires utilisent le border-radius 9999px (pill). Les boutons secondaires peuvent utiliser un rayon plus petit (8–14px) mais jamais les boutons primaires. Vérifier sur mobile (375px) et desktop (1280px).

Responsive testé sur 375px et 1280px Critique

Tester chaque livrable sur les deux breakpoints clés : 375px (iPhone SE / viewport mobile standard) et 1280px (desktop standard). Vérifier que les tailles de texte, les espacements et les grilles s'adaptent correctement.

Couleurs sémantiques dans leur contexte

Vérifier que le rouge (#C62828) n'est utilisé que pour les suppressions et alertes, le vert (#22C55E) pour les succès et validations, l'orange (#F59E0B) pour les avertissements. Jamais de rouge pour valider, jamais de vert pour supprimer.

Proportions du logo non modifiées Marque

Le ratio largeur/hauteur du logo est verrouillé. Toujours utiliser un transform scale uniforme ou redimensionner en maintenant les proportions (Maj + drag dans Figma). Aucune déformation, rotation ou effet (ombre, contour, opacité).

Hiérarchie typographique respectée Marque

Niveau 1 (données surf, DIN) → Niveau 2 (spots, Manrope Bold teal) → Niveau 3 (secondaire, Inter gris) → Niveau 4 (actions, pill Inter SemiBold). Ne jamais inverser la hiérarchie visuellement (un N3 plus grand qu'un N1).

Icônes non étirées ou déformées Marque

Toutes les icônes Swellr sont conçues sur grille 24×24px. Redimensionner uniquement par multiples entiers (16px, 24px, 32px, 48px) et toujours en maintenant les proportions. Ne jamais appliquer de distortion ou modifier le stroke-width.

Processus de validation : Toute livraison doit être validée par le design lead avant intégration. En cas de doute sur une règle, se référer à cette charte ou ouvrir une issue sur le repo design system Swellr.