Sections en verre dépoli accessibles en Astro et Tailwind : 16 sections avec repli sans flou et contrastes mesurés, clair et sombre

Ce kit s’adresse aux designers qui intègrent eux-mêmes leurs maquettes, aux développeurs front-end et aux freelances qui veulent un rendu en verre dépoli sans sacrifier la lecture. Le flou d’arrière-plan donne de la profondeur, mais un texte posé sur un verre translucide peut perdre son contraste dès que le fond change. Ici, chaque opacité de verre a été choisie à partir du point le plus défavorable de chaque fond, chaque surface revient à un fond opaque quand le flou n’est pas pris en charge ou que l’utilisateur demande moins de transparence, et les mesures sont livrées avec un calculateur pour vérifier votre propre fond. Les sections couvrent une page complète, du bandeau d’annonce au pied de page, en composants Astro aux props typées et en HTML statique. Les textes de démonstration sont en anglais (voir « Langue des sections » plus bas).

• 16 sections, chacune en composant Astro (astro/) et en page HTML autonome (html/sections/), avec un contenu de démonstration par défaut que vous remplacez par des props :
  • Announcement : bandeau d’annonce avec lien ;
  • Navigation : en-tête collant en verre, avec menu mobile qui agrandit l’en-tête au lieu d’ouvrir un second panneau ;
  • Hero : titre, accroche et boutons d’action ;
  • Stats : chiffres clés ;
  • FeaturesGrid, FeaturesSplit et FeaturesCards : les 3 variantes de fonctionnalités (grille, mise en avant en colonnes, cartes) ;
  • Steps : étapes numérotées ;
  • Gallery : galerie de cadres à remplacer par vos images ;
  • Testimonials : témoignages (fictifs dans la démo) ;
  • Pricing : formules avec bascule mensuel ou annuel ;
  • Faq : questions fréquentes en blocs dépliables ;
  • Cta : appel à l’action final ;
  • Contact : formulaire de contact avec erreurs en ligne et confirmation d’envoi ;
  • Dialog : fenêtre modale de confirmation ;
  • Footer : pied de page en colonnes de liens.
• 25 composants .astro en tout : les 16 sections, 5 composants partagés (Page, Icon, IconSprite, Brand, SectionHead) et 4 composants de démonstration (DemoPage, DemoBar, Annex, ContrastTable).
• 4 fonds écrits en CSS, sans aucune image (aplats chauds, bleu-vert, bandes dures du plus sombre au plus clair, texture de type photo), chacun avec sa propre opacité de verre en clair et en sombre.
• 18 icônes SVG dans un sprite à coller une fois par page.
• 10 états de bouton présentés dans l’annexe de la démonstration.
• 211 tokens de conception, dont 61 propres au thème sombre, en variables CSS et en 7 fichiers JSON au format DTCG.
• Une page de démonstration (html/index.html) : une barre pour changer la largeur, le thème, le fond et activer ou couper le verre, puis une fiche de référence avec le tableau des contrastes et un calculateur du pire point.
• Un script de mesure optionnel (tools/measure-worst-point.mjs) qui capture votre propre fond et calcule l’opacité minimale du verre pour chaque couleur de texte.
• Un mode d’emploi en français puis en anglais (README.md) et un guide d’installation Astro (astro/LISEZMOI-astro.txt).

Organisation des fichiers :

