Fatto
Design system · rete di strutture convenzionate

Un sistema per farsi
trovare. Bene.

Token, componenti e pattern condivisi da area partner, server MCP e app per ChatGPT. Atomici, accessibili, con micro-animazioni che spiegano cosa sta succedendo invece di decorarlo.

Il colore non è mai l'unico significatoOgni stato ha una parolaTre curve di movimento, non trentaIl prezzo si scrive in un modo soloNessun componente sa in che tema si trovaprefers-reduced-motion è rispettato

01 — Fondamenta

Prima dei componenti, le decisioni.

Colore, tipografia, forma e movimento sono definiti una volta sola come variabili CSS. I componenti non scelgono mai un valore: lo leggono. Cambiare il tema significa cambiare qui, non in quaranta file.

Token semantici

I componenti usano sempre questi nomi, mai le scale grezze.

canvasFondo pagina
surfaceSuperficie
surface-raisedSuperficie sollevata
surface-sunkenSuperficie incassata
brandMarchio
primaryAzione primaria
accentAccento
successEsito positivo
warningAttenzione
dangerErrore
infoInformazione

Ogni token ha un valore per il tema chiaro e uno per lo scuro. Il componente non sa in quale tema si trova, e non deve saperlo (APP-04).

Scala Crema

Le superfici. Il fondo non è bianco: è carta calda, come nel riferimento.

50
100
200
300
400
500
Scala Foresta

Il marchio. Azioni sicure, conferme, blocchi editoriali scuri.

100
300
500
600
700
900
Scala Lavanda

L'azione primaria e, nel prodotto, i vantaggi della prenotazione diretta.

100
200
300
400
500
700
Scala Corallo

L'accento. Usato con parsimonia: evidenzia, non decora.

100
300
500
600
700
Tipografia

Instrument Serif per i titoli, Plus Jakarta Sans per l'interfaccia.

Dormi bene.

font-display · 48px · corsivo per l’ultima parola

Titolo di sezione

Il corpo del testo usa il sans: alta leggibilità a 14 e 16 px, numeri tabulari per prezzi e statistiche, interlinea generosa.

Testo di supporto, 12 px — note, condizioni, freschezza dei dati.

Occhiello · 11 px

1.248 €tabular-nums
Forma e profondità

Raggi ampi e ombre calde: nessun grigio freddo nel sistema.

sm
lg
2xl
full
xs
sm
md
lg

L’ombra indica quanto un elemento è vicino all’utente:sm per le schede,lg per menu e popover,xl solo per i dialoghi modali.

Movimento

Tre curve condivise, esposte come token e usate da tutti i componenti.

soft

overlay, pannelli

swift

hover, colore

spring

indicatori, spunte

Tre curve, non una per componente. Tutto ciò che entra usasoft, tutto ciò che reagisce al puntatore usa swift, tutto ciò che “atterra” usa la molla. Conprefers-reduced-motion ogni durata scende a zero.

Spaziatura

Scala di 4 px. Le distanze grandi separano i concetti, non riempiono.

1
4px
2
8px
3
12px
4
16px
6
24px
8
32px
12
48px
Accessibilità

Regole verificate su ogni componente prima di considerarlo pronto.

  • ✓Un solo stile di focus in tutto il sistema, sempre visibile da tastiera
  • ✓Il colore non è mai l'unico veicolo di significato: stati e esiti hanno anche parola o forma
  • ✓Contrasto minimo 4.5:1 sui testi, 3:1 su bordi e icone informative
  • ✓Ogni immagine ha un testo alternativo; le decorative sono marcate aria-hidden
  • ✓prefers-reduced-motion azzera le animazioni senza togliere informazione

02 — Componenti

Le parti che si ripetono ovunque.

Primitive atomiche, senza logica di prodotto al loro interno. Ogni componente accetta className, inoltra la ref e non decide mai al posto di chi lo usa: qui si vedono tutti gli stati, non solo quello felice.

Button

8 varianti × 5 dimensioni, stato di caricamento, slot per le icone.

