Design System « Courbes de niveau »
L'identité du portail repose sur le relief réel de la commune : de 452 m au point bas jusqu'aux 789 m du Camp de César, tracé à partir des données altimétriques de l'IGN. Une carte plutôt qu'un logo, des photos du village plutôt que des illustrations, et l'accessibilité dès la première ligne de code.
Vraie
Chaque donnée affichée se vérifie : relief IGN, contour communal officiel, chiffres du recensement. Rien d'inventé.
Accessible
Contrastes AA minimum, navigation clavier, modes contraste renforcé, texte agrandi et FALC, mouvement réduit respecté.
Claire
Un objectif par écran, un bouton principal, des phrases courtes et des libellés qui disent ce qu'ils font.
Cartographique
Courbes, cotes, cartouches et sentiers balisés : le vocabulaire de la carte organise l'information.
Le relief réel de la commune
Les courbes de niveau sont calculées à partir du modèle altimétrique RGE ALTI de l'IGN : une courbe tous les 20 m, une courbe maîtresse plus épaisse tous les 100 m, et la limite communale officielle en tirets.
Sur l'accueil, le village apparaît découpé dans sa propre commune, le relief se trace au chargement et l'altitude s'affiche sous la souris. Sur les pages intérieures, la même carte devient une bande de nuit qui accueille la photo de la rubrique.
Sources : IGN Géoplateforme (altimétrie), geo.api.gouv.fr (contour de la commune, code INSEE 38308).
Palette de couleurs
Le vert des prairies pour les actions, le brun des courbes IGN pour les accents, le bleu du ciel pour l'information et le papier de carte en fond. Chaque couleur d'usage (texte, fond, bordure) est un jeton CSS recalculé en mode sombre et en mode contraste renforcé.
Prairie (actions)
Brun IGN (accent) & ciel (information)
Encre & papier
Couleurs d'état
Testez les boutons « Contraste » et « Sombre » dans la barre du haut : toute la page, y compris cette palette, se recalcule à partir des jetons (--color-bg, --color-text, --color-primary…), jamais à partir de couleurs codées en dur dans les composants.
Typographie
Deux familles nettement distinctes. Archivo, à largeur variable, pour les titres : resserrée comme les écritures des cartes et de la signalétique. Atkinson Hyperlegible Next pour le texte : dessinée pour les personnes malvoyantes, elle distingue sans ambiguïté les caractères proches (0 et O, l et I).
Bienvenue à Plan
De 452 à 789 mètres
Réserver la salle des fêtes
Le texte courant s'affiche en 17 px, avec un interlignage de 1,6 et des lignes de moins de 70 caractères, pour un confort de lecture durable.
Commune de Plan, Isère
Iconographie
Un set d'icônes maison au trait unique (1,8px, coins arrondis), cohérent sur l'ensemble du portail, livré sous forme de sprite SVG unique pour des performances optimales (une seule requête, mise en cache).
État civil
Urbanisme
École
Déchets
Signalement
Carte
Agenda
Annuaire
Espace citoyen
Alertes
Assistant
Paiement
Boutons
Badges, statuts & alertes
Cartes
Carte de service
Icône, titre, description courte et flèche d'action — utilisée pour les raccourcis vers les démarches.
Accéder
Carte actualité
Vraie photo en tête, badge superposé, titre et méta-donnée de date.
Carte simple
Pour les mises en avant statistiques ou pédagogiques.
La photographie du village, au cœur de l'identité
Les aplats et dégradés cèdent la place aux vraies photos de Plan. Ces quatre composants montrent comment le paysage communal habite l'interface, saison après saison.
Carte actualité illustrée
Média photographique en tête + badge superposé. Remplace l'ancien bloc .news-media en dégradé CSS.
Plan aux couleurs d'automne
Une photo plein cadre remplace le placeholder dégradé : le média porte à lui seul l'émotion de la carte.
L'église restaurée en 2013
Chapelle de 1542, clocher de 1860 : le patrimoine du village illustre naturellement les cartes.
L'étang communal au fil des saisons
Le détail (nénuphars, foin, neige) fonctionne aussi bien que le grand paysage.
Bloc éditorial image + texte (.feature)
Photo légendée d'un côté, contenu de l'autre. Ajouter .reverse pour inverser le sens.
Un composant taillé pour raconter
La .feature-media combine une photo en ratio 5/4, une ombre douce et une légende flottante .feature-cap (icône + titre + sous-titre). Idéale pour présenter un lieu, une démarche ou une actualité de fond.
Mosaïque photo (.mosaic)
Galerie asymétrique en grille 4 colonnes. Modificateurs : big (2×2), tall (1×2), wide (2×1), défaut (1×1).
Panneau d'appel à l'action (.cta-panel)
Fond vert dégradé + grain photographique. Titres et textes basculent en blanc via .on-photo.
Ne manquez plus rien de Plan
Alertes, agenda et actualités du village, par email ou notification. Le panneau CTA clôt les pages sur une note chaleureuse et engageante.
Formulaires accessibles
Étapes & suivi
Stepper
- 1. Dossier
- 2. Justificatifs
- 3. Confirmation
Timeline de suivi
5 octobre 2026
Délai estimé : 5 jours
Accessibilité, un principe et non une option
Contraste élevé
Bascule instantanée vers une palette noir/blanc à contraste maximal.
Taille du texte
3 paliers de zoom typographique sans casser la mise en page.
Mode FALC
Facile à Lire et à Comprendre : interlignage augmenté, contenu simplifié.
Mode sombre
Confort visuel et sobriété énergétique sur écran.
Chaque composant respecte : focus visible au clavier (:focus-visible), cibles tactiles ≥44px, structure de titres logique, alternatives textuelles sur chaque photo, réduction des animations (prefers-reduced-motion), et un lien d'évitement vers le contenu. Objectif visé : RGAA niveau AA, avec déclaration d'accessibilité publiée et plan d'action correctif public.
Tokens d'espacement & de rayon
6 px (petits éléments), 10 px (cartes), 14 px (photos et panneaux)
Échelle de 4px à 96px (--space-1 à --space-9)
3 niveaux (sm/md/lg), désactivées en contraste élevé
Conteneur max 1220 px, grilles 2/3/4/6 colonnes responsives