Hop til hovedindhold

Designsystem

Scoutello skal føles varmt, kompetent og produktfokuseret. Det foretrukne udtryk er lyst, luftigt, afrundet og redaktionelt: Tydeligt indhold først, derefter diskrete brandfarver, bløde overflader og rolige bevægelser, der får produktet til at føles responsivt uden at blive dekorativ støj.

Marketing-landingssiden er den tydeligste offentlige reference for den aktuelle visuelle retning. Produktoverflader bør så vidt muligt genbruge de fælles designtokens og kun blive mere udtryksfulde, når overfladen specifikt er brand- eller marketingorienteret.

Logo og brandaktiver​

Brug Scoutello-logoet fra den offentlige URL til dokumentationsaktiver, når en agent, integration eller genereret side har brug for et genanvendeligt brandmærke:

Foretræk SVG-versionen for skarp gengivelse på tværs af skærmstørrelser. Brug PNG-versionen, når et værktøj eller en destination ikke kan håndtere SVG. Sørg for tilstrækkelig friplads omkring mærket, undgå at strække eller omfarve det, og placér det på hvide, varme cremefarvede eller andre rolige overflader, der bevarer kontrasten.

Brandfarver​

Primærfarve: #ff8d49

Brug den primære orange som Scoutellos accentfarve: primære call-to-action-elementer, fokustilstande, aktiv navigation, små ikonbaggrunde, fremhævet tekst, bløde gløder og varme gradienter. I produktkode svarer dette til --primary: 24 100% 64% og Tailwind-klasser som bg-primary, text-primary, border-primary/15 og shadow-primary/10.

Sekundærfarve: #145466

Brug den sekundære dybe teal som en forankrende farve. Den fungerer bedst i gradienter sammen med den primære orange, i mørke call-to-action-paneler, til visuel dybde og ved enkelte brandøjeblikke med høj vægt. Den bør ikke erstatte primær orange som standardfarve for handlinger.

Understøttende farver:

  • Varm cremefarvet baggrund: #fff8f1, #fff4ea, #fcf6f1 samt bløde orange-50 / amber-50-overflader.
  • Produktets neutrale farver: hvide kort, mørk forgrundstekst, dæmpet tekst med omkring 70-75 % opacitet og lyse kanter.
  • Tertiær blå: hsl(205 100% 51%) er tilgængelig som en understøttende token, men bør bruges sparsomt, så orange og teal forbliver genkendelige som brandpar.

Visuel stil​

Foretræk et rent og eksklusivt SaaS-udtryk med tilstrækkelig varme til at undgå et generisk indtryk. Landingssiden kombinerer cremefarvede mesh-baggrunde, hvide kort, store produktskærmbilleder, afrundede hjørner og afdæmpede gradienter.

Brug:

  • Afrundede kort og paneler, ofte fra rounded-2xl til rounded-[2rem].
  • Bløde kanter som border-primary/10, border-primary/15, ring-black/5 og lyse neutrale kanter.
  • Lagdelte hvide eller cremefarvede overflader i stedet for tunge farveflader.
  • Diskrete skygger som shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 eller brugerdefinerede skygger med lav opacitet.
  • Store produktskærmbilleder eller UI-mockups som dokumentation, især til marketing og formidling af funktioner.
  • Små branddetaljer som orange fremhævet tekst, ikonchips, ringe, gløder og gradientbaserede CTA'er.

Undgå:

  • Højtråbende orange baggrunde på hele sider.
  • Overdreven brug af teal til almindelige kontrolelementer.
  • Tætte og kompakte layouts.
  • Hårde skygger, skarpe rektangler eller kolde monokrome dashboards.
  • Dekorative bevægelser, der konkurrerer med læsning eller opgaveløsning.

Typografi​

Marketingwebsitet bruger:

  • Space Grotesk til fremtrædende overskrifter via klassen landing-display.
  • Manrope til brødtekst i marketingmateriale.

Fælles overflader i appen og dokumentationen bruger systemtilpasset UI-typografi, som i øjeblikket ligger tættere på Inter. Målet er et ensartet udtryk på tværs af overflader: sikre overskrifter, tæt afstand mellem bogstaver i overskrifter, letlæselig brødtekst og god linjehøjde.

Retningslinjer for overskrifter:

  • Brug store, afbalancerede overskrifter på marketingsider.
  • Fremhæv kun den vigtigste formulering med primær orange.
  • Begræns linjelængden med max-w-* og text-balance, hvor det er muligt.