Varianti
Dimensioni
Con icone e stato

Tre micro-animazioni, tutte sotto i 300 ms: sollevamento di 1 px all’hover, affondo al clic, riflesso che attraversa il pulsante. Lo spinner entra allargando lo spazio invece di sostituire il testo, così il pulsante non cambia larghezza sotto il dito.

Field · Input · Textarea · Select

Etichetta, descrizione ed errore collegati automaticamente.

Come appare sulle insegne e sul sito ufficiale.

74/180

Compare nei risultati di ricerca degli assistenti AI.

€

Filtro rigido nella ricerca.

Field collega da solo etichetta, descrizione ed errore al controllo: qualsiasi input al suo interno ricevearia-describedby earia-invalid senza che lo sviluppatore se ne occupi. Il messaggio d’errore entra in altezza, non appare di scatto.

Checkbox · Switch · RadioCard · Slider

Controlli di selezione, dalla casella singola alla scelta a schede.

Caselle e interruttori
Scelta singola
Scelta a schede
Budget per notte80 € – 240 €
Segmented · Tabs · VerticalNav · Breadcrumb · Pagination

Navigazione fra viste e fra pagine.

Segmented — l'indicatore scivola, non appare
Anagrafica, contenuti, servizi, policy e vantaggi del diretto.
Dialog · Sheet · DropdownMenu · Popover · Tooltip · Toast

Tutto ciò che si sovrappone alla pagina, con la stessa entrata.

Dialoghi e pannelli
Notifiche effimere
Alert · Skeleton · Spinner · Progress · EmptyState

Gli stati che il prodotto attraversa davvero: attesa, avviso, vuoto.

Nuove camere rilevate dal fornitore

Sono arrivate 2 camere non pubblicate. Scegli se renderle visibili nella rete.

Verifica della titolarità completata

Le strutture con almeno un vantaggio del diretto compaiono più in alto nei risultati: è l’argomento principale della rete.
Attesa
68%

Nessuna struttura in questa zona

La rete non copre ancora Cefalù. Le zone più vicine con strutture convenzionate sono Palermo e Madonie.

Card · Badge · Avatar · Accordion

Contenitori e marcatori.

Scheda interattiva

Si solleva al passaggio e reagisce anche al focus da tastiera.

Blocco editoriale

La variante scura per le sezioni di respiro.

VB
BC
ER
+1
Badge
NeutroMarchioPrimarioPubblicataIn corsoErrore2 adultiCon piscina

Pertinenza, vicinanza, vantaggi del diretto, completezza del profilo e freschezza dei dati, con pesi configurabili. Nessun rapporto economico influenza l’ordinamento.

Stepper

Flussi a tappe: dalla registrazione alla pubblicazione.

  1. Account

  2. Struttura

  3. Verifica

  4. Fornitore

  5. Pubblica

  1. Credenziali inserite

    Codice di accesso e identificativo struttura.

  2. Importazione iniziale

    Camere, piani tariffari e 365 giorni di prezzi.

  3. Abbinamento

    Camere del fornitore e camere già inserite a mano.

StatTile · Table · SortableHead

Presentazione dei dati dell'area partner.

Ricerche

0
+18%

Posizione media

2,4
−0,6più in alto

Aperture dettaglio

0
+6%

Clic su prenota

0
+24%
StrutturaZonaStato
Villa BelvedereTaorminaPubblicata128496
Etna RoomsEtnaSospesa41218
Casa OrtigiaSiracusaIn pausa23311
Baia dei CiclopiAci TrezzaIn revisione00
EmptyState

Lo stato vuoto è un componente, non un paragrafo lasciato lì.

Nessuna struttura ancora

Crea la prima struttura per iniziare: bastano anagrafica, foto e un collegamento al tuo channel manager.

Zona non coperta

Non ci sono strutture convenzionate a Cefalù. Nelle vicinanze: Palermo (12) e Madonie (4).

Principi

Quattro regole che tengono insieme il resto.

