Design system

Il template è agnostico dallo stile: i componenti non conoscono colori, font o loghi. Tutto passa da src/styles/tokens.css. Se ti trovi a scrivere un hex dentro un componente, stai sbagliando posto.

I token

Tailwind 4 legge i token da @theme e genera le utility (--color-fg → text-fg, bg-fg, border-fg).

Token	Ruolo
--color-bg	sfondo pagina
--color-panel	sezioni alternate
--color-surface	contenitori e card grandi
--color-card	card e campi form
--color-line	bordi e divisori
--color-fg	testo principale
--color-muted	testo secondario
--color-accent / --color-accent-hover	CTA, link, badge
--color-accent-fg	testo sopra l’accento
--color-overlay / --color-on-overlay	velo scuro sulle foto e testo sopra
--color-whatsapp	pulsante WhatsApp
--color-danger	errori form

Tipografia: --text-hero, --text-h1…--text-h4, con line-height dedicate. Motion: durate e curve (--motion-*) usate da reveal e transizioni.

Brand JEVIS

La palette di default del template è neutra e scura di proposito. Per un sito JEVIS i valori dei token diventano quelli del Brand Book:

Ruolo	Colore
Sfondo	bianco #FFFFFF; sezioni alternate --jevis-grey-bg #F2F2F2
Testo e titoli	Midnight Blue #2E436A
Accento, CTA, link	Impactful Red #CD212A
Bordi e divisori	Blu 20% #D5D9E1

• Font: Poppins per i titoli (--font-display), Inter per il corpo (--font-sans).
• Il gradiente rosso → blu è quello del logo: non ricrearlo e non usarlo come sfondo di sezione.
• Logo: gradiente su fondo chiaro, versione bianca su blu, rosso, gradiente o foto. Mai ricolorato, inclinato o con ombre.
• Nessun colore fuori dalla palette e nessun hex nei componenti: si passa sempre dai token.

Cambiare brand

1. Apri src/styles/tokens.css.
2. Sostituisci i valori dei colori (e i font, se serve).
3. Aggiorna src/data/site.ts (nome, logo, CTA, descrizione).
4. Sostituisci public/logo.svg e public/favicon.svg.

I componenti non vanno toccati. Se cambi palette, controlla:

• contrasto di fg su bg e di accent-fg su accent;
• on-overlay: in un tema chiaro il velo sulle foto resta scuro, quindi il testo sopra deve restare chiaro. Per questo esiste un token separato da fg.
• stati hover/focus: accent-hover deve essere distinguibile.

Tema chiaro

La palette di default è scura. Per un tema chiaro si invertono bg/fg/surface/panel/ line e si sceglie un accento con contrasto sufficiente. I componenti funzionano perché non assumono “bianco su nero”: assumono solo i token.

Tipografia e spaziature

• Font self-hosted via @fontsource: nessuna richiesta a Google Fonts (privacy + performance).
• Scale semantiche: usa text-h2, text-hero, non text-4xl sparsi.
• Sezioni: py-24, container mx-auto max-w-7xl px-6. Le eccezioni vanno motivate.
• Titoli: font-bold/font-black e tracking-tight solo dove serve personalità.

Motion

• Un solo pattern di reveal on-scroll (data-reveal), intensità bassa.
• prefers-reduced-motion disattiva reveal, marquee e transizioni.
• Niente animazioni infinite decorrenti; l’unica è il carosello partner, che si ferma on hover e in reduced motion diventa scrollabile.

Accessibilità (minimo non negoziabile)

• :focus-visible globale con outline sull’accento.
• Menu mobile con <details> nativo: zero JS, funziona da tastiera.
• FAQ con <details>: stessa logica.
• Form: label esplicite, aria-invalid, aria-describedby, errori testuali, honeypot nascosto con aria-hidden.
• Mappa: nessuna richiesta a Google prima del consenso.
• Contrasto e testi alternativi vanno verificati a mano su ogni sito nuovo.

Immagini

• Le immagini vengono da WordPress come URL (ID media risolti in build).
• Nei componenti si usa <img> con referrerpolicy="no-referrer", loading="lazy" tranne le prime immagini della pagina.
• Le proporzioni sono fisse (aspect-[4/5], aspect-[3/4]): evitano layout shift.
• Il dominio WordPress va autorizzato in astro.config.mjs se un giorno si passa a <Image> di Astro; oggi i componenti usano <img>.

Regole pratiche

• Vietato text-white, bg-black, text-slate-*, hex inline nei componenti.
• Un componente nuovo deve funzionare con una palette chiara e una scura senza modifiche.
• Le varianti di sezione si fanno con classi di layout, non duplicando componenti.
• Se una regola di stile serve a un solo cliente, resta nel suo sito: non torna nel template.