Retningslinjer for brødtekst:

  • Hold afsnit rolige og direkte.
  • Brug dæmpet forgrundstekst til beskrivelser, typisk text-foreground/70 eller text-foreground/75.
  • Foretræk sektioner, der er nemme at skimme, korte afsnit og tydelige etiketter.

Layout og afstand​

Layouts skal føles rummelige og stabile. Landingssiden bruger en max-w-7xl-container med responsiv vandret indvendig afstand og store sektioner i højden.

Typiske mønstre:

  • Indvendig afstand i sektioner på omkring py-16, py-20 eller mere i større marketingsektioner.
  • Kort arrangeret i responsive gitterlayouts med ensartede mellemrum.
  • Hero-sektioner med en stærk venstre indholdskolonne og produktskærmbilleder eller enhedskompositioner til højre.
  • Centrerede sektionsoverskrifter til brede produktløfter; venstrejusterede overskrifter til historie- eller workflowsektioner.
  • Mobile-first-layouts, der stables overskueligt, før de bliver til layouts med flere kolonner på større skærme.

Brug tom plads som en del af designet. Hvis en sektion føles uklar, så forenkling indholdet og giv mere luft, før der tilføjes mere dekoration.

Komponenter og overflader​

Scoutellos overflader skal føles taktile, men lette:

  • Knapper: Afrundede piller til fremtrædende marketing-CTA'er; standardknapper i resten af produktet.
  • Kort: Hvide eller cremefarvede, afrundede, med kant og en diskret hævning.
  • Ikoner: Små, enkle linjeikoner i orangefarvede chips.
  • Statistik- og tillidselementer: Afdæmpede kort med orangefarvede kanter eller gradienter.
  • Formularer: Tydelige etiketter, direkte hjælpetekst og tilstrækkelig afstand til mobilbrug.
  • Skærmbilleder: Store, skarpe og let hævede. Brug dem som konkret dokumentation af produktet.

Når produktets brugerflade bygges, skal eksisterende delte UI-komponenter og designtokens bruges som udgangspunkt i stedet for specialtilpasset styling til enkeltstående formål. Når marketingbrugerflader bygges, skal landing-primitiver og landing-klasser bruges, hvor de passer.

Bevægelse​

Bevægelse skal få brugerfladen til at føles gennemarbejdet – ikke travl. Landingssiden bruger korte fremtoningsanimationer, effekter, hvor enheder løftes op, glødende bloom-effekter og små løft ved hover.

Foretrukken bevægelse:

  • Fremtoning opad fra 12-24 px med blød opacitet.
  • Hover-kort, der kun løftes nogle få pixels.
  • Hover-tilstande for CTA'er, der løftes en smule og får en dybere skygge.
  • Forskudte indgange for sektioner, når de understøtter narrativ skimming.

Respektér altid indstillinger for reduceret bevægelse. Undgå animationer, der kan skjule indhold, blokere interaktion eller føles nødvendige for at forstå siden.

Stemme og indholdsdesign​

Det visuelle system fungerer bedst med direkte og konkret tekst. Foretræk formuleringer, der forklarer, hvad en organisation kan publicere, administrere eller automatisere i Scoutello.

Brug:

  • Produktspecifikke navneord: landingssider, fliser, ture, events, organisationer, dashboard, gæster, QR-koder og oversættelser.
  • Resultatorienterede beskrivelser, der forbinder gæsteoplevelser med operatørernes arbejdsgange.
  • Kønsneutralt sprog på tysk og i andet lokaliseret indhold.

Undgå:

  • Vagt platformsprog uden eksempler.
  • Overdrevent formelt virksomheds- og branchesprog.
  • Lange afsnit, når en sektion, der er nem at skimme, ville fungere bedre.

Praktiske regler​

  • Brug #ff8d49 som det primære brandaccent og #145466 som den sekundære grundfarve.
  • Foretræk tokeniserede klasser (primary, secondary, foreground, muted, border) frem for hardcodede farver i produktflader.
  • Hold marketingsider varme, luftige, afrundede, skærmbillededrevne og let animerede.
  • Hold dashboard- og driftsflader roligere og kun tættere, hvor det er nødvendigt, samt mere fokuserede på opgaver.
  • Lad gæsteoplevelser, som ejes af kunden, understøtte organisationens branding, hvor produktet allerede giver mulighed for brandingkontrol, men sørg for, at Scoutello-ejede flader følger dette system.

Relaterede begreber: Ruter og flader, Landingssider og fliser, Browserbaserede gæsteoplevelser.