Enregistrer
Agir
Ambre profond en clair, bleu encre en sombre.
Design system
Caspario —
Fondations visuelles.
Un langage commun pour relier la marque, les informations et les usages du terrain.
Couleurs, typographie et composants pour construire des interfaces cohérentes.
UNE IDENTITÉ, PLUSIEURS USAGES
Aa
La donnée au cœur
du terrain.
LA PALETTE
01
Couleurs
La palette validée : encre, lumière et matières naturelles.
Le bleu encre traduit la rigueur de la donnée ; l’ambre évoque la lumière qui guide les décisions. L’ivoire, le sable et l’argile relient l’interface aux matières du terrain. Le vert reste présent par touches.
Vue d’ensemble
Se repérer
Ambre doux en clair, bleu encre en sombre.
MaïaComprendre
Le bleu brume accompagne Maïa.
Palette de marque
Cliquez pour copier une valeurCouleurs secondaires
Fonds validés par le clientSurfaces, textes & lignes
Blanc et gris fonctionnelsDéclinaisons douces
Détails au survolThème d’interface. Fond clair #F9F9F9, cartes blanches et neutres Storm Gray. L’action principale utilise Equator 700 en clair et San Juan 800 en sombre. Les couleurs de statut ont leurs propres rôles. Les valeurs HEX validées font référence ; Manrope et les dimensions actuelles sont conservées.
02
Typographie
Manrope, la famille actuellement utilisée dans l’application.
En place · ManropeEssayez votre propre texte
Hiérarchie typographique
Textes utiles : 14 px · annotations : 12 px42 px · 600Bonjour ThomasTitre d’accueil30–43 px · 600Le bon éclairage.Titre Maïa · taille fluide, hors adaptations spécifiques25 px · 600Vos priorités du jourTitre de section14 px · 700EARL des TilleulsNom de dossier dans une tâche14 px · 400Vos dossiers, vos échanges, votre terrain.Texte d’accompagnement du bloc Maïa12 px · 700VOTRE JOURNÉE, EN UN REGARDSurtitre · usage ponctuelLes cinq graisses disponibles
03
Formes & arrondis
Des contours doux pour organiser l’information sans alourdir les écrans.
04
Composition
Une grille bento, des blocs de tailles différentes et une lecture hiérarchisée.
Mercredi 21 octobre
Bonjour Thomas.
Maïa
Le bon éclairage,
avant votre visite.
Le contexte des Tilleuls est prêt.
Voir la synthèseAujourd’hui
21 oct.EARL des TilleulsVisite de suivi
GAEC du MoulinPoint sur la proposition
Prochaines actions
Relire le contexte des TilleulsÀ préparer
Recontacter le GAEC du MoulinÀ relancer
12colonnes sur ordinateur
18 pxgouttière de référence
32 pxmarge intérieure de référence
24 pxrayon des grandes cartes
Espacements repérés
Valeurs locales, à consolider05
Gammes de couleurs
Cinq couleurs de marque et deux couleurs secondaires.
Les cinq gammes ci-dessous reprennent exactement les valeurs fournies. Les couleurs de marque validées sont repérées à leur niveau : San Juan 800, Equator 300, Gull Gray 500, Antique Brass 400 et Finlandia 600. L’ivoire et le sable restent les deux fonds secondaires.
Bleu encre
san-juan
Ambre
equator
Bleu brume
gull-gray
Argile
antique-brass
Vert feuille
finlandia
Les fonds secondaires et le noir fonctionnel
06
Ombres & dimensions
Une trame commune pour décliner les composants.
Les compléments fournis servent de structure pour les rôles et les échelles. Cette adaptation conserve Manrope, la palette Caspario et les grandes cartes arrondies.
Ombres
Du relief discret à la fenêtre flottanteAa
Ombre 1
0 1px 2px #18181b0dAa
Ombre 2
0 1px 3px #18181b1a, 0 1px 2px -1px #18181b1aAa
Ombre 3
0 4px 6px -1px #18181b1a, 0 2px 4px -2px #18181b1aAa
Ombre 4
0 10px 15px -3px #18181b1a, 0 4px 6px -4px #18181b1aAa
Ombre 5
0 20px 25px -5px #18181b1a, 0 8px 10px -6px #18181b1aAa
Ombre 6
0 25px 50px -12px #18181b40Dimensions
Base 16 px · rem et pixelssize-20.125 rem · 2 pxsize-40.25 rem · 4 pxsize-60.375 rem · 6 pxsize-80.5 rem · 8 pxsize-120.75 rem · 12 pxsize-161 rem · 16 pxsize-201.25 rem · 20 pxsize-241.5 rem · 24 pxsize-281.75 rem · 28 pxsize-322 rem · 32 pxsize-362.25 rem · 36 pxsize-402.5 rem · 40 pxsize-442.75 rem · 44 pxsize-483 rem · 48 pxsize-563.5 rem · 56 pxsize-644 rem · 64 pxsize-805 rem · 80 pxsize-966 rem · 96 pxsize-1127 rem · 112 pxsize-1288 rem · 128 pxsize-1449 rem · 144 pxsize-16010 rem · 160 pxsize-19212 rem · 192 pxsize-25616 rem · 256 pxsize-32020 rem · 320 pxSurfaces claire & sombre
Exploration locale des mêmes rôlesClair
Une visite à préparer
EARL des Tilleuls · 09:00
Avec MaïaSombre
Une visite à préparer
EARL des Tilleuls · 09:00
Avec MaïaRègles partagées
Surfaces
Fond général #F9F9F9, cartes blanches, ivoire et sable disponibles comme fonds de marque.
Textes
Noir ou gris foncé pour la lecture. Couleurs assombries pour les liens.
Formes
24 px pour les grandes cartes, 12 px pour les actions et champs, cercle pour les avatars.
Ces exports sont distincts des fondations de la bibliothèque. Le bouton lune/soleil applique le thème à toute la bibliothèque. Les deux aperçus ci-dessus permettent de comparer les surfaces.
07
Composants
Des éléments réutilisables à observer, sélectionner et essayer.
Boutons
01 / actionsPrimaire, contrasté, secondaire et désactivé. Libellés explicites, cible de 44 px minimum.
Champs de saisie
02 / formulaireLibellé toujours visible. L’erreur de saisie est formulée en texte, pas seulement par une couleur.
Calendrier
03 / sélectionOctobre 2026
Le jour choisi est sombre. Le rendez-vous associe une teinte douce, une bordure et un texte.
Statuts & progression
04 / retour d’état À relancer En échange Terminé
RELANCE · DÉMONSTRATIONGAEC du MoulinProposition à suivre
Le vert intervient après une action terminée. La forme et le libellé rendent aussi le changement visible.
Les interactions sont des démonstrations : aucune visite n’est créée et aucune donnée n’est envoyée.
08
Alertes
Donner un retour immédiat, lisible et proportionné.
Plein · SolidDoux · SoftAction
Votre prochaine visite est prête.
Votre prochaine visite est prête.
MaïaUne synthèse est disponible.
Une synthèse est disponible.
PrioritéUn dossier attend votre retour.
Un dossier attend votre retour.
InformationLe dossier a été mis à jour.
Le dossier a été mis à jour.
SuiviVotre visite est bien préparée.
Votre visite est bien préparée.
Messages de statut
Icône, titre et explicationEnregistré
La note de démonstration a bien été préparée.
La note de démonstration a bien été préparée.
À vérifier
Le dossier ne contient pas encore de date de visite.
Le dossier ne contient pas encore de date de visite.
Saisie incomplète
Renseignez le nom du dossier pour continuer.
Renseignez le nom du dossier pour continuer.
Information
Les données présentées ici sont des exemples.
Les données présentées ici sont des exemples.
Alerte refermable
Les modifications de cet espace sont des essais locaux.
Le vert, l’orange, le rouge et le bleu fonctionnels servent aux messages de statut du thème fourni. Ils ne remplacent pas la palette de marque validée.
09
Avatars
Identifier une personne, avec ou sans photographie.
Bleu encre
InitialeInitialesIcôneIllustré
PleinTTM
DouxTTM
DégradéTTM
Dégradé douxTTM
Bleu brume
InitialeInitialesIcôneIllustré
PleinTTM
DouxTTM
DégradéTTM
Dégradé douxTTM
Ambre
InitialeInitialesIcôneIllustré
PleinTTM
DouxTTM
DégradéTTM
Dégradé douxTTM
Argile
InitialeInitialesIcôneIllustré
PleinTTM
DouxTTM
DégradéTTM
Dégradé douxTTM
Vert feuille
InitialeInitialesIcôneIllustré
PleinTTM
DouxTTM
DégradéTTM
Dégradé douxTTM
Tailles & groupe
TM
24 pxTM
32 pxTM
40 pxTM
56 pxTM
72 pxTMCMEL+2
Les participants d’une visiteTM
Aperçu local uniquement · PNG, JPEG ou WebP, 5 Mo maximum.
10
Badges
Qualifier l’information sans interrompre la lecture.
Bleu encreBleu brumeAmbreArgileVert feuillePlein · Solid
Nouveau
Nouveau
Nouveau
Nouveau
Nouveau
Doux · SoftNouveau
Nouveau
Nouveau
Nouveau
Nouveau
SurfaceNouveau
Nouveau
Nouveau
Nouveau
Nouveau
Contour · OutlineNouveau
Nouveau
Nouveau
Nouveau
Nouveau
Dans l’application
Statuts, compteurs et filtres À relancer Maïa En échange Terminé3
Un badge décrit un état. Un filtre supprimable est un bouton, avec une zone de clic plus grande que son étiquette.
11
Boutons
Trois usages. Une hiérarchie claire.
Action principale
Une action forte par zone.
Repos
Survol
Pressé
Désactivé
Action secondaire
Une alternative au même niveau.
Repos
Survol
Pressé
Désactivé
Lien texte
Une destination, sans ajouter de poids.
En situation
Une action principale, une alternative.Votre visite est prête.
Enregistrez les derniers éléments du dossier.
12
Callouts
Mettre un message en avant et proposer une prochaine étape.
Bleu encre
Plein
Doux
Surface
Contour
Bleu brume
Plein
Doux
Surface
Contour
Ambre
Plein
Doux
Surface
Contour
Argile
Plein
Doux
Surface
Contour
Vert feuille
Plein
Doux
Surface
Contour
13
Liens
Guider la lecture et rendre la destination prévisible.
Action
Avant votre prochain rendez-vous, consultez les dossiers à suivre, retrouvez vos échanges récents et préparez les points à aborder.
Découvrir la paletteMaïa
Avant votre prochain rendez-vous, consultez les dossiers à suivre, retrouvez vos échanges récents et préparez les points à aborder.
Découvrir la palettePriorité
Avant votre prochain rendez-vous, consultez les dossiers à suivre, retrouvez vos échanges récents et préparez les points à aborder.
Découvrir la paletteInformation
Avant votre prochain rendez-vous, consultez les dossiers à suivre, retrouvez vos échanges récents et préparez les points à aborder.
Découvrir la paletteSuivi
Avant votre prochain rendez-vous, consultez les dossiers à suivre, retrouvez vos échanges récents et préparez les points à aborder.
Découvrir la palette14
Contrôles
Cases à cocher, choix exclusifs, interrupteurs et curseurs.
5 variantes normales affichées
Tous les contrôles sont manipulables au clavier et à la souris. Les filtres conservent vos réglages dans cette démonstration.
Préférences de démonstration
15
Inputs
Un libellé visible, une aide utile et un retour compréhensible.
Une référence commence par CAS-.
Précisez le contexte de votre question.
Un objet court facilite la lecture.
Donnez un nom explicite au document.
Précisez l’action à réaliser après la visite.
Les états d’un champ
16
Progressions
Montrer où l’on en est, et ce qu’il reste à faire.
5 variantes normales affichées
Bleu encre · Normal
Bleu encre · Doux
Bleu brume · Normal
Bleu brume · Doux
Ambre · Normal
Ambre · Doux
Argile · Normal
Argile · Doux
Vert feuille · Normal
Vert feuille · Doux
Contexte2 Échanges3 Synthèse
La valeur numérique accompagne toujours la barre. Déplacez le curseur pour comparer les différents niveaux.
17
Onglets
Changer de vue en gardant le contexte du dossier.
Dossier
EARL des Tilleuls
Les informations essentielles du dossier, réunies au même endroit.
Les derniers échanges
Visite de suivi à préparer et proposition à relire avant le prochain rendez-vous.
Les documents utiles
Compte rendu de visite · Fiche parcelle · Proposition de suivi.
Maïa
EARL des Tilleuls
Les informations essentielles du dossier, réunies au même endroit.
Les derniers échanges
Visite de suivi à préparer et proposition à relire avant le prochain rendez-vous.
Les documents utiles
Compte rendu de visite · Fiche parcelle · Proposition de suivi.
Priorités
EARL des Tilleuls
Les informations essentielles du dossier, réunies au même endroit.
Les derniers échanges
Visite de suivi à préparer et proposition à relire avant le prochain rendez-vous.
Les documents utiles
Compte rendu de visite · Fiche parcelle · Proposition de suivi.
Documents
EARL des Tilleuls
Les informations essentielles du dossier, réunies au même endroit.
Les derniers échanges
Visite de suivi à préparer et proposition à relire avant le prochain rendez-vous.
Les documents utiles
Compte rendu de visite · Fiche parcelle · Proposition de suivi.
Suivi
EARL des Tilleuls
Les informations essentielles du dossier, réunies au même endroit.
Les derniers échanges
Visite de suivi à préparer et proposition à relire avant le prochain rendez-vous.
Les documents utiles
Compte rendu de visite · Fiche parcelle · Proposition de suivi.
Clavier : flèches gauche/droite pour changer d’onglet, Début/Fin pour rejoindre le premier ou le dernier. Le contenu affiché suit la sélection.
18
Cartes & exemples
Du composant isolé à la composition d’un écran.
Des cartes de contenu, de suivi et d’action. Chaque exemple associe un rôle, un niveau de lecture et une couleur. Les chiffres et les dossiers ci-dessous sont fictifs.
Préparer.
Observer.
Avancer.
Vos opportunités
Démo12dossiers actifs
- À qualifier 5
- En échange 4
- Propositions 3
Votre journée
21 OCT.EARL des TilleulsVisite de suivi · Beauce
GAEC du MoulinPoint sur la proposition
Ferme des PrésPréparation du dossier
8 visites cette semaine
Dont 2 aujourd’hui
Votre conseiller
À faire
0 / 3
Format de synthèse
Format sélectionné : Essentiel
Notes récentes
Préparer le prochain échangeVisite · EARL des TilleulsRassembler les observationsSynthèse · Ferme des PrésUn échange.
Une prochaine
étape.
Faire le point Dossiers suivis24
Synthèses à relire3
Prochaine visite09:00
Le bon détail.
Au bon moment.
Les documents et les échanges qui éclairent votre prochaine visite.
Consulter le dossierDe l’échange
à l’action.
Une observation, une décision et un suivi qui avance.
Voir le parcoursNavigation mobile · Maïa · fond sable
Le repère demandé pour l’interfaceAccueil sélectionné · navigation de démonstration.
19
Blocs interactifs
Cinq compositions interactives, dans l’univers Caspario.
Des compositions pour organiser les dossiers, préparer les visites et suivre les prochaines actions.
Tout le contexte.
Une lecture claire.
Maïa rapproche les observations et les échanges pour préparer votre prochaine visite.
Trois couches réunies dans une même vue.
Octobre 2026Semaine 43
La bonne visite.
Au bon moment.
Sélectionnez un jour pour consulter les rendez-vous et retrouver le fil de la semaine.
| Prochaine visite | Statut |
|---|
Préparer la visite.
TMVisite aux TilleulsDu contexte à la prochaine action
- 1Préparer le contexteRelire les informations du dossierÀ faire
- 2Noter les observationsRetenir les points utiles sur le terrainÀ suivre
- 3Définir la suiteChoisir une action et une échéanceÀ suivre
Étape 1 sur 3 · Préparer le contexte
Visites8
Synthèses6
Relances4
Dossiers suivis12
Le rythme du terrain.
Activité de démonstration pour la semaine du 19 au 23 octobre.
20
Identité & images
Le lien au terrain s’exprime aussi dans les signes et les matières.
LOGOTYPE FOURNI
La donnée au cœur du terrain
Caspario
21
Maïa & données
La synthèse au service du terrain.
MAÏALe bon éclairage.
Au bon moment.
Vos dossiers, vos échanges, votre terrain. Les informations utiles se rencontrent ici.
Exemple de synthèse · données fictivesExemple de synthèse Maïa
Pour votre prochaine visite, retrouvez les informations de la parcelle, les échanges récents et la relance à préparer. Une même lecture rassemble les éléments utiles.
Activité des visites
Données de démonstration
8visites cette semaine
Visites réalisées · la valeur reste lisible au-dessus de chaque barre.
22
Règles d’usage
Les bons choix, au bon endroit.
Une action qui guide.
Un bouton principal par zone. Une alternative plus discrète.
La couleur a un rôle.
Une information reste compréhensible avec son texte et son icône.
Le terrain reste lisible.
Des surfaces calmes, des titres courts et des détails à la demande.
Choisir une couleur ou une action
Agir
Le bouton principal suit le thème : ambre profond en clair, bleu encre en sombre. Un contour accompagne une alternative ; un lien sert à naviguer.
Informer
Bleu brume pour Maïa, argile pour le contexte, vert par touches pour le terrain. Les statuts d’erreur, d’attention et de succès utilisent leurs propres couleurs fonctionnelles.
Sur ambre, argile et brume : texte foncé. Sur encre et vert feuille : texte blanc.
À faire « Enregistrer la visite » pour une action explicite.
À éviter Plusieurs boutons pleins concurrents ou un statut exprimé uniquement par sa couleur.
Composer sur ordinateur et sur mobile
| Largeur | Comportement attendu |
|---|---|
| 320–620 px | Navigation repliée, formulaires sur une colonne, boutons qui passent à la ligne. Deux couleurs par rangée si les libellés restent lisibles. |
| 621–900 px | Navigation toujours repliée ; les blocs passent à deux colonnes quand leur contenu le permet. |
| Plus de 900 px | Navigation latérale visible, grilles et tableaux plus denses. La largeur du texte reste limitée. |
Marges de 20 à 24 px sur petit écran ; espacements de 8, 12, 16, 24 et 32 px selon la relation entre les éléments. Grandes cartes à 24 px d’arrondi, boutons et champs à 12 px.
À 320 px, seul un tableau ou une matrice peut défiler horizontalement dans sa propre zone. Les titres, actions et cellules doivent rester accessibles au clavier.
Voir l’aperçu ordinateur / mobileÉcrire et utiliser les signes de marque
Manrope pour l’interface. Texte courant à 14–16 px ; champs à 16 px ; annotations à 12 px minimum. Les libellés décrivent le résultat de l’action, les erreurs proposent une correction.
Le logotype Caspario signe la marque. Le symbole de Maïa accompagne ponctuellement l’assistant ; les trames restent décoratives et ne recouvrent jamais un texte ou un contrôle.
Les détails au survol restent disponibles au clavier et au toucher. Une information nécessaire pour décider doit rester visible.
23
États & accessibilité
Chaque situation mérite un retour clair.
Les scénarios sont simulés. Aucune information n’est envoyée ni enregistrée.
Une erreur qui aide.
Essayez de valider sans nom de dossier, puis corrigez le champ.
Une décision maîtrisée.
Une confirmation courte, une annulation facile et un retour au bouton d’origine.
Repères clavier
Tab et Maj + Tab parcourent les contrôles. Échap ferme la fenêtre. Le focus reste dans la fenêtre ouverte et revient ensuite à son déclencheur.
Vérifications et périmètre
Les contrôles couvrent les contrastes, la structure accessible, le clavier et l’affichage sur petit écran.
Les tests automatiques et clavier sont complétés par une revue visuelle. Une lecture complète avec VoiceOver ou NVDA reste à effectuer dans l’application intégrée.
Références : contrastes WCAG, redistribution du contenu, fenêtres modales au clavier.
24
Intégration
Les mêmes composants, dans votre application.
KIT CASPARIO
Télécharger le kitUne base autonome.
Styles, thèmes, boutons, champs, messages, états, onglets et confirmations. Sans dépendance de framework.
Démarrer en trois étapes
- Décompresser le kit. Ouvrir
example.htmlpour tester les composants localement. - Copier les fichiers
theme.css,fonts.css,caspario.css,caspario.jset le dossierfonts/dans l’application. - Ajouter les fichiers à la page, puis appeler
Caspario.init()après l’insertion des composants.
Le kit manipule uniquement les éléments qui portent ses classes et attributs. Les événements cp:submit et cp:confirm permettent de brancher votre logique métier.
Copier un composant
Remplacer les identifiants d’exemple par des identifiants uniques. Dans un formulaire, préciser le type de chaque bouton. Un lien change de page ; un bouton déclenche une action.
Contrat et maintenance
Le fichier COMPONENTS.md décrit les classes, attributs, événements et responsabilités de chaque composant. tokens.json contient les valeurs ; theme.css est la source à charger pour les rôles clair et sombre.
Le kit est une bibliothèque HTML/CSS/JavaScript native. Les exemples sont exécutables hors ligne ; les données, permissions, appels serveur et règles métier appartiennent à l’application.
Une modification de palette passe par les fichiers source et la synchronisation, puis par les mêmes contrôles. Conserver les licences de Manrope et des icônes dans toute redistribution.