Design system
70 composants, 466 icônes et un seul jeu de tokens pour les modes clair et sombre. Chaque écran de l'app en est fait : vos nouveaux écrans s'accordent dès la première ligne.
En bref
- Chaque couleur, taille et espacement est un token : le mode sombre fonctionne partout.
- Documenté dans Storybook, avec un test d'accessibilité sur chaque story, lancé par la CI.
- Un fork d'un design system sous licence MIT, que vous modifiez librement.
70 composants pour des écrans d'app denses
Boutons, champs, menus, fenêtres, notifications, tags, avatars et plus, sur des primitives headless qui gèrent le focus et le clavier. Ils partagent un même style : des gris calmes, une seule couleur d'accent, des filets plutôt que des boîtes.
- Les boutons à icône seule exigent un libellé pour les lecteurs d'écran
- Le comportement est testé dans les stories elles-mêmes, avec des play functions
466 icônes, une par idée
446 icônes Tabler choisies une à une et 20 icônes de marques et de produit, derrière un seul import. Un dictionnaire donne à chaque notion de l'app son icône : la même idée a toujours la même image.
- Importer des icônes d'ailleurs est une erreur de lint
- Paramètres
- Membres
- Personne
- Rôles
- Facturation
- Clé d'API
- Webhook
- Intégration
- Notification
- IA
- Filtrer
- Trier
- Vue tableau
- Vue kanban
- Tableau de bord
- Panneau latéral
- Tâche
- Note
Clair et sombre, chacun dessiné exprès
Couleurs, tailles, espacements, arrondis et ombres sont des tokens, transformés en variables CSS. Chaque couleur a une valeur claire et une valeur sombre choisies à la main, et une seule classe sur la page passe de l'une à l'autre.
- Une règle de lint refuse les couleurs tapées à la main
- Texte en 13 px, grille de 4 px et coins de 8 px dans toute l'app
Storybook, et une ligne pour votre marque
Storybook montre chaque composant dans chacun de ses états, et un test d'accessibilité tourne sur chaque story. Ce site porte une couleur de marque, fixée par une ligne de code ; en développement, une palette vous laisse essayer les autres d'abord.
- Un bouton de la barre affiche chaque story en thème clair ou sombre
- La CI exécute chaque story dans un vrai navigateur, test d'accessibilité compris
- Chaque couleur de marque proposée est vérifiée pour un contraste lisible
import { type BrandColorScale } from '@/brand-color/types/BrandColorScale'; // The brand color of the landing: one design system scale. Change this line// to rebrand the page; the scales on offer are in BrandColorSolidSteps.ts.export const BRAND_COLOR_SCALE: BrandColorScale = 'blue';- blue
- cyan
- turquoise
- grass
- tomato
- red
- bronze
- gray
Questions
Puis-je modifier les composants ?
Oui. Le design system est né du fork d'un projet open source sous licence MIT et il est à vous : modifiez tout, et gardez son fichier LICENSE.
Ce site l'utilise-t-il aussi ?
Oui. Ces pages sont faites des mêmes tokens et composants, avec des textes plus grands pour la lecture.
Comment changer la couleur d'accent de l'app ?
Modifiez les nuances d'accent des tokens, régénérez le thème et vérifiez les deux thèmes dans Storybook. La couleur de marque du site se change en une ligne.
Découvrir les autres fonctionnalités
- Connexion et espaces de travailComptes Clerk, équipes et rôles vérifiés dans votre code.
- FacturationAbonnements Stripe par espace de travail, pilotés par webhooks.
- Garde-fous pour l'IAUn règlement, des règles de lint qui expliquent, et yarn verify.
- ArchitectureUn seul dépôt : app web, API, worker et code partagé.
- SécuritéEndpoints verrouillés, limites de débit, sauvegardes, alertes.
Démarrez votre prochaine app sur une base propre
Payez une fois et obtenez tout le code source, avec toutes les mises à jour futures.