Passa al contenuto principale

Sistema di design

Scoutello dovrebbe trasmettere calore, competenza e attenzione al prodotto. L’aspetto preferito è chiaro, arioso, arrotondato ed editoriale: prima di tutto contenuti chiari, poi tocchi discreti di colore del brand, superfici morbide e animazioni fluide che rendono il prodotto reattivo senza aggiungere elementi decorativi superflui.

La landing page di marketing è il riferimento pubblico più chiaro per l’attuale direzione visiva. Ove possibile, le superfici del prodotto dovrebbero riutilizzare i token di design condivisi e diventare più espressive solo quando la superficie è esplicitamente orientata al brand o al marketing.

Logo e risorse del brand​

Usa il logo Scoutello dall’URL pubblico della risorsa docs quando un agente, un’integrazione o una pagina generata necessita di un marchio riutilizzabile:

Preferisci la versione SVG per una resa nitida su schermi di ogni dimensione. Usa la versione PNG quando uno strumento o una destinazione non supporta SVG. Lascia spazio libero sufficiente intorno al marchio, evita di deformarlo o ricolorararlo e posizionalo su superfici bianche, color crema caldo o comunque sobrie, che preservino il contrasto.

Colori del brand​

Colore primario: #ff8d49

Usa l’arancione primario come colore d’accento di Scoutello: call to action principali, stati attivi o con focus, navigazione attiva, piccoli sfondi per icone, testo evidenziato, bagliori morbidi e gradienti caldi. Nel codice del prodotto corrisponde a --primary: 24 100% 64% e a classi Tailwind come bg-primary, text-primary, border-primary/15 e shadow-primary/10.

Colore secondario: #145466

Usa il teal scuro secondario come colore di contrasto. Funziona al meglio nei gradienti con l’arancione primario, nei pannelli scuri per le call to action, per aggiungere profondità visiva e in occasionali elementi del brand ad alta enfasi. Non dovrebbe sostituire l’arancione primario come colore predefinito per le azioni.

Colori di supporto:

  • Sfondi color crema caldo: #fff8f1, #fff4ea, #fcf6f1 e superfici morbide orange-50 / amber-50.
  • Neutri del prodotto: schede bianche, testo scuro in primo piano, testo attenuato con opacità intorno al 70-75% e bordi chiari.
  • Blu terziario: hsl(205 100% 51%) è disponibile come token di supporto, ma dovrebbe essere usato con parsimonia, così che arancione e teal restino riconoscibili come coppia del brand.

Stile visivo​

Preferisci un aspetto SaaS pulito e premium, con abbastanza calore da evitare un risultato generico. La landing page combina sfondi mesh color crema, schede bianche, grandi schermate del prodotto, angoli arrotondati e gradienti discreti.

Usa:

  • Schede e pannelli arrotondati, spesso da rounded-2xl a rounded-[2rem].
  • Bordi morbidi come border-primary/10, border-primary/15, ring-black/5 e bordi neutri chiari.
  • Superfici bianche o color crema sovrapposte invece di blocchi dai colori intensi.
  • Ombre discrete come shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 o ombre personalizzate a bassa opacità.
  • Grandi schermate del prodotto o mockup dell’interfaccia come prova concreta, soprattutto per il marketing e la presentazione delle funzionalità.
  • Piccoli elementi del brand come testo evidenziato arancione, chip per icone, anelli, bagliori e CTA con gradiente.

Evita:

  • Sfondi arancioni intensi a tutta pagina.
  • L’uso eccessivo del teal per i controlli ordinari.
  • Layout densi e affollati.
  • Ombre marcate, rettangoli spigolosi o dashboard monocromatiche e fredde.
  • Animazioni decorative che competono con la lettura o il completamento delle attività.

Tipografia​

Il sito di marketing usa:

  • Space Grotesk per i titoli in evidenza tramite la classe landing-display.
  • Manrope per il testo del corpo nelle pagine di marketing.

Le superfici condivise dell’app e della documentazione usano una tipografia UI allineata al sistema, attualmente più vicina a Inter. L’obiettivo stilistico è coerente in tutte le superfici: titoli sicuri, spaziatura compatta nei titoli, testo del corpo leggibile e interlinea generosa.

Linee guida per i titoli:

  • Usa titoli grandi e bilanciati nelle pagine di marketing.
  • Evidenzia in arancione primario solo la frase importante.
  • Mantieni controllata la lunghezza delle righe con max-w-* e text-balance, ove disponibili.

