Hop til hovedindhold

Designsystem

Scoutello skal føles varmt, kompetent og produktfokuseret. Det foretrukne udseende er lyst, generøst, afrundet og redaktionelt: klart indhold først, derefter subtil brandfarve, bløde overflader og rolig bevægelse, 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 genbruge de delte design-tokens, hvor det er muligt, og kun blive mere udtryksfulde, når overfladen eksplicit er brand- eller marketingorienteret.

Logo og Brand Assets​

Brug Scoutello-logoet fra den offentlige dokumentations-asset URL, 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. Hold tilstrækkelig klar plads omkring mærket, undgå at strække eller omfarve det, og placer det på hvide, varmt cremefarvede eller andre rolige overflader, der bevarer kontrasten.

Brandfarver​

Primærfarve: #ff8d49

Brug den primære orange som Scoutellos accentfarve: primære handlingsopfordringer, fokuserede tilstande, aktiv navigation, små ikonbaggrunde, fremhævet tekst, bløde glød 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 blågrøn som en grundfarve. Den fungerer bedst i gradienter med den primære orange, mørke handlingsopfordringspaneler, visuel dybde og lejlighedsvise høj-emphasis brandøjeblikke. Den bør ikke erstatte den primære orange som standard handlingsfarve.

Understøttende farver:

  • Varm creme baggrunde: #fff8f1, #fff4ea, #fcf6f1 og bløde orange-50 / amber-50 overflader.
  • Produktneutraler: hvide kort, mørk forgrundstekst, dæmpet tekst omkring 70-75% gennemsigtighed 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 blågrøn forbliver genkendelige som brandparret.

Visuel Stil​

Foretræk et rent, premium SaaS-look med nok varme til at undgå at føles generisk. Landingssiden kombinerer creme mesh-baggrunde, hvide kort, store produkt-skærmbilleder, afrundede hjørner og tilbageholdende 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 creme overflader i stedet for tunge farvede blokke.
  • Subtile skygger som shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 eller brugerdefinerede skygger med lav gennemsigtighed.
  • Store produkt-skærmbilleder eller UI-mockups som bevis, især til marketing og funktionsfortælling.
  • Små brandøjeblikke som orange fremhævet tekst, ikon-chips, ringe, glød og gradient CTAs.

Undgå:

  • Højlydte orange baggrunde på hele siden.
  • Overdreven brug af blågrøn til almindelige kontroller.
  • Tætte, proppede layouts.
  • Hårde skygger, skarpe rektangler eller kolde monochrome dashboards.
  • Dekorativ bevægelse, der konkurrerer med læsning eller opgaveafslutning.

Typografi​

Marketsiden bruger:

  • Space Grotesk til display-overskrifter via landing-display-klassen.
  • Manrope til marketing-brødtekst.

Delte app- og dokumentationsoverflader bruger systemjusteret UI-typografi, der i øjeblikket er tættere på Inter. Stilens mål er konsistent på tværs af overflader: selvsikre overskrifter, tæt overskrift-tracking, læsbar brødtekst og generøs linjehøjde.

Vejledning til overskrifter:

  • Brug store, afbalancerede overskrifter på marketing-sider.
  • Fremhæv kun den vigtige frase med primær orange.
  • Hold linjelængden kontrolleret med max-w-* og text-balance, hvor det er tilgængeligt.

Vejledning til brødtekst:

  • Hold afsnit rolige og direkte.
  • Brug dæmpet forgrundstekst til beskrivelser, normalt text-foreground/70 eller text-foreground/75.
  • Foretræk skanningsbare sektioner, korte afsnit og klare etiketter.

Layout og Afstand​

Layouts skal føles rummelige og stabile. Landingssiden bruger en max-w-7xl-container med responsiv horisontal polstring og store vertikale sektioner.

Almindelige mønstre:

  • Sektionspolstring omkring py-16, py-20 eller større for store marketingsektioner.
  • Kort arrangeret i responsive gitre med ensartede mellemrum.
  • Hero-sektioner med en stærk venstre indholdskolonne og produkt-skærmbilleder eller enheds-kompositioner til højre.
  • Centreret sektionshoveder for brede produktløfter; venstrejusterede hoveder for historie- eller arbejdsgangssektioner.
  • Mobil-første layouts, der stables rent, før de bliver fler-kolonne på større skærme.

Brug hvid plads som en del af designet. Hvis en sektion føles uklar, skal du forenkle indholdet og øge luftrummet, før du tilføjer mere dekoration.

Komponenter og Overflader​

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

  • Knapper: afrundede piller til fremtrædende marketing CTAs; standard produktknapper andre steder.
  • Kort: hvide eller creme, afrundede, kantede og let forhøjede.
  • Ikoner: små, enkle stregikoner i orange-tonede chips.
  • Statistikker og tillidselementer: tilbageholdende kort med orange-tonede kanter eller gradienter.
  • Formularer: klare etiketter, direkte hjælpetekst og tilstrækkelig afstand til mobilbrug.
  • Skærmbilleder: store, skarpe og let forhøjede. Brug dem som konkret bevis på produktet.

Når du bygger produkt-UI, skal du starte fra eksisterende delte UI-komponenter og tokens i stedet for brugerdefinerede engangs-styling. Når du bygger marketing-UI, skal du bruge landings-primitiver og landings-klasser, hvor de passer.

Bevægelse​

Bevægelse skal få interfacet til at føles poleret, ikke travlt. Landingssiden bruger korte afsløringsanimationer, enhedsløfteffekter, glød-blomstereffekter og små hover-løft.

Foretrækket bevægelse:

  • Afsløring op fra 12-24px med blød gennemsigtighed.
  • Hover-kort, der løftes med kun et par pixels.
  • CTA hover-tilstande, der let løfter og uddyber skyggen.
  • Forskudte sektionsindgange, hvor de understøtter narrativ scanning.

Respekter altid præferencer for reduceret bevægelse. Undgå animationer, der kan skjule indhold, blokere interaktion eller føles påkrævet for at forstå siden.

Stemme og Indholdsdesign​

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

Brug:

  • Produktspecifikke navneord: landingssider, fliser, ture, begivenheder, organisationer, dashboard, gæster, QR-koder, oversættelser.
  • Resultatorienterede beskrivelser, der forbinder gæsteoplevelser med operatør-arbejdsgange.
  • Kønsneutralt sprog på tysk og andre lokaliserede tekster.

Undgå:

  • Vagt platformsprog uden eksempler.
  • Overdrevent formelt virksomheds-jargon.
  • Lange afsnit, hvor en skanningsbar sektion ville fungere bedre.

Praktiske Regler​

  • Brug #ff8d49 som den primære brand-accent og #145466 som den sekundære grundfarve.
  • Foretræk tokeniserede klasser (primary, secondary, foreground, muted, border) frem for hårdkodede farver i produktoverflader.
  • Hold marketing-sider varme, rummelige, afrundede, skærmbillede-ledede og let animerede.
  • Hold dashboards og operationelle overflader roligere, kun tættere, hvor det er nødvendigt, og mere opgavefokuserede.
  • Lad kunde-ejede gæsteoplevelser understøtte organisations-branding, hvor produktet allerede eksponerer branding-kontroller, men hold Scoutello-ejede overflader på linje med dette system.

Relaterede koncepter: Ruter og overflader, Landingssider og fliser, Browser-første gæsteoplevelser.