Sistem de design

Scoutello ar trebui să transmită căldură, competență și orientare către produs. Aspectul preferat este luminos, aerisit, rotunjit și editorial: conținutul clar este prioritar, urmat de accente cromatice discrete, suprafețe delicate și animații calme, care fac produsul să pară receptiv fără a deveni zgomot decorativ.

Pagina de prezentare este cea mai clară referință publică pentru direcția vizuală actuală. Suprafețele produsului ar trebui să reutilizeze pe cât posibil tokenurile de design comune și să devină mai expresive doar atunci când suprafața este orientată explicit către brand sau marketing.

Logo și elemente de brand

Folosiți logo-ul Scoutello de la URL-ul public al elementului din documentație atunci când un agent, o integrare sau o pagină generată are nevoie de un element de brand reutilizabil:

• Logo SVG: https://docs.scoutello.com/img/scoutello-logo.svg
• Logo PNG: https://docs.scoutello.com/img/scoutello-logo.png

Preferați versiunea SVG pentru o redare clară pe toate dimensiunile de ecran. Folosiți versiunea PNG atunci când instrumentul sau destinația nu acceptă SVG. Păstrați suficient spațiu liber în jurul elementului, evitați întinderea sau recolorarea acestuia și plasați-l pe suprafețe albe, crem cald sau alte suprafețe calme care păstrează contrastul.

Culorile brandului

Culoare principală: #ff8d49

Folosiți portocaliul principal pentru culoarea de accent Scoutello: îndemnuri principale la acțiune, stări focalizate, navigare activă, fundaluri pentru pictograme mici, text evidențiat, străluciri discrete și degradeuri calde. În codul produsului, acesta corespunde --primary: 24 100% 64% și claselor Tailwind precum bg-primary, text-primary, border-primary/15 și shadow-primary/10.

Culoare secundară: #145466

Folosiți turcoazul închis secundar ca nuanță de echilibru. Funcționează cel mai bine în degradeuri cu portocaliul principal, panouri întunecate pentru îndemnuri la acțiune, pentru profunzime vizuală și în momente de brand cu accent puternic. Nu ar trebui să înlocuiască portocaliul principal ca nuanță implicită pentru acțiuni.

Culori de suport:

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

Stil vizual

Preferați un aspect SaaS curat și premium, cu suficientă căldură pentru a evita impresia de generic. Pagina de prezentare combină fundaluri cu textură crem, carduri albe, capturi mari de ecran ale produsului, colțuri rotunjite și degradeuri discrete.

Folosiți:

• Carduri și panouri rotunjite, de obicei de la rounded-2xl la rounded-[2rem].
• Borduri discrete precum border-primary/10, border-primary/15, ring-black/5 și borduri neutre deschise.
• Suprafețe suprapuse albe sau crem în locul blocurilor mari, puternic colorate.
• Umbre discrete 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 dovezi, în special pentru marketing și prezentarea funcționalităților.
• Accente de brand discrete, precum text evidențiat cu portocaliu, cipuri pentru pictograme, inele, străluciri și CTA-uri cu degrade.

Evitați:

• Fundalurile portocalii puternice pe întreaga pagină.
• Utilizarea excesivă a turcoazului pentru controale obișnuite.
• Aspectele dense și înghesuite.
• Umbrele dure, dreptunghiurile cu muchii ascuțite sau tablourile de bord monocrome și reci.
• Animațiile decorative care concurează cu lectura sau finalizarea sarcinilor.

Tipografie

Site-ul de marketing folosește:

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

Suprafețele comune ale aplicației și documentației folosesc o tipografie UI aliniată la sistem, în prezent mai apropiată de Inter. Obiectivul stilistic este consecvența între suprafețe: titluri sigure, spațiere strânsă între literele titlurilor, text de corp ușor de citit și o înălțime generoasă a rândurilor.

Recomandări pentru titluri:

• Folosiți titluri mari și echilibrate pe paginile de marketing.
• Evidențiați doar expresia importantă cu portocaliul principal.
• Mențineți lungimea rândurilor sub control cu max-w-* și text-balance, acolo unde sunt disponibile.

Recomandări pentru textul de corp:

• Păstrați paragrafele calme și directe.
• Folosiți text în prim-plan estompat pentru descrieri, de obicei text-foreground/70 sau text-foreground/75.
• Preferați secțiuni ușor de parcurs, paragrafe scurte și etichete clare.

