Passa al contenuto principale

Design system

Scoutello dovrebbe trasmettere un senso di calore, competenza e focalizzazione sul prodotto. L'aspetto preferito è luminoso, generoso, arrotondato ed editoriale: prima il contenuto chiaro, poi un colore del brand discreto, superfici morbide e un movimento calmo che rende il prodotto reattivo senza diventare un rumore decorativo.

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

Logo e Asset del Brand​

Utilizza il logo Scoutello dall'URL degli asset della documentazione pubblica quando un agente, un'integrazione o una pagina generata necessita di un marchio riutilizzabile:

Preferisci la versione SVG per un rendering nitido su diverse dimensioni dello schermo. Utilizza la versione PNG quando uno strumento o una destinazione non supporta SVG. Mantieni uno spazio sufficiente attorno al marchio, evita di distorcerlo o ricolorarlo e posizionalo su superfici bianche, color crema caldo o altre superfici calme che preservino il contrasto.

Colori del Brand​

Colore primario: #ff8d49

Utilizza l'arancione primario come colore d'accento di Scoutello: chiamate all'azione primarie, stati attivi, navigazione attiva, sfondi di piccole icone, testo in evidenza, bagliori tenui e gradienti caldi. Nel codice del prodotto, questo corrisponde a --primary: 24 100% 64% e classi Tailwind come bg-primary, text-primary, border-primary/15 e shadow-primary/10.

Colore secondario: #145466

Utilizza il color teal scuro secondario come colore di base. Funziona meglio nei gradienti con l'arancione primario, pannelli di call-to-action scuri, profondità visiva e occasionali momenti di brand ad alta enfasi. Non dovrebbe sostituire l'arancione primario come colore d'azione predefinito.

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 smorzato intorno al 70-75% di opacità e bordi chiari.
  • Blu terziario: hsl(205 100% 51%) è disponibile come token di supporto, ma dovrebbe essere usato con parsimonia in modo che l'arancione e il teal rimangano riconoscibili come coppia del brand.

Stile Visivo​

Preferisci un look SaaS pulito e premium con sufficiente calore per evitare di apparire generico. La landing page combina sfondi a rete color crema, schede bianche, grandi screenshot del prodotto, angoli arrotondati e gradienti misurati.

Utilizza:

  • 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 stratificate invece di blocchi colorati pesanti.
  • Ombreggiature sottili come shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 o ombre personalizzate a bassa opacità.
  • Grandi screenshot del prodotto o mockup dell'interfaccia utente come prova, specialmente per il marketing e la narrazione delle funzionalità.
  • Piccoli momenti di brand come testo in evidenza arancione, chip di icone, anelli, bagliori e CTA con gradiente.

Evita:

  • Sfondi arancioni rumorosi a pagina intera.
  • Uso eccessivo del teal per controlli ordinari.
  • Layout densi e angusti.
  • Ombre dure, rettangoli netti o dashboard monocromatici freddi.
  • Movimenti decorativi che competono con la lettura o il completamento delle attività.

Tipografia​

Il sito di marketing utilizza:

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

Le superfici condivise dell'app e della documentazione utilizzano la tipografia dell'interfaccia utente allineata al sistema, attualmente più vicina a Inter. L'obiettivo stilistico è coerente su tutte le superfici: titoli sicuri, spaziatura dei titoli ridotta, corpo del testo leggibile e interlinea generosa.

Linee guida per i titoli:

  • Utilizza titoli grandi ed equilibrati nelle pagine di marketing.
  • Evidenzia solo la frase importante con l'arancione primario.
  • Mantieni la lunghezza della riga controllata con max-w-* e text-balance dove disponibile.

Linee guida per il corpo del testo:

  • Mantieni i paragrafi calmi e diretti.
  • Utilizza testo in primo piano smorzato per le descrizioni, solitamente text-foreground/70 o text-foreground/75.
  • Preferisci sezioni scorrevoli, paragrafi brevi ed etichette chiare.

Layout e Spaziatura​

I layout dovrebbero apparire spaziosi e stabili. La landing page utilizza un contenitore max-w-7xl con padding orizzontale reattivo e ampie sezioni verticali.

