Hopp til hovedinnhold

Designsystem

Beskrivelse: Scoutellos farger, visuell retning, typografi, layout og veiledning for interaksjon.

Scoutello skal føles varmt, kompetent og produktfokusert. Den foretrukne stilen er lys, generøs, avrundet og redaksjonell: tydelig innhold først, deretter subtil merkefarge, myke flater og rolig bevegelse som gjør produktet responsivt uten å bli dekorativ støy.

Markedsføringens landingsside er den tydeligste offentlige referansen for den nåværende visuelle retningen. Produktoverflater bør gjenbruke delte designtokener der det er mulig, og bare bli mer uttrykksfulle når overflaten eksplisitt er merkevare- eller markedsføringsorientert.

Logo og merkevareelementer​

Bruk Scoutello-logoen fra den offentlige dokumentasjonens ressurs-URL når en agent, integrasjon eller generert side trenger et gjenbrukbart merkevaremerke:

Foretrekk SVG-versjonen for skarp gjengivelse på tvers av skjermstørrelser. Bruk PNG-versjonen når et verktøy eller en destinasjon ikke kan håndtere SVG. Hold nok klar plass rundt merket, unngå å strekke eller fargelegge det på nytt, og plasser det på hvite, varm kremfargede eller andre rolige overflater som bevarer kontrast.

Merkevarefarger​

Primærfarge: #ff8d49

Bruk den primære oransje fargen som Scoutellos aksentfarge: primære handlingskall, fokuserte tilstander, aktiv navigasjon, små ikonbakgrunner, uthevet tekst, myke glød 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 blågrønne fargen som en grunnfarge. Den fungerer best i gradienter med den primære oransje, mørke paneler for handlingskall, visuell dybde og sporadiske merkevareøyeblikk med høy vekt. Den bør ikke erstatte primæroransje som standard handlingsfarge.

Støttefarger:

  • Varm kremfargede bakgrunner: #fff8f1, #fff4ea, #fcf6f1, og myke orange-50 / amber-50 overflater.
  • Produkt nøytrale farger: hvite kort, mørk tekst foran, dempet tekst rundt 70-75% opasitet, og lyse kanter.
  • Tertiær blå: hsl(205 100% 51%) er tilgjengelig som en støttende token, men bør brukes sparsomt slik at oransje og blågrønn forblir gjenkjennelige som merkeparet.

Visuell stil​

Foretrekk et rent, premium SaaS-utseende med nok varme til å unngå å føles generisk. Landingssiden kombinerer kremfargede mesh-bakgrunner, hvite kort, store produkt-skjermbilder, avrundede hjørner og tilbakeholdne gradienter.

Bruk:

  • Avrundede kort og paneler, ofte fra rounded-2xl til rounded-[2rem].
  • Myke kanter som border-primary/10, border-primary/15, ring-black/5, og lyse nøytrale kanter.
  • Lagdelte hvite eller kremfargede overflater i stedet for tunge fargeblokker.
  • Subtile skygger som shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, eller egendefinerte skygger med lav opasitet.
  • Store produkt-skjermbilder eller UI-mockups som bevis, spesielt for markedsføring og funksjonshistoriefortelling.
  • Små merkevareøyeblikk som uthevet oransje tekst, ikonbrikker, ringer, glød og gradient handlingskall.

Unngå:

  • Høylytte oransje bakgrunner over hele siden.
  • Overbruk av blågrønn for vanlige kontroller.
  • Tette, trange layouter.
  • Harde skygger, skarpe rektangler eller kalde monokrome dashbord.
  • Dekorativ bevegelse som konkurrerer med lesing eller oppgavefullføring.

Typografi​

Markedsføringssiden bruker:

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

Delte app- og dokumentasjonsoverflater bruker systemtilpasset UI-typografi, for tiden nærmere Inter. Stilens mål er konsistent på tvers av overflater: selvsikre overskrifter, tett sporing av overskrifter, lesbar brødtekst og generøs linjehøyde.

Veiledning for overskrifter:

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