Aspect și spațiere

Aspectul ar trebui să fie aerisit și stabil. Pagina de prezentare folosește un container max-w-7xl cu spațiere orizontală adaptivă și secțiuni verticale ample.

Modele frecvente:

• Spațiere interioară a secțiunilor de aproximativ py-16, py-20 sau mai mare pentru secțiunile de marketing importante.
• Carduri dispuse în grile responsive, cu spațieri uniforme.
• Secțiuni hero cu o coloană de conținut puternică în stânga și capturi ale produsului sau compoziții cu dispozitive în dreapta.
• Antete de secțiune centrate pentru promisiuni generale despre produs; antete aliniate la stânga pentru secțiuni despre parcursuri sau fluxuri de lucru.
• Aspecte concepute pentru dispozitive mobile, care se stivuiesc ordonat înainte de a deveni multicolumnă pe ecrane mai mari.

Folosiți spațiul liber ca parte a designului. Dacă o secțiune nu este clară, simplificați conținutul și măriți spațiul de respirație înainte de a adăuga mai multe elemente decorative.

Componente și suprafețe

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

• Butoane: capsule rotunjite pentru CTA-uri de marketing proeminente; butoane standard ale produsului în rest.
• Carduri: albe sau crem, rotunjite, cu bordură și ușor ridicate.
• Pictograme: pictograme mici și simple, cu contur, în cipuri cu nuanțe portocalii.
• Statistici și elemente de încredere: carduri discrete, cu borduri sau degradeuri în nuanțe portocalii.
• Formulare: etichete clare, text explicativ direct și spațiere suficientă pentru utilizarea pe dispozitive mobile.
• Capturi de ecran: mari, clare și ușor ridicate. Folosiți-le ca dovezi concrete ale produsului.

La dezvoltarea interfeței unui produs, porniți de la componentele și tokenurile UI partajate existente, în loc să folosiți stilizări personalizate, create pentru un singur caz. Pentru interfețele de marketing, folosiți primitivele și clasele pentru landing page acolo unde se potrivesc.

Animație

Animația ar trebui să facă interfața să pară finisată, nu aglomerată. Pagina de destinație folosește animații scurte de apariție, efecte de ridicare a dispozitivelor, efecte de expansiune a strălucirii și mici efecte de ridicare la trecerea cursorului.

Animații recomandate:

• Apariție de jos în sus, de la 12–24 px, cu opacitate progresivă.
• Carduri care se ridică la trecerea cursorului cu doar câțiva pixeli.
• Stări CTA la trecerea cursorului care ridică ușor elementul și accentuează umbra.
• Apariții eșalonate ale secțiunilor, atunci când susțin parcurgerea narativă.

Respectați întotdeauna preferințele pentru animații reduse. Evitați animațiile care pot ascunde conținut, bloca interacțiunea sau crea impresia că sunt necesare pentru înțelegerea paginii.

Voce și design al conținutului

Sistemul vizual funcționează cel mai bine cu texte directe și concrete. Preferă formulări care explică ce poate publica, gestiona sau automatiza o organizație în Scoutello.

Folosiți:

• Substantive specifice produsului: pagini de destinație, tile-uri, 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:

• Formulările vagi despre platformă, fără exemple.
• Jargonul corporativ excesiv de formal.
• Paragrafele lungi, atunci când o secțiune ușor de parcurs ar fi mai potrivită.

Reguli practice

• Folosiți #ff8d49 ca accent principal al brandului și #145466 ca nuanță secundară de echilibrare.
• Preferți clasele bazate pe tokenuri (primary, secondary, foreground, muted, border) în locul culorilor introduse direct în suprafețele produsului.
• Păstrați paginile de marketing calde, aerisite, cu colțuri rotunjite, axate pe capturi de ecran și cu animații discrete.
• Păstrați tabloul de bord și suprafețele operaționale mai calme, mai dense doar acolo unde este necesar și mai concentrate pe sarcini.
• Permiteți experiențelor pentru oaspeți deținute de clienți să susțină brandingul organizației acolo unde produsul oferă deja opțiuni de personalizare a brandului, dar păstrați suprafețele deținute de Scoutello aliniate la acest sistem.

Concepte asociate: Rute și suprafețe, Pagini de destinație și tile-uri, Experiențe pentru oaspeți concepute pentru browser.