clinica-veterinaria-formiginese/clinica-app/ideas.md

Proposte di Design — Clinica Veterinaria Formiginese

Proposta A — "Biophilic Precision"

**Design Movement:** Biophilic Modernism — fusione tra rigore medico-scientifico e calore naturale organico.

Core Principles:

• Contrasto tra la precisione clinica (linee nette, spazi bianchi) e la calore della natura (toni verdi, texture organiche)
• Gerarchia visiva costruita su asimmetria controllata: testo a sinistra, immagine a destra in alternanza
• Tipografia editoriale con serif elegante per i titoli e sans-serif leggibile per il corpo
• Microinterazioni fluide che trasmettono cura e attenzione

Color Philosophy:

• Verde salvia profondo #3D6B4F come colore primario (evoca natura, salute, fiducia)
• Bianco caldo #FAFAF7 come sfondo (non freddo, accogliente)
• Oro antico #C9A84C come accento per CTA e dettagli
• Grigio ardesia #4A4A5A per il testo
• Emozione: professionalità rassicurante, non ospedaliera

Layout Paradigm:

• Hero asimmetrico: testo a sinistra su sfondo bianco, immagine animale a destra a piena altezza
• Sezioni servizi in layout "magazine" alternato (immagine-testo / testo-immagine)
• Navigazione orizzontale con logo a sinistra e menu a destra, sticky su scroll

Signature Elements:

• Linea sottile verde che scorre verticalmente come separatore di sezione
• Cerchi sfumati verdi come sfondo decorativo delle card servizi
• Foto animali con bordo organico (clip-path curvilinea)

Interaction Philosophy:

• Hover sulle card: elevazione con ombra morbida e leggero scale
• Scroll: fade-in progressivo delle sezioni con leggero slide-up
• CTA: pulsanti con bordo verde che si riempie al hover

Animation:

• Entrata hero: titolo slide-in da sinistra, immagine fade-in da destra (0.6s ease-out)
• Card servizi: staggered entrance con delay 0.1s tra ciascuna
• Navbar: background blur che appare dopo 80px di scroll

Typography System:

• Display: Playfair Display (serif elegante) — titoli H1/H2
• Body: DM Sans (geometric sans) — testo corrente, navigazione
• Accent: DM Mono per numeri statistici e dettagli tecnici 0.08

---

Proposta B — "Clinical Warmth" ✅ SELEZIONATA

**Design Movement:** Warm Minimalism Clinico — minimalismo caldo ispirato al design scandinavo applicato al contesto medico-veterinario.

Core Principles:

• Spazio bianco generoso come elemento di design attivo, non vuoto
• Fotografia animale come protagonista assoluta: immagini grandi, emozionali, a piena larghezza
• Tipografia mista: serif per i titoli istituzionali, sans-serif geometrico per l'interfaccia
• Palette cromatica che evoca fiducia medica senza freddezza ospedaliera

Color Philosophy:

• Blu petrolio #1B4F72 come colore primario (autorevolezza medica, profondità)
• Sabbia calda #F5F0E8 come sfondo alternativo delle sezioni
• Verde acqua #4ECDC4 come accento per CTA e highlights
• Bianco puro #FFFFFF per le sezioni principali
• Emozione: competenza professionale + calore umano verso gli animali

Layout Paradigm:

• Hero a schermo intero con immagine animale + overlay gradiente + testo sovrapposto
• Sezioni in blocchi alternati bianco/sabbia per ritmo visivo
• Card servizi in layout orizzontale a 3 colonne con immagine in alto
• Team in layout a griglia asimmetrica 2+3

Signature Elements:

• Paw print sottile come watermark decorativo nelle sezioni
• Bordo superiore colorato (3px) sulle card come indicatore di categoria
• Icone lineari custom per i servizi (radiologia, chirurgia, laboratorio)

Interaction Philosophy:

• Hover card: bordo superiore che si espande + leggero lift
• Bottoni CTA con freccia animata al hover
• Immagini hero con parallax leggero su scroll

Animation:

• Hero: fade-in testo con typewriter effect sul titolo principale
• Sezioni: slide-up con opacity transition (intersection observer)
• Statistiche: count-up animation quando entrano nel viewport

Typography System:

• Display: Cormorant Garamond (serif elegante) — H1, H2 istituzionali
• Body: Nunito Sans (humanist sans) — testo corrente, UI
• Accent: Nunito Sans Bold per numeri e statistiche 0.07

---

Proposta C — "Bold Editorial"

**Design Movement:** Editorial Brutalism Soft — ispirato al design editoriale delle riviste di lusso, con contrasti forti e layout audaci.

Core Principles:

• Contrasto estremo bianco/nero come struttura, colore come eccezione
• Tipografia come elemento grafico: titoli enormi che escono dai margini
• Immagini animali in bianco e nero con accenti di colore
• Layout non convenzionale che rompe la griglia standard

Color Philosophy:

• Nero profondo #0D0D0D come colore primario
• Bianco puro #FFFFFF come sfondo
• Rosso corallo #E63946 come unico accento (urgenze, CTA primari)
• Grigio chiaro #F4F4F4 per le sezioni alternate
• Emozione: modernità audace, memorabilità, differenziazione dalla concorrenza

Layout Paradigm:

• Hero con testo gigante (viewport-width) sovrapposto all'immagine
• Sezioni con layout a magazine: colonne di larghezza variabile
• Navigazione laterale verticale su desktop

Signature Elements:

• Titoli in uppercase con letter-spacing estremo
• Linee orizzontali nere come separatori di sezione
• Numeri in grande come decorazione di sfondo

Interaction Philosophy:

• Hover: inversione colore (bianco su nero → nero su bianco)
• Cursore custom con paw print
• Transizioni di pagina con slide orizzontale

Animation:

• Hero: testo che si rivela da sotto una maschera nera
• Scroll: elementi che entrano da direzioni opposte
• Immagini: zoom-in sottile al hover

Typography System:

• Display: Bebas Neue (condensed bold) — titoli impattanti
• Body: Libre Baskerville (serif leggibile) — testo corrente
• UI: Space Grotesk — navigazione e interfaccia 0.06

---

Decisione Finale

Design scelto: Proposta B — "Clinical Warmth"

Motivazione: La proposta B bilancia perfettamente l'autorevolezza medica con il calore emotivo che i proprietari di animali cercano. Il blu petrolio trasmette competenza e fiducia, mentre la palette sabbia e le grandi fotografie animali creano un'atmosfera accogliente. Il layout pulito con sezioni alternate garantisce leggibilità e navigabilità ottimale per tutti i target di utenza.