Linee guida per il testo del corpo:

  • Mantieni i paragrafi chiari e diretti.
  • Usa testo in primo piano attenuato per le descrizioni, di solito text-foreground/70 o text-foreground/75.
  • Preferisci sezioni facilmente scansionabili, paragrafi brevi ed etichette chiare.

Layout e spaziatura​

I layout dovrebbero risultare ariosi e stabili. La landing page usa un container max-w-7xl con padding orizzontale responsive e ampie sezioni verticali.

Pattern comuni:

  • Padding delle sezioni intorno a py-16, py-20 o superiore per le sezioni di marketing principali.
  • Schede disposte in griglie responsive con spaziature uniformi.
  • Sezioni hero con una forte colonna di contenuto a sinistra e schermate del prodotto o composizioni di dispositivi a destra.
  • Intestazioni di sezione centrate per promesse generali sul prodotto; intestazioni allineate a sinistra per sezioni narrative o dedicate ai flussi di lavoro.
  • Layout mobile-first che si dispongono ordinatamente in verticale prima di diventare multicolonna sugli schermi più grandi.

Usa lo spazio vuoto come parte del design. Se una sezione non è chiara, semplifica i contenuti e aumenta lo spazio prima di aggiungere altri elementi decorativi.

Componenti e superfici​

Le superfici Scoutello dovrebbero risultare tattili ma leggere:

  • Pulsanti: pill arrotondate per le CTA di marketing più importanti; pulsanti standard del prodotto altrove.
  • Schede: bianche o color crema, arrotondate, con bordo e leggermente rialzate.
  • Icone: piccole e semplici icone lineari inserite in chip con tonalità arancioni.
  • Statistiche ed elementi di fiducia: schede discrete con bordi o gradienti dalle tonalità arancioni.
  • Moduli: etichette chiare, testo di supporto diretto e spaziatura sufficiente per l’uso su dispositivi mobili.
  • Schermate: grandi, nitide e leggermente rialzate. Usale come prova concreta del prodotto.

Quando si crea l’interfaccia del prodotto, partire dai componenti UI condivisi e dai token esistenti, anziché ricorrere a stili personalizzati usati una sola volta. Per le interfacce di marketing, utilizzare le primitive e le classi landing dove appropriato.

Movimento​

Il movimento dovrebbe rendere l’interfaccia più curata, non più affollata. La landing page utilizza brevi animazioni di comparsa, effetti di sollevamento dei dispositivi, effetti di diffusione della luce e leggeri sollevamenti al passaggio del cursore.

Movimenti consigliati:

  • Comparsa dal basso di 12–24 px con opacità graduale.
  • Schede che si sollevano di pochi pixel al passaggio del cursore.
  • Stati hover delle CTA che si sollevano leggermente e intensificano l’ombra.
  • Comparsa scaglionata delle sezioni quando favorisce la lettura della narrazione.

Rispettare sempre le preferenze per la riduzione del movimento. Evitare animazioni che possano nascondere contenuti, bloccare l’interazione o risultare necessarie per comprendere la pagina.

Voce e progettazione dei contenuti​

Il sistema visivo funziona al meglio con testi diretti e concreti. Preferire un linguaggio che spieghi cosa è possibile pubblicare, gestire o automatizzare con Scoutello.

Utilizzare:

  • Sostantivi specifici del prodotto: landing page, riquadri, tour, eventi, organizzazioni, dashboard, ospiti, codici QR, traduzioni.
  • Descrizioni orientate ai risultati, che colleghino le esperienze degli ospiti ai flussi di lavoro dei team operativi.
  • Un linguaggio neutro rispetto al genere in tedesco e negli altri contenuti localizzati.

Evitare:

  • Linguaggio vago sulle piattaforme, privo di esempi.
  • Gergo aziendale eccessivamente formale.
  • Paragrafi lunghi quando sarebbe più efficace una sezione facilmente scansionabile.

Regole pratiche​

  • Utilizzare #ff8d49 come colore principale del brand e #145466 come colore secondario di contrasto.
  • Preferire classi basate su token (primary, secondary, foreground, muted, border) ai colori codificati direttamente nelle superfici del prodotto.
  • Mantenere le pagine di marketing calde, ariose, arrotondate, incentrate sugli screenshot e animate con discrezione.
  • Mantenere dashboard e superfici operative più calme e dense solo quando necessario, con un’attenzione maggiore alle attività.
  • Consentire alle esperienze degli ospiti gestite dai clienti di supportare il branding dell’organizzazione quando il prodotto offre già controlli per il branding, mantenendo però le superfici gestite da Scoutello coerenti con questo sistema.

Concetti correlati: Percorsi e superfici, Landing page e riquadri, Esperienze degli ospiti progettate per il browser.