Sari la conținutul principal

Sistem de design

Scoutello ar trebui să inspire căldură, competență și să fie centrat pe produs. Aspectul preferat este luminos, generos, rotunjit și editorial: conținut clar pe primul loc, apoi culoare subtilă a brandului, suprafețe delicate și mișcare calmă care face produsul să pară receptiv, fără a deveni un zgomot decorativ.

Pagina de destinație de marketing este cea mai clară referință publică pentru direcția vizuală actuală. Suprafețele produsului ar trebui să reutilizeze token-urile de design partajate pe cât posibil și să devină mai expresive doar atunci când suprafața este explicit orientată spre brand sau marketing.

Logo și active de brand​

Utilizați logo-ul Scoutello de la URL-ul de active din documentația publică atunci când un agent, o integrare sau o pagină generată necesită o marcă de brand reutilizabilă:

Preferați versiunea SVG pentru redare clară pe diferite dimensiuni de ecran. Utilizați versiunea PNG atunci când un instrument sau o destinație nu poate gestiona SVG. Păstrați suficient spațiu liber în jurul mărcii, evitați să o întindeți sau să îi schimbați culoarea și plasați-o pe suprafețe albe, crem cald sau alte suprafețe calme care păstrează contrastul.

Culori de brand​

Culoare primară: #ff8d49

Utilizați portocaliul primar ca accent de culoare Scoutello: apeluri la acțiune primare, stări focalizate, navigare activă, fundaluri mici de pictograme, text evidențiat, străluciri delicate și gradienți calzi. În codul produsului, aceasta corespunde --primary: 24 100% 64% și claselor Tailwind precum bg-primary, text-primary, border-primary/15 și shadow-primary/10.

Culoare secundară: #145466

Utilizați albastrul-verzui intens secundar ca o culoare de bază. Funcționează cel mai bine în gradienți cu portocaliul primar, panouri de apel la acțiune închise, profunzime vizuală și momente ocazionale de accent de brand de înaltă intensitate. Nu ar trebui să înlocuiască portocaliul primar ca culoare de acțiune implicită.

Culori de suport:

  • Fundaluri crem cald: #fff8f1, #fff4ea, #fcf6f1 și suprafețe delicate orange-50 / amber-50.
  • Neutre de produs: carduri albe, text de prim-plan închis, text estompat la aproximativ 70-75% opacitate și margini deschise.
  • Albastru terțiar: hsl(205 100% 51%) este disponibil ca un token de suport, dar ar trebui utilizat cu moderație, astfel încât portocaliul și albastrul-verzui să rămână recunoscute ca perechea de brand.

Stil vizual​

Preferați un aspect curat, premium SaaS, cu suficientă căldură pentru a evita să pară generic. Pagina de destinație combină fundaluri cu plasă crem, carduri albe, capturi mari de ecran ale produsului, colțuri rotunjite și gradienți reținuți.

Utilizați:

  • Carduri și panouri rotunjite, adesea de la rounded-2xl la rounded-[2rem].
  • Margini delicate precum border-primary/10, border-primary/15, ring-black/5 și margini neutre deschise.
  • Suprafețe stratificate albe sau crem în loc de blocuri colorate grele.
  • Umbre subtile precum shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 sau umbre personalizate cu opacitate redusă.
  • Capturi mari de ecran ale produsului sau machete UI ca dovadă, în special pentru marketing și povestiri despre funcționalități.
  • Momente mici de brand, cum ar fi text evidențiat portocaliu, etichete cu pictograme, inele, străluciri și apeluri la acțiune cu gradient.

Evitați:

  • Fundaluri portocalii puternice pe pagină întreagă.
  • Utilizarea excesivă a albastrului-verzui pentru controale obișnuite.
  • Layout-uri dense, înghesuite.
  • Umbre dure, dreptunghiuri ascuțite sau tablouri de bord reci, monocrome.
  • Mișcare decorativă care concurează cu citirea sau finalizarea sarcinilor.

Tipografie​

Site-ul de marketing utilizează:

  • Space Grotesk pentru titlurile de afișare prin clasa landing-display.
  • Manrope pentru textul de corp de marketing.

Suprafețele comune ale aplicației și documentelor utilizează tipografie UI aliniată la sistem, în prezent mai apropiată de Inter. Obiectivul stilului este consecvent pe suprafețe: titluri încrezătoare, spațiere strânsă a titlurilor, text de corp lizibil și înălțime generoasă a liniilor.

Ghid pentru titluri:

  • Utilizați titluri mari, echilibrate pe paginile de marketing.
  • Evidențiați doar fraza importantă cu portocaliu primar.
  • Păstrați lungimea liniei controlată cu max-w-* și text-balance acolo unde este disponibil.

