Le design system du studio
Un système unique derrière tout ce que conçoit Kerozene : tokens, composants et documentation, partagés par l’ensemble de ses applications, dont le site.
Une marque présente sur plusieurs applications ne peut pas compter sur la mémoire de chacun pour rester cohérente. Sans système commun, chaque nouvel écran repart de zéro et s’écarte un peu plus du précédent. Kerozene avait besoin d’une source unique pour toutes ses décisions, lisible aussi bien par les designers que par les développeurs.
Chaque couleur, palier d’espacement, rayon, ombre et style de texte est un token nommé, et chaque composant est construit uniquement à partir de ces tokens. Chacun porte son équivalent en code : ce qu’un designer choisit dans Figma est exactement ce qu’un développeur écrit.
Couleurs, espacements, rayons et typographie en variables, chacune avec son équivalent en code.
Ink et Paper : posé sur l’un ou l’autre fond, un composant adapte de lui-même son texte et ses bordures.
Les grands composants sont faits des petits : une modification se propage partout où ils servent.
Chaque token et chaque composant présenté sur le fond et dans l’usage pour lesquels il a été conçu.
Couleurs, typographie, espacements, rayons, élévation et marque, en variables et en styles. Les tokens sémantiques renvoient à la palette de base : faire passer un cadre d’Ink à Paper change toutes ses couleurs d’un seul geste, sans rien redessiner.
Une base de 4 pixels commune avec le code, déclinée en quinze paliers : les plus petits construisent les composants, les plus grands séparent les sections. Chaque barre de la page est liée à sa variable, si bien que modifier un token redessine aussi la documentation.
Tagline, wordmark et symbole sont trois variantes d’un même composant. Les lettres et la flamme conservent les rouges du logo sur tous les fonds, tandis que la tagline suit la couleur du texte : une seule instance se lit aussi bien sur Ink que sur Paper.
Une bibliothèque complète, du plus petit élément aux sections entières : icônes, boutons, tags, avatars, champs de formulaire, navigation, cartes de services, de projets et de témoignages, chiffres clés, accordéons, en-têtes et pieds de page. Chacun décliné en variantes et en états, et construit à partir des mêmes tokens : les versions claire et sombre d’un composant n’en font qu’une, posée sur deux fonds.
