Couleurs
Système chromatique complet de Swellr : palette de marque, couleurs sémantiques, nuances et règles d'usage.
Couleur principale
Le Teal (#028490) est la couleur d'ancrage de l'identité Swellr. Inspirée des eaux côtières, elle structure tous les éléments de marque.
TEAL
#028490
Couleur de marque principale · Teal
HEX
#028490
RGB
2, 132, 144
CMYK
99, 8, 0, 44
CSS Token
--color-teal
Teal
#028490
Couleur principale · --color-teal
Teal Dark
#073742
Textes, en-têtes · --color-teal-dark
Teal Darkest
#08272e
Sidebar, fonds sombres · --color-teal-darkest
Teal Light
#4FA3B1
Infos, accents clairs · --color-teal-light
Palette complète
L'ensemble des couleurs constituant le système chromatique Swellr — couleurs de marque, sémantiques et neutres.
Teal
#028490
RGB(2, 132, 144)
Couleur de marque principale
Teal Light
#4FA3B1
RGB(79, 163, 177)
Infos, accents secondaires
Bleu
#2D69C9
RGB(45, 105, 201)
Lieux, actions copier
Navy
#3D5A80
RGB(61, 90, 128)
Boutons de partage
Orange Session
#F05906
RGB(240, 89, 6)
Sessions de surf
Bordeaux Shop
#9E340E
RGB(158, 52, 14)
Commerces, shops
Ambre École
#FF9437
RGB(255, 148, 55)
Écoles de surf
Rouge Suppression
#C62828
RGB(198, 40, 40)
Actions destructives
Vert Écolo
#4CAF00
RGB(76, 175, 0)
Événements écologiques
BG App
#ECF8F8
RGB(236, 248, 248)
Fond principal de l'app
Noir Écriture
#090909
RGB(9, 9, 9)
Textes sur fonds clairs
Gris Secondaire
#637887
RGB(99, 120, 135)
Textes secondaires, inputs
Blanc Cassé
#F8F8F8
RGB(248, 248, 248)
Textes sur fonds foncés
Couleurs sémantiques de l'app
Chaque couleur est assignée à un type de contenu précis dans l'application. Ces associations sont strictes et ne doivent pas être détournées.
Règle d'usage : La contrainte de texte indique la couleur d'écriture obligatoire sur chaque fond coloré.
Le choix est déterminé par le ratio de contraste WCAG AA (minimum 4.5:1).
| Élément app | Couleur | HEX · Token CSS | Contrainte texte |
|---|---|---|---|
|
Spot surf
Marqueurs de spots sur la carte
|
Teal
|
#028490
--color-spot
|
Noir Blanc |
|
Événement écolo
Badges événements durables
|
Vert Écolo
|
#4CAF00
--color-event-eco
|
Noir uniquement |
|
Lieu / Copier
Localisation, action copier
|
Bleu
|
#2D69C9
--color-location
|
Blanc uniquement |
|
Partage
Bouton de partage social
|
Navy
|
#3D5A80
--color-share
|
Blanc uniquement |
|
Session
Marqueurs de sessions surf
|
Orange Session
|
#F05906
--color-session
|
Blanc uniquement |
|
Shop
Commerces et boutiques
|
Bordeaux
|
#9E340E
--color-shop
|
Blanc uniquement |
|
École
Écoles et cours de surf
|
Ambre
|
#FF9437
--color-school
|
Noir uniquement |
|
Suppression
Actions irréversibles, danger
|
Rouge
|
#C62828
--color-delete
|
Blanc uniquement |
|
Infos
Messages informatifs, détails
|
Teal Light
|
#4FA3B1
--color-info
|
Noir uniquement |
Variantes d'opacité
Les variantes semi-transparentes permettent de créer des fonds teintés, des overlays et des effets verre (glassmorphism).
Teal sur fond blanc
5%
rgba(2,132,144, 0.05)
10%
rgba(2,132,144, 0.10)
20%
rgba(2,132,144, 0.20)
Usage : fonds de badges, zones mises en avant, chips, hover states
Teal sur fond sombre
10%
Subtle overlay
20%
Nav active
35%
Emphasis
Usage : liens actifs sidebar, overlays sombres, surbrillances
Blanc sur fond Teal Darkest
10%
Subtle
20%
Cards
60%
Glass
Usage : cartes glass, fonds de modales, effets de transparence
Gradients
Quatre gradients officiels couvrant l'ensemble des besoins visuels — fonds sombres, effets glassmorphism, transitions légères.
Brand Gradient
linear-gradient(135deg, #08272e 0%, #0a3a42 100%)
Fonds de hero sections, header de l'app, écrans d'onboarding
Teal Gradient
linear-gradient(135deg, #028490 0%, #073742 100%)
Boutons primaires, cards d'action, barres de progression
Glass Gradient
linear-gradient(168deg, rgba(234,255,254,0.5) 0%, rgba(201,217,241,0.5) 97%)
Effets glassmorphism, cartes translucides sur fond teal
Hero Gradient
linear-gradient(180deg, #ebfafe 0%, #ffffff 100%)
Section hero landing page, transitions vers fond blanc
Palette de statut
Couleurs réservées aux retours système : confirmation, erreur, avertissement. Elles ne doivent pas être utilisées pour d'autres usages.
Succès
#22C55E · --color-success
Votre session a été enregistrée
HEX
#22C55E
RGB
34, 197, 94
Texte
Blanc / Noir
Confirmations, messages positifs, actions réussies
Erreur
Deux valeurs — voir note
Connexion impossible, veuillez réessayer
Erreurs système, champs invalides, alertes critiques.
Deux valeurs coexistent selon la plateforme (voir bloc ci-dessous).
Avertissement
#F59E0B · --color-warning
Conditions de surf dégradées
HEX
#F59E0B
RGB
245, 158, 11
Texte
Noir uniquement
Alertes modérées, informations à surveiller
Couleur d'erreur — Discordance Expo Mobile / Landing
Landing Web
#DC2626 · --color-error
Tailwind red-600
Champ invalide · Erreur de validation
HEX
#DC2626
RGB
220, 38, 38
Source
colors.css
Variantes : --color-error-dark (#B91C1C), --color-error-bg, --color-error-light (#FEF2F2), --color-error-foreground (#EF4444), --color-error-soft (#FCA5A5)
Expo Mobile
#FF2C20 · Colors.red[500]
Fluent Design System
Erreur réseau · Formulaire invalide
HEX
#FF2C20
RGB
255, 44, 32
Source
Colors.ts
Défini dans Constants/Colors.ts :
red: { 500: '#FF2C20' }
Note de discordance documentee : La couleur d'erreur n'est pas unifiée entre les deux plateformes.
La landing web utilise
#DC2626 (Tailwind red-600),
tandis que l'application Expo mobile utilise #FF2C20 (Fluent Design System, red 500).
Ces deux valeurs proviennent de systèmes de design différents et coexistent dans le codebase actuel.
Une unification future pourrait être envisagée lors d'une révision du design system.
Important : Les couleurs de statut sont réservées exclusivement aux messages système (feedback utilisateur, validation de formulaire, alertes).
Elles ne doivent jamais être utilisées pour de la décoration ou pour typer des catégories de contenu.
Couleurs supplémentaires Landing
Variables CSS présentes dans swellr-landing/src/styles/colors.css et absentes de la palette principale. Elles complètent le système chromatique de la landing page.
Dark
--color-dark
#363b64
Bleu marine foncé
Vert-Gris
--color-vert-gris
#748c8c
Teinte neutre vert-gris
Cyan Subtle
--bg-cyan-subtle
#d6eff6
Cyan très clair, fonds doux
Blue Primary
--color-blue-primary
#2d69c9
Token landing · aussi primaryBlue Expo
Source : Ces tokens sont définis dans
swellr-landing/src/styles/colors.css et s'appliquent exclusivement aux composants de la landing page. Ils ne sont pas référencés dans le design system Expo.
Transparences & Overlays
Variables rgba issues de colors.css (Landing) et Colors.ts (Expo). Utilisées pour les glassmorphism, overlays de modales, textes sur fond coloré et boutons secondaires.
Tokens de flou (backdrop-filter)
Définis dans colors.css pour les effets glassmorphism de la landing page.
blur(5px)
--blur-sm
blur(5px)
Effet subtil, chips, badges
blur(24px)
--blur-md
blur(24px)
Cards glass, navbars
blur(64px)
--blur-lg
blur(64px)
Hero sections, modales
Couleurs Expo Mobile — Complémentaires
Couleurs issues de swellr-expo/constants/Colors.ts et absentes ou non documentées dans la palette principale. Spécifiques au contexte mobile React Native.
Primary Blue
Colors.primaryBlue
#2D69C9
Expo + Landing
Blanc (off-white)
Colors.blanc
#F8F8F8
Expo
Spots
Colors.spots
#028490 (= primary)
Expo
Success
Colors.success
#22C55E
Expo + Landing
Palette gris Expo (Colors.grey)
Grey 50
Colors.grey[50]
#F9F9F9
Grey 100
Colors.grey[100]
#EEEEEE
Grey 200
Colors.grey[200]
#E2E2E2
Grey 500
Colors.grey[500]
#757575
A propos de
Colors.spots : Dans Colors.ts, la clé spots est définie comme alias de primary — soit #028490. Elle permet de nommer explicitement l'usage "spots de surf" dans le code React Native sans dupliquer la valeur.