Nos solutions
Fondation CSS open source, indépendante du framework, pour des interfaces cohérentes, accessibles et légères.
Socle
Quatre packages open source couvrent les design tokens, la remise à zéro des styles, les mises en page et les composants. Socle n’impose ni framework, ni préprocesseur, ni JavaScript.
Indépendant
Le même code fonctionne avec Hugo, Shopify, Symfony ou tout autre environnement capable de charger du CSS.
Personnalisable
Modifier quelques tokens suffit pour adapter l’interface à votre identité, sans toucher au code des composants.
Accessible à tous
Les choix d’accessibilité, comme les contrastes entre texte et fond, sont inscrits dans les tokens.
Léger
Du CSS natif, sans runtime, importé composant par composant.
Standard
Des tokens au format DTCG, défini par le Design Tokens Community Group du W3C.
Open source
Publié sur npm et GitHub sous licence MIT.
Primitif, sémantique, composant. Chaque niveau a un rôle précis, ce qui permet de changer la couleur de marque, ou le style d’un seul composant, sans rien casser ailleurs.
4
design-tokens, component-tokens, css-base, css-components
+25
Boutons, cartes, navigation, modales…
+400
Un espace de noms par composant, des boutons aux modales.
compatibilité
Une seule feuille de style d’entrée, quel que soit l’environnement.
Hugo
Sites statiques, avec Hugo mais aussi Astro, Eleventy ou Jekyll.
Shopify
Thèmes e-commerce, personnalisés sans réécrire les gabarits.
Symfony
Sites dynamiques, avec Symfony mais aussi Laravel, Django ou Rails.
WordPress
Thèmes sur mesure, avec les mêmes tokens que vos autres sites.
Socle sert de base au thème design system de Hugolify et à notre thème de départ Shopify. Vos sites partagent ainsi le même langage visuel, quelle que soit la plateforme.
Chaque package est documenté, élément par élément et composant par composant, avec la référence de tous ses tokens.
Socle
Besoin de plus d’informations au sujet de Socle ou de votre design system.