Fondations › Logo & Identité

Logo & Identité

Déclinaisons du logo Swellr, zones de protection, usages autorisés et interdits.

Le logo Swellr

Le logo Swellr est composé de deux éléments indissociables : une icône "vague stylisée" représentant le surf et la liberté côtière, associée au wordmark "SWELLR" en capitales, composé en Manrope ExtraBold.

254×111px Format SVG vectoriel #028490 icon.svg — Landing page

Logotype principal Swellr — vrai SVG vectoriel extrait du fichier source icon.svg. Utilisé dans le header de la landing page sur fond blanc.

Anatomie

Icône vague
SVG · Vector
SWELLR
Wordmark
Manrope ExtraBold · Majuscules
Couleur principale
#028490
Couleur texte
#08272e
Typographie
Manrope ExtraBold 800
Espace inter-éléments
16px (1rem)

Logotypes source — fichiers SVG réels

Les quatre fichiers SVG vectoriels officiels utilisés dans les applications Swellr. Chaque SVG est intégré directement depuis le fichier source, sans modification des paths.

1 — Logotype principal Landing (icon.svg)

254×111px SVG vectoriel #028490 Teal Header landing page

2 — Logotype App — Version blanche (logo-primary-white.svg)

140×67px #FFFFFF Expo mobile — Splash / Headers

3 — Logotype App — Version sable avec blur (logo-sand-gaussian-blur.svg)

140×67px #DFB497 Sable feGaussianBlur stdDeviation="2" Onboarding screen

Ce logotype utilise un filtre SVG natif feGaussianBlur stdDeviation="2" appliqué directement sur chaque path. L'effet de flou gaussien crée une atmosphère poétique sur l'écran d'onboarding de l'application mobile Expo.

4 — Icône vague seule (white-simple-icon.svg)

24×14px natif scale(5) pour affichage #FFFFFF Footer landing & boutons CTA

Déclinaisons du logo

Quatre variantes officielles couvrent l'ensemble des contextes d'utilisation. Le choix de la variante dépend toujours du fond sur lequel le logo est appliqué.

SWELLR
Principale
Logo couleur sur fond clair
Usage prioritaire. Documents officiels, en-têtes d'emails, fond blanc ou très clair (> luminosité 90%). Interface web standard.
SWELLR
Sombre
Logo blanc sur fond sombre
Sidebar, header de l'app, écrans d'onboarding, merchandising sur fond Teal Darkest (#08272e) ou Navy (#3D5A80).
SWELLR
Monochrome
Logo noir monochrome
Impression en noir et blanc, gravure, sérigraphie, broderie, situations où la couleur n'est pas disponible.
64px
32px
16px
Favicon
Favicon — Icône seule
Onglets navigateur, raccourcis mobiles (PWA), icône d'application. Icône vague sur fond Teal Darkest carré arrondi.

Icône seule (Icon logo)

L'icône vague peut être utilisée seule dans des espaces restreints où le wordmark n'est pas lisible, ou lorsque la marque est déjà établie dans le contexte.

64px
48px
32px
Teal (couleur)
Sur fond blanc ou clair. Variante par défaut, la plus utilisée.
64px
48px
32px
Blanche
Obligatoirement sur fond sombre (Teal Darkest, Navy ou noir).
64px
48px
32px
Noire (monochrome)
Impression sans couleur, gravure, tampon, situations techniques.
Conseil : Préférer le logo complet (icône + wordmark) dans la majorité des cas. L'icône seule est réservée aux espaces strictement restreints (icône d'application, favicon, avatar, bouton navigation mobile).

Zone de protection

Une zone de sécurité doit toujours entourer le logo. Aucun texte, image ou élément graphique ne peut pénétrer dans cette zone.

1× hauteur du logo
1× hauteur du logo
1× hauteur
1× hauteur
SWELLR

La zone de protection est égale à 1 fois la hauteur du logo sur chacun des 4 côtés. Elle garantit la lisibilité et l'impact visuel du logo dans tous les contextes d'utilisation.

Zone minimum web
16px de chaque côté
Zone minimum print
5mm de chaque côté
Éléments exclus
Textes, images, icônes, bords

Tailles minimales

En dessous de ces dimensions, la lisibilité du logo n'est plus garantie. Ces seuils doivent être respectés sur tous les supports.

SWELLR
taille réelle ~25mm
Impression offset
25mm
Largeur minimale pour impression en offset couleur. En-dessous, les détails de l'icône vague deviennent illisibles.
A4 · A5 · Flyer Carte de visite
SWELLR
120px × 32px
Interface web
120px
Largeur minimale pour l'utilisation dans un header ou une navbar web. Hauteur minimum recommandée : 32px.
Header Footer Email
192px (PWA)
32px .ico
Favicon & App icon
32px
Format .ico pour navigateur. Format PNG 192px pour PWA et raccourcis mobiles. Format PNG 1024px pour stores.
32px .ico 192px PNG 1024px store

Usages interdits

Ces utilisations abîment l'identité de marque et ne doivent jamais être réalisées. En cas de doute, se référer aux variantes officielles.

Attention : Toute modification du logo non décrite dans cette charte est interdite. Si un besoin spécifique n'est pas couvert, contacter l'équipe design avant toute utilisation.
✕
Interdit
SWELLR
Ne pas déformer ni étirer
Les proportions du logo sont fixes. Ne jamais modifier le ratio largeur/hauteur, ni appliquer de transformation de type scaleX/scaleY différenciée.
✕
Interdit
SWELLR
Ne pas changer les couleurs
Seules les 3 variantes officielles (Teal, Blanc, Noir) sont autorisées. Toute autre couleur ou gradient appliqué au logo est interdit.
✕
Interdit
SWELLR
Ne pas ajouter d'ombre portée
Aucune ombre (drop-shadow, box-shadow) ne doit être appliquée au logo. Si un relief est nécessaire, utiliser le bon fond de couleur.
✕
Interdit
SWELLR
Ne pas utiliser sur fond similaire
Le logo Teal ne doit jamais être placé sur un fond de couleur trop proche (ex: fond teal, bleu-vert). Le contraste minimum requis est de 3:1.
✕
Interdit
SWELLR
Ne pas faire pivoter
Le logo est toujours horizontal. Aucune rotation (même légère) n'est autorisée, quel que soit le support ou l'effet recherché.
✕
Interdit
SWELLR
Ne pas ajouter d'effets
Les effets de type gradient sur le trait, glow, outline, contour de texte, flou ou toute autre manipulation visuelle sont strictement interdits.