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

# Proposte di Design — Clinica Veterinaria Formiginese

## Proposta A — "Biophilic Precision"
<response>
<text>
**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
</text>
<probability>0.08</probability>
</response>

---

## Proposta B — "Clinical Warmth" ✅ SELEZIONATA
<response>
<text>
**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
</text>
<probability>0.07</probability>
</response>

---

## Proposta C — "Bold Editorial"
<response>
<text>
**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
</text>
<probability>0.06</probability>
</response>

---

## 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.