Référence produit
À jour · août 2026Design system La Colline
Une interface chaleureuse, claire et calme : canevas minéral, surfaces blanches, corail de marque et composants pensés pour guider sans surcharger.
Fondations visuelles
Une coque stable, deux niveaux si nécessaire
La navigation globale reste blanche et compacte. La seconde rangée apparaît seulement lorsqu’un appel, une candidature ou une exploration apporte un contexte utile.
Alignement et respiration
Navbar, titre et contenu partagent la même gouttière. La largeur de lecture se règle à l’intérieur, jamais en décalant la page.
- Mobile
- 16 px
- Tablette
- 20 px
- Desktop
- 40 à 64 px
- Grille d’espacement
- Base 8 px
Marque
Corail · Actions et repères
Marque douce
Corail pâle · Sélection et accent
Canevas
Minéral · Fond des pages
Surface
Blanc · Contenu principal
Encre
Presque noir · Texte et contraste
Ligne
Pierre · Séparation discrète
Typographie
Titre de page
30–44 px · graisse 600 · approche resserrée
Titre de section
20 px · une hiérarchie courte
Le texte courant reste simple, lisible et suffisamment espacé. Les métadonnées complètent la décision sans concurrencer le contenu principal.
Corps 14–16 px · interligne confortable
Géométrie et profondeur
Contrôle
12 px
Bloc interne
16 px
Surface
20 px
Les ombres restent légères. La hiérarchie vient d’abord de l’espace, du contraste et de l’alignement — pas d’une accumulation de bordures.
Actions et saisie
Une action principale, puis des options calmes
Les boutons répondent immédiatement, avec une animation courte et un focus visible.
Des champs explicites
Le libellé explique la donnée, le texte indicatif illustre une réponse et l’aide précise le besoin.
Le nom pourra être modifié avant le dépôt.
Utilisée pour les confirmations.
Présentez l’objectif principal en deux ou trois phrases.
Collections et données
- Candidatures reçues
- 36
- À analyser
- 8
- Jours restants
- 112
+ 4 cette semaine
Feedback et états
Progression utile, jamais décorative
Une barre accompagne une tâche comprise. À 0 %, le texte explique ce qui doit commencer.
Modifications enregistrées
Chargement en cours
À vérifier
Échec — réessayer
Le corail doux attire sans alarmer
Il met en avant une information ponctuelle. Les états métier conservent leurs couleurs sémantiques.
Chargement structurel
Le squelette réserve la place du contenu et évite les sauts de mise en page.
Aucun dossier à analyser
Les nouvelles candidatures apparaîtront ici dès leur dépôt.
L’état vide conserve le contexte et indique la prochaine étape.
Compositions de page
On choisit d’abord le bon modèle de page. Les composants viennent ensuite servir la tâche, sans recréer une coque locale.
Page standard
Titre à plat, contenu aéré et largeur de lecture maîtrisée.
Accueil · portfolio · configuration
Vue dense
La surface blanche devient l’espace de travail, sans carte englobante.
Tableau · messagerie · analyse
Atelier
Une barre unique et des panneaux autonomes utilisant toute la hauteur.
Formulaire · éligibilité
Section 3
Votre projet
La présentation, le territoire et l’impact attendu.
Le projet en quelques lignes
Champ standard · obligatoire
Territoire d’intervention
À faire
- Aligner navbar, titre et contenu sur une gouttière commune.
- Conserver une seule action principale par zone.
- Réserver les couleurs fortes aux états qui ont un sens.
À éviter
- Répéter un header lorsque la barre contextuelle porte déjà le titre et les actions.
- Empiler cartes, bordures et aplats colorés pour créer artificiellement une hiérarchie.
- Adapter un atelier complexe au mobile au prix d’une interface illisible : proposer un relais clair vers ordinateur.
Inventaire partagé
Des primitives avant des exceptions
Chaque nouvelle page part de ces composants et des tokens sémantiques. Une exception locale doit rester rare, justifiée et documentée.
Public réel : des mots simples et des décisions guidées.
Feedback : visible avant toute attente réseau.
Vérification : mobile, tablette et grand desktop.