Bibliothèque vanilla · v1 · 2026-10-02
Des composants prêts à poser
HTML, CSS et JS sans dépendance, 3 thèmes, accessibles (RGAA AA, clavier, mouvement réduit). Chaque bloc ci-dessous : aperçu vivant + bouton « Code ».
/01 Tokens
Tout vient de css/tokens.css. Changer de client = copier un bloc de thème, changer 8 couleurs + 3 polices.
/02 Typographie
Kicker — mono espacé
L'IA d'ici.
Titre H1 display Titre H2 Titre H3
Chapô : phrase courte, chiffres, zéro buzzword. Vos données restent chez vous.
Texte courant en Inter. Lien souligné qui glisse , accent italique , 1 284,50 en chiffres tabulaires.
Label · métadonnée
/03 Boutons
Primaire →
Secondaire
Discret
Remplissage glissé
Reflet
Magnétique
Supprimer
Chargement
Désactivé
Petit Moyen Grand
⚙
Jour Semaine Mois
/04 Badges, chips, kbd, avatars
Neutre
Nouveau
En ligne
En attente
Erreur
Ctrl +K
Artisans PME Collectivités
/05 Cartes
Standard /01
Diagnostic IA Carte de base, bordure fine.
Lien Se soulève Bordure accent au survol.
Spotlight Halo souris Le halo suit le pointeur.
Tilt 3D Incliné Perspective au survol.
Border beam Bordure vivante Lumière qui fait le tour.
Filaire Éditorial Transparente, angles vifs.
Verre droit Translucide Panneau, pas bulle.
Bento
Grand Souverain LLM local, n8n auto-hébergé.
Chiffre 0
jours pour mesurer
/07 Navigation
Barre du haut de cette page = .ui-nav[data-autohide] (se masque en descendant, burger sous 820 px). Barre de lecture fine en haut = .ui-readbar. Sommaire à gauche = .ui-toc. Ctrl K = palette de commandes.
Présentation Méthode Tarifs
Onglet 1 — indicateur qui glisse, flèches clavier.
Onglet 2 — diagnostic, prototype, mesure J+30.
Onglet 3 — prix lus dans articles.yml, jamais en dur.
Mes données sortent-elles de l'entreprise ? Non : LLM local possible, hébergement en France, réversibilité documentée.
Combien de temps pour un premier résultat ? Un prototype en quelques jours, mesure à J+30.
Faut-il des compétences techniques ? Non. On forme les équipes sur leurs vrais outils.
/08 Feedback
ℹ Information Votre diagnostic est prêt.
✓ Conforme Facture électronique validée.
! Attention Échéance dans 3 jours.
✕ Erreur Connexion SMTP refusée.
Toast info
Toast succès
Toast erreur
Ouvrir un dialog
Tiroir latéral
Popover
Popover natif, sans JS.
Confirmer l'envoi ×
Le devis sera envoyé à contact@exemple.fr . Continuer ?
Détails client ×
Client Menuiserie Dupont Statut Prospect Ville Alès
◇
Aucun document Déposez un premier fichier pour commencer.
Ajouter
/09 Données
0 h
Heures économisées
▲ 18 %
Semaine 1 Diagnostic Entretien + audit des outils.
Semaine 2 Prototype Premier flux automatisé.
J+30 Mesure Gains chiffrés.
Client Mairie de Saint-Jean Contrat Accompagnement Démarrage 01/10/2026 Statut Actif
Écouter Vos vrais problèmes.
Construire Sur vos outils.
Rester Celui qui construit reste.
/10 Marketing
Souverain Concret Durable Local Mesuré
Essentiel {{prix}} € HT
Choisir
Recommandé Accompagnement {{prix}} € HT
Diagnostic Prototype Mesure J+30 Choisir
Sur mesure Devis
Projet complet Formation équipes Nous contacter
⚠ Prix : toujours {{prix}} rempli depuis A_OFFRES-CATALOGUE/articles.yml (règle du 24/09).
On a gagné une demi-journée par semaine sur la paperasse, sans changer d'outils. CM Claire M. Gérante, commerce — Anduze
◈
Souverain Vos données restent chez vous.
◎
Concret ROI chiffré dès le rendez-vous.
CCI GARD RÉGION OCCITANIE FRANCE NUM BPI
/12 Interfaces IA
Pour Beebee, Jarvis, démos clients. Inspi BeautifulUI + Kobra AI.
Vous
Combien de factures impayées ce mois-ci ?
IA
Réflexion · 4 étapesLire le dossier Factures/2026-09 Croiser avec les relevés bancaires Calculer les écarts Rédiger la synthèse
lire_dossier banque.csv calcul
…
📎 Fichier Local · Mistral
↑
Validation requise Envoyer 3 relances ?
L'agent veut envoyer un e-mail à :
martin@exemple.fr, roux@exemple.fr, dupont@exemple.fr Approuver Refuser
Tâches de l'agent Extraire les montants Identifier les clients Préparer les relances Attendre validation Synchroniser le CRM
relance.py Copier
for f in impayees:
if f.retard > 30:
brouillon(f.client, modele="relance-2")
Bonjour {{client}},
Vous nous devez de l'argent.
Sauf erreur, la facture n°{{num}} reste à régler.
Cordialement,
📊 Résumer septembre Chiffre d'affaires, impayés, tendances
✉ Rédiger les relances Ton courtois, 3 niveaux
Réponse avec citation1 et une seconde2 .
/13 Effets de texte
Dégradé animé
Contour
Contour qui se remplit
Reflet qui passe
Lueur
Glitch
Surligné au scroll · barré au scroll
Décodage au survol
L'IA pour artisans mairies PME
$ npx iadici diagnose
Survolez chaque lettre
/14 Apparitions au scroll
up
left
right
scale
blur
clip
wipe
scroll natif
Un titre qui monte mot par mot
/15 Fonds
Grille
Points
Aurora
Grain 5 %
Spotlight