Sites, mini-sites et applications

Référence : le site adalan.fr (septembre 2026). Point de départ : assets/modeles/page.html.

Principes

• Le fond courant est clair : lavande (--ground) pour la page, papier blanc pour ce qui se pose dessus.
• L'encre et la photo marquent les temps forts : une ouverture, un message clé, un appel à l'action. Une bande encre pleine largeur porte les courbes de niveau (.band--ink) ; une photo plein cadre porte un voile encre et son crédit (.photo).
• Le contenu tient dans une colonne de lecture. Pas de mur de texte pleine largeur.
• Rejets confirmés : le site de cabinet par défaut (photo d'équipe plein écran, grille de cartes de services, mur de logos) et le site « IA » par défaut (fond noir intégral, halos néon, dégradés fluo, robots).

Mise en page

Points de rupture observés sur le site : 1023 px (la barre latérale devient un tiroir), 860 px, 720 px, 560 px et 420 px. Préférer les requêtes de conteneur pour les composants.

Navigation

• Barre du haut : collante, 4 rem de haut, lavande à 82 % avec un flou de 14 px et un filet bas. Logo à gauche, liens en text-2 (encre au survol et sur la page courante), action principale à droite en bouton encre. Sous 560 px, l'action ne garde que son icône.
• Barre latérale (application, espace connecté) : encre, 17,5 rem, logo clair (logo-label-white-orange.svg). Entrées en ink-100, icônes et aperçus en ink-300 ; survol blanc à 6 % et icône pêche ; entrée courante blanc à 10 %, icône pêche et petit point pêche en diagonale à droite. Groupes libellés en ink-300 0,78 rem. Au pied, le bouton pêche de l'action principale. Sous 1024 px, elle devient un tiroir (min(20rem, 86vw)) sur un voile ink-950 à 45 %.
• Pied de page : une ligne, logo, adresse, mentions ; métadonnées en Monaspace.

Applications et tableaux de bord

• Les zones de contenu sont des cartes papier (.card) sur fond lavande ; une carte encre (.card--ink) met en avant un indicateur stratégique, une seule par écran.
• Tableaux : filets internes --line entre les lignes, pas de grille complète ; en-têtes en label 600 text-3 ; chiffres alignés à droite, en chiffres tabulaires ; codes et identifiants en Monaspace.
• Indicateurs : grand chiffre en Mona Sans 780 chasse 108 %, libellé en Monaspace capitales text-3, évolution en peach-700.
• États : une icône et un libellé, jamais la couleur seule. Erreur en peach-700. Il n'existe pas encore de vert ou de rouge de statut dans la charte : en ajouter un se valide avec l'équipe adalan avant.
• Graphiques : encre et ses nuances pour les séries, pêche pour la série ou la valeur à regarder. Les couleurs Kamelot (--f1 à --f5) ne servent qu'aux cinq familles Kamelot.

Formulaires

• Libellé au-dessus du champ (0,9 rem, 620, encre) ; « facultatif » en text-3.
• Champ lavande, filet interne, diagonale courte, 2,9 rem de haut ; au focus, fond papier, filet encre 2 px et halo pêche.
• Choix exclusifs en pastilles (.chip) plutôt qu'en liste déroulante quand il y a moins de six options.
• Erreur : filet et message peach-700 sous le champ. Confirmation d'envoi : encadré pêche claire en --shape-md.
• Un formulaire vit dans une carte et passe en une colonne sous 34 rem.

Motif optionnel : la conversation

Le site adalan.fr est construit comme un fil de conversation avec un assistant IA. Ce motif se réutilise quand le support s'y prête (démonstration d'un assistant, application IA, mini-site sur un sujet IA) ; il n'est pas obligatoire.

• Deux voix : la question du visiteur est une bulle encre alignée à droite, en forme miroir (--shape-mirror), texte blanc 560 ; la réponse de l'assistant est précédée de l'avatar, le pictogramme adalan sur fond pêche (2,25 rem, coins 30 % / 3 px).
• Trace de raisonnement : une ligne Monaspace text-3 de 0,78 rem, libellé peach-700, petites coches en diagonale peach-200 / peach-700.
• Réponse : texte courant en text-2, chapeau ou grande réplique ; <mark> surligne en bande pêche.
• Artefact : ce que l'assistant produit, dans une carte papier (par défaut), encre (stratégique, avec courbes de niveau) ou pêche (humain, recrutement). En-tête : pastille d'icône, titre, type en Monaspace dans un filet, bouton « ouvrir ».
• Compositeur : champ papier en --shape avec filet et ombre flottante, bouton d'envoi encre de 3 rem (16 / 4 px) qui passe à la pêche et inverse sa diagonale au survol. Une ligne fantôme en Monaspace peach-700 annonce la réponse.
• Mouvement : les mots des titres arrivent étroits et légers puis prennent leur forme ; le texte s'écrit en flux ; l'artefact se construit. Tout le contenu reste présent sans script.

Le détail complet est dans DESIGN.md du dépôt du site (adalan-website).

Accessibilité

• Contraste : texte pêche sur fond clair uniquement en peach-700 ; peach-600 seulement en taille display ; pêche et peach-400 seulement sur encre.
• Focus visible partout : contour peach-600 de 2 px décalé de 3 px.
• Tout se fait au clavier ; les cibles font au moins 2,75 rem de haut.
• Le contenu est présent sans JavaScript ; les animations s'arrêtent sous prefers-reduced-motion.
• lang="fr" (ou en), textes alternatifs descriptifs, icônes décoratives en aria-hidden.

Performance

• En production, héberger les polices (@fontsource-variable/mona-sans, @fontsource/monaspace-neon) et précharger le fichier latin de Mona Sans.
• Images Unsplash servies à la bonne taille (paramètre w, srcset), en loading="lazy" hors du premier écran.
• Icônes Lucide rendues en SVG inline, sans bibliothèque JavaScript.