Etëm UI
Etëm UI est un design system Figma multi-client construit sur Tailwind CSS et shadcn/ui. Il regroupe plus de 50 composants atomiques, 1 200 variables de design et une documentation technique embarquée pour déployer des interfaces cohérentes et accessibles sur chaque projet.
Services
Produit / App
Challenge
Le système devait s'adapter visuellement à chaque client sans modifier la structure des composants. Il devait couvrir les besoins UI courants (formulaires, navigation, data tables, visualisation de données) tout en restant aligné avec Tailwind CSS et shadcn/ui pour garantir une intégration front-end sans friction. La documentation devait être exploitable par les équipes de développement comme par les agents IA (Cursor, Claude Code, Figma AI, v0).
Stratégie
L'architecture repose sur une hiérarchie de 5 couches de variables Figma (Primitives, Mode, Theme, Device, Brand) permettant de basculer d'un client à l'autre par simple changement de mode. Chaque composant est documenté via un fichier markdown embarqué dans le fichier Figma, structuré pour être lisible par les développeurs et les outils d'IA générative. Le choix de shadcn/ui comme référence garantit une parité directe entre la maquette et le code livré.
Solution
Le système comprend plus de 50 composants atomiques structurés en Auto Layout avec application systématique de variables, 36 patterns de composition réutilisables et un guide de style couvrant couleurs (OKLCH), typographie, espacements et radius. Un fichier brand.md centralise les paramètres client (palette, typographie, radius, contraintes spécifiques), seul ce fichier change d'un projet à l'autre. Le Theme Preview permet de visualiser l'impact des changements sur le thème en modes clair et sombre.
Résultat
Etëm UI est utilisé en production sur la majorité des projets clients. La mise en place d'une direction artistique sur un nouveau projet se réduit au paramétrage du fichier brand et au changement de thème. La documentation markdown intégrée permet aux développeurs et aux outils d'IA d'exploiter le système en limitant l'intervention du designer lors du hand-off.
Dans la même catégorie
SKR!B
SKR!B est un jeu de cartes stratégique axé sur l'association de symboles et la gestion d'effets. L'objectif est de vider sa main en premier grâce à des mécaniques simples et hautement rejouables.
Portail de notification de l’Agence Bio
Le Portail de notification de l'Agence Bio est la plateforme officielle sur laquelle les opérateurs de la filière biologique effectuent leur déclaration administrative obligatoire, préalable à la certification bio et à l'accès aux aides publiques.
MaPrep d’ÊtrePROF
MaPrep est un outil d'intelligence artificielle imaginé par la communauté ÊtrePROF et mis à disposition des enseignants pour les accompagner dans la préparation de leurs devoirs et activités.
Contact
Une question ou une demande ? N'hésitez pas à me contacter, je vous répondrais dans les meilleurs délais.