01

Atomico

Ogni componente fa una cosa sola, accetta className, inoltra la ref e non contiene logica di prodotto. Le regole del dominio stanno nei componenti di dominio, non dentro un Button.

02

Semantico

I componenti non nominano mai un colore. Usano token di ruolo — superficie, contenuto, marchio, pericolo — così tema chiaro e scuro sono la stessa base con valori diversi.

03

Sobrio nel movimento

L'animazione serve a rendere comprensibile un cambiamento: da dove arriva un pannello, quale segmento è attivo, cosa sta caricando. Se non spiega nulla, non c'è.

04

Onesto

Un prezzo indicativo lo dichiara, un dato vecchio mostra quando è stato aggiornato, un errore dice cosa fare. Il sistema rende difficile mentire al viaggiatore.

03 — Dominio

I componenti che sanno di cosa parliamo.

Qui il sistema smette di essere generico. Stati della rete, completezza del profilo, freschezza dei dati, vantaggi del diretto: concetti dell'MVP che meritano un componente proprio, così che la regola sia scritta una volta sola e valga in area partner, server MCP e app ChatGPT.

PropertyStatusBadge

I sette stati della struttura nella rete, con il motivo al passaggio.

BozzaIn revisionePubblicataSospesaIn pausaRifiutataRimossa
DraftUnder reviewPublishedSuspended

Lo stato è la cosa che il partner guarda per prima ogni mattina: parola sempre presente, colore ridondante, causa a un passaggio di mouse. La stessa mappa di stati alimenta elenchi, tabelle e schede.

CompletenessMeter

Separa ciò che blocca la pubblicazione da ciò che la migliora.

38%

Completezza del profilo

3 da completare

Mancano 3 campi obbligatori per richiedere la pubblicazione.

SyncStatusCard

Stato del collegamento al channel manager, in linguaggio comprensibile.

WuBook

Sincronizzazione attiva
Ultima sincronizzazione
Orizzonte coperto
365 giorni

WuBook

Credenziali non valide
Ultima sincronizzazione
Orizzonte coperto
365 giorni
BenefitChip · BenefitList · BenefitRow

I vantaggi della prenotazione diretta: l'argomento di vendita della rete.

Nei risultati di ricerca
−12% sul direttoColazione inclusaLate check-outParcheggio gratuito+1

12% in meno rispetto alle OTA

Su tutti i piani tariffari, tutto l'anno.

Late check-out

Fino alle 15:00, secondo disponibilità.

Lavanda: nel sistema questo colore significa “conviene prenotare diretto”. Non si usa per i servizi, che sono un’altra cosa e hanno un altro componente.

PriceDisplay · RatingStars · FreshnessIndicator

Come si scrive un prezzo nella rete: totale, media, tassa separata.

Con date

12 → 15 luglio · 2 adulti

Aggiornato
642 €/ 3 notti214 € a notte · 2 adulti+ 18 € tassa di soggiorno

Senza date

Prezzo indicativo, sempre marcato come tale

Aggiornato
a partire da298 €prezzo indicativo sui prossimi 30 giorni
Categoria

Tre regole imposte dal componente, non dallo sviluppatore che lo usa: il totale del soggiorno è il numero grande, la tassa di soggiorno è sempre fuori dal totale e dichiarata come stima, un prezzo senza date porta sempre “a partire da”.

AmenityList

Tre stati per servizio: incluso, a pagamento, non disponibile.

Wi-Fi
Piscina all'aperto
Parcheggio
Ristorante
Palestra
Animali ammessi

“A pagamento” non è “assente”: appiattire i tre stati su due è il modo più rapido per far arrivare un ospite arrabbiato alla reception. La nota del partner compare al passaggio.

SearchResultCard

La scheda nella lista risultati dell'app ChatGPT, verticale e orizzontale.

Villa Belvedere, Taormina
300 m dalla spiaggia

Villa Belvedere

Hotel · Taormina · Riviera dei Ciclopi

