Hopp til hovedinnholdet

Designsystem

Scoutello skal oppleves som varmt, kompetent og produktfokusert. Det foretrukne uttrykket er lyst, luftig, avrundet og redaksjonelt: tydelig innhold først, deretter diskret merkevarefarge, myke flater og rolige bevegelser som får produktet til å føles responsivt uten å bli dekorativ støy.

Markedsføringssiden er den tydeligste offentlige referansen for den nåværende visuelle retningen. Produktflater bør gjenbruke de delte designtokenene der det er mulig, og bare bli mer uttrykksfulle når flaten uttrykkelig er merkevare- eller markedsføringsorientert.

Logo og merkevareressurser​

Bruk Scoutello-logoen fra den offentlige URL-en til dokumentasjonsressursen når en agent, integrasjon eller generert side trenger et gjenbrukbart merke:

Foretrekk SVG-versjonen for skarp gjengivelse på tvers av skjermstørrelser. Bruk PNG-versjonen når et verktøy eller en destinasjon ikke støtter SVG. Sørg for tilstrekkelig luft rundt merket, unngå å strekke eller endre fargen, og plasser det på hvite, varme kremfargede eller andre rolige flater som bevarer kontrasten.

Merkevarefarger​

Primærfarge: #ff8d49

Bruk den primære oransjefargen som Scoutellos aksentfarge: primære handlingsknapper, fokustilstander, aktiv navigasjon, små ikonbakgrunner, uthevet tekst, myke gløder og varme gradienter. I produktkode tilsvarer dette --primary: 24 100% 64% og Tailwind-klasser som bg-primary, text-primary, border-primary/15 og shadow-primary/10.

Sekundærfarge: #145466

Bruk den sekundære, dype teal-fargen som en balanserende farge. Den fungerer best i gradienter med den primære oransjefargen, mørke handlingspaneler, visuell dybde og enkelte merkevareøyeblikk med høy vekt. Den bør ikke erstatte primæroransje som standardfarge for handlinger.

Støttefarger:

  • Varm kremfargede bakgrunner: #fff8f1, #fff4ea, #fcf6f1 og myke orange-50 / amber-50-flater.
  • Produktnøytraler: hvite kort, mørk tekst i forgrunnen, dempet tekst med rundt 70–75 % opasitet og lyse kantlinjer.
  • Tertiær blåfarge: hsl(205 100% 51%) er tilgjengelig som et støttetoken, men bør brukes sparsomt slik at oransje og teal fortsatt er gjenkjennelige som merkevareparet.

Visuell stil​

Foretrekk et rent og førsteklasses SaaS-uttrykk med nok varme til å unngå et generisk preg. Landingssiden kombinerer kremfargede mesh-bakgrunner, hvite kort, store produktskjermbilder, avrundede hjørner og tilbakeholdne gradienter.

Bruk:

  • Avrundede kort og paneler, ofte fra rounded-2xl til rounded-[2rem].
  • Myke kantlinjer som border-primary/10, border-primary/15, ring-black/5 og lyse nøytrale kantlinjer.
  • Lagdelte hvite eller kremfargede flater i stedet for tunge fargede blokker.
  • Diskré skygger som shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 eller egendefinerte skygger med lav opasitet.
  • Store produktskjermbilder eller UI-mockuper som dokumentasjon, særlig i markedsføring og historiefortelling rundt funksjoner.
  • Små merkevareelementer som oransje uthevet tekst, ikonbrikker, ringer, gløder og gradientbaserte handlingsknapper.

Unngå:

  • Høylytte oransje bakgrunner over hele siden.
  • Overdreven bruk av teal i vanlige kontroller.
  • Tette og klaustrofobiske layouter.
  • Harde skygger, skarpe rektangler eller kalde monokrome dashbord.
  • Dekorative bevegelser som konkurrerer med lesing eller oppgaveløsing.

Typografi​

Markedsnettstedet bruker:

  • Space Grotesk for store overskrifter gjennom klassen landing-display.
  • Manrope for brødtekst i markedsføringen.

Delte flater i appen og dokumentasjonen bruker systemtilpasset UI-typografi, for tiden nærmere Inter. Målet er et enhetlig uttrykk på tvers av flater: tydelige overskrifter, tett tegnavstand i overskrifter, lettlest brødtekst og god linjehøyde.

Veiledning for overskrifter:

  • Bruk store, balanserte overskrifter på markedsføringssider.
  • Uthev bare den viktige frasen med primæroransje.
  • Begrens linjelengden med max-w-* og text-balance der det er tilgjengelig.

