Aa
Inter
Famille principale pour toutes les interfaces et tous les textes : corps, libellés, boutons, chiffres.
- Regular 400
- Medium 500
- SemiBold 600
- Bold 700
- ExtraBold 800
Charte graphique La marque GetPica : logo, couleurs et typographie
Tout ce qu’il faut pour représenter correctement GetPica : les fichiers officiels du logo, la palette et ses codes HEX, les polices, le style photographique et les composants UI communs à notre web app, notre tableau de bord et notre site.
Une marque, deux expériences
Le produit vit dans deux univers
-
01 — Invités et marque
Web app & site
Thème sombre, violet profond et effet verre. Les invités retrouvent leurs photos grâce à un selfie et les achètent en HD ; le site business s’adresse aux organisateurs avec les mêmes héros sombres et un seul bleu pour chaque action.
- Mobile first
- Thème sombre
- Surfaces en verre
-
02 — Photographes
Tableau de bord B2B
Thème clair, pensé pour le travail au bureau. Les photographes importent leurs photos et gèrent événements, commandes et statistiques dans une interface épurée et aérée.
- Desktop
- Thème clair
- Data first
Identité
Le logo GetPica
Quatre déclinaisons et le symbole « P ». Utilisez les versions positives sur fond clair et les versions négatives sur fond sombre. Utilisez toujours les fichiers originaux, ne recomposez jamais le logotype.
Télécharger le kit logo (ZIP)Identité
Zone de protection
Conservez toujours autour du logo une marge égale à la hauteur du symbole « P » (x). Ne l’encombrez jamais de texte, d’images ou d’éléments d’interface.
Version verticale
Zone de protection minimale = x, la hauteur du symbole « P ».
Version horizontale
Même règle : conservez x de chaque côté.
Symbole « P »
Lorsque l’icône est utilisée seule, isolez-la avec le même x.
Identité
Ce qu’il ne faut jamais faire
-
Ne jamais déformer ni étirer
-
Ne jamais faire pivoter le logo
-
Ne jamais modifier le dégradé
-
Ne jamais utiliser un fond peu contrasté
-
Ne jamais le placer sur des photos chargées
-
Ne jamais ajouter d’ombres
-
Ne jamais le convertir en une seule couleur
-
Ne jamais placer le logo sombre sur du magenta
Langage
Palette de couleurs
Six couleurs portent la marque : deux dégradés pour la mise en avant, un violet profond et une encre pour les fonds et le texte, un bleu pour chaque action et un lavande doux pour les surfaces. Cliquez sur une couleur pour la copier.
-
Dégradé de marque
#E705C5 → #FF7C35
-
Bleu · Violet
#1867FF → #8A36E0
-
Violet nuit
#2A1863
-
Encre
#302F44
-
Bleu action
#1867FF
-
Lavande
#E1DFFB
Langage
Typographie
Aa
Raleway
Famille de titrage pour les titres du site et des sections.
- Medium 500
- SemiBold 600
- Bold 700
- ExtraBold 800
Échelle typographique (produit)
- DisplayTrouvez vos photos28 / 800
- H1Mes albums24 / 700
- H2Mountain Trail20 / 700
- H342 photos gratuites18 / 700
- CorpsSaisissez le code événement et l’e-mail utilisé lors de la réservation.16 / 400
- LégendeNOUVELLES PHOTOS — 42 ÉLÉMENTS12 / 600
Langage
Photographie : la photo est toujours la vedette
Des événements réels et une lumière chaude : des personnes qui sourient à l’objectif ou en action, lumineuses et saturées. Pas d’illustrations, pas de photos de banque d’images posées, pas de bichromies.
- Événements réels
- Lumière chaude et naturelle
- Les personnes d’abord
- Ni stock posé ni bichromie
Langage
Iconographie
Jeu d’icônes Lucide : base 24 px, trait de 2 px, jointures arrondies. Les icônes héritent de la couleur du texte.
arrow-rightchevron-rightmap-pincheck-circlealert-triangleshopping-carthomeusermailglobestarplus
Système
Composants UI
Boutons
Envoyez-moi un codeAnnuler
CTA premium — dégradé
Activer l’événement
Badges
-25 %NOUVEAUHDApprouvéErreur