Veiledning for brødtekst:

  • Hold avsnitt rolige og direkte.
  • Bruk dempet forgrunnstekst for beskrivelser, vanligvis text-foreground/70 eller text-foreground/75.
  • Foretrekk skannbare seksjoner, korte avsnitt og tydelige etiketter.

Layout og avstand​

Layouts skal føles romslige og stabile. Landingssiden bruker en max-w-7xl-container med responsiv horisontal polstring og store vertikale seksjoner.

Vanlige mønstre:

  • Seksjonspolstring rundt py-16, py-20, eller større for viktige markedsføringsseksjoner.
  • Kort arrangert i responsive rutenett med jevne mellomrom.
  • Hero-seksjoner med en sterk venstre innholdskolonne og produkt-skjermbilder eller enhetskomposisjoner til høyre.
  • Sentrerte seksjonsoverskrifter for brede produktløfter; venstrejusterte overskrifter for historie- eller arbeidsflytseksjoner.
  • Mobil-først-layouter som stables rent før de blir fler-kolonne på større skjermer.

Bruk hvitt rom som en del av designet. Hvis en seksjon føles uklar, forenkle innholdet og øk pusterommet før du legger til mer dekorasjon.

Komponenter og overflater​

Scoutello-overflater skal føles taktile, men lette:

  • Knapper: avrundede piller for fremtredende markedsførings handlingskall; standard produktknapper andre steder.
  • Kort: hvite eller kremfargede, avrundede, kantede og lett hevede.
  • Ikoner: små, enkle strek-ikoner i oransje-tonede brikker.
  • Statistikk og tillitselementer: tilbakeholdne kort med oransje-tonede kanter eller gradienter.
  • Skjemaer: tydelige etiketter, direkte hjelpetekst, og nok avstand for mobilbruk.
  • Skjermbilder: store, skarpe og lett hevede. Bruk dem som konkret bevis på produktet.

Når du bygger produkt-UI, start fra eksisterende delte UI-komponenter og tokener i stedet for egendefinert engangs-styling. Når du bygger markedsførings-UI, bruk landingsprimitiver og landingsklasser der de passer.

Bevegelse​

Bevegelse skal gjøre grensesnittet polert, ikke travelt. Landingssiden bruker korte avsløringsanimasjoner, enhetsoppløftningseffekter, glød-blomstringseffekter og små hover-løft.

Foretrukket bevegelse:

  • Avsløring opp fra 12-24px med myk opasitet.
  • Hover-kort som løftes bare noen få piksler.
  • Handlingskall hover-tilstander som lett løfter og dypner skyggen.
  • Staggered seksjonsinnganger der de støtter narrativ skanning.

Respekter alltid redusert bevegelsespreferanse. Unngå animasjoner som kan skjule innhold, blokkere interaksjon, eller føles påkrevd for å forstå siden.

Stemme og innholdsdesign​

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

Bruk:

  • Produktspesifikke substantiv: landingssider, fliser, turer, arrangementer, organisasjoner, dashbord, gjester, QR-koder, oversettelser.
  • Resultatorienterte beskrivelser som kobler gjesteopplevelser med operatør-arbeidsflyter.
  • Kjønnsnøytralt språk på tysk og andre lokaliserte tekster.

Unngå:

  • Vag plattformspråk uten eksempler.
  • Overdrevent formelt bedriftsjargon.
  • Lange avsnitt der en skannbar seksjon ville fungert bedre.

Praktiske regler​

  • Bruk #ff8d49 som hovedmerkevareaksent og #145466 som sekundær grunnfarge.
  • Foretrekk tokeniserte klasser (primary, secondary, foreground, muted, border) over hardkodede farger i produktoverflater.
  • Hold markedsføringssider varme, romslige, avrundede, skjermbilde-ledede og lett animerte.
  • Hold dashbord- og operasjonelle overflater roligere, tettere bare der det er nødvendig, og mer oppgavefokuserte.
  • La kunde-eide gjesteopplevelser støtte organisasjonsmerkevarebygging der produktet allerede eksponerer merkevarekontroller, men hold Scoutello-eide overflater i tråd med dette systemet.

Relaterte konsepter: Ruter og overflater, Landingssider og fliser, Nettleser-først gjesteopplevelser.