Identité Visuelle
Guide complet de la marque TROCPLACE — couleurs, typographies, logo, composants et règles d'utilisation. Ce document est la référence pour toute communication visuelle.
Logo
Le logo TROCPLACE est l'élément central de notre identité. Il doit toujours être utilisé conformément aux règles ci-dessous.
Règles d'utilisation
Zone de protection
Garder un espace minimum autour du logo égal à la hauteur du « T » de TROCPLACE.
Taille minimum
Largeur minimale : 100px (numérique), 25mm (print).
Fonds autorisés
Blanc, noir, jaune marque (#FFF500), ou photos avec contraste suffisant.
Ne pas déformer
Ne jamais étirer, incliner ou déformer le logo.
Ne pas recolorer
Ne jamais appliquer d'autres couleurs que noir, blanc ou original.
Ne pas ajouter d'effets
Pas d'ombre portée, biseau, contour ou dégradé sur le logo.
Couleurs
Notre palette est construite autour du jaune électrique — audacieux, énergique et mémorable. Les couleurs sémantiques guident l'expérience utilisateur.
Couleur principale — Brand Yellow
Couleurs sémantiques
Success
Confirmation, validation, statut actif
Nuxt UI: color="green"
Info
Information, étapes, liens secondaires
Nuxt UI: color="blue"
Warning
Avertissement, modération en attente
Nuxt UI: color="orange"
Error
Erreur, suppression, danger, signalement
Nuxt UI: color="red"
Neutres — Stone
Utilisés pour les arrière-plans, bordures, textes secondaires et ombres. Base : stone
Contraste & accessibilité
Texte noir sur jaune
Contraste 12.3:1 — ✅ AAA
Jaune sur noir marque
Contraste 12.3:1 — ✅ AAA
Brand-700 sur blanc
Contraste 5.8:1 — ✅ AA Large
Typographie
Deux familles de polices complémentaires — l'une pour les titres percutants, l'autre pour la lisibilité du corps de texte.
Archivo Black
Utilisée pour les titres, hero sections, et éléments de forte impact.
TROCPLACE
Achetez & vendez près de chez vous
Le marketplace français de confiance
CSS:
font-display / Tailwind: font-displayRoboto Condensed
Police principale pour tout le contenu texte, navigation, formulaires et interfaces.
Bold 700 — Titres de section, labels importants
Semibold 600 — Sous-titres, boutons
Medium 500 — Navigation, badges
Regular 400 — Corps de texte, descriptions
Light 300 — Textes secondaires, légendes
CSS:
font-sans / Tailwind: font-sans (défaut) Échelle typographique
Espacement & Grille
Un système d'espacement cohérent basé sur une échelle de 4px pour l'harmonie visuelle.
Échelle d'espacement
14px0.25rem28px0.5rem312px0.75rem416px1rem624px1.5rem832px2rem1248px3rem1664px4rem2496px6remGrille & Conteneur
80rem (1280px)1rem (mobile) / 1.5rem (desktop)1 col → 2 cols → 3 cols → 4 cols1.5rem (gap-6)0.25rem (--ui-radius)4rem (64px)Breakpoints
smmdlgxl2xlComposants UI
Bibliothèque de composants Nuxt UI avec notre thème appliqué. Tous les éléments interactifs de la plateforme.
Boutons
Variantes principales
Couleurs sémantiques
Tailles
Avec icônes
Formulaires
Badges & Indicateurs
Cartes
Carte standard
Les cartes utilisent un border-radius de 0.25rem, une bordure subtile, et un fond légèrement différent pour les en-têtes.
Carte annonce type
Paris 75001 · il y a 2 heures
Alertes & Notifications
Iconographie
Nous utilisons exclusivement les icônes Lucide — modernes, cohérentes et optimisées pour toutes les tailles.
Collection : lucide — via @iconify/vue
Tailles d'icônes
Ton & Voix
Comment TROCPLACE communique — chaque mot est une interaction avec notre utilisateur.
Principes
Accessible & humain
On tutoie, on est direct. Pas de jargon technique, pas de formalisme inutile. Le ton est celui d'un ami qui aide.
Dynamique & encourageant
On incite à l'action. Les CTA sont clairs, les messages positifs. On célèbre les réussites de l'utilisateur.
Rassurant & transparent
La confiance est au cœur d'un marketplace. On explique les processus, on montre les garanties.
Français authentique
Interface 100% en français. On utilise les termes français, pas d'anglicismes inutiles.
Exemples
CTA bouton
Confirmation
Erreur
Champ vide
Vide state
Prix
Dark Mode
Le mode sombre est un citoyen de première classe — jamais un ajout tardif. Chaque composant est conçu pour les deux modes.
Règles Dark Mode
Utiliser les classes Nuxt UI sémantiques (bg-default, text-muted) plutôt que des couleurs hardcodées.
La couleur brand (#FFF500) reste identique dans les deux modes — c'est notre constante.
Les ombres sont plus subtiles en dark mode. Préférer les bordures aux ombres.
Logo: invert-0 dark:invert-100 pour basculer automatiquement.
Assets & Téléchargement
Tous les fichiers nécessaires pour les communications, publicités et supports marketing.
Logo SVG
Format vectoriel — pour le web, les écrans et l'impression haute qualité.
Logo PNG
Format bitmap — pour les présentations et documents.
Image OG (Open Graph)
1200×630px — pour les partages sur les réseaux sociaux.
Export couleurs
CSS Variables
--color-brand-400: #fff500; --color-brand-500: #e6db00; --color-brand-700: #998f00; --color-brand-950: #2b2800; --font-sans: 'Roboto Condensed'; --font-display: 'Archivo Black';
Design Tools (Figma, etc.)
Primary: #FFF500 (brand-400) Dark: #2B2800 (brand-950) Success: #22C55E (green-500) Info: #3B82F6 (blue-500) Warning: #F97316 (orange-500) Error: #EF4444 (red-500) Neutral: #78716C (stone-500)