Naar hoofdinhoud gaan

Ontwerpsysteem

Scoutello moet warm, deskundig en productgericht aanvoelen. De voorkeur gaat uit naar een lichte, royale, afgeronde en redactionele stijl: eerst duidelijke content, daarna subtiele merkkleur, zachte oppervlakken en rustige beweging die het product responsief laat aanvoelen zonder decoratieve ruis te worden.

De marketinglandingspagina is de duidelijkste openbare referentie voor de huidige visuele richting. Productoppervlakken moeten waar mogelijk de gedeelde designtokens hergebruiken en alleen expressiever worden wanneer het oppervlak expliciet op branding of marketing is gericht.

Logo en merkmiddelen​

Gebruik het Scoutello-logo uit de openbare docs-asset-URL wanneer een agent, integratie of gegenereerde pagina een herbruikbaar merkteken nodig heeft:

Gebruik bij voorkeur de SVG-versie voor scherpe weergave op alle schermformaten. Gebruik de PNG-versie wanneer een tool of bestemming geen SVG ondersteunt. Houd voldoende vrije ruimte rond het merkteken, rek het niet uit en verander de kleur niet. Plaats het op wit, warm crème of andere rustige oppervlakken die het contrast behouden.

Merkkleuren​

Primaire kleur: #ff8d49

Gebruik het primaire oranje als accentkleur van Scoutello: voornaamste call-to-actions, focusstatussen, actieve navigatie, kleine pictogramachtergronden, gemarkeerde tekst, zachte gloed en warme gradiënten. In productcode wordt dit gekoppeld aan --primary: 24 100% 64% en Tailwind-klassen zoals bg-primary, text-primary, border-primary/15 en shadow-primary/10.

Secundaire kleur: #145466

Gebruik het diepe secundaire teal als verankerende kleur. Deze kleur werkt het best in gradiënten met het primaire oranje, donkere call-to-actionpanelen, visuele diepte en af en toe een merkaccent met hoge nadruk. Het teal mag het primaire oranje niet vervangen als standaardkleur voor acties.

Ondersteunende kleuren:

  • Warme crèmeachtergronden: #fff8f1, #fff4ea, #fcf6f1 en zachte oppervlakken in orange-50 / amber-50.
  • Productneutrale kleuren: witte kaarten, donkere voorgrondtekst, gedempte tekst met ongeveer 70–75% dekking en lichte randen.
  • Tertiair blauw: hsl(205 100% 51%) is beschikbaar als ondersteunende token, maar moet spaarzaam worden gebruikt zodat oranje en teal herkenbaar blijven als merkkleurenpaar.

Visuele stijl​

Kies voor een strakke, hoogwaardige SaaS-uitstraling met voldoende warmte om een generieke indruk te voorkomen. De landingspagina combineert crèmekleurige mesh-achtergronden, witte kaarten, grote productscreenshots, 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 vlakken.
  • Subtiele schaduwen zoals shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 of aangepaste schaduwen met lage dekking.
  • Grote productscreenshots of UI-mock-ups als bewijs, vooral voor marketing en het vertellen van featureverhalen.
  • Kleine merkaccenten zoals oranje gemarkeerde tekst, pictogramchips, ringen, gloed en CTA's met een gradiënt.

Vermijd:

  • Schreeuwerige oranje achtergronden over de volledige pagina.
  • Overmatig gebruik van teal voor gewone bedieningselementen.
  • Dichte, krappe indelingen.
  • Harde schaduwen, scherpe rechthoeken of koude monochrome dashboards.
  • Decoratieve animatie die het lezen of voltooien van taken belemmert.

Typografie​

De marketingsite gebruikt:

  • Space Grotesk voor displaykoppen via de klasse landing-display.
  • Manrope voor marketingteksten.

Gedeelde app- en docoppervlakken gebruiken UI-typografie die is afgestemd op het systeem en momenteel dichter bij Inter ligt. Het stijlprincipe is op alle oppervlakken hetzelfde: zelfverzekerde koppen, compacte tracking in koppen, goed leesbare hoofdtekst en royale regelhoogte.

Richtlijnen voor koppen:

  • Gebruik grote, gebalanceerde koppen op marketingpagina's.
  • Markeer alleen de belangrijkste frase met primair oranje.
  • Houd de regellengte onder controle met max-w-* en text-balance waar deze beschikbaar zijn.