astro/          les 16 sections, les composants partagés, kit.js, LISEZMOI-astro.txt
astro/demo/     la page de démonstration en Astro
html/           index.html, sections/*.html, css/ (kit.css, tokens.css), js/kit.js
tailwind/       theme.css, components.css, fonts.css, frosted-glass.css
tokens/         les tokens au format DTCG et leur résolveur
fonts/          Geist et Geist Mono (woff2), OFL.txt
tools/          measure-worst-point.mjs
README.md

Lisibilité et repli sans flou

Le verre est une amélioration, le fond opaque est le point de départ. Chaque surface en verre pose d’abord une couleur opaque et un trait, puis ajoute la teinte translucide et le flou seulement si le navigateur gère backdrop-filter. Elle revient à l’opaque, avec un trait plus marqué, quand le système demande moins de transparence (prefers-reduced-transparency) ou plus de contraste (prefers-contrast: more). L’attribut data-glass="off" sur la balise html force l’opaque, pour un réglage proposé à vos visiteurs. prefers-reduced-motion coupe les transitions.

Le contraste n’est pas mesuré sur la maquette mais au point le plus défavorable de chaque fond : le pixel le plus sombre sous le verre en thème clair, le plus clair en thème sombre. Le verre qui flotte au-dessus du contenu (en-tête collant, menu, modale) a sa propre opacité, calculée pour rester lisible sur n’importe quel contenu. Le tableau des mesures et la méthode sont dans le README.md et dans la fiche de référence de la démonstration.

Fabrication et IA

Le code des sections, les composants Astro, le CSS, le thème Tailwind, les tokens, les icônes SVG du sprite et le script de mesure ont été produits avec un assistant d’IA, puis relus et contrôlés avant la mise en vente. Aucun outil de génération d’images n’a été utilisé : le kit ne contient aucune image, les fonds sont du CSS et les cadres de la galerie sont à remplir avec vos visuels.

Langue des sections

Les sections sont livrées avec un contenu de démonstration en anglais : textes, libellés par défaut, noms, chiffres et témoignages fictifs, autour d’un outil de planning d’équipe inventé. Dans les composants Astro, chaque prop est facultative et chaque texte se remplace par une prop, sans toucher au code. Dans la version HTML, les textes se modifient directement dans le balisage. Le logo est un repère à remplacer dans le sprite.

• Astro : composants .astro aux props typées en TypeScript, avec l’interface Props exportée en tête de chaque fichier. Testé avec Astro 7.4 et Tailwind CSS 4.3.5 : la vérification des types et la construction passent sans erreur.
• Tailwind CSS v4 : le kit fournit le thème (tailwind/theme.css, qui ajoute les tokens avec @theme) et une couche components (tailwind/components.css). Les sections sont écrites en classes sémantiques (.glass, .wrap, .cols, etc.), pas en utilitaires dans le balisage. Vos propres utilitaires restent disponibles et l’emportent sur les styles du kit, et les tokens du thème donnent des utilitaires comme bg-surface ou text-text-muted (le point d’entrée ne scanne pas vos fichiers par défaut : ajoutez votre ligne @source). Les rayons, les tailles de texte, les interlignes et les rampes de couleurs du kit remplacent les valeurs Tailwind du même nom : le README.md le détaille.
• HTML et CSS : kit.css, déjà compilée, sans CDN, et tokens.css (variables CSS en clair et en sombre). Ces fichiers s’utilisent dans n’importe quel projet web, avec ou sans framework. Le comportement des sections (menu, bascule des prix, modale, formulaire) tient dans kit.js, sans dépendance.
• Tokens DTCG : les tokens en JSON, avec un résolveur qui assemble les primitives, le thème et le verre, pour les importer dans vos outils de tokens.
• Polices : Geist et Geist Mono, sous-ensemble latin, auto-hébergées dans fonts/ (licence SIL OFL 1.1). Aucun appel à un service de polices tiers.
• Script de mesure (optionnel) : il demande Node et Playwright, à installer à part, hors des dépendances de votre projet. Sans rien installer, le calculateur de la page de démonstration fait le même calcul pour un pixel que vous lui donnez.

Le mode sombre suit le réglage du système ; l’attribut data-theme sur la balise html force l’un ou l’autre des 2 thèmes. Les sections suivent la largeur de leur conteneur, pas celle de la fenêtre. Le kit ne contient pas de fichier de maquette pour un outil de design.

Contrôles faits avant la mise en vente :

• en clair et en sombre, à 375, 768 et 1 440 px de large : aucun défilement horizontal de la page, aucun texte coupé ;
• axe-core, sur la version HTML comme sur la version Astro : 48 états par version (375 et 1 440 px, clair et sombre, les 4 fonds, la modale, les erreurs de formulaire, la confirmation d’envoi, le menu ouvert, le verre coupé, mouvement réduit, transparence réduite, contraste renforcé), aucun défaut sérieux ou critique ;
• Lighthouse sur mobile, page de démonstration : 100 en performance, en accessibilité et en bonnes pratiques, sur 3 passes ;
• contraste des tokens : 90 paires vérifiées en clair et en sombre, aucun échec ;
• contraste sur le verre, recalculé pixel par pixel sur les 4 fonds, les 2 thèmes et les 3 largeurs : 4,67:1 au plus bas (texte atténué) ;
• repli sans flou : le verre coupé, chaque surface passe en fond opaque, sans aucune violation de contraste relevée par axe-core ;
• les versions HTML et Astro donnent le même rendu au pixel près sur 18 cas contrôlés ;
• tous les espacements sont des multiples de 4 px.

Le kit est vendu sous licence commerciale : vous pouvez l’utiliser dans vos projets et livrer à vos clients les sites construits avec ses sections. Vous ne pouvez pas revendre ni redistribuer le kit ou ses fichiers, ni remettre le kit d’origine à un client pour qu’il le réutilise ailleurs. Les polices Geist et Geist Mono (SIL OFL 1.1) et la base compilée de Tailwind CSS dans kit.css (licence MIT) gardent leur propre licence.

• Pourquoi le flou casse le contraste et comment prévoir un repli : glassmorphism et lisibilité.
• Pour situer le verre dépoli parmi les autres styles : le guide des styles d’interface nommés.

1.0.0 (12 novembre 2026) : première version.