Ga naar hoofdinhoud

Designsystem

Scoutello moet warm, capabel en productgericht aanvoelen. De voorkeurslook is licht, genereus, afgerond en redactioneel: eerst duidelijke inhoud, dan subtiele merk kleur, zachte oppervlakken en rustige beweging die het product responsief maken zonder decoratief te worden.

De marketing landingspagina is de duidelijkste publieke referentie voor de huidige visuele richting. Productoppervlakken moeten gedeelde design tokens hergebruiken waar mogelijk en alleen expressiever worden wanneer het oppervlak expliciet merk- of marketinggericht is.

Logo en Merk Assets​

Gebruik het Scoutello logo van de publieke documentatie asset URL wanneer een agent, integratie of gegenereerde pagina een herbruikbaar merkteken nodig heeft:

Geef de voorkeur aan de SVG versie voor scherpe weergave op verschillende schermformaten. Gebruik de PNG versie wanneer een tool of bestemming SVG niet kan verwerken. Houd voldoende vrije ruimte rond het merkteken, vermijd het uitrekken of inkleuren ervan, en plaats het op witte, warm crèmekleurige of andere rustige oppervlakken die het contrast behouden.

Merk kleuren​

Primaire kleur: #ff8d49

Gebruik de primaire oranje kleur als Scoutello accentkleur: primaire calls to action, gefocuste statussen, actieve navigatie, kleine icoon achtergronden, highlight tekst, zachte gloed en warme gradiënten. In productcode komt dit overeen met --primary: 24 100% 64% en Tailwind klassen zoals bg-primary, text-primary, border-primary/15, en shadow-primary/10.

Secundaire kleur: #145466

Gebruik de secundaire diepe teal als aardende kleur. Het werkt het beste in gradiënten met de primaire oranje, donkere call-to-action panelen, visuele diepte en af en toe momenten met hoge merk nadruk. Het mag de primaire oranje niet vervangen als de standaard actie kleur.

Ondersteunende kleuren:

  • Warm crèmekleurige achtergronden: #fff8f1, #fff4ea, #fcf6f1, en zachte orange-50 / amber-50 oppervlakken.
  • Product neutralen: witte kaarten, donkere voorgrond tekst, gedempte tekst rond 70-75% opaciteit, en lichte randen.
  • Tertiaire blauw: hsl(205 100% 51%) is beschikbaar als ondersteunende token, maar moet spaarzaam worden gebruikt zodat oranje en teal herkenbaar blijven als het merk paar.

Visuele Stijl​

Geef de voorkeur aan een schone, premium SaaS look met voldoende warmte om generiek te voorkomen. De landingspagina combineert crèmekleurige mesh achtergronden, witte kaarten, grote product screenshots, afgeronde hoeken en ingetogen gradiënten.

Gebruik:

  • Afgeronde kaarten en panelen, vaak van rounded-2xl tot rounded-[2rem].
  • Zachte randen zoals border-primary/10, border-primary/15, ring-black/5, en lichte neutrale randen.
  • Gelaagde witte of crèmekleurige oppervlakken in plaats van zware gekleurde blokken.
  • Subtiele schaduwen zoals shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, of aangepaste schaduwen met lage opaciteit.
  • Grote product screenshots of UI mockups als bewijs, vooral voor marketing en verhaalvertelling over functies.
  • Kleine merkaccenten zoals oranje highlight tekst, icoon chips, ringen, gloed en gradiënt CTAs.

Vermijd:

  • Luide oranje achtergronden over de hele pagina.
  • Overmatig gebruik van teal voor gewone bedieningselementen.
  • Dichte, krappe lay-outs.
  • Harde schaduwen, scherpe rechthoeken of koude monochrome dashboards.
  • Decoratieve beweging die concurreert met lezen of voltooien van taken.

Typografie​

De marketing site gebruikt:

  • Space Grotesk voor display koppen via de landing-display klasse.
  • Manrope voor marketing body tekst.

Gedeelde app en documentatie oppervlakken gebruiken systeem-gealigneerde UI typografie, momenteel dichter bij Inter. Het stilistische doel is consistent over alle oppervlakken: zelfverzekerde koppen, strakke letterspatiëring voor koppen, leesbare body tekst en royale regelafstand.

Richtlijnen voor koppen:

  • Gebruik grote, gebalanceerde koppen op marketingpagina's.
  • Benadruk alleen de belangrijke frase met primaire oranje.
  • Houd de regel lengte gecontroleerd met max-w-* en text-balance waar beschikbaar.