Richtlijnen voor hoofdtekst:

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

Indeling en tussenruimte​

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

Veelgebruikte patronen:

  • Sectiepadding rond py-16, py-20 of groter voor belangrijke marketingsecties.
  • Kaarten in responsieve rasters met consistente tussenruimtes.
  • Hero-secties met een sterke contentkolom links en productscreenshots of apparaatcomposities rechts.
  • Gecentreerde sectiekoppen voor brede productbeloftes; links uitgelijnde koppen voor verhaal- of workflowsecties.
  • Mobile-first-indelingen die eerst netjes stapelen en op grotere schermen overgaan naar meerdere kolommen.

Gebruik witruimte als onderdeel van het ontwerp. Als een sectie onduidelijk aanvoelt, vereenvoudig dan eerst de content en vergroot de ademruimte voordat er meer decoratie wordt toegevoegd.

Componenten en oppervlakken​

Scoutello-oppervlakken moeten tastbaar maar licht aanvoelen:

  • Knoppen: afgeronde pillen voor prominente marketing-CTA's; standaardproductknoppen elders.
  • Kaarten: wit of crèmekleurig, afgerond, voorzien van een rand en licht verhoogd.
  • Pictogrammen: kleine, eenvoudige lijnpictogrammen in oranjegetinte chips.
  • Statistieken en vertrouwenselementen: ingetogen kaarten met oranjegetinte randen of gradiënten.
  • Formulieren: duidelijke labels, directe helptekst en voldoende ruimte voor gebruik op mobiele apparaten.
  • Screenshots: groot, scherp en licht verhoogd. Gebruik ze als concreet bewijs van het product.

Gebruik bij het bouwen van productinterfaces eerst bestaande gedeelde UI-componenten en tokens in plaats van aangepaste eenmalige styling. Gebruik bij het bouwen van marketinginterfaces de landing-primitives en landing-klassen waar die passen.

Animatie​

Animatie moet de interface verfijnd laten aanvoelen, niet druk maken. De landingspagina gebruikt korte onthullingsanimaties, effecten waarbij apparaten omhoogkomen, gloei-effecten en kleine lifts bij hover.

Voorkeursanimaties:

  • Omhoog onthullen vanaf 12–24 px met zachte opacity.
  • Hover-kaarten die slechts enkele pixels omhoogkomen.
  • CTA-hoverstatussen die iets omhoogkomen en de schaduw verdiepen.
  • Gespreide sectie-introducties wanneer die het scannen van de verhaallijn ondersteunen.

Houd altijd rekening met voorkeuren voor minder beweging. Vermijd animaties die content kunnen verbergen, interactie kunnen blokkeren of nodig lijken om de pagina te begrijpen.

Stem en contentontwerp​

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

Gebruik:

  • Productspecifieke zelfstandige naamwoorden: landingspagina’s, tegels, rondleidingen, evenementen, organisaties, dashboard, gasten, QR-codes, vertalingen.
  • Resultaatgerichte beschrijvingen die gastenervaringen verbinden met workflows voor beheerders.
  • Genderneutrale taal in het Duits en andere gelokaliseerde teksten.

Vermijd:

  • Vage platformtaal zonder voorbeelden.
  • Overdreven formeel enterprisejargon.
  • Lange alinea’s wanneer een goed scanbare sectie beter zou werken.

Praktische regels​

  • Gebruik #ff8d49 als het belangrijkste merkkleuraccent en #145466 als de secundaire basiskleur.
  • Geef in productoppervlakken de voorkeur aan klassen met tokens (primary, secondary, foreground, muted, border) boven hardgecodeerde kleuren.
  • Houd marketingpagina’s warm, ruimtelijk, afgerond, screenshotgericht en subtiel geanimeerd.
  • Houd dashboards en operationele oppervlakken rustiger en alleen waar nodig compacter, met meer focus op taken.
  • Laat door klanten beheerde gastenervaringen de branding van de organisatie ondersteunen waar het product al brandingopties biedt, maar houd oppervlakken van Scoutello in lijn met dit systeem.

Gerelateerde concepten: Routes en oppervlakken, Landingspagina’s en tegels, Browsergerichte gastenervaringen.