Identité
La marque Dévoué/Fabrador — un compagnon de product-thinking guidé par l'IA.
Nom & Tagline
Dévoué/Fabrador
I got you!
Concept visuel
Un labrador en dessin au trait noir et blanc, inspiré de l'animation mid-century et de l'illustration commerciale classique, avec le bleu comme seule couleur d'accent.
Iconique
Simple
Amical
Éditorial
Character-driven
Indices visuels
- Mascotte labrador en line-art
- Influence Hanna-Barbera / illustration commerciale mid-century
- Palette dominante noir et blanc
- Accent bleu vivant mais apaisant
- Poses simples et expressives
- Composition minimale, haute lisibilité
- Storytelling visuel autour du guidage, du suivi, de la clarté
Couleurs
Palette basée sur la règle 60/30/10 : blanc dominant, noir structurant, bleu accent.
Palette principale
White — 60%
#FFFFFF · --color-white
Black — 30%
#1A1A1A · --color-black
Blue — 10%
#2B6CB0 · --color-blue
Échelle de bleus
Blue Light
#EBF4FF · --color-blue-light
Blue 100
#BEE3F8 · --color-blue-100
Blue 200
#90CDF4 · --color-blue-200
Blue 300
#63B3ED · --color-blue-300
Blue 400
#4299E1 · --color-blue-400
Blue 500
#2B6CB0 · --color-blue-500
Blue 600
#2C5282 · --color-blue-600
Blue 700
#2A4365 · --color-blue-700
Neutres
Gray 50
#FAFAFA · --color-gray-50
Gray 100
#F5F5F5 · --color-gray-100
Gray 200
#E5E5E5 · --color-gray-200
Gray 300
#D4D4D4 · --color-gray-300
Gray 400
#A3A3A3 · --color-gray-400
Gray 500
#737373 · --color-gray-500
Gray 600
#525252 · --color-gray-600
Gray 800
#262626 · --color-gray-800
Pastels secondaires RARE
Pastel Pink
#FFF0F5 · --color-pastel-pink
Pastel Yellow
#FFFFF0 · --color-pastel-yellow
Pastel Green
#F0FFF4 · --color-pastel-green
Pastel Lavender
#F5F0FF · --color-pastel-lavender
Typographie
Deux familles : Coustard pour les titres, Orienta pour le texte courant.
Coustard — Display
Regular 400
Aa Bb Cc Dd Ee Ff Gg
Black 900
Aa Bb Cc Dd Ee Ff Gg
Phrase d'exemple
Dévoué/Fabrador vous aide vraiment.
Orienta — Text
Regular 400
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Corps de texte
Dévoué/Fabrador est un compagnon de product-thinking guidé par l'IA pour les personnes non-techniques. Il aide les utilisateurs à passer de la frustration et des idées vagues vers la clarté, la structure et des spécifications fonctionnelles réalistes.
Échelle typographique
--text-6xl
Dévoué/Fabrador
--text-5xl
Dévoué/Fabrador
--text-4xl
Dévoué/Fabrador
--text-3xl
Dévoué/Fabrador
--text-2xl
Dévoué/Fabrador
--text-xl
Corps de texte extra large
--text-lg
Corps de texte large
--text-base
Corps de texte par défaut
--text-sm
Texte petit / légendes
--text-xs
Texte très petit / labels
Espacements
Échelle d'espacements basée sur des multiples de 4px.
--space-1
4px · 0.25rem
--space-2
8px · 0.5rem
--space-3
12px · 0.75rem
--space-4
16px · 1rem
--space-6
24px · 1.5rem
--space-8
32px · 2rem
--space-10
40px · 2.5rem
--space-12
48px · 3rem
--space-16
64px · 4rem
--space-20
80px · 5rem
--space-24
96px · 6rem
Boutons
Trois variantes avec effet de lift au hover. Ombres portées noires style comics.
Variantes
HTML
<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--ghost">Ghost</button>Tailles
HTML
<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--primary">Default</button>
<button class="btn btn--primary btn--lg">Large</button>Combinaisons de tailles
Badges
Labels compacts pour catégories, statuts et tags.
Default
Blue
Outline
HTML
<span class="badge badge--default">Default</span>
<span class="badge badge--blue">Blue</span>
<span class="badge badge--outline">Outline</span>Bulles comics
Bulles de dialogue et de pensée, style BD. Élément central de l'identité visuelle.
Bulle de dialogue
I got you! Let me help you think this through.
HTML
<div class="bubble">
I got you! Let me help you think this through.
</div>Bulle bleue
This sounds like two products in one. Let's focus on the core.
HTML
<div class="bubble bubble--blue">...</div>Bulle de pensée
What problem happens today?
HTML
<div class="bubble bubble--thought">...</div>Cards
Conteneurs avec border noir épais et lift au hover.
Guided Discovery
The app starts with smart conversational paths to understand your idea, not a blank canvas.
Progressive Clarity
Your thinking becomes clearer in real time as the system structures your answers.
Real Deliverables
Get outputs you can actually use: specs, feature lists, app structure, and more.
HTML
<div class="card">
<div class="card__title">Title</div>
<div class="card__body">Body text...</div>
</div>
<!-- Sans hover effect -->
<div class="card card--flat">...</div>Patterns graphiques
Motifs pointillés et contours épais, signatures du style mid-century.
Dotted Patterns
Pattern dots neutre
Pattern dots bleu
CSS
.pattern-dots — Points gris sur fond neutre
.pattern-dots--blue — Points bleusBorders & Shadows
--border-thin
2px solid
--border-thick
3px solid
--border-heavy
4px solid
--shadow-sm
2px 2px 0
--shadow-md
4px 4px 0
--shadow-lg
6px 6px 0
Principes
Territoire de marque et piliers de messaging.
Territoire de marque
Reassurance
Rassurer l'utilisateur, pas l'impressionner
Clarity
Rendre les choses claires, pas complexes
Patience
Accompagner au rythme de l'utilisateur
Friendliness
Ton amical et accessible, jamais condescendant
Trust
Construire la confiance par la structure
Piliers de messaging
Guidance over hype
On guide, on ne survend pas. Pas de promesses irréalistes.
Clarity before creation
La clarté avant la génération. Comprendre avant de construire.
Built for non-technical minds
Conçu pour les personnes non-techniques. Pas de jargon inutile.
Confidence through structure
La confiance vient de la structure, pas de la vitesse.
Real-world usefulness
Des résultats réellement utilisables, pas juste impressionnants.
Usage
Bonnes pratiques et erreurs à éviter.
Identité visuelle
Do
- Utiliser le noir et blanc comme base dominante
- Le bleu accent en touche (10% max)
- Contours épais et nets
- Compositions minimales et lisibles
- Style éditorial, character-driven
Don't
- Utiliser des dégradés ou des effets futuristes
- Surcharger avec trop de couleurs
- Aller vers un look générique / corporate
- Utiliser des visuels abstraits type IA classique
- Sacrifier la lisibilité pour l'esthétique
Tonalité
Do
- Ton amical et rassurant
- Langage simple et direct
- Challenger poliment quand nécessaire
- Communiquer la progression clairement
Don't
- Ton condescendant ou trop technique
- Hype et promesses exagérées
- Accepter passivement sans challenger
- Laisser l'utilisateur dans le flou