Veiledning for brødtekst:

  • Hold avsnittene rolige og direkte.
  • Bruk dempet tekst i forgrunnen til beskrivelser, vanligvis text-foreground/70 eller text-foreground/75.
  • Foretrekk skannbare seksjoner, korte avsnitt og tydelige etiketter.

Layout og avstand​

Layouter bør føles luftige og stabile. Landingssiden bruker en max-w-7xl-container med responsiv horisontal innvendig marg og store vertikale seksjoner.

Vanlige mønstre:

  • Seksjonsavstand rundt py-16, py-20 eller større for viktige markedsføringsseksjoner.
  • Kort arrangert i responsive rutenett med jevne mellomrom.
  • Hero-seksjoner med en tydelig innholdskolonne til venstre og produktskjermbilder eller enhetssammensetninger til høyre.
  • Sentrerte seksjonsoverskrifter for brede produktløfter; venstrejusterte overskrifter for historie- eller arbeidsflytseksjoner.
  • Mobiltilpassede layouter som stables ryddig før de blir flerkolonneoppsett på større skjermer.

Bruk tomrom som en del av designet. Hvis en seksjon føles uklar, bør innholdet forenkles og det skapes mer luft før mer dekor legges til.

Komponenter og flater​

Scoutello-flater bør føles taktile, men lette:

  • Knapper: avrundede piller for fremtredende markedsføringshandlinger; standard produktknapper ellers.
  • Kort: hvite eller kremfargede, avrundede, med kantlinje og et lett løft.
  • Ikoner: små, enkle linjeikoner i oransjetonede brikker.
  • Statistikk- og tillitselementer: tilbakeholdne kort med oransjetonede kantlinjer eller gradienter.
  • Skjemaer: tydelige etiketter, direkte hjelpetekst og nok avstand for mobilbruk.
  • Skjermbilder: store, skarpe og lett hevet. Bruk dem som konkret dokumentasjon på produktet.

Når produktgrensesnitt bygges, bør eksisterende delte UI-komponenter og tokens brukes fremfor egendefinert styling for enkelttilfeller. Ved bygging av markedsføringsgrensesnitt bør landing-primitiver og landing-klasser brukes der de passer.

Bevegelse​

Bevegelse skal gi grensesnittet et gjennomarbeidet uttrykk, ikke gjøre det urolig. Landingssiden bruker korte innslippsanimasjoner, effekter der enheter løftes frem, glødeffekter og små løft ved hover.

Foretrukket bevegelse:

  • Innslipp nedenfra med 12–24 px og myk opasitet.
  • Hover-kort som løftes bare noen få piksler.
  • Hover-tilstander for CTA-er som løftes litt og får en dypere skygge.
  • Forskjøvede innslipp av seksjoner når det støtter narrativ skanning.

Respekter alltid preferanser for redusert bevegelse. Unngå animasjoner som kan skjule innhold, blokkere interaksjon eller føles nødvendige for å forstå siden.

Stemme og innholdsdesign​

Det visuelle systemet fungerer best med direkte og konkret tekst. Foretrekk formuleringer som forklarer hva en organisasjon kan publisere, administrere eller automatisere i Scoutello.

Bruk:

  • Produktspesifikke substantiver: landingssider, fliser, omvisninger, arrangementer, organisasjoner, kontrollpanel, gjester, QR-koder, oversettelser.
  • Resultatorienterte beskrivelser som knytter gjesteopplevelser til arbeidsflyter for operatører.
  • Kjønnsnøytralt språk på tysk og i annet lokalisert innhold.

Unngå:

  • Vage plattformformuleringer uten eksempler.
  • Overdrevent formelt bedriftsjargong.
  • Lange avsnitt når en skannbar seksjon ville fungert bedre.

Praktiske regler​

  • Bruk #ff8d49 som det primære merkevarefremhevingsfarget og #145466 som den sekundære grunnfargen.
  • Foretrekk tokeniserte klasser (primary, secondary, foreground, muted, border) fremfor hardkodede farger i produktflater.
  • Hold markedsføringssider varme, luftige, avrundede, skjermbildeorienterte og lett animerte.
  • Hold kontrollpaneler og operative flater roligere, tettere bare der det er nødvendig, og mer oppgavefokuserte.
  • La gjesteopplevelser som eies av kundene, støtte organisasjonens profilering der produktet allerede tilbyr innstillinger for profilering, men sørg for at Scoutello-eide flater følger dette systemet.

Relaterte konsepter: Ruter og flater, Landingssider og fliser, Nettleserbaserte gjesteopplevelser.