Couleurs

Couleurs de marque

Main (Background)

#FDFDFD - Off-white

Secondary (Text)

#0c0b0b - Near-black

Primary (CTA)

#8B5CD9 - Violet

Palette Primary/Accent (Violet)

100

200

300

400

500

600

700

800

900

950

500 = bordures/accents | 600 = boutons CTA (usage principal)

Palette Neutral (Gris)

100

200

300

400

500

600

700

800

900

950

600 = texte secondaire courant

Couleurs sémantiques (usage minimal)

Success

#228452

Error

#C64C4C

Warning

#F59E0B

Info

#3B82F6

Typographie

Police : Poppins | Poids : 300, 400, 500, 600, 700

Redimensionnez la fenêtre pour voir les tailles responsives

H1 Desktop: 55px | Tablet: 40px | Mobile: 32px

H1 Bold (700)

H1 Semi-Bold (600)

H2 Desktop: 40px | Tablet: 30px | Mobile: 25px

H2 Bold (700)

H2 Semi-Bold (600)

H3 Desktop: 30px | Tablet: 25px | Mobile: 22px

H3 Bold (700)

H3 Medium (500)

H4 Desktop: 25px | Tablet: 22px | Mobile: 20px

H4 Semi-Bold (600)

H4 Medium (500)

Body Big Desktop: 21px | Tablet: 20px | Mobile: 19px

Body Big Regular (400) - Lorem ipsum dolor sit amet.

Body Big Light (300) - Lorem ipsum dolor sit amet.

Body 18px (tous breakpoints)

Body Regular (400) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body Light (300) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body Small 16px (tous breakpoints)

Body Small Regular (400) - Lorem ipsum dolor sit amet.

Body Small Medium (500) - Lorem ipsum dolor sit amet.

Tags 14px

Tags Regular (400) - Lorem ipsum dolor sit amet.

Tags Medium (500) - Lorem ipsum dolor sit amet.

Styles spéciaux

L'espace où les marques grandissent.

Tracking wide + uppercase

Tracking wider + uppercase

Boutons

Primary (CTA)

Effet shine au hover - passez la souris

Secondary (Outline)

CTA Links (Style Navigation)

Devenir membre Decouvrir

Passez la souris pour voir l'animation des icones

Tailles

Cards

Card Standard

Bordure primary-500, effet shine au hover, elevation au hover.

Card Feature

Card avec icone dans cercle violet.

Card Accent

Background primary-600 pour mise en avant.

Badges & Tags

Badge Primary Badge Outline Tag Neutral Success Error

Navigation

Logo

Devenir membre

Style: bg-main/80 backdrop-blur-md rounded-[10px] shadow-sm

Espacement entre sections

Mobile

50px

< 768px

py-[50px]

Tablet

70px

768px - 1023px

md:py-[70px]

Desktop

120px

>= 1024px

lg:py-[120px]

Border Radius

Pill

100px

Standard

10px

Small

5px

Full

Circle

Shadows

Sans shadow

border only

Shadow SM

Navigation, dropdowns

Custom Shadow

Cards avec profondeur

Transitions


                    Standard: transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]


                    Durations: 300ms (rapide) | 500ms (standard) | 700ms (shine)