Richtlijnen voor body tekst:

  • Houd paragrafen rustig en direct.
  • Gebruik gedempte voorgrond tekst voor beschrijvingen, meestal text-foreground/70 of text-foreground/75.
  • Geef de voorkeur aan scanbare secties, korte paragrafen en duidelijke labels.

Lay-out en Spatiëring​

Lay-outs moeten ruim en stabiel aanvoelen. De landingspagina gebruikt een max-w-7xl container met responsieve horizontale padding en grote verticale secties.

Veelvoorkomende patronen:

  • Sectie padding rond py-16, py-20, of groter voor belangrijke marketing secties.
  • Kaarten gerangschikt in responsieve grids met consistente tussenruimtes.
  • Hero secties met een sterke linker content kolom en product screenshots of apparaat composities aan de rechterkant.
  • Gecentreerde sectie koppen voor brede product beloftes; links uitgelijnde koppen voor verhaal of workflow secties.
  • Mobile-first lay-outs die netjes stapelen voordat ze multi-kolom worden op grotere schermen.

Gebruik witruimte als onderdeel van het ontwerp. Als een sectie onduidelijk aanvoelt, vereenvoudig de inhoud en vergroot de ademruimte voordat u meer decoratie toevoegt.

Componenten en Oppervlakken​

Scoutello oppervlakken moeten tactiel maar licht aanvoelen:

  • Knoppen: afgeronde pillen voor prominente marketing CTAs; standaard productknoppen elders.
  • Kaarten: wit of crèmekleurig, afgerond, met randen en licht verhoogd.
  • Iconen: kleine, eenvoudige lijn iconen in oranje getinte chips.
  • Statistieken en vertrouwens elementen: ingetogen kaarten met oranje getinte randen of gradiënten.
  • Formulieren: duidelijke labels, directe hulptekst en voldoende ruimte voor mobiel gebruik.
  • Screenshots: groot, scherp en licht verhoogd. Gebruik ze als concreet bewijs van het product.

Bij het bouwen van product UI, begin vanuit bestaande gedeelde UI componenten en tokens in plaats van aangepaste one-off styling. Bij het bouwen van marketing UI, gebruik de landing primitives en landing klassen waar ze passen.

Beweging​

Beweging moet de interface gepolijst maken, niet druk. De landingspagina gebruikt korte onthullingsanimaties, apparaat opheffingseffecten, gloed bloei effecten en kleine hover lifts.

Voorkeursbeweging:

  • Omhoog onthullen vanaf 12-24px met zachte opaciteit.
  • Hover kaarten die slechts een paar pixels omhoog komen.
  • CTA hover statussen die de schaduw licht verhogen en verdiepen.
  • Stapsgewijze sectie ingangen waar ze het scannen van de narratief ondersteunen.

Respecteer altijd de voorkeuren voor verminderde beweging. Vermijd animaties die inhoud kunnen verbergen, interactie kunnen blokkeren, of vereist lijken voor het begrijpen van de pagina.

Stem en Content Ontwerp​

Het visuele systeem werkt het beste met directe, concrete tekst. Geef de voorkeur aan taal die uitlegt wat een organisatie kan publiceren, beheren of automatiseren in Scoutello.

Gebruik:

  • Product-specifieke zelfstandige naamwoorden: landingspagina's, tegels, rondleidingen, evenementen, organisaties, dashboard, gasten, QR-codes, vertalingen.
  • Resultaatgerichte beschrijvingen die gast ervaringen verbinden met operator workflows.
  • Genderneutrale taal in het Duits en andere gelokaliseerde teksten.

Vermijd:

  • Vage platform taal zonder voorbeelden.
  • Overdreven formeel enterprise jargon.
  • Lange paragrafen waar een scanbare sectie beter zou werken.

Praktische Regels​

  • Gebruik #ff8d49 als de belangrijkste merk accent en #145466 als de secundaire aardende kleur.
  • Geef de voorkeur aan getokeniseerde klassen (primary, secondary, foreground, muted, border) boven hardgecodeerde kleuren in productoppervlakken.
  • Houd marketingpagina's warm, ruim, afgerond, screenshot-geleid en licht geanimeerd.
  • Houd dashboards en operationele oppervlakken rustiger, alleen dichter waar nodig, en meer taakgericht.
  • Laat door de klant beheerde gast ervaringen de organisatie branding ondersteunen waar het product al branding controles blootstelt, maar houd Scoutello-eigendom oppervlakken in lijn met dit systeem.

Gerelateerde concepten: Routes en oppervlakken, Landingspagina's en tegels, Browser-first gast ervaringen.