Sections néo-brutalistes en Astro et Tailwind : 20 sections, clair et sombre (HTML, CSS, Astro)

Ce kit s’adresse aux designers qui intègrent eux-mêmes leurs maquettes, aux développeurs front-end et aux freelances qui construisent des pages d’accueil, des sites de produit ou des pages de vente dans le style néo-brutaliste : bordures pleines, une seule ombre dure nommée, couleurs franches et typographie appuyée. Il réunit les sections d’une page complète, de l’en-tête au pied de page, en composants Astro aux props typées et en HTML statique, avec les mêmes tokens en clair et en sombre. Chaque section se copie seule dans un projet existant. Les textes de démonstration sont en anglais (voir « Langue des sections » plus bas).

• 20 sections en composants Astro (astro/), chacune avec un contenu de démonstration par défaut que vous remplacez par des props :
  • Announcement : bandeau d’annonce avec lien ;
  • Header : marque, navigation, bouton d’action et menu mobile ;
  • Hero : titre, accroche et boutons d’action ;
  • Marquee : bandeau défilant ;
  • Stats : chiffres clés avec leur source ;
  • Features : grille de fonctionnalités avec pictogrammes ;
  • FeatureZoom : une fonctionnalité détaillée, avec frise d’étapes et liste de points ;
  • Steps : étapes numérotées ;
  • UseCases : cas d’usage en onglets ;
  • Gallery : galerie de cadres teintés, à remplacer par vos images ;
  • Testimonials : témoignages (fictifs dans la démo) ;
  • Pricing : formules avec bascule mensuel ou annuel ;
  • Comparison : tableau comparatif des formules, avec une colonne mise en avant ;
  • Team : équipe ;
  • Faq : questions fréquentes en blocs dépliables ;
  • Articles : derniers articles ;
  • Newsletter : formulaire d’inscription avec message d’erreur et confirmation ;
  • Contact : coordonnées et formulaire de contact avec erreurs en ligne et confirmation ;
  • Cta : appel à l’action final ;
  • Footer : pied de page en colonnes de liens.
• 24 composants .astro en tout : les 20 sections, plus 4 composants partagés (Icon, Brand, Sticker, SectionHead), et icons.ts, qui contient les 20 pictogrammes en SVG.
• 21 pages HTML : html/index.html, la démonstration des 20 sections avec une barre de bascule du thème et une annexe des états, et une page autonome par section dans html/sections/.
• 23 variantes d’état présentées dans l’annexe de la démonstration : 15 états de bouton, 6 états de champ et 2 états de message.
• 100 tokens de conception, dont 25 couleurs, avec leurs valeurs en clair et en sombre.
• Un guide d’installation en français puis en anglais, astro/LISEZMOI-astro.txt.
• 52 fichiers au total.

Organisation des fichiers :

astro/          les 24 composants, icons.ts, LISEZMOI-astro.txt
html/           index.html, sections/*.html
html/css/       tokens.css, kit.css
tailwind/       theme.css, components.css, neobrutalist.css

Le kit ne place aucun JavaScript dans un fichier à part : le menu mobile, le bandeau défilant, les onglets, la bascule des tarifs et les formulaires ont chacun un petit script en ligne dans leur section, ce qui permet de copier une section sans rien d’autre. Les formulaires valident la saisie dans le navigateur seulement : ils n’envoient rien par eux-mêmes, à vous de brancher l’attribut action ou votre gestionnaire d’envoi.

Deux noms de classes diffèrent volontairement des habitudes : la grille s’appelle .nb-grid et le texte réservé aux lecteurs d’écran .visually-hidden, pour ne pas entrer en collision avec les classes utilitaires de Tailwind CSS.

Fabrication et IA

Le code des sections (composants Astro, HTML, CSS, thème Tailwind) a été produit avec un assistant d’IA, puis relu et contrôlé avant la mise en vente : construction d’un projet neuf en suivant le guide d’installation, aucune violation relevée par axe-core en clair comme en sombre, contrastes de couleur compris, un score d’accessibilité Lighthouse de 100 sur mobile, et tous les espacements mesurés sur la grille de 4 px. Aucun outil de génération d’images n’a été utilisé : le kit ne contient aucune image, les cadres de la galerie, des articles et de l’équipe sont des aplats de couleur.

Langue des sections

Les sections sont livrées avec un contenu de démonstration en anglais : textes, libellés par défaut, noms et prix fictifs, autour d’un outil de devis et de factures 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. La marque « Your brand » et son logo sont des repères à remplacer.

• 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 : le projet de test, monté en suivant le guide, passe la vérification des types et la construction sans erreur.
• Tailwind CSS v4 : tailwind/theme.css ajoute les tokens du kit au thème (@theme), tailwind/components.css contient les styles des sections, et tailwind/neobrutalist.css est le point d’entrée à importer une fois dans votre mise en page.
• HTML et CSS : tokens.css (variables CSS en clair et en sombre) et kit.css, déjà compilée, sans CDN. Ces fichiers s’utilisent dans n’importe quel projet web, avec ou sans framework.
• SVG : les 20 pictogrammes sont écrits en SVG en ligne par le composant Icon.

Tout passe par des tokens : couleurs, ombre, bordures, rayons, échelle typographique et espacements sur une grille de 4 px. 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. Chaque section est son propre conteneur et s’adapte à sa propre largeur, pas à celle de la fenêtre : elle reste juste quand vous la placez dans une colonne.

Les polices Bricolage Grotesque et JetBrains Mono (licence SIL OFL 1.1) sont référencées par un lien vers un service de polices en ligne, pas incluses dans les fichiers ; vous pouvez les héberger vous-même. Le kit ne contient pas de fichier de maquette pour un outil de design.

Contrôles faits avant la mise en vente, en mode clair et en mode sombre, à 375, 768 et 1 440 px de large : aucun défilement horizontal, y compris menu ouvert, onglets, tarifs annuels et formulaires en erreur, et aucune violation relevée par axe-core à 375 et 1 440 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 et la base compilée de Tailwind CSS dans kit.css (licence MIT) gardent leur propre licence.

• Les principes du style, ses origines et ses limites : le néo-brutalisme, un vent de liberté dans le design d’interface.
• Pour le situer parmi les autres styles d’interface : le guide des styles d’interface nommés.

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