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
- Chaque ressource visuelle est générée à partir d'une source de vérité unique.
- 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.