Ghid pentru textul de corp:

  • Păstrați paragrafele calme și directe.
  • Utilizați text de prim-plan estompat pentru descrieri, de obicei text-foreground/70 sau text-foreground/75.
  • Preferăți secțiuni scanabile, paragrafe scurte și etichete clare.

Layout și spațiere​

Layout-urile ar trebui să pară spațioase și stabile. Pagina de destinație utilizează un container max-w-7xl cu spațiere orizontală responsivă și secțiuni verticale mari.

Modele comune:

  • Spațiere între secțiuni în jur de py-16, py-20 sau mai mare pentru secțiunile majore de marketing.
  • Carduri aranjate în grile responsive cu spații consistente.
  • Secțiuni ero cu o coloană de conținut puternică în stânga și capturi de ecran ale produsului sau compoziții de dispozitive în dreapta.
  • Titluri de secțiune centrate pentru promisiuni largi ale produsului; titluri aliniate la stânga pentru secțiuni de poveste sau flux de lucru.
  • Layout-uri mobile-first care se stivuiesc curat înainte de a deveni multi-coloană pe ecrane mai mari.

Utilizați spațiul alb ca parte a designului. Dacă o secțiune pare neclară, simplificați conținutul și creșteți spațiul de respirație înainte de a adăuga mai mult decor.

Componente și suprafețe​

Suprafețele Scoutello ar trebui să pară tactile, dar ușoare:

  • Butoane: pastile rotunjite pentru apeluri la acțiune proeminente de marketing; butoane standard de produs în alte părți.
  • Carduri: albe sau crem, rotunjite, cu margini și ușor ridicate.
  • Pictograme: pictograme mici, simple, de linie, în etichete nuanțate cu portocaliu.
  • Statistici și elemente de încredere: carduri reținute cu margini nuanțate cu portocaliu sau gradienți.
  • Formulare: etichete clare, text de ajutor direct și spațiu suficient pentru utilizare pe mobil.
  • Capturi de ecran: mari, clare și ușor ridicate. Utilizați-le ca dovadă concretă a produsului.

Când construiți UI de produs, începeți de la componentele UI partajate și token-urile existente, mai degrabă decât de la stiluri personalizate unice. Când construiți UI de marketing, utilizați primitivele de pagină de destinație și clasele de pagină de destinație acolo unde se potrivesc.

Mișcare​

Mișcarea ar trebui să facă interfața să pară finisată, nu aglomerată. Pagina de destinație utilizează animații scurte de dezvăluire, efecte de ridicare a dispozitivului, efecte de strălucire și mici ridicări la hover.

Mișcare preferată:

  • Dezvăluire de sus, de la 12-24px, cu opacitate redusă.
  • Carduri la hover care se ridică doar câțiva pixeli.
  • Stări de hover pentru apeluri la acțiune care ridică ușor și adâncesc umbra.
  • Intrări eșalonate ale secțiunilor acolo unde acestea susțin scanarea narativă.

Respectați întotdeauna preferințele de mișcare redusă. Evitați animațiile care pot ascunde conținutul, bloca interacțiunea sau care par necesare pentru înțelegerea paginii.

Voce și design de conținut​

Sistemul vizual funcționează cel mai bine cu un text direct și concret. Preferăți limbajul care explică ce poate publica, gestiona sau automatiza o organizație în Scoutello.

Utilizați:

  • Substantive specifice produsului: pagini de destinație, dale, tururi, evenimente, organizații, tabloul de bord, oaspeți, coduri QR, traduceri.
  • Descrieri orientate spre rezultate care conectează experiențele oaspeților cu fluxurile de lucru ale operatorilor.
  • Limbaj neutru din punct de vedere al genului în germană și în alte texte localizate.

Evitați:

  • Limbaj vag de platformă fără exemple.
  • Jargon de întreprindere excesiv de formal.
  • Paragrafe lungi acolo unde o secțiune scanabilă ar funcționa mai bine.

Reguli practice​

  • Utilizați #ff8d49 ca accent principal de brand și #145466 ca culoare secundară de bază.
  • Preferăți clasele tokenizate (primary, secondary, foreground, muted, border) în locul culorilor codificate direct în suprafețele produsului.
  • Păstrați paginile de marketing calde, spațioase, rotunjite, conduse de capturi de ecran și ușor animate.
  • Păstrați tablourile de bord și suprafețele operaționale mai calme, mai dense doar acolo unde este necesar și mai concentrate pe sarcini.
  • Lăsați experiențele oaspeților deținuți de clienți să susțină brandingul organizației acolo unde produsul expune deja controale de branding, dar păstrați suprafețele deținute de Scoutello aliniate cu acest sistem.

Concepte asociate: Rute și suprafețe, Pagini de destinație și dale, Experiențe oaspeți bazate pe browser.