Grille et mise en page

Container, gouttières, espacement, radius

Gradly utilise la grille et les tokens d’espacement natifs de Tailwind v4. Rien de custom, cohérence maximale avec l’écosystème.

Visualisation de la grille

max-w-7xl (1280 px)

Container principal entouré de gouttières horizontales (padding px-4 / sm:px-6 / lg:px-8)

Container principal

Max-width : max-w-7xl (1280 px).

Utilisé sur toutes les pages du site (homepage, blog, /brand, /telecharger…). Permet une lecture confortable sur desktop tout en restant fluide sur mobile et tablette.

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- contenu -->
</section>

Gouttières horizontales (padding)

Padding latéral responsive qui s’élargit avec la taille d’écran :

Breakpoint	Classe Tailwind	Valeur
Mobile	`px-4`	16 px
Tablette (sm, ≥ 640 px)	`sm:px-6`	24 px
Desktop (lg, ≥ 1024 px)	`lg:px-8`	32 px

Espacement vertical

Hero section

Top padding généreux : pt-32 (128 px) puis lg:pt-40 (160 px) sur desktop
Bottom : pb-20 puis lg:pb-32

Sections classiques

py-16 (64 px) puis lg:py-24 (96 px)

Entre sous-sections d’un même bloc

gap-8 (32 px) ou gap-12 (48 px)

Breakpoints

Valeurs Tailwind par défaut. Pas de customisation dans Gradly.

Nom	Min width	Cibles typiques
`sm`	640 px	Grands téléphones, petites tablettes
`md`	768 px	Tablettes portrait
`lg`	1024 px	Tablettes paysage, laptops 13”
`xl`	1280 px	Desktop standard
`2xl`	1536 px	Grands écrans

Baseline d’espacement

Tous les espacements sont des multiples de 4 px (système Tailwind natif) :

Classe	Valeur
`gap-1` / `m-1` / `p-1`	4 px
`gap-2` / `m-2` / `p-2`	8 px
`gap-4`	16 px
`gap-6`	24 px
`gap-8`	32 px
`gap-12`	48 px
`gap-16`	64 px

Éviter d’introduire des espacements non-Tailwind (gap-[10px] par exemple) sauf cas très spécifique.

Border radius

Trois tailles principales :

Classe	Valeur	Usage
`rounded-lg`	8 px	Boutons secondaires, cartes de contenu
`rounded-xl`	12 px	CTA principaux, inputs formulaires
`rounded-2xl`	16 px	Sections importantes (hero screenshot), cards hero
`rounded-full`	∞	Badges, avatars, icônes circulaires

Éviter rounded-sm (2 px, trop discret pour être perçu) et rounded-3xl (trop arrondi, casse le rythme sobre).

Ombres

Par défaut, ombres très subtiles ou absentes (design plat, aligné avec le ton sobre) :

shadow-sm : cartes de liste
shadow-lg shadow-blue-500/25 : CTA principal du hero (avec teinte bleue)

Pas d’ombre portée lourde (shadow-2xl) qui détonnerait.