🎨 Palette Colori

La palette punta su toni eleganti, sobri e classici, ispirati ai materiali degli orologi (acciaio, bronzo, pelle).

Colori Principali

• Oro antico – #C5A572
  Usalo per dettagli, icone, linee di separazione, micro-decorazioni.
• Blu notte – #0F1A2B
  Colore istituzionale, ideale per header, footer e titoli.
• Avorio caldo – #F7F4EC
  Sfondo principale, chiaro ma non “bianco ottico”.

Colori Secondari

• Acciaio freddo – #9FA6AC
  Per bordi, hover delicati, icone secondarie.
• Marrone cuoio – #7A4E2D
  Richiamo alle cinture degli orologi in pelle.

Feedback States

• Success – #4C8E55
• Warning – #C98B2D
• Error – #B6453C

---

🔠 Tipografia

Scegli font con un tono classico, leggibili e mai eccessivamente moderni.

Font Consigliati

• Titoli: Playfair Display o Cormorant Garamond
  (Stile elegante, serif tradizionale)
• Testo: Inter o Lato
  (Puliti e chiari, perfetti per la leggibilità)

Gerarchia Tipografica

• H1 – 48px / Bold / Blu notte
  Esempio: “Restauro Orologi a Roma dal 1960”
• H2 – 36px / Semibold
• H3 – 28px / Medium
• H4 – 22px / Medium
• Paragrafo – 16–18px / Regular / Line-height 1.5–1.7
• Caption – 14px

---

🧱 Spaziature & Layout

Per dare un look ordinato e artigianale con un tocco premium:

• Grid a 12 colonne
• Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
• Bordi arrotondati: minimi → 4px
• Uso frequente di linee sottili (1px) color acciaio freddo

---

🧩 Componenti UI

Buttons

Button Primario

• Background: Blu notte (#0F1A2B)
• Text: Avorio (#F7F4EC)
• Border radius: 4px
• Padding: 12px 24px
• Font: Inter Medium

Hover:

• Background: #18273D
• Transition 150–200ms

Focus:

• Anello dorato (shadow 0 0 0 3px #C5A57244)

---

Button Secondario

• Border: 1px Blu notte
• Background: trasparente
• Text: Blu notte

Hover:

• Background: #0F1A2B15

---

Button Tertiario (link style)

• Text: Marrone cuoio (#7A4E2D)
• No bordo

Hover:

• Colore leggermente più scuro: #653F25

---

Cards (per servizi, recensioni, prodotti)

• Background: Avorio
• Border: 1px acciaio freddo
• Shadow molto leggero
• Spacing interno: 24px
• Titolo: Playfair Display
• Immagine sempre con bordi 4px

---

Form inputs

• Background: bianco
• Border: 1px #9FA6AC
• Radius: 4px
• Padding: 12px
• Font: Inter Regular

Hover:

• Border: 1px Blu notte

Focus:

• Border: 1px Oro antico
• Shadow: 0 0 0 2px #C5A57233

---

🖼 Stile Immagini

• Fotografie nitide di orologi, ingranaggi, banco da lavoro.
• Tono colore leggermente caldo.
• Niente filtri moderni o saturazioni elevate.
• Usa molta luce naturale o neutra.

---

🔗 Iconografia

• Icone outline sottili (1.5px)
• Colore: Blu notte o acciaio
• Stile: Feather Icons o Heroicons outline

---

✨ Micro-interazioni

Eleganti, non moderne:

• Transizioni tra i 120 e i 180 ms
• Fade e slide molto leggeri
• Nessuna animazione rimbalzata / elastic

---

🔍 Stile globale

Il mood generale deve essere:

• elegante
• artigianale
• senza tempo
• non tecnologico
• accogliente

Un mix tra bottega romana e alta orologeria.