Cartes & Containers
Cards, bottom sheets, listes, avatars et containers de l'app Swellr.
1. Card Spot
Carte principale affichée dans les listes de spots de surf. Border-radius 16px, shadow card double couche, padding 16px.
La shadow card utilise deux couches : une ombre portée douce (0 8px 40px rgba(7,55,66,0.08)) et un outline fin teal (0 0 0 1px rgba(2,132,144,0.06)) pour un rendu premium sur fond clair.
Landes Atlantique
Hossegor — La Gravière
Landes Atlantique · 2 km
🌊 1.5m
💨 35 km/h
⭐ 4.2
Bretagne Nord
La Palue — Crozon
Finistère · 5 km
🌊 2.2m
💨 28 km/h
⭐ 3.8
Spécifications Card Spot
| Propriété | Valeur | Token |
|---|---|---|
| Fond | #ffffff | --color-white |
| Border-radius | 16px | --radius-xl |
| Shadow | 0 8px 40px rgba(7,55,66,.08), 0 0 0 1px rgba(2,132,144,.06) | --shadow-card |
| Padding | 16px | --space-4 |
| Image aspect-ratio | 16 / 9 | Border-radius image : 10px |
| Tag localisation | bg #ECF8F8, couleur #028490 | --color-bg-mint + --color-teal |
| Titre spot | Manrope SemiBold 16px | Couleur #08272e |
| Sous-titre | Inter Regular 13px | Couleur #637887 |
| Bouton action | Secondary pill — border teal 30% | Font Inter SemiBold 13px |
2. Card Session
Variante de la card pour les sessions organisées. Badge orange sémantique, avatars participants empilés, CTA de jonction.
Session
Session matinale — Hossegor
🌊 1.8m
💨 22 km/h
🌡 18°C
AM
CK
LA
MD
Session Éco
Clean Up Surf — La Palue
🌊 2.0m
💨 18 km/h
♻ Éco
JD
PB
MR
| Propriété | Valeur |
|---|---|
| Badge session | bg #F05906 · Inter Bold 10px · uppercase · pill |
| Badge session éco | bg #4CAF00 · même specs |
| Avatars taille | 28 × 28px (liste) · overlap -8px |
| Border avatar | 2px solid #ffffff pour séparer les empilements |
| CTA primaire | bg #028490 · Inter SemiBold 13px · pill |
3. Bottom Sheet — Spot Detail
Sheet modal qui surgit depuis le bas de l'écran sur la vue carte. Border-radius 30px en haut, handle bar grise centré, padding 20px.
En production React Native, le SpotBottomSheet utilise @gorhom/bottom-sheet. Il est présenté ici dans sa version statique "ouverte" avec toutes ses couches de contenu.
Landes Atlantique
Hossegor — La Gravière
Surfeurs actifs
AM
CK
LA
MD
+5
| Élément | Valeur | Note |
|---|---|---|
| Border-radius top | 30px | Haut gauche + haut droit seulement |
| Handle bar | 66 × 7px · bg #D9D9D9 | Centré, border-radius full |
| Padding contenu | 20px | --space-5 |
| Location tag | bg #ECF8F8 · couleur #028490 | Identique à la card spot |
| Info tags | border 1px #E8ECF4 · padding 13px 8px | Border-radius 50px |
| Avatars participants | 20 × 20px | Overlap -5px · border 1.5px white |
| Bouton action | bg #090909 · noir | Inter SemiBold 16px · padding 14px 16px · radius 14px |
4. Welcome Card — Dashboard
Carte d'accueil affichée en haut du dashboard de l'application. Fond gris très clair, typographie Inter SemiBold 24px.
🏄
Bonjour, bon retour
Anthony !
Les conditions sont excellentes à Hossegor aujourd'hui. Houle 1.5m, vent offshore 22 km/h.
12
Sessions
3
Spots favoris
48h
En mer
🌊
Conditions du jour
Excellent
Houle longue, vent offshore, marée idéale. C'est le moment de surfer !
1.8m
Hauteur
12s
Période
SO
Direction
| Propriété | Valeur |
|---|---|
| Fond | #F9F9F9 (grey[50]) |
| Border-radius | 16px · --radius-xl |
| Padding | 24px · --space-6 |
| Titre | Inter SemiBold 24px · couleur #090909 |
| Variante teal | Fond #ECF8F8 · titre #028490 |
5. Info Card & Status Cards
Containers informatifs avec fond blanc bordé pour les informations neutres, et variantes teintées pour les états success / error / warning.
Info Card — fond blanc, bordure grise
Prévisions houle
Houle de 1.5–2m attendue de vendredi à dimanche. Meilleure fenêtre samedi matin entre 7h et 10h avec vent offshore.
Zone réglementée
Baignade interdite les jours de compétition. Vérifiez le calendrier des événements avant votre session.
Conseil du jour
Avec un vent de face, privilégiez les spots abrités. Vérifiez les conditions en temps réel sur la carte.
Status Cards — Success · Error · Warning
Session créée avec succès
Votre session du samedi 15 mars à Hossegor est confirmée. 3 surfeurs ont déjà rejoint.
Connexion impossible
Impossible de récupérer les prévisions météo. Vérifiez votre connexion internet et réessayez.
Conditions dégradées
Vent de face 45 km/h prévu cet après-midi. Session déconseillée aux débutants.
| Variante | Fond | Bordure | Texte |
|---|---|---|---|
| Info Card | #ffffff | 1px solid #E2E2E2 | #08272e titre · #637887 texte |
| Success | rgba(34,197,94,0.06) | rgba(34,197,94,0.25) | #15803d |
| Error | rgba(220,38,38,0.06) | rgba(220,38,38,0.2) | #b91c1c |
| Warning | rgba(245,158,11,0.07) | rgba(245,158,11,0.25) | #b45309 |
6. Listes & Items
Composants de liste utilisés dans les écrans de l'app : liste de spots, historique de sessions, paramètres. Séparateur léger, flèche de navigation, avatars et badges.
Liste avec icônes
Mes spots
Hossegor — La Gravière
Landes · dernière visite il y a 3j
Actif
›
La Palue — Crozon
Finistère · dernière visite il y a 1 sem.
›
Lacanau Océan
Gironde · Favori
Nouveau
›
Liste avec avatars
Sessions récentes
AM
Session matinale
Hossegor · Sam. 15 mars · 07:30
Ouverte
›
MD
Session après-midi
La Palue · Ven. 14 mars · 15:00
Terminée
›
LA
Clean Up Surf
Lacanau · Dim. 16 mars · 09:00
À venir
›
| Élément | Valeur |
|---|---|
| Padding item | 14px 18px |
| Icône item | 40 × 40px · border-radius 10px |
| Avatar circulaire | 40 × 40px · border-radius 50% |
| Titre item | Manrope SemiBold 14px · #08272e |
| Sous-titre item | Inter Regular 12px · #637887 |
| Séparateur | 1px solid #f0f4f5 · margin 0 18px |
| Header de section | Manrope Bold 11px · uppercase · #637887 |
| Flèche navigation | Couleur #D9D9D9 · font-size 1.1rem |
7. Récapitulatif des Containers
Vue synthétique de tous les containers du design system Swellr avec leurs propriétés visuelles et leurs cas d'usage.
| Composant | Fond | Border-radius | Shadow / Bordure | Padding | Usage |
|---|---|---|---|---|---|
| Card Spot | #ffffff | 16px | shadow-card double | 16px | Listes spots, résultats recherche |
| Card Session | #ffffff | 16px | shadow-card double | 16px | Sessions surf, événements, groupes |
| Bottom Sheet | #ffffff | 30px (top) | shadow-lg vers le haut | 20px | Détail spot sur carte, modals app |
| Welcome Card | #F9F9F9 | 16px | 1px solid #e0e5e6 | 24px | Haut du dashboard, onboarding |
| Info Card | #ffffff | 12px | 1px solid #E2E2E2 | 18px 20px | Informations contextuelles, alertes |
| Status Success | rgba(34,197,94,.06) | 12px | 1px solid rgba(34,197,94,.25) | 16px 18px | Confirmations, actions réussies |
| Status Error | rgba(220,38,38,.06) | 12px | 1px solid rgba(220,38,38,.2) | 16px 18px | Erreurs, états critiques |
| Status Warning | rgba(245,158,11,.07) | 12px | 1px solid rgba(245,158,11,.25) | 16px 18px | Alertes, conditions dégradées |
| Liste Container | #ffffff | 14px | 1px solid #e8ecf4 | 14px 18px (item) | Listes spots, sessions, paramètres |