642 €/ 3 notti214 € a notte · 2 adulti+ 18 € tassa di soggiorno
  • Piscina a sfioro sul mare
  • Colazione inclusa prenotando diretto
  • A 300 m dalla spiaggia di Mazzarò
−12% sul direttoColazione inclusaLate check-out
Aggiornato
Baia dei Ciclopi, Aci Trezza
sul lungomare

Baia dei Ciclopi

Resort · Aci Trezza

a partire da298 €prezzo indicativo sui prossimi 30 giorni
  • Spa inclusa per soggiorni di 3 notti
  • Ristorante di pesce con stella
Upgrade cameraDrink di benvenuto
Aggiornato
Villa Belvedere, Taormina
300 m dalla spiaggia

Villa Belvedere

Hotel · Taormina · Riviera dei Ciclopi

642 €/ 3 notti214 € a notte · 2 adulti+ 18 € tassa di soggiorno
  • Piscina a sfioro sul mare
  • Colazione inclusa prenotando diretto
  • A 300 m dalla spiaggia di Mazzarò
−12% sul direttoColazione inclusaLate check-out
Aggiornato

Contiene solo ciò che serve a decidere se approfondire: nome, luogo, prezzo, due o tre motivazioni verificabili e i vantaggi del diretto. I pulsanti sono sempre gli stessi due — “Dettagli” resta nella conversazione, “Prenota sul sito” porta al sito ufficiale della struttura e lo dichiara.

PropertyCard

La struttura vista dal partner: stato, completezza, problema aperto.

Villa Belvedere

Villa Belvedere

Taormina · Hotel 4 stelle

Pubblicata
100% completo
Collegata a WuBook
Etna Rooms

Etna Rooms

Nicolosi · B&B

Sospesa
78% completo
Collegata a WuBookPrezzi non aggiornati da 31 ore

Casa Ortigia

Siracusa · Casa vacanze

Bozza
34% completo
Nessun fornitore collegato
PhotoUploader

Caricamento foto con minimo richiesto sempre visibile.

Trascina le foto o scegli dal computer

JPG o PNG, lato lungo almeno 1600 px, massimo 8 MB per file

3 di 5 foto minime
  • Esterni
    Principale
    Esterni
  • Camera
    Camera
  • Piscina / Spa
    Piscina / Spa
ItineraryPicker · RangeCalendar · GuestSelector

Date e composizione ospiti, senza dipendenze esterne per le date.

TaorminaCon piscinaMax 200 € a notteAnimali ammessi

Il calendario ragiona in notti, non in giorni: è la differenza che rende inutilizzabili quasi tutti i date picker generici in un prodotto di ospitalità. Selezionando una data precedente all’arrivo, l’intervallo riparte invece di invertirsi.

Composizione — anteprima in ChatGPT

Gli stessi componenti montati come li vedrebbe il viaggiatore (PUB-07).

FFatto · rete di strutture convenzionateDati verificati

Ho trovato 2 strutture convenzionate a Taormina per 3 notti dal 12 luglio, 2 adulti. Entrambe hanno vantaggi se prenoti dal sito ufficiale.

Villa Belvedere, Taormina
300 m dalla spiaggia

Villa Belvedere

Hotel · Taormina · Riviera dei Ciclopi

642 €/ 3 notti214 € a notte · 2 adulti+ 18 € tassa di soggiorno
  • Piscina a sfioro sul mare
  • Colazione inclusa prenotando diretto
  • A 300 m dalla spiaggia di Mazzarò
−12% sul direttoColazione inclusaLate check-out
Aggiornato
Baia dei Ciclopi, Aci Trezza
sul lungomare

Baia dei Ciclopi

Resort · Aci Trezza

a partire da298 €prezzo indicativo sui prossimi 30 giorni
  • Spa inclusa per soggiorni di 3 notti
  • Ristorante di pesce con stella
Upgrade cameraDrink di benvenuto
Aggiornato

I risultati provengono da una rete di strutture convenzionate e non rappresentano tutta l’offerta della zona.