Brandbook — Ateneu Instructiu

Identitat visual

Colors

Paleta completa extreta de CustomStyles.astro. El blau primari és el color identitari de l'Ateneu; el cel clar és el fons que dona calidesa.

Primary

#0054A4

Botons, links, accents

Secondary

#3498DB

Hover, gradients

Accent

#2980B9

Destacats secundaris

Navy

#1E3A5F

Titulars, capçaleres

Sky

#B0D8FB

Fons de pàgina

Surface

#FFFFFF

Targetes, panells

Text heading

#1F2937

Títols principals

Text body

#374151

Cos de text

Muted

#6B7280

Metadades, subtítols

Border

#E5E7EB

Línies divisores

Success

#16A34A

Confirmació, OK

Error

#DC2626

Errors, alertes

Tipus

Tipografia

Inter Variable per a tot. Versàtil, llegible en pantalles petites, perfecta per a un públic familiar i no expert en tecnologia.

Display

56px / 800

Ateneu

40px / 700

Títol principal

30px / 700

Secció destacada

22px / 600

Subsecció o targeta

Body LG

18px / 400

Text introductori amb la informació essencial de la secció.

Body

15px / 400

Text estàndard per a cossos de targeta, descripcions i contingut general.

Small

13px / 400

Metadades, dates, subtextos i informació secundària.

Label

11px / 700

ETIQUETA DE SECCIÓ

Espai i ritme

Espaciat

Escala basada en múltiples de 4px. Coherència visual a totes les pantalles.

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

24px

--space-6

32px

--space-7

48px

--space-8

64px

--space-9

96px

UI Kit

Components

Elements reutilitzables. Cada component té un estat hover animat per donar feedback immediat a l'usuari.

Botons

Etiquetes / Badges

● Actiu ✓ Completat ⚠ Pendent ✕ Error Opcional

Targetes (passa el ratolí per sobre)

📅

Calendari

Activitats diàries del casal, configurables des del panel d'administració.

📄

Documents

DNI, targeta sanitària i informes mèdics requerits per a la inscripció.

📸

Fotos

Galeria de fotografies de les activitats del casal.

✉️

Contacte

Formulari directe a l'equip del casal, amb les dades de la família incloses.

Inputs (fes clic per veure el focus)

Email o telèfon

Contrasenya

Moviment

Animacions

Totes les animacions d'entrada es disparen quan l'element entra al viewport (IntersectionObserver). Durada base 350ms, easing ease-out. El moviment és subtil i no intrusiu per al públic familiar.

Fade Up fade-up

L'entrada més habitual. Puja 24px i apareix. Ideal per a seccions, títols i targetes.

Apareixo pujant des de baix ↑

Fade In fade-in

Entrada suau sense desplaçament. Per a imatges, fons i elements que no cal moure.

Apareixo suaument sense moure'm

Scale In scale-in

Creix lleugerament en entrar. Perfecte per a botons CTA, modals i elements destacats.

Creixo en entrar ↗

Slide In slide-left / slide-right

Per a seccions d'imatge+text on cada meitat entra des d'un costat diferent.

← Vinc de l'esquerra

Vinc de la dreta →

Pop In pop-in

Rebota lleugerament en entrar (spring easing). Per a badges, notificacions i icones.

🔔 3 ✓ Pujat ⚠ Pendent

Stagger delay-1 … delay-5

Diversos elements apareixen seqüencialment amb 80ms de retard entre ells. Per a llistes, graelles i menús.

Element 1

Element 2

Element 3

Element 4

Element 5

Element 6

Menú lateral slide + fade

El drawer llisca des de la dreta mentre el fons s'enfosqueix amb fade. El botó hamburger (☰) es converteix en creu (✕) de forma animada. Fes clic per provar-ho.

Navegació

Inici

Documentació

Calendari

Fotos

Equip

Contacte

Fes clic al botó ☰ per obrir · Clic al fons fosc per tancar

Hover Interactions

Resposta immediata al ratolí. Feedback visual que confirma que l'element és interactiu.

↑ Lift — targetes i links

→ Scale — botons principals

✦ Glow fill — botons outline

Ús pràctic

Quan usar cada animació

Guia de referència per a noves funcionalitats. Cada element nou ha d'escollir una animació d'aquesta taula.

Context	Animació recomanada	Classe	Motiu
Seccions de pàgina, títols H2/H3	Fade Up	`anim-fade-up`	Entrada natural i no intrusiva
Targetes en graella (stagger)	Fade Up + delay	`anim-fade-up delay-N`	Seqüència visual que guia l'ull
Imatges de fons i heroes	Fade In	`anim-fade-in`	Suau, sense distreure del contingut
CTA principal, botons destacats	Scale In	`anim-scale-in`	Crida l'atenció sense agressivitat
Seccions imatge + text (dos columnes)	Slide Left + Right	`anim-slide-left / right`	Indica separació visual entre les dues meitats
Badges, notificacions, icones	Pop In	`anim-pop-in`	Dóna vida sense soroll
Botons i links (hover)	Lift o Scale	`hover-lift / hover-scale`	Feedback immediat al clic
Modals i drawers (obrir)	Scale In o Slide Right	CSS transició inline	Orienta l'usuari sobre l'origen de l'element

Principis de disseny

👨‍👩‍👧

Públic familiar

Les famílies i les persones grans valoren la claredat per sobre de l'efectisme. Cap animació ha de distreure de la informació.

⚡

Percepció de velocitat

Màxim 600ms per a qualsevol transició. Si l'usuari ha d'esperar, mostrar un skeleton o spinner, no bloquejar la interfície.

📱

Mobile-first

Totes les animacions funcionen al mòbil. Les targetes en graella fan scroll horitzontal en pantalles petites. Cap element desborda el viewport.

♿

Accessibilitat

Respectar prefers-reduced-motion. Les animacions han d'afegir valor, no ser requisit per entendre el contingut.

🎨

Coherència

Sempre blau primari #0054A4 per a accions. Verd per a confirmació. Vermell per a errors. No inventar colors nous sense actualitzar aquest brandbook.

🔤

Tipografia única

Inter Variable per a tot: web, email, admin. No barrejar fonts. Pesos: 400 cos, 500 UI, 600 labels, 700 títols, 800 display.