# Système de design Unless

Prise en main

## Bienvenue

Le système de design Unless est la référence canonique pour toute décision visuelle publiée sous la marque Unless. Couleur, typographie, espacement, mouvement, marques, surfaces, composants et interface produit sont tous documentés ici.

## Comment ce système est organisé

La navigation à gauche suit la progression des atomes vers les compositions :

 - **Fondations** couleur, typographie, espacement, mouvement, iconographie. Les valeurs atomiques sur lesquelles tout le reste s'appuie.
- **Identité** la marque Unless, le logotype, les compositions et les favicons. La géométrie derrière le logo.
- **Surfaces** fonds monotile, motifs blueprint, le spot Houdini et les surfaces de thème.
- **Composants** boutons, cartes, formulaires, navigation. Les primitives d'interface dans leurs formes canoniques.
- **Produit** surfaces produit composites : agents, tableau de bord, centre d'aide.
- **Expérimentations** visualisations en cours et ressources marketing.
- **Kit média** dossier de presse, modèles sociaux, règles d'usage de la marque et contact.

## Principes fondamentaux

 - **La cohérence avant l'expression.** Chaque surface doit se lire comme Unless avant de se lire comme autre chose.
- **Les tokens avant les valeurs.** Pas de hex brut, pas de nombre magique. Si ce n'est pas un token, ce n'est pas validé.
- **Le contraste avant la décoration.** La lisibilité n'est pas négociable. Toute décoration qui nuit à la lisibilité est supprimée.

## Registre des ressources

D'où provient chaque ressource publiée. Chaque entrée découle d'une source de vérité unique, si bien que « toujours à jour » est une propriété structurelle, et non un vœu pieux.

| Ressource | Source | Utilisée sur |
| --- | --- | --- |
| Marque Unless (icône) | Recette du nombre d'or → SVG statique | Visualisations d'agent, tableau de bord, centre d'aide, navigation |
| Logotype Unless | Recette du nombre d'or → SVG statique | En-tête du site, page 404, dossier de presse |
| Fond monotile | Motif einstein-hats + dégradés superposés | Sections héros, sections CTA, fonds sociaux |
| Famille de favicons | Variante de la marque avec marge | Favicon navigateur, icône Apple touch, manifeste PWA |
| Motif blueprint | Géométrie en ratio φ → SVG statique | Héros de la page d'accueil, visualisations d'agent, fonds sociaux |
| Croquis d'agent | Composant composite | Boucle de l'agent, surfaces marketing, système de design |
| Boucle de l'agent | Composant composite | Page d'accueil, aperçu de la solution, système de design |

## Contribuer

Le système fonctionne par recette. Pour modifier une ressource, modifiez sa recette ; ne corrigez jamais le résultat directement.

### Principes

 1. Chaque ressource visuelle est générée à partir d'une source de vérité unique.
1. Modifiez une constante dans la recette ; chaque surface se met à jour à la prochaine build.

### Pourquoi des recettes, et non des fichiers statiques

Chaque ressource visuelle découle d'une recette, si bien que les changements se propagent partout à la prochaine build. Si quelque chose semble incorrect, c'est la recette qu'il faut corriger, pas le résultat.

## Besoin d'aide

Des questions sur l'application de ces règles ? Commencez par l'onglet Usage de n'importe quelle page des fondations.
       [Couleur · Palette](/fr/design/foundations/colour/)