Hoppa till huvudinnehåll

Designsystem

Beskrivning: Scoutellos varumärkesfärger, visuell inriktning, typografi, layout och interaktionsriktlinjer.

Scoutello ska kännas varmt, kompetent och produktfokuserat. Den föredragna looken är ljus, generös, rundad och redaktionell: tydligt innehåll först, sedan subtil varumärkesfärg, mjuka ytor och lugn rörelse som får produkten att kännas responsiv utan att bli dekorativt brus.

Marknadsföringens landningssida är den tydligaste publika referensen för den nuvarande visuella inriktningen. Produktytor bör återanvända delade designtokens där det är möjligt och bara bli mer uttrycksfulla när ytan uttryckligen är varumärkes- eller marknadsföringsorienterad.

Logotyp och varumärkesresurser​

Använd Scoutello-logotypen från den publika dokumentationens tillgångs-URL när en agent, integration eller genererad sida behöver ett återanvändbart varumärkesmärke:

Föredra SVG-versionen för skarp rendering över skärmstorlekar. Använd PNG-versionen när ett verktyg eller en destination inte kan hantera SVG. Håll tillräckligt med fritt utrymme runt märket, undvik att sträcka ut eller färga om det, och placera det på vita, varmt krämfärgade eller andra lugna ytor som bevarar kontrasten.

Varumärkesfärger​

Primär färg: #ff8d49

Använd den primära orange färgen som Scoutellos accentfärg: primära uppmaningar till handling, fokuserade tillstånd, aktiv navigering, små ikonbakgrunder, markerad text, mjuka glöd-effekter 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är färg: #145466

Använd den sekundära djupa teal färgen som en grundande 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ärkesögonblick med hög betoning. Den bör inte ersätta den primära orange färgen som standardfärgen för åtgärder.

Stödjande färger:

  • Varma krämfärgade bakgrunder: #fff8f1, #fff4ea, #fcf6f1, och mjuka orange-50 / amber-50 ytor.
  • Produktneutraler: vita kort, mörk text i förgrunden, dämpad text runt 70-75% opacitet, och ljusa kanter.
  • Tertiär blå: hsl(205 100% 51%) finns tillgänglig 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 en ren, premium SaaS-look med tillräckligt med värme för att undvika att kännas generisk. Landningssidan kombinerar krämfärgade nätbakgrunder, vita kort, stora produktbilder, rundade hörn och återhållna gradienter.

Använd:

  • Rundade kort och paneler, ofta från rounded-2xl till rounded-[2rem].
  • Mjuka kanter som border-primary/10, border-primary/15, ring-black/5, och ljusa neutrala kanter.
  • Lager av vita eller krämfärgade ytor istället för tunga färgblock.
  • Subtila skuggor som shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, eller anpassade skuggor med låg opacitet.
  • Stora produktbilder eller UI-mockups som bevis, särskilt för marknadsföring och berättande om funktioner.
  • Små varumärkesögonblick som markerad text i orange, ikon-chips, ringar, glöd-effekter och gradient-CTA:er.

Undvik:

  • Högljudda orange bakgrunder över hela sidan.
  • Överanvändning av teal för vanliga kontroller.
  • Täta, trånga layouter.
  • Hårda skuggor, skarpa rektanglar eller kalla monokroma instrumentpaneler.
  • Dekorativ rörelse som konkurrerar med läsning eller slutförande av uppgifter.

Typografi​

Marknadsföringssidan använder:

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

Delade app- och dokumentationsytor använder systemanpassad UI-typografi, för närvarande närmare Inter. Stilens mål är konsekvent över alla ytor: självsäkra rubriker, tät spaltning av rubriker, läsbar brödtext och generöst radavstånd.

Riktlinjer för rubriker:

  • Använd stora, balanserade rubriker på marknadsföringssidor.
  • Markera endast den viktiga frasen med primär orange.
  • Håll radlängden kontrollerad med max-w-* och text-balance där det är tillgängligt.

