Design System Batuca Noventa

Palette de couleurs et exemples d'utilisation

← Retour à l’accueil Instruments (page test)

🟢 Vert - Identité (batuca-green)

#f2fbf4

100

#dcf3e1

200

⭐ Vert tendre (fond)

#b0d7b5

300

#86c592

400

#5aa96a

500

#3f8a52

600

⭐ Vert logo

#327741

700

#275f34

800

#1d4828

900

#13311c

🟡 Jaune - Chaleur (batuca-yellow)

#fffbeb

100

#fff4c7

200

#ffe68a

300

#ffd34d

400

#fccb1f

500

⭐ Jaune logo

#f9c703

600

#d1a800

700

#a78100

800

#7c5c00

900

#4a3700

🔴 Rouge - Énergie (batuca-red)

#fef2f0

100

#fde3de

200

#fac7bd

300

#f6a89b

400

#ea6b56

500

⭐ CTA

#D64933

600

#b83d2b

700

#9a3123

800

#6d231a

900

#401511

⚪ Gris - Neutres (batuca-gray)

⭐ Fond très clair

#fafaf9

100

⭐ Fond clair

#f5f5f4

200

⭐ Séparateurs

#e7e5e4

300

⭐ Bordures

#d6d3d1

400

⭐ Texte secondaire

#a8a29e

500

⭐ Texte

#78716c

600

⭐ Texte fort

#57534e

700

⭐ Titres UI

#44403c

800

⭐ Titres forts

#292524

900

⭐ Noir logo

#000000

Exemples d'utilisation

Card Event retenue.

Boutons

Badges

Nouveau Promo

Card signature

Titre

Contenu de la carte...

Dégradé signature

Batuca

Separator Wave – déclinaisons

Separator Wave

Pulse wave · rythme en mouvement

Pulse Wave · Batuca Noventa

Décors — prévisualisation (SVG & patterns)

Tests “habillage” : rythme, motifs, texture et stickers. Objectif : rendre le site vivant sans le transformer en sapin de carnaval.

1) Pulse — onde derrière un H1

Batuca Noventa

Onde très légère (opacité 6–12%) → ça habille sans voler la vedette.

1bis) Pulse — equalizer bas de hero

Zone “hero” (mock)

Barres basses + opacité faible → “ça tape” sans devenir un jukebox.

2) Motifs “Brazil vibe” modernes

Chevrons

bandeau fin

Losanges

pattern discret

Géométrie + répétition = vibe “tissu / drapeau” sans palmier, sans samba cliché.

3) Texture — halftone & grain

Halftone dots

coin / overlay

Coin décor

Grain / noise

affiche

À utiliser très léger (sinon tu tues le “clean”). 5–12% en overlay suffit.

4) Stickers / badges

Déambulation Scène Percussions brésiliennes Belfort • FC

Ça raconte l’univers en 2 secondes. À doser : 2–4 stickers max par section.

5) Pictos instruments (outline)

Surdo

pulse

Repinique

lead

Agogô

motifs

Tamborim

texture

Sticks

cross

Cloche

accent

Typographie

Deux polices, deux rôles : impact pour les titres, lisibilité pour le texte. Simple, cohérent, efficace (comme un break bien placé).

🎺 Titres — Changa One

H1 / Hero

Batuca Noventa

H2 / Section

Événements & Prestations

H3 / Card

Nuit des Conservatoires

Choix : une typo graphique et mémorable → parfaite pour l’identité, les titres, les stickers.

📖 Texte — Barlow

Body (base)

Barlow est nette, moderne, lisible sur mobile et desktop. Elle laisse les titres respirer sans voler l’attention.

Lead (intro)

Percussions brésiliennes, déambulation & scène — une énergie collective.

UI (labels)

🎵 patterns 📍 Belfort 🕘 20h30

Choix : une sans-serif très lisible, idéale pour contenu, infos d’agenda, boutons.

Règle 1 — Hiérarchie

Un seul H1 par page. H2 pour les sections, H3 pour les cards.

Règle 2 — Contraste

Texte long en gris (700/600). Vert pour titres. Rouge pour CTA / badges.

Règle 3 — Respirations

Line-height confortable sur le texte, titres plus serrés pour “impact affiche”.

Objectif : identité forte + lecture facile. Le titre claque, le texte déroule.

← Retour à l’accueil Instruments (page test)