Client-First/ astro
La base v3 Client-First rencontre Astro

Des sites bien construits.
Dès la première classe.

Une structure claire, des variables partagées et des composants réutilisables.
Tout ce qu’il faut pour commencer votre prochain site.

Tester les variablesVoir le style guide
UNE BASE, VOTRE DESIGN.Modifiez une variable. Voyez la différence.
Le système en pratiqueAperçu interactif
Variables
NomValeur

Brand

  accent

Neutral

  paper
  ink

Others

  success
Une valeur. Tous les composants.
Aperçu du composant100%
Votre prochain projet

Une idée.
Une base solide.

Des choix cohérents, du premier titre au dernier bouton.

Voir les composants
Pensé pour toutes les tailles d’écran
Couleur de marque
background: var(--brand-accent);À vous de jouer avec les variables
Astro + Tailwind v4·Variables Client-First·Prêt à personnaliser
Un système qui fait le lien

Moins de décisions répétées.
Plus de place pour le design.

Les mêmes fondations sur chaque page, avec la liberté de les adapter à chaque projet.

LES VARIABLES

Une seule source de vérité.

Une couleur dans Base, des usages dans Theme. Votre identité reste cohérente partout.

LES ESPACEMENTS

Un rythme commun.

Des tailles en rem et une échelle courte pour des compositions qui respirent.

LA TYPOGRAPHIE

Chaque titre à sa place.

Taille, graisse et interlignage réunis. Des retours à la ligne équilibrés, par défaut.

Clair à lire. Simple à reprendre.

Une structure que l’on comprend.

La page assemble des sections. Les sections partagent un conteneur. Les composants font le reste.

Voir les composants

Créer uniquement ce dont le projet a besoin.
Réutiliser ce qui existe déjà.

index.astro Page
Section py-section
Container site_container
Votre titre prend place.
Contenu
Composant
Des repères communs, à toutes les tailles.
Pour passer à la suite

Votre point de départ.

La base est en place.
Les ressources restent à portée de main.

Le style guide

Les couleurs, textes et composants de ce site.

Dans ce projet

La méthode Client-First

Retrouver le système original de Finsweet.

Finsweet

Astro & Tailwind

Comprendre l’intégration et poursuivre le développement.

Documentation
Quelques repères

Avant de
construire.

À quoi sert ce site de test ?

À vérifier une base Astro + Tailwind avant de développer les pages : variables, styles de texte, composants et comportements sur mobile. Le style guide rassemble les éléments réellement utilisés.

Peut-on changer toute la direction artistique ?

Oui. Les valeurs de Base sont des références à adapter au projet. Les couleurs de Theme décrivent leur usage. Modifier la palette ne nécessite donc pas de renommer les classes dans chaque page.

Comment les espacements s’adaptent-ils au mobile ?

Les espacements de section et les marges latérales sont définis en rem et changent à partir du breakpoint prévu. Les composants utilisent les mêmes variables, sans multiplier les valeurs isolées.

Est-ce une version officielle de Client-First ?

Non. C’est une adaptation indépendante pour tester une méthode de travail avec Astro et Tailwind. Client-First est un système créé par Finsweet, initialement pour Webflow.

La base est prête.
À vous de construire la suite.

Ouvrir le style guide