Riktlinjer för brödtext:

  • Håll stycken lugna och direkta.
  • Använd dämpad text i förgrunden för beskrivningar, vanligtvis text-foreground/70 eller text-foreground/75.
  • Föredra skanningsbara sektioner, korta stycken och tydliga etiketter.

Layout och avstånd​

Layouterna ska kännas rymliga och stabila. Landningssidan använder en max-w-7xl-behållare med responsiv horisontell stoppning och stora vertikala sektioner.

Vanliga mönster:

  • Sektionsstoppning runt py-16, py-20, eller större för viktiga marknadsföringssektioner.
  • Kort arrangerade i responsiva rutnät med konsekventa mellanrum.
  • Hjältesektioner med en stark vänster innehållskolumn och produktbilder eller enhetskompositioner till höger.
  • Centrerade sektionsrubriker för breda produktlöften; vänsterjusterade rubriker för berättelse- eller arbetsflödessektioner.
  • Mobil-först-layouter som staplas rent innan de blir flerkolumnslayouter på större skärmar.

Använd vitt utrymme som en del av designen. Om en sektion känns otydlig, förenkla innehållet och öka utrymmet innan du lägger till mer dekoration.

Komponenter och ytor​

Scoutello-ytor ska kännas taktila men lätta:

  • Knappar: rundade piller för framträdande marknadsförings-CTA:er; standard produktknappar annars.
  • Kort: vita eller krämfärgade, rundade, kantade och lätt upphöjda.
  • Ikoner: små, enkla linjeikoner i orange-tonade chips.
  • Statistik och förtroendeelement: återhållna kort med orange-tonade kanter eller gradienter.
  • Formulär: tydliga etiketter, direkt hjälptext och tillräckligt med utrymme för mobilanvändning.
  • Skärmdumpar: stora, skarpa och lätt upphöjda. Använd dem som konkreta bevis på produkten.

När du bygger produkt-UI, börja från befintliga delade UI-komponenter och tokens snarare än anpassad engångsstyling. När du bygger marknadsförings-UI, använd landningsprimitiver och landningsklasser där de passar.

Rörelse​

Rörelse ska få gränssnittet att kännas polerat, inte upptaget. Landningssidan använder korta avslöjande animationer, effekter för enhetsupphöjning, glöd-blom-effekter och små hover-lyft.

Föredragen rörelse:

  • Avslöjande uppåt från 12-24px med mjuk opacitet.
  • Hover-kort som lyfts bara några pixlar.
  • CTA hover-tillstånd som lätt lyfter och fördjupar skuggan.
  • Staggerade sektionsentréer där de stöder narrativ skanning.

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

Röst och innehållsdesign​

Det visuella systemet fungerar bäst med direkt, konkret text. Föredra språk som förklarar vad en organisation kan publicera, hantera eller automatisera i Scoutello.

Använd:

  • Produktspecifika substantiv: landningssidor, brickor, turer, evenemang, organisationer, instrumentpanel, gäster, QR-koder, översättningar.
  • Resultatorienterade beskrivningar som kopplar gästupplevelser till operatörsarbetsflöden.
  • Könsneutralt språk på tyska och annan lokaliserad text.

Undvik:

  • Vag plattformsjargong utan exempel.
  • Alltför formellt företagsspråk.
  • Långa stycken där en skanningsbar sektion skulle fungera bättre.

Praktiska regler​

  • Använd #ff8d49 som den huvudsakliga varumärkesaccenten och #145466 som den sekundära grundfärgen.
  • Föredra tokeniserade klasser (primary, secondary, foreground, muted, border) framför hårdkodade färger på produktytor.
  • Håll marknadsföringssidor varma, rymliga, rundade, skärmbildsledda och lätt animerade.
  • Håll instrumentpaneler och operativa ytor lugnare, tätare endast där det är nödvändigt, och mer uppgiftsfokuserade.
  • Låt kundägda gästupplevelser stödja organisationens varumärkesbyggande där produkten redan exponerar varumärkeskontroller, men håll Scoutello-ägda ytor i linje med detta system.

Relaterade koncept: Rutter och ytor, Landningssidor och brickor, Webbläsarbaserade gästupplevelser.