§ 02.00 · MARQUE
Logo & marque.
Deux variantes du logo COTON : encre marine pour les fonds clairs, blanc pour les fonds sombres. Le bourgeon stylisé (la marque seule) reste utilisable pour les favicons, les avatars et les compositions denses.
MARQUE · MARINE
MARQUE · OR
MARQUE · CRÈME
MARQUE · OR/ENCRE
À FAIRE
- Conserver une zone de respiration équivalente à la hauteur du bourgeon.
- Utiliser
logo-coton-blanc.pngdès que le fond est plus sombre que--marine-500. - Préférer la marque seule (bourgeon) sous 32px de hauteur.
À ÉVITER
- Logo marine sur fond marine ou or — contraste insuffisant.
- Étirer, incliner, ou réappliquer un dégradé sur la marque.
- Combiner avec un wordmark autre que COTON.
§ 02.01 · COULEURS
Quatre couleurs signature.
Le socle identitaire COTON. Marine pour la structure, or pour les moments éditoriaux, crème pour le repos.
Marine
Or
Crème
Encre
§ 02.02 · SCALES
Échelles étendues.
Chaque couleur principale est déclinée en 11 stops (50 → 950) pour soutenir les états interactifs et les nuances de fond.
Marine · scale
11 stops · base 600
50
F4F6FB
100
E5EAF4
200
C2CCE2
300
8C9DC3
400
536AA0
500
2D4178
600 ★
17234D
700
121C3F
800
0C132B
900
070B1A
950
03050E
Or · scale
11 stops · base 500
50
FBF6E5
100
F4E5C2
200
EDD295
300
E0AF54
400
D4A248
500 ★
C9953D
600
A57A2A
700
7A5A1F
800
5A4218
900
3D2D10
950
1F1607
Crème · neutrals chauds
11 stops · neutres tirés vers la chaleur
0
FFFFFF
50
FBFAF3
100
FAF6E9
200
F2EDD8
300
E6E1CF
400
D4CDB1
500
A2A8B8
600
6B7388
700
37425E
800
0E1633
900
070B1A
§ 02.03 · STATUTS
Couleurs sémantiques.
Les statuts conservent une palette indépendante — leur lecture doit être universelle, indépendante de la marque.
Success
#0E8C4A
#ECFDF5
Confirmations, états positifs, validations.
Warning
#B57A0F
#FFFBEB
Attention requise, action préventive recommandée.
Error
#C8392B
#FEF2F2
Erreurs critiques, destruction, blocages.
Info
#3D6AFF
#EFF6FF
Informations contextuelles, hints, tooltips.
§ 02.04 · TYPOGRAPHIE
Une voix éditoriale.
Fraunces porte les titres et les italiques narratifs ; Inter Tight assure la lisibilité du corps et de l'UI.
Fraunces
Display
Le collectif sur-mesure.
64 / 1.02 / -.035em
H1
Une bibliothèque vivante
44 / 1.08 / -.025em
H2
Trois convictions qui guident
32 / 1.1 / -.02em
H3
Confiance par défaut
22 / 1.2 / 500
Quote
« Le bon code, c'est celui qu'on relit avec plaisir. »
24 / 1.4 / italic 300
Inter Tight
Lead
Un système composable, ancré dans nos couleurs signature et notre voix éditoriale.
19 / 1.55 / 400
Body
Le système est versionné et documenté ; chaque release inclut migrations, deprecations et exemples concrets pour faciliter l'adoption sur tous nos produits.
15 / 1.55 / 400
Body S
Les composants sont organisés par catégorie : actions, formulaires, navigation, feedback, contenus.
13 / 1.5 / 400
Caption
Mise à jour le 15 avril 2026 · v1.0.0
12 / 1.4 / 500
Overline
§ 02 · Foundations
11 / .1em / 600
Mono
--marine: #17234D;
--or: #C9953D;
--or: #C9953D;
JetBrains Mono
§ 02.05 · ESPACEMENT
Échelle de 4px.
Multiples de 4. Privilégier les pas larges (4 → 8 → 16 → 24) pour la rythmique principale.
--space-1
4 px
--space-2
8 px
--space-3
12 px
--space-4
16 px
--space-6
24 px
--space-8
32 px
--space-10
40 px
--space-12
48 px
--space-16
64 px
--space-20
80 px
--space-24
96 px
--space-32
128 px
§ 02.06 · RAYONS
Rayons doux.
Privilégier les rayons larges sur les surfaces (cartes, sections) ; les composants UI restent en 6–8 px.
--radius-xs
4 px
Tags, micro-éléments, indicateurs
--radius-sm
6 px
Inputs denses, kbd, chip
--radius-md
8 px
Boutons, inputs standard
--radius-lg
12 px
Cards, modals, popovers
--radius-xl
16 px
Sections, hero blocs
--radius-2xl
20 px
Containers majeurs
--radius-3xl
28 px
Hero cards éditoriaux
--radius-full
999 px
Pills, avatars, badges
§ 02.07 · OMBRES
Élévation discrète.
Quatre niveaux. Toutes les ombres sont teintées vers le marine pour rester cohérentes avec la marque.
--shadow-xs
Hover subtil
--shadow-card
Cartes par défaut
--shadow-elevated
Cards hover, dropdowns
--shadow-overlay
Modals, popovers
§ 02.08 · MOTION
Mouvements tenus.
Cinq durées, cinq courbes. Le spring s'utilise pour les moments d'attention ; ease-out reste le défaut.
--dur-fast
160 ms
cubic-bezier(0.16, 1, 0.3, 1) · ease-out
--dur-base
240 ms
cubic-bezier(0.16, 1, 0.3, 1) · ease-out
--dur-slow
360 ms
cubic-bezier(0.65, 0, 0.35, 1) · ease-in-out
--ease-spring
attention
cubic-bezier(0.34, 1.56, 0.64, 1) · spring
§ 02.09 · ICÔNES
Lucide, fil 1.5px.
Bibliothèque Lucide en outline, stroke 1.5 px. Les versions filled sont réservées aux états actifs.
Sample · 16 outline
Stroke 1.5 px · linecap round · joinMiter. Outils internes : héritent de currentColor.
Échelle · 5 tailles
xs · 12
sm · 16
md · 20
lg · 24
xl · 32
Tokens : --icon-xs à --icon-xl. Container = icon + 8 px de padding visuel.