Modelli comuni:

  • Padding della sezione intorno a py-16, py-20 o più grande per le sezioni di marketing principali.
  • Schede disposte in griglie reattive con spaziatura costante.
  • Sezioni hero con una forte colonna di contenuto a sinistra e screenshot del prodotto o composizioni di dispositivi a destra.
  • Intestazioni di sezione centrate per promesse di prodotto ampie; intestazioni allineate a sinistra per sezioni di storia o flusso di lavoro.
  • Layout mobile-first che si impilano in modo pulito prima di diventare multicolonna su schermi più grandi.

Utilizza lo spazio bianco come parte del design. Se una sezione appare poco chiara, semplifica il contenuto e aumenta lo spazio prima di aggiungere altre decorazioni.

Componenti e Superfici​

Le superfici Scoutello dovrebbero apparire tattili ma leggere:

  • Pulsanti: pillole arrotondate per CTA di marketing prominenti; pulsanti prodotto standard altrove.
  • Schede: bianche o color crema, arrotondate, bordate e leggermente elevate.
  • Icone: piccole e semplici icone a linea in chip color arancione.
  • Statistiche ed elementi di fiducia: schede misurate con bordi color arancione o gradienti.
  • Moduli: etichette chiare, testo di aiuto diretto e spazio sufficiente per l'uso mobile.
  • Screenshot: grandi, nitidi e leggermente elevati. Utilizzali come prova concreta del prodotto.

Quando si costruisce l'interfaccia utente del prodotto, partire dai componenti UI condivisi e dai token esistenti anziché da stili personalizzati unici. Quando si costruisce l'interfaccia utente di marketing, utilizzare i primitivi della landing page e le classi della landing page dove si adattano.

Movimento​

Il movimento dovrebbe rendere l'interfaccia lucida, non affollata. La landing page utilizza brevi animazioni di rivelazione, effetti di sollevamento del dispositivo, effetti di bagliore e piccoli sollevamenti al passaggio del mouse.

Movimento preferito:

  • Rivelazione verso l'alto da 12-24px con opacità morbida.
  • Schede al passaggio del mouse che si sollevano solo di pochi pixel.
  • Stati al passaggio del mouse delle CTA che sollevano leggermente e approfondiscono l'ombra.
  • Entrate di sezione sfalsate dove supportano la scansione narrativa.

Rispetta sempre le preferenze di movimento ridotto. Evita animazioni che possono nascondere contenuti, bloccare l'interazione o sembrare necessarie per la comprensione della pagina.

Voce e Design dei Contenuti​

Il sistema visivo funziona meglio con testi diretti e concreti. Preferisci un linguaggio che spieghi cosa un'organizzazione può pubblicare, gestire o automatizzare in Scoutello.

Utilizza:

  • Nomi specifici del prodotto: landing page, tile, tour, eventi, organizzazioni, dashboard, ospiti, codici QR, traduzioni.
  • Descrizioni orientate ai risultati che collegano le esperienze degli ospiti ai flussi di lavoro degli operatori.
  • Linguaggio neutro rispetto al genere in tedesco e in altre copie localizzate.

Evita:

  • Linguaggio vago della piattaforma senza esempi.
  • Gergo aziendale eccessivamente formale.
  • Paragrafi lunghi dove una sezione scorrevole funzionerebbe meglio.

Regole Pratiche​

  • Utilizza #ff8d49 come accento principale del brand e #145466 come colore di base secondario.
  • Preferisci classi tokenizzate (primary, secondary, foreground, muted, border) rispetto ai colori codificati in modo fisso nelle superfici del prodotto.
  • Mantieni le pagine di marketing calde, spaziose, arrotondate, guidate da screenshot e leggermente animate.
  • Mantieni le superfici del dashboard e operative più calme, più dense solo dove necessario e più focalizzate sul compito.
  • Lascia che le esperienze degli ospiti di proprietà del cliente supportino il branding dell'organizzazione dove il prodotto espone già controlli di branding, ma mantieni le superfici di proprietà di Scoutello allineate a questo sistema.

Concetti correlati: Route e superfici, Landing page e tile, Esperienze ospite basate sul browser.