Apuano Capital · Linee guida del brand
Brand Book
Il riferimento digitale dell’identità Apuano Capital: logo, colori, tipografia, immagini, componenti e le regole che li tengono insieme.
Versione 1.0 · Ottobre 2026 · Documento interno, non indicizzato
Capitolo 01
Logo
Il logo Apuano Capital, le sue varianti e le regole d’uso.
Logo principale
Logo completo
File master apuano-logo-official-brandbook.svg (Media 952): è il logo di header e footer del sito (Media 942/943). «Apuano» dal PDF ufficiale, CAPITAL largo fino alla «n», la “A” è l’immagine ufficiale a 1200 dpi con le sue sfumature. Inserito come elemento SVG di Elementor, in linea: la scritta si ricolora con --ap-logo-word, la “A” resta sempre nei suoi colori.
Varianti
Marchio “A”
apuano-mark-official.svg (Media 953): la “A” ufficiale da sola, per favicon ed elementi grafici.
Logo su scuro — in uso nell’header
Scritta in bianco, “A” nei suoi colori originali, su fondo Dark (marrone scuro). È il logo dell’header e del footer del sito (Media 942/943). Scritta/fondo 13:1.
Marchio su scuro
La “A” resta nei suoi colori originali anche su Dark.
Token colore
Logo word
--ap-logo-word
#675849
Scritta “Apuano”: 5,87:1 su Paper.
Logo accent
--ap-logo-accent
#F19E0E
“A” e “CAPITAL”: elemento grafico, non testo corrente.
Come si ricolora
- La scritta (Apuano e CAPITAL) legge var(--ap-logo-word): su fondo scuro si ridefinisce sul contenitore.
- La “A” è l’immagine ufficiale con le sue sfumature: non si ricolora mai.
- Nei file per l’elemento SVG di Elementor la “A” va in PNG (xlink:href): Elementor toglie le immagini webp incorporate e la “A” sparirebbe.
- Usato come immagine (<img>) il logo resta nei colori originali.
Area di rispetto e dimensione minima
Area di rispetto — proposta
Su ogni lato almeno metà dell’altezza della “A” (x/2). Nell’area tratteggiata non entrano testi, immagini o bordi. Da confermare.
Dimensione minima — proposta
Schermo: logo completo almeno 120px di larghezza (nell’header mobile è 150px); marchio almeno 24px. Attenzione: nel logo master “CAPITAL” è molto piccolo (circa 5px nell’header desktop): per lo schermo è in valutazione la versione “digitale” con CAPITAL ingrandito 2× (apuano-logo-digital.svg). Stampa: da confermare.
Usi scorretti
✕ Non deformare
Mai cambiare le proporzioni del logo.
✕ Non ruotare
Il logo sta sempre in orizzontale.
✕ Non cambiare i colori
Solo le combinazioni previste dai token.
✕ Non aggiungere effetti
Niente ombre, contorni, gradienti o trasparenze.
✕ Non usare su fondi senza contrasto
Sull’arancio la “A” scompare.
✕ Non ricomporre il nome
Mai riscrivere “Apuano Capital” con un altro carattere.
Capitolo 02
Colore
Superfici minerali calde, bande scure marrone-nero e un unico accento arancio.
Colori primari
Stone Taupe
HEX #675849
RGB 103 88 73
Amber Glow
HEX #F19E0E
RGB 241 158 14
Colori secondari
Burnt Orange
HEX #DB7A1B
RGB 219 122 27
Espresso
HEX #251D17
RGB 37 29 23
Linen
HEX #E6DDCD
RGB 230 221 205
Oat
HEX #DACEB8
RGB 218 206 184
Regole d’uso
- Linen ed Espresso si alternano; nessun gradiente, nessuna ombra.
- Il Burnt Orange è solo un accento.
- Mai arancio per testo corrente su fondo chiaro.
Capitolo 03
Tipografia
Due caratteri Google Fonts: Cormorant Garamond, un serif classico per i titoli, e Open Sans, un sans serif leggibile per tutto il resto.
Caratteri
Aa
Cormorant Garamond
Serif · Google Fonts · peso 500 · variabile --ap-font-display
Titoli, numeri, citazioni.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 € % & ( ) ? !
Medium 500
Aa
Open Sans
Sans serif · Google Fonts · pesi 400 / 600 / 700 · variabile --ap-font-copy
Testi, eyebrow, navigazione, bottoni, form.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 € % & ( ) ? !
Regular 400 — Independent financial expertise
Semibold 600 — Independent financial expertise
Bold 700 — Independent financial expertise
Scala fluida
Valori clamp() lineari tra 375px e 1600px di viewport, in rem: nessun override per breakpoint. Il campione si ridimensiona con la finestra.
--ap-fs-h1-xl
Apuano Capital
90 → 156px
--ap-fs-h1
Apuano Capital
52 → 112px
--ap-fs-h2
Apuano Capital
42 → 72px
--ap-fs-h3
Apuano Capital
26 → 32px
--ap-fs-h4
Apuano Capital
21 → 24px
--ap-fs-number
Apuano Capital
28 → 40px
--ap-fs-lead
Apuano Capital
17 → 20px
--ap-fs-body
Apuano Capital
15 → 17px
--ap-fs-small
Apuano Capital
13 → 14px
--ap-fs-eyebrow
Apuano Capital
11 → 12px
--ap-fs-nav
Apuano Capital
14px fisso
--ap-fs-button
Apuano Capital
13px fisso
Stili di testo
Ogni stile è una classe globale V4: si applica la classe, mai stili locali. Un solo H1 per pagina; il livello del titolo (h1–h4) segue la struttura, la classe dà l’aspetto.
Eyebrow
.ap-eyebrow
Open Sans 700 · 11 → 12px · maiuscolo · spaziatura 0,16em · arancio
Independent financial expertise
H1 Home
.ap-h1-xl
Cormorant Garamond 500 · 90 → 156px · interlinea 0,80 · spaziatura −0,035em · solo Home
Apuano
H1 pagine interne
.ap-h1-display
Cormorant Garamond 500 · 52 → 112px · interlinea 0,90 · spaziatura −0,045em
About Apuano
H2
.ap-h2
Cormorant Garamond 500 · 42 → 72px · interlinea 0,96 · spaziatura −0,04em
Connecting both sides of the market
H3
.ap-h3
Cormorant Garamond 500 · 26 → 32px · interlinea 1,05 · spaziatura −0,02em
Apuano Flexible Bond
H4
.ap-h4
Cormorant Garamond 500 · 21 → 24px · interlinea 1,10
Investment Style and Objective
Numero
.ap-number
Cormorant Garamond 500 · 28 → 40px · interlinea 1,00 · arancio
01
Lead
.ap-lead
Open Sans 400 · 17 → 20px · interlinea 1,55
Apuano Capital, Lugano: independent developer and distributor of funds, structured products and notes for institutional investors in Switzerland and Southern Europe.
Body
.ap-body
Open Sans 400 · 15 → 17px · interlinea 1,65
Apuano Capital, Lugano: independent developer and distributor of funds, structured products and notes for institutional investors in Switzerland and Southern Europe.
Small
.ap-small
Open Sans 400 · 13 → 14px · interlinea 1,50
Via Canova 1, 6900 Lugano (CH)
Capitolo 04
Elementi grafici
Segni grafici ricorrenti, nati dal territorio delle Alpi Apuane e dal marchio.
Rilievo a punti
Le Alpi Apuane a punti
Il rilievo reale delle Alpi Apuane disegnato a punti (WebGL), nato dalla pagina Launching Soon e usato nella banda Team della Home. Passando il mouse i punti si illuminano. Dati TINITALY / INGV, licenza CC BY 4.0.
Montagna e marchio
Il crinale
Le Alpi Apuane al tramonto, scontornate (Media 369): apertura della pagina About, dove il testo scorre dietro la montagna.
La “A” come forma
Pannello arancio con la “A” del marchio ritagliata, tono su tono: card del team in Home e pagina Team.
Frecce
Frecce lineari
Linea sottile, punta aperta. → collega due blocchi, ← indica il ritorno, ↓ guida gli schemi verticali; la freccia dei link testuali si sposta di 4–5px al passaggio del mouse.
Regole d’uso
- Gli elementi grafici nascono dal territorio e dal marchio: niente illustrazioni generiche o immagini stock.
- Al massimo uno per sezione, mai sopra il testo in modo da ridurne la leggibilità.
- Sono decorativi: aria-hidden, nessun testo dentro le grafiche.
- Movimento lento; con “riduci movimento” restano fermi.
Capitolo 05
Iconografia
Icone isometriche che descrivono la struttura di Apuano: ferme come icona, animate per dare vita alle pagine.
Icone di struttura
Passa il mouse sopra un’icona per vederla animata. Ferma, è l’icona statica.
Fondi propri
Own funds · una moneta atterra sulla pila più alta. Home, hero Funds.
Distribuzione di terzi
Third-party distribution · un pacco passa da un lato all’altro. Home, hero Distribution.
Società e team
Company and team · le finestre dell’edificio si accendono a turno. Home, About.
Versione lineare
Le stesse tre icone in versione a linea: fallback senza JavaScript e usi piccoli, sotto i 64px.
Fondi propri
Distribuzione di terzi
Società e team
Regole d’uso
- Icone decorative: aria-hidden, il significato è sempre nel testo accanto.
- Isometriche, costruite con un unico sistema e i colori Apuano: nessuna icona inventata o presa da librerie esterne.
- Movimento lento e breve: sul sito si animano quando entrano nello schermo, qui al passaggio del mouse.
- Con “riduci movimento” attivo restano ferme.
- Dimensioni: 340px negli hero, 220px nelle schede, 120px nelle righe indice (64px su mobile).
Capitolo 06
Immagini
Fotografia che lega il brand alle Alpi Apuane: crinali, marmo e luce radente. Il paesaggio è il territorio da cui nasce il nome, non una decorazione.
Direzione fotografica
Crinali nella nebbia
La foto di riferimento della direzione fotografica: strati di crinali, nebbia e luce dorata (Media 585).
La casa in pietra in montagna
Architettura e montagna insieme: pietra, linee orizzontali, creste accese dall’ultimo sole (Media 648). Sfondo della banda contatto «Start a conversation» in fondo a ogni pagina e immagine di news.
La loggia sul lago
Ritmo di pilastri in pietra, ombre profonde, il lago e le montagne nella foschia della sera (Media 647). Immagine di news.
Le creste all’ora blu
Vette accese da un filo d’arancio sopra strati di crinali blu e nebbia di valle (Media 649). Immagine di news.
Il dettaglio di facciata
Travertino e mattone nella luce radente: la materia del brand da vicino (Media 645). Immagine di news.
Cosa fotografare
- Le Alpi Apuane: crinali, vette, nebbie di valle.
- Architettura in pietra (travertino, mattone, cemento chiaro): volumi netti, logge, interni con grandi aperture sulle montagne o sul lago.
- Luce radente di alba e tramonto, oppure l’ora blu: toni caldi che dialogano con l’arancio del brand, ombre blu ardesia.
- Inquadrature ampie e orizzontali, con profondità e strati di montagne; linee verticali dritte negli edifici.
- Niente cave di marmo, boschi o persone. Le immagini generate ritraggono luoghi inventati: alt e didascalie restano generici.
Ritratti
Scontornato su arancio
Card del team in Home e pagina Team: ritratto scontornato su pannello arancio con la «A» del marchio (Media 277, 278).
Ritratto originale
Sfondo neutro, luce morbida laterale, sguardo in camera, mezzo busto. Da qui si ricava lo scontornato (Media 130, 131).
Testo sopra le foto
Next step
Start a conversation
Velatura uniforme
Variabile ap-overlay (Dark al 52%) su tutta la foto: banda contatto. Il testo chiaro resta leggibile ovunque.
Company · 14 Oct 2026
News headline
Sfumatura dal basso
Copertina della singola news: gradiente da Dark a trasparente, testo in basso; la parte alta della foto resta libera.
Formati e regole
Formati e peso
- WebP, qualità 70–82, metadati rimossi.
- Card e news: 1280 px sul lato lungo, fino a circa 200 KB.
- Sfondi a tutta larghezza: 1600–1920 px, fino a circa 300 KB.
- Soggetto al centro: le card tagliano la foto in 3:2 e 16:9.
- Nome file inglese in kebab-case, titolo, alt inglese e descrizione; ogni immagine va in MEDIA-ACCESSIBILITY.
Da evitare
- Stock finanziario: grafici, monete, strette di mano, skyline, uffici in vetro.
- Persone in posa generiche o figure anonime nel paesaggio.
- Testo dentro le immagini: non si traduce con WPML.
- Foto verticali come sfondo e PNG pesanti non compressi.
- Testo sopra una foto senza velatura.
Capitolo 07
Stationery
Biglietto da visita, carta intestata e firma email: la stessa identità del sito applicata ai formati di tutti i giorni. Altri materiali si aggiungeranno qui se serviranno.
Biglietto da visita
Fronte e retro
Mock-up del biglietto di Andrea Favilla. File di lavoro: 04 - Designs/Biglietto da visita (InDesign e PDF).
Fronte
Solo il logo completo, centrato su fondo carta. Nessun altro elemento.
Retro
Logo in alto, nome in Cormorant Garamond, ruolo in Open Sans; in basso QR code e contatti, il sito in grassetto. A destra la “A” del marchio in grande, tagliata dal bordo, tono su tono.
Specifiche
- Formato 85 × 55 mm (standard svizzero), stampa fronte e retro.
- Font: nome in Cormorant Garamond (in tracciati nel PDF), ruolo e contatti in Open Sans Regular, sito in Open Sans Bold.
- Colori nel PDF: fondo #EFE8D9, logo e contatti #66594A, “A” #F29E0D, nome e ruolo #231F20, forma della “A” #FBFAF7.
- Contatti: Via Canova 1, 6900 Lugano (CH) · +41 91 9222 513 · info@apuano-capital.com · apuano-capital.com.
- To confirm: email e telefono per persona, destinazione del QR code, abbondanza di 3 mm per la stampa (il PDF è al vivo), valori CMYK/Pantone.
Carta intestata
Foglio A4
Mock-up della carta intestata. File di lavoro: 04 - Designs/Carta intestata (PDF).
Impaginato
Logo in alto a sinistra; in basso a sinistra QR code e contatti; la “A” del marchio in grande, tagliata dal bordo, in basso a destra.
Specifiche
- Formato A4 (210 × 297 mm), solo fronte, fondo bianco.
- Area di scrittura libera tra il logo e il piede: il testo della lettera non entra nella forma della “A”.
- Contatti in Open Sans Regular, sito in Open Sans Bold, nel colore del logo; stessi dati del biglietto da visita.
- Forma della “A” in tono carta chiarissimo (#F7F3EB nel PDF).
- To confirm: versione Word/Pages per scrivere le lettere, carta e grammatura, abbondanza per la stampa, CMYK/Pantone.
Firma email
Apuano Capital SA
Via Canova 1, 6900 Lugano (CH)
+41 91 9222 513 · +41 91 9222 514
Modalità chiara
Monogramma arancio, filetto verticale arancio, nome in Cormorant Garamond, dati in Open Sans grigio caldo, link arancio in grassetto.
Apuano Capital SA
Via Canova 1, 6900 Lugano (CH)
+41 91 9222 513 · +41 91 9222 514
Modalità scura
Stessa struttura: il monogramma e il filetto restano arancio, il nome passa a On dark (#F8F1E9) e i dati a On dark muted (#C9BEB3).
Specifiche
- HTML a tabelle con stili in linea; versione scura con prefers-color-scheme (Apple Mail, iOS, Outlook per Mac). File: code/email-signature/.
- Monogramma: PNG 96 × 98 px mostrato a 48 px (Media 615), con sfondo trasparente.
- Font: Cormorant Garamond 22 px e Open Sans 12 px; Outlook e Gmail usano Georgia e Arial.
- Link #E98713 in grassetto: su bianco il contrasto è 2,6:1, quindi resta solo per il sito e mai per testo lungo.
- Nome e ruolo della persona: da aggiungere sopra “Apuano Capital SA” se serve (To confirm).
Capitolo 08
Download
Asset del brand pronti all’uso: logo, icone, font e codici colore.
Logo
File vettoriali originali, gli stessi usati sul sito. Si aprono in una nuova scheda: da lì “Salva con nome”.
Logo completo
apuano-logo-official-brandbook.svg · logo ufficiale, come nel sito · scritta ricolorabile con --ap-logo-word
Versioni PNG ad alta risoluzione e PDF per la stampa: da preparare.
Icone
Icona
Lineare
Isometrica animata
Font
Entrambi i caratteri sono gratuiti su Google Fonts, con licenza SIL Open Font License.
Codici colore
Valori per lo schermo. CMYK e Pantone per la stampa: da definire.
Colore
HEX
RGB
Variabile CSS
Paper
#F2EDE4
242 · 237 · 228
var(--ap-paper)
Paper deep
#E9E0D3
233 · 224 · 211
var(--ap-paper-deep)
Dark
#251D17
37 · 29 · 23
var(--ap-dark)
Ink
#241C16
36 · 28 · 22
var(--ap-ink)
Muted
#6B6056
107 · 96 · 86
var(--ap-muted)
On dark
#F8F1E9
248 · 241 · 233
var(--ap-on-dark)
On dark muted
#C9BEB3
201 · 190 · 179
var(--ap-on-dark-muted)
Orange
#E98713
233 · 135 · 19
var(--ap-orange)
Logo word
#675849
103 · 88 · 73
var(--ap-logo-word)
Logo accent
#F19E0E
241 · 158 · 14
var(--ap-logo-accent)
White
#FFFFFF
255 · 255 · 255
var(--ap-white)
Pacchetto completo in un unico file ZIP (logo, icone, palette): da preparare.
Capitolo 09 · Sito web
Layout e griglia
La struttura su cui è costruita ogni pagina.
Contenitore e margini
Struttura di ogni sezione: sezione a tutta larghezza (ap-section) → contenitore centrato (ap-shell, max 1600px + margine laterale fluido) → contenuto.
Sezione · ap-section — il margine laterale qui sotto è --ap-gutter reale alla larghezza attuale
Contenitore · ap-shell · max 1600px
--ap-shell-max
Larghezza massima del contenuto, centrato.
1600px
--ap-gutter
Margine laterale fluido del contenitore.
20 → 64px
--ap-header-h
Altezza dell’header sticky.
68 → 90px
--ap-measure
Colonna di lettura per testi lunghi e legali.
960px
--ap-measure-text
Colonna del testo degli articoli News.
760px
--ap-measure-sm
Colonna stretta per introduzioni.
560px
Scala delle spaziature
Distanze tra elementi (gap) e padding verticale delle sezioni. Le barre mostrano il valore reale alla larghezza attuale.
--ap-gap-2xs
8px
--ap-gap-xs
16px
--ap-gap-sm
24px
--ap-gap-md
32px
--ap-gap-lg
32 → 48px
--ap-gap-xl
48 → 80px
--ap-section-y-tight
48 → 72px
--ap-section-y
64 → 120px
Raggi, filetti, ombre
Raggio 5px · --ap-radius
Card, bottoni, immagini e riquadri: 5px. A destra lo spigolo vivo, solo per sezioni e immagini a tutta larghezza.
Filetto 1px · --ap-line
Separatori di righe, liste e card su fondo chiaro.
Filetto su scuro · --ap-line-on-dark
Stessa regola sulle bande scure.
Regole
- Nessuna ombra, nessun gradiente, niente effetto vetro sulle superfici.
- Bordi sempre 1px; il tratteggio si usa solo nei documenti tecnici come questo.
- Raggio unico 5px: niente angoli più tondi o pillole.
Breakpoint
Solo i breakpoint di default di Elementor, nessuno personalizzato. Il badge indica la vista che stai usando ora.
Desktop
da 1025px
Layout completo; contenuto max 1600px; header con menu orizzontale.
Vista attualeTablet
768 – 1024px
Griglie a 2 colonne; indice del Brand Book più stretto; spazi ridotti dai valori fluidi.
Vista attualeMobile
fino a 767px
Una colonna, testo prima delle immagini; hamburger; nessuno scroll orizzontale a 320px.
Vista attualeResponsive
- Dimensioni di testo e spazi sono fluide (clamp): quasi nessun override per breakpoint.
- Override ammessi solo su direzione, colonne, gap, padding e ordine; mai su colori o caratteri.
- Mobile non è un desktop rimpicciolito: l’ordine dei contenuti si pensa a parte.
Capitolo 10 · Sito web
Componenti UI
I mattoni del sito, condivisi da tutte le pagine: si usano sempre i componenti e le classi esistenti, mai copie.
Bottoni e link
Su fondo chiaro
.ap-btn — outline 1px Ink, altezza minima 48px, si riempie al passaggio del mouse, focus arancio. .ap-link-arrow — link testuale con filetto e freccia arancio.
Su fondo scuro
.ap-btn--on-dark e .ap-link-arrow--on-dark: stessi componenti, colori invertiti.
Card
01
Apuano Flexible Bond
Fixed income · European bias
Target net return
4–8%
Expected volatility
4–6%
The fund follows a high conviction approach with a bottom-up security selection process and aims to deliver superior risk-adjusted returns over the medium to long term, with a strong emphasis on capital preservation.
Card fondo · AP · Fund card (Component 202)
Numero, nome, asset class, due cifre e obiettivo. Dati solo dal documento approvato.
Andrea Favilla
Founder & CEO
Card persona · AP · Person card (Component 138)
Ritratto scontornato sul pannello arancio con la “A”, nome e ruolo.
Banda contatto
Start a conversation
AP · CTA contact (Component 145)
Chiude ogni pagina: foto delle Alpi Apuane con velatura scura, eyebrow, titolo e bottone verso Contact.
Navigazione e form
- Header sticky: logo, menu, Contact come bottone outline, Reserved Area come pill arancione, selettore lingua ENG / ITA; su tablet e mobile menu a scomparsa.
- Footer: logo, indirizzo, stesso menu dell’header, riga legale e preferenze cookie.
- Form: etichetta sempre sopra il campo, campi alti almeno 48px, focus arancio, consenso privacy esplicito, messaggio di conferma o errore sotto il bottone.
- Ogni componente ripetuto è un Component Elementor: si modifica una volta e cambia ovunque.