Clinica Mobile Hero Background
Style Guide v2.0 — Dati Originali
Clinica Mobile Logo

Style Guide
Clinica Mobile

La cura che viene da te

Guida visiva completa basata sui dati reali del sito clinicamobile.org e dalle brochure MediaKit. Tutti i colori, font, componenti e assets sono quelli effettivamente in produzione.

Server: OVH ssh.cluster027 Doc root: ~/clinicamobile/ Titolare: ALIS SRLS P.IVA: 03009120357
01 — Brand Identity

Identita del Brand

Clinica Mobile — Prevenzione di Qualita Dove Ci Sei Tu. Ambulatorio itinerante che porta screening diagnostici gratuiti nelle piazze italiane e nelle aziende.

Logo Originale

Logo Clinica Mobile
Su sfondo bianco · Dimensione minima: 180x60px
Percorso: /assets/images/brand/logo-clinica-mobile.svg
Logo Clinica Mobile su sfondo scuro
Su sfondo scuro · filter: brightness(1.2)
SVG 69.7 KB · Formato vettoriale scalabile

Architettura del Brand

Clinica Mobile
Clinica Mobile
Brand principale
Prevenzione sanitaria itinerante
ALIS
ALIS SRLS
Innovative Strategies
Societa titolare — P.IVA 03009120357
Alliance Medical
Partner Sanitario
Diagnostica e refertazione
Collaborazione eventi

Informazioni Ufficiali

Contatti

Numero Verde: 800 22 66 26
Email: info@clinicamobile.org
Email Imprese: imprese@clinicamobile.org
Sede: Via Pier Carlo Cadoppi 8, 42124 Reggio Emilia (RE)
P.IVA: 03009120357
Sito: clinicamobile.org

Social Media

Instagram: @clinica_mobile
Facebook: /clinicamobile
LinkedIn: /company/clinica-mobile
YouTube: Clinica Mobile
Fondata: 2020
Sede legale: Reggio Emilia

Valori del Brand

Qualita
Tecnologia ospedaliera e professionisti altamente specializzati
Accessibilita
La salute come diritto, senza barriere economiche o geografiche
Professionalita
Specialisti certificati con esperienza ospedaliera
Innovazione
Mammografi digitali, ecografi HD, videodermatoscopi
02 — Palette Colori

Sistema Cromatico Originale

Colori estratti direttamente da /css/variables.css sul server OVH. Il sito usa due colori primari: Celeste (#51AFDA) e Fucsia/Rose (#B04872).

Colori Primari (dal CSS originale)
Primary Rose
#B04872
--primary-rose / --dusty-rose / --secondary
AA su bianco
Primary Blue/Celeste
#51AFDA
--primary-blue / --navy-blue / --light-blue
Primary (inline)
#004AAD
--primary (critical CSS header/btn)
AAA su bianco
Blue Dark
#3B8DB0
--primary-blue-dark (hover)
Purple Accent
#8E3A5C
--purple-accent (fucsia scuro)
Golden Yellow
#F6CD10
--golden-yellow / --warning
Neutrali e Testo
Black
#000000
--text-primary
Dark Slate
#2c3e50
--text-secondary / --bg-dark
Body Text
#333333
body color (critical CSS)
Border
#E0E0E0
--border-color
White
#FFFFFF
--bg-white / --bg-light / --cipria
Status / Funzionali
Success
#4CAF50
Error
#E74C3C
Warning
#F6CD10
Info
#6EC1E4
Rosa Esteso (brochure e media)
Pink 100
#FFF0F5
Sfondo sezioni stampa
Pink 200
#FCE4EC
Badge statistici brochure
Pink 300
#F8BBD0
Bordi brochure
Header Print Start
#E8A0BF
Gradiente header brochure
Header Print End
#D76D9E
Gradiente header brochure

Gradienti Originali (da variables.css)

gradient-primary
Gradiente Primario
linear-gradient(135deg, #51AFDA 0%, #B04872 100%)
CTA, hero overlay, card eventi
gradient-rose
Gradiente Rose
linear-gradient(135deg, #B04872 0%, #8E3A5C 100%)
Bottoni primari, overlay rosa
gradient-blue
Gradiente Blue
linear-gradient(135deg, #51AFDA 0%, #3B8DB0 100%)
Sezioni informative
gradient-warm
Gradiente Warm
linear-gradient(135deg, #F6CD10 0%, #B04872 50%, #8E3A5C 100%)
Accenti speciali, badge
header print
Header Brochure
linear-gradient(180deg, #E8A0BF 0%, #D76D9E 100%)
Header titoli brochure/mediakit
03 — Tipografia

Sistema Tipografico

2 font principali (Poppins + Inter) caricati da Google Fonts, con Dancing Script per il tagline e Playfair Display per le citazioni.

Poppinsclamp(2.5rem, 5vw+1rem, 4.5rem)800--font-size-h1
Prevenzione di Qualita
Dancing Scriptclamp(1.5rem, 3vw, 2.5rem)400Tagline
La cura che viene da te !
Poppinsclamp(2rem, 4vw+0.5rem, 3.5rem)700--font-size-h2
Mammografie ed Ecografie al Seno
Poppinsclamp(1.5rem, 3vw+0.5rem, 2.5rem)600--font-size-h3
Il Nostro Impatto nel 2025
Inter15px500Navigazione
Home · Servizi · Chi Siamo · Sostenibilita · Contatti
Inter1.125rem (18px)400--font-size-bodyline-height 1.6
La Clinica Mobile, un ambulatorio itinerante totalmente attrezzato, sara lo spazio in cui medici specialisti porteranno le prestazioni diagnostiche con grande professionalita, cura e rispetto della privacy.
Playfair Display18px400 italicCitazioni
"Investire nella salute delle persone significa costruire un futuro solido per tutti."
Poppins16px/120%600Bottoni CTA
Scopri i Nostri Servizi →  Richiedi Informazioni  Chiama Ora: 800 22 66 26

Google Fonts import originale: Poppins:wght@600;700;800 e Inter:wght@400;500;600;700. Il sito carica solo questi weight — non usare weight diversi. Il font-display e impostato su swap con preload asincrono (media="print" onload="this.media='all'").

04 — Componenti

Sistema di Componenti

Componenti originali dal sito clinicamobile.org con le specifiche CSS reali.

Bottoni (dal sito)

Scopri i Nostri Servizi → Richiedi Informazioni 800 22 66 26
Gradiente Celeste-Rosa Blue Gradient Outline Rose Outline Leggi di piu →
Padding: .75rem 1.5rem · Border-radius: 8px (--radius-sm) · Font: Poppins 600
Transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1)
Shadow rose: 0 8px 32px rgba(176,72,114,0.25) · Shadow cyan: 0 8px 32px rgba(110,193,228,0.25)

Header Originale

Logo 800 22 66 26
Height: 80px (--header-height) · Position: fixed · Z-index: 1000 (--z-header)
Background: white · Box-shadow: 0 2px 10px rgba(0,0,0,.1) · Logo: 180x60px
Menu: Poppins 500, color #333 · CTA telefono a destra

Card Servizi (con immagini reali)

Screening Oncologico
Mammografia Digitale
Diagnosi precoce del tumore al seno con tecnologia digitale avanzata
Screening Endocrino
Ecografia Tiroidea
Valutazione completa della tiroide e ricerca di noduli
Screening Cardiovascolare
Ecocolordoppler Carotidi
Valutazione del flusso sanguigno per prevenire ictus
Screening Oncologico
Visita Dermatologica
Diagnosi precoce melanoma con videodermatoscopio
Screening Oncologico
Screening Prostata
Test PSA ed ecografia per diagnosi precoce
Screening Oncologico
Screening Colon-Retto
Prevenzione del tumore del colon-retto

Card Eventi (dati reali dal JSON-LD)

Bientina — Toscana
Prevenzione Rosa
76 visite: 41 ecografie, 35 mammografie
76
Busseto — Emilia-Romagna
Screening Senologico
108 visite senologiche e ginecologiche (300+ richieste)
108
Castell'Arquato — Val d'Arda
Prevenzione Val d'Arda
126 visite: 68 cardiologiche, 58 senologiche
126

Badge Statistici (brochure)

516
visite totali
2024-2025
6
eventi
realizzati
300+
richieste
per evento

Citazione Sponsor

"Investire nella salute delle persone significa costruire un futuro solido per tutti. Questa giornata e un gesto concreto di vicinanza e di cura verso chi ogni giorno fa crescere la nostra azienda e la nostra comunita."
— La Direzione, Del Colle Srl

Footer Originale

Clinica Mobile

La prevenzione che viene da te. Abbattiamo ogni distanza tra le persone e la loro salute.

Servizi
Link
Contatti
© 2025 Clinica Mobile. Tutti i diritti riservati. · ALIS SRLS Via Pier Carlo Cadoppi 8, 42124 Reggio Emilia (RE)
05 — Assets Immagini

Libreria Fotografica

Tutte le immagini dal server OVH ~/clinicamobile/assets/images/. Formato WebP ottimizzato.

Hero e Carousel

Hero BG
clinica-mobile-hero-background.webp
/hero/ · 208KB
La cura
la-cura-che-viene-da-te-optimized.webp
/hero/ · 57KB
Carousel 1
carousel-1.webp
/hero/ · 229KB
Carousel 2
carousel-2.webp
/hero/ · 247KB
Carousel 3
carousel-3.webp
/hero/ · 141KB
Carousel 5
carousel-5.webp
/hero/ · 275KB

Tecnologia Medica

Mammografo
mammografo-digitale-clinica-mobile.webp
/tecnologia/ · 112KB
Ecografo
ecografo-hd-diagnostica-mobile.webp
/tecnologia/ · 112KB
Videodermatoscopio
videodermatoscopio-digitale-mappatura-nei.webp
/tecnologia/ · 208KB
Mammografo 2
mammografo-digitale-ultima-generazione.webp
/tecnologia/ · 33KB

Ambiente e Team

Team
team-medico-clinica-mobile-prevenzione.webp
Operatrici
operatrici-ambulatorio-mobile.webp
Interno
ambulatorio-mobile-interno-diagnostica.webp
Piazza Busseto
unita-mobile-piazza-busseto.webp

Eventi

Bientina
Bientina
76 visite · Toscana
Busseto
Busseto
108 visite · Emilia-Romagna
Lugagnano
Lugagnano Val d'Arda
88 visite · Emilia-Romagna
Castell'Arquato
Castell'Arquato
126 visite · Val d'Arda
Formato: WebP · Aspect ratio card: 4:3 · Carousel: 16:9 · Logo: 3:1
Hero overlay: rgba(255,255,255,0.35) · Brochure watermark: opacity 15-20%
06 — Layout e Spaziatura

Sistema di Layout

Container 1200px con spacing basato su rem. Breakpoint mobile: 768px.

Griglia a 12 Colonne

1
2
3
4
5
6
7
8
9
10
11
12
Max-width: 1200px (--container-max) · Padding: 2rem (--container-padding)

Scala Spaziatura Originale

--space-xs
0.5rem
--space-sm
1rem
--space-md
2rem
--space-lg
4rem
--space-xl
6rem
--space-2xl
8rem

Border Radius Originali

8px
--radius-sm
16px
--radius-md
24px
--radius-lg
32px
--radius-xl
pill
--radius-pill
50%
circle

Ombre Originali

shadow-sm
0 2px 8px .08
shadow-md
0 4px 16px .12
shadow-lg
0 8px 32px .16
colored-rose
rgba(176,72,114,.25)
07 — Social Media

Template Social

Account principale: @clinica_mobile (Instagram). Struttura post basata sui MediaKit delle brochure.

Hashtag: #ClinicaMobile #PrevenzioneRosa #Mammografia #EcografiaSeno #LaCuraChevieneDaTe #DiagnosticaMobile #PrevenzioneOncologica #SaluteFemminile

08 — Materiale Stampato

MediaKit Sponsor

Struttura a 4 pagine usata per tutti i MediaKit sponsor. Layout identico personalizzato per ogni azienda.

Pag 1 — Copertina
Titolo rosa gradiente + Logo sponsor + Data/luogo + Foto ambulatorio + Footer
Pag 2 — Articolo
Mini galleria + Testo giustificato + Sidebar locandina + Griglia sponsor
Pag 3 — Dati
Foto evento + Badge "5 posti garantiti" + Badge "1 giornata" + Continuazione testo
Pag 4 — Chiusura
Logo CM + ALIS + Post IG embed + Citazione sponsor + "Grazie" in script + Logo grande
Sfondo tutte le pagine: foto ambulatorio opacity 15-20% in grigio
Titolo copertina: Poppins 800 48-56pt gradiente rosa
Body: Inter 400 10-11pt giustificato, interlinea 1.7-1.8
Footer: "clinicamobile.org" sx + "Diagnostica Mobile" dx
09 — Tono e Voce

Comunicazione

Mission: "Portare la prevenzione di qualita dove servono le persone, abbattendo ogni distanza geografica, economica e sociale."

Si
"La prevenzione rappresenta lo strumento piu efficace per ridurre la mortalita e migliorare gli esiti di guarigione."
Si
"Costruire il futuro significa anche prendersi cura della salute."
Si
"La prevenzione che viene da te. Abbattiamo ogni distanza tra le persone e la loro salute."
No
"Non perderti questa incredibile opportunita di fare una mammografia GRATIS!!!"
No
"Siamo i leader della prevenzione itinerante con la tecnologia piu avanzata del mercato."
No
"Se non fai la mammografia potresti pentirti. Agisci prima che sia troppo tardi."
10 — Accessibilita

Contrasto WCAG

Rose #B04872 su Bianco
4.5:1 AA
Nero su Bianco
21:1 AAA
Bianco su #004AAD
7.5:1 AAA
Bianco su Rose
4.5:1 AA
11 — Design Tokens CSS

Variabili Originali — Copia da /css/variables.css

variables.css (server OVH)
/* ══════ CLINICA MOBILE — /css/variables.css ══════ */
/* Fonte: ssh ovh → ~/clinicamobile/css/variables.css */

:root {
  /* PALETTE PROFESSIONALE */
  --primary-rose: #B04872;
  --primary-blue: #51AFDA;
  --primary-blue-dark: #3B8DB0;
  --dusty-rose: #B04872;
  --purple-accent: #8E3A5C;
  --golden-yellow: #F6CD10;

  /* Gradienti */
  --gradient-primary: linear-gradient(135deg, #51AFDA 0%, #B04872 100%);
  --gradient-rose: linear-gradient(135deg, #B04872 0%, #8E3A5C 100%);
  --gradient-blue: linear-gradient(135deg, #51AFDA 0%, #3B8DB0 100%);
  --gradient-warm: linear-gradient(135deg, #F6CD10, #B04872, #8E3A5C);

  /* Trasparenze */
  --overlay-light: rgba(255, 255, 255, 0.95);
  --overlay-rose: rgba(176, 72, 114, 0.9);
  --overlay-cyan: rgba(81, 175, 218, 0.9);
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(81, 175, 218, 0.2);

  /* Typography */
  --font-primary: 'Inter', -apple-system, sans-serif;
  --font-headings: 'Poppins', -apple-system, sans-serif;

  /* Font Sizes (responsive clamp) */
  --font-size-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --font-size-h2: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --font-size-h3: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
  --font-size-body: 1.125rem;

  /* Spacing */
  --space-xs: 0.5rem;  --space-sm: 1rem;
  --space-md: 2rem;   --space-lg: 4rem;
  --space-xl: 6rem;   --space-2xl: 8rem;

  /* Border Radius */
  --radius-sm: 8px;   --radius-md: 16px;
  --radius-lg: 24px;  --radius-xl: 32px;
  --radius-pill: 1000px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
  --shadow-colored-rose: 0 8px 32px rgba(176,72,114,0.25);
  --shadow-colored-cyan: 0 8px 32px rgba(110,193,228,0.25);

  /* Transitions */
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Layout */
  --container-max: 1200px;
  --header-height: 80px;
  --glass-blur: 24px;

  /* Z-index */
  --z-header: 1000;
  --z-overlay: 1500;
  --z-modal: 2000;
}

File CSS sul Server

~/clinicamobile/css/
  reset.css
  variables.css ← Design tokens
  main.css ← Stili principali
  responsive.css ← Breakpoint 768px
  modern-2026.css ← Override moderni
  carousel-gallery.css
  servizi.css / servizi-expandable.css / servizi-modal.css
  cookie-consent.css

Server e Infrastruttura

Host: ssh.cluster027.hosting.ovh.net
User: pwvghic-nemini
Doc root: ~/clinicamobile/
PHP: 8.4
Pagine: index.html, servizi.html, chi-siamo.html, sostenibilita.html, contatti.html, privacy.html, cookie-policy.html
GA4: G-PEPDQDVB3Y
Anche ospitato: alis.srl (doc root: ~/www/)