Hoppa till huvudinnehållet

Designsystem

Scoutello ska kännas varmt, kompetent och produktfokuserat. Det föredragna uttrycket är ljust, luftigt, rundat och redaktionellt: tydligt innehåll först, därefter subtila varumärkesfärger, mjuka ytor och lugna rörelser som får produkten att kännas responsiv utan att bli dekorativt brus.

Marknadslandningssidan är den tydligaste offentliga referensen för den aktuella visuella riktningen. Produktgränssnitt bör återanvända gemensamma designtokens där det är möjligt och endast bli mer uttrycksfulla när ytan uttryckligen är varumärkes- eller marknadsorienterad.

Logotyp och varumärkestillgångar​

Använd Scoutello-logotypen från den offentliga URL:en för dokumentationstillgångar när en agent, integration eller genererad sida behöver ett återanvändbart varumärkeselement:

Föredra SVG-versionen för skarp återgivning på olika skärmstorlekar. Använd PNG-versionen när ett verktyg eller en destination inte kan hantera SVG. Lämna tillräckligt med fri yta runt märket, undvik att tänja ut eller ändra färg på det och placera det på vita, varmt krämfärgade eller andra lugna ytor som bevarar kontrasten.

Varumärkesfärger​

Primärfärg: #ff8d49

Använd den primära orange färgen som Scoutellos accentfärg: primära uppmaningar till handling, fokuserade lägen, aktiv navigering, små ikonbakgrunder, markerad text, mjuka glödseffekter och varma gradienter. I produktkod motsvarar detta --primary: 24 100% 64% och Tailwind-klasser som bg-primary, text-primary, border-primary/15 och shadow-primary/10.

Sekundärfärg: #145466

Använd den sekundära mörka teal färgen som en balanserande färg. Den fungerar bäst i gradienter med den primära orange färgen, mörka paneler för uppmaningar till handling, visuellt djup och enstaka varumärkesuttryck med hög betoning. Den bör inte ersätta primär orange som standardfärg för åtgärder.

Stödjande färger:

  • Varmt krämfärgade bakgrunder: #fff8f1, #fff4ea, #fcf6f1 och mjuka ytor i orange-50 / amber-50.
  • Produktneutrala färger: vita kort, mörk förgrundstext, dämpad text med cirka 70–75 % opacitet och ljusa kantlinjer.
  • Tertiär blå: hsl(205 100% 51%) finns som en stödjande token, men bör användas sparsamt så att orange och teal förblir igenkännbara som varumärkesparet.

Visuell stil​

Föredra ett rent, exklusivt SaaS-uttryck med tillräckligt mycket värme för att undvika en generisk känsla. Landningssidan kombinerar krämfärgade mesh-bakgrunder, vita kort, stora produktbilder, rundade hörn och återhållsamma gradienter.

Använd:

  • Rundade kort och paneler, ofta från rounded-2xl till rounded-[2rem].
  • Mjuka kantlinjer som border-primary/10, border-primary/15, ring-black/5 och ljusa neutrala kantlinjer.
  • Lager av vita eller krämfärgade ytor i stället för stora färgade block.
  • Subtila skuggor som shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 eller anpassade skuggor med låg opacitet.
  • Stora produktbilder eller UI-mockuper som bevis, särskilt i marknadsföring och berättande om funktioner.
  • Små varumärkesinslag som orange markerad text, ikonchips, ringar, glödseffekter och gradientbaserade uppmaningar till handling.

Undvik:

  • Högljudda orange bakgrunder över hela sidor.
  • Att använda teal för mycket i vanliga kontroller.
  • Täta och trånga layouter.
  • Hårda skuggor, skarpa rektanglar eller kalla monokroma dashboards.
  • Dekorativa rörelser som konkurrerar med läsning eller uppgiftsutförande.

Typografi​

Marknadssidan använder:

  • Space Grotesk för rubriker genom landing-display-klassen.
  • Manrope för brödtext i marknadsföring.

Gemensamma ytor i appen och dokumentationen använder systemanpassad UI-typografi, för närvarande närmare Inter. Stil målet är konsekvent över alla ytor: självsäkra rubriker, tät teckenmellanrum i rubriker, lättläst brödtext och generös radavstånd.

Riktlinjer för rubriker:

  • Använd stora, balanserade rubriker på marknadssidor.
  • Markera endast den viktiga frasen med primär orange.
  • Begränsa radlängden med max-w-* och text-balance där det är möjligt.

Riktlinjer för brödtext:

  • Håll styckena lugna och direkta.
  • Använd dämpad förgrundstext för beskrivningar, vanligtvis text-foreground/70 eller text-foreground/75.
  • Föredra lättskannade avsnitt, korta stycken och tydliga etiketter.

Layout och avstånd​

Layouter ska kännas luftiga och stabila. Landningssidan använder en max-w-7xl-container med responsiv horisontell padding och stora vertikala sektioner.

Vanliga mönster:

  • Sektionspadding kring py-16, py-20 eller större för större marknadssektioner.
  • Kort placerade i responsiva rutnät med konsekventa mellanrum.
  • Hero-sektioner med en tydlig vänsterkolumn för innehåll och produktbilder eller enhetskompositioner till höger.
  • Centrerade sektionsrubriker för breda produktlöften; vänsterställda rubriker för berättande eller arbetsflödessektioner.
  • Mobile-first-layouter som staplas tydligt innan de blir flerkolumnslayouter på större skärmar.

Använd tomrum som en del av designen. Om en sektion känns otydlig, förenkla innehållet och ge mer luft innan mer dekoration läggs till.

Komponenter och ytor​

Scoutellos ytor ska kännas taktila men lätta:

  • Knappar: rundade piller för framträdande marknadsrelaterade uppmaningar till handling; standardknappar i övriga delar av produkten.
  • Kort: vita eller krämfärgade, rundade, försedda med kantlinje och lätt upphöjda.
  • Ikoner: små, enkla linjeikoner i orangefärgade chips.
  • Statistik- och förtroendeelement: återhållsamma kort med orangefärgade kantlinjer eller gradienter.
  • Formulär: tydliga etiketter, direkt hjälpte xt och tillräckligt med avstånd för mobil användning.
  • Skärmbilder: stora, skarpa och lätt upphöjda. Använd dem som konkret bevis på produkten.

När produktgränssnitt byggs ska befintliga delade UI-komponenter och tokens användas i första hand, i stället för anpassad styling för enstaka fall. När marknadsföringsgränssnitt byggs ska landningssidans primitives och klasser användas där de passar.

Animationer​

Animationer ska få gränssnittet att kännas genomarbetat, inte rörigt. Landningssidan använder korta reveal-animationer, effekter där enheter höjs upp, glödande bloom-effekter och små lyft vid hovring.

Föredragna animationer:

  • Visa element genom att låta dem röra sig uppåt 12–24 px samtidigt som opaciteten ökar mjukt.
  • Låt kort vid hovring lyftas endast några få pixlar.
  • Använd hover-tillstånd för CTA:er som lyfts något och får en djupare skugga.
  • Använd stegvisa sektionsentréer när de underlättar narrativ skanning.

Respektera alltid inställningar för minskad rörelse. Undvik animationer som kan dölja innehåll, blockera interaktion eller kännas nödvändiga för att förstå sidan.

Tonalitet och innehållsdesign​

Det visuella systemet fungerar bäst med direkta, konkreta texter. Föredra formuleringar som förklarar vad en organisation kan publicera, hantera eller automatisera i Scoutello.

Använd:

  • Produktspecifika substantiv: landningssidor, tiles, turer, evenemang, organisationer, dashboard, gäster, QR-koder, översättningar.
  • Resultatinriktade beskrivningar som kopplar samman gästupplevelser med operatörernas arbetsflöden.
  • Könsneutralt språk på tyska och i annat lokaliserat innehåll.

Undvik:

  • Vagt plattformsspråk utan exempel.
  • Överdrivet formell företagsjargong.
  • Långa stycken när en lättskannad sektion skulle fungera bättre.

Praktiska regler​

  • Använd #ff8d49 som den huvudsakliga varumärkesaccenten och #145466 som den sekundära basfärgen.
  • Föredra tokeniserade klasser (primary, secondary, foreground, muted, border) framför hårdkodade färger i produktens ytor.
  • Håll marknadsföringssidor varma, luftiga, rundade, skärmdumpsdrivna och lätt animerade.
  • Håll dashboard- och operativa ytor lugnare, tätare endast där det behövs och mer uppgiftsfokuserade.
  • Låt kundägda gästupplevelser stödja organisationens varumärke där produkten redan erbjuder varumärkesinställningar, men håll Scoutello-ägda ytor i linje med detta system.

Relaterade koncept: Routes and surfaces, Landing pages and tiles, Browser-first guest experiences.