Design Filosofie

Onze designprincipes sturen elke visuele en interactie-beslissing. Van UI-ontwerp tot video-productie — deze vijf principes vormen de basis.

Principes

◐

Progressive Disclosure

Toon alleen wat nodig is, onthul complexiteit op aanvraag. Gebruikers zien eerst het resultaat, daarna de details. Elke extra optie is een bewuste keuze, geen default.

Voorbeeld Een dashboard toont drie KPI's. Klik je op een getal, dan verschijnt de breakdown. Niet andersom.

◻

Simplicity First

Geïnspireerd door Vercel en Linear: clean, minimaal, doelgericht. Elk element verdient zijn plek. Als iets verwijderd kan worden zonder functieverlies, verwijder het.

Voorbeeld Geen breadcrumbs als de navigatie helder is. Geen 'Weet je het zeker?'-dialoog als undo beschikbaar is.

⚙

Odoo-Native Where Possible

We respecteren Odoo's conventies en framework. We voegen geen custom CSS toe waar standaard Odoo-widgets volstaan. Maar we verhogen wél de esthetiek waar dat kan zonder de upgrade-compatibiliteit te breken.

Voorbeeld Gebruik Odoo's standaard list/kanban views, maar met geoptimaliseerde veldvolgorde en slimmere defaults.

◉

Accessible by Default

WCAG AA is het minimum, niet het doel. Goede contrastverhoudingen, duidelijke focusstaten, leesbare lettergroottes. Toegankelijkheid is geen feature — het is de baseline.

Voorbeeld Accent paars wordt donkerder in light mode (#5b58d8 i.p.v. #9b99ff) om contrast te garanderen.

▤

Content Over Chrome

UI dient de inhoud, niet andersom. Data, tekst en resultaten staan centraal. Decoratie is ondergeschikt. Een interface is goed als de gebruiker de interface vergeet.

Voorbeeld Rapportages tonen de cijfers groot en helder. Navigatie, filters en acties zijn beschikbaar maar visueel terughoudend.

Visuele Identiteit

Onze beeldtaal is minimale inkt en aquarel op prachtig textuurpapier. Dunne navy lijnen, zachte paarse waterverf blooms, en de warmte van handgeschept papier. Waar precisie poëzie ontmoet.

Visie

Pantalytics bouwt technologie die mensen bevrijdt. Onze visuals vangen dat in de essentie: een dunne lijn die een richting kiest, een bloom waar iets tot bloei komt. Minimaal, doelgericht, menselijk.

Stijl: minimale lijn + wash

Abstracte composities op zwaar crème aquarelpapier met zichtbare textuur en gescheurde randen. Dunne navy (#1b3a5c) inktlijnen combineren met zachte paarse (#9b99ff) aquarel blooms. De lijn is de structuur, de bloom is de creativiteit. Samen vertellen ze het verhaal.

Beeldprincipes

1Papier als canvas — zwaar, crème, met zichtbare korrel en gescheurde randen. Het materiaal is onderdeel van het beeld.

2Lijnen in navy (#1b3a5c) — dun, precies, met zachte curves. Suggereren richting, verbinding, groei.

3Blooms in paars (#9b99ff) — zachte aquarel vlekken waar lijnen eindigen of kruisen. Suggereren data, momenten, resultaten.

4Veel lege ruimte — het papier zelf is het belangrijkste element. Minimaal 60% van het beeld is onbeschreven.

5Wabi-sabi — imperfectie is gewenst. Inkt die iets uitloopt, blooms met onregelmatige randen, papier met karakter.

6Kleuren uit het merkpalet — navy (#1b3a5c), paars (#9b99ff), en de goud-tint (#e8a317) mogen samen voorkomen.

Compositietypes

Lijn + bloom

Enkele lijn + bloom — één navy lijn met een paarse bloom aan het einde. De meest minimale uiting. Headers, footers, achtergronden.

Convergerende lijnen

Convergerende lijnen — twee of meer lijnen die samenkomen in een bloom. Verbinding, samenwerking. Social media, hero visuals.

Lijn + datapunten

Lijn met datapunten — een stijgende lijn met paarse blooms als datapunten. Groei, voortgang. Blog headers, OG images.

Parallelle lijnen

Parallelle lijnen — meerdere lijnen naast elkaar met blooms. Ritme, flow, processen. Brede banners, video stills.

Netwerk constellation

Netwerk constellation — punten verbonden door lijnen met paarse halo's. Data als sterrenkaart. Vierkante formats, social media.

Kleur in visuals

Navy (#1b3a5c) voor lijnen en structuur. Paars (#9b99ff) voor aquarel blooms en accenten. Optioneel goud (#e8a317) als derde kleur voor warmte. Altijd op crème/warm wit papier — nooit op puur wit of gekleurd.

Navy — lijnen

Paars — blooms

Goud — warmte

Crème papier

Toon

Stil, elegant en menselijk. De visuals voelen als een handgemaakt kunstwerk — niet als iets dat door een computer is gegenereerd. De imperfectie maakt het warm, de minimaliteit maakt het krachtig.

Vermijd

Te veel lijnen of blooms — houd het minimaal
Felle of verzadigde kleuren — alles is zacht en ingetogen
Fotografie of 3D renders naast de aquarel
Tekst of letters in de aquarel zelf
Perfect symmetrische composities — laat het organisch zijn

AI System Prompt

Geef deze tekst aan elke AI-tool (Claude, ChatGPT, Copilot) als context wanneer je content of visuals maakt voor Pantalytics. Kopieer het volledig.

Pantalytics Brand System Prompt

Je maakt content voor Pantalytics, een Europees AI- en ERP-bedrijf uit Utrecht.

VISIE: Technologie moet mensen bevrijden, niet belasten. AI en automatisering zorgen ervoor dat mensen kunnen doen wat hen gelukkig maakt: buiten zijn, sociale verbinding, natuur, muziek, kunst, bewegen. Technologie is de enabler, niet het onderwerp.

MISSIE: Orde brengen in bedrijfsprocessen met veilige, open source software en AI. We versterken teams, niet vervangen. Europees gehost, GDPR-compliant, geen vendor lock-in.

MERKWAARDEN: Betrouwbaar, Open, Praktisch, Slim.

SCHRIJFSTIJL (McKinsey Pyramid Principle):
- Begin altijd met de conclusie
- Onderbouw met 2-5 argumenten (MECE)
- Elk punt moet de "so what?"-test overleven
- Slide/alineatitels zijn volledige zinnen met het inzicht, geen onderwerplabels
- Toon: professioneel, warm, eerlijk. Eerste persoon meervoud ("wij"). Directe aanspreking ("je").
- Gebruik actieve stem, wees specifiek, vermijd jargon.

CHARTS & DATA (Economist-stijl):
- Conclusie in de charttitel (volledige zin)
- Labels direct in de grafiek, geen aparte legenda
- Eén highlightkleur op een grijze basis
- Minimale decoratie, geen 3D, bronvermelding altijd

VISUELE STIJL (Minimale Lijn + Wash):
- Abstracte composities op zwaar crème aquarelpapier met zichtbare textuur
- Dunne navy (#1b3a5c) inktlijnen: richting, verbinding, groei
- Zachte paarse (#9b99ff) aquarel blooms: data, momenten, resultaten
- Minimaal 60% onbeschreven papier — lege ruimte is essentieel
- Wabi-sabi: imperfectie gewenst, inkt die uitloopt, onregelmatige randen
- Compositietypes: lijn+bloom, convergerende lijnen, lijn+datapunten, parallelle lijnen, netwerk constellation
- Vermijd: te veel elementen, felle kleuren, fotografie, symmetrie

KLEUREN:
- Navy (#1b3a5c): lijnen en structuur
- Paars (#9b99ff): aquarel blooms en accenten
- Optioneel goud (#e8a317): warmte accent
- Natuurlijke kleuren domineren: groen, zonlicht-goud, hemelsblauw, zand
- Dark mode UI: bg #001d21, accent #9b99ff
- Light mode UI: bg #ffffff, accent #5b58d8

TYPOGRAFIE: Murecho 400-700 (één font voor koppen, body en UI). Japans-Latijnse sans-serif, self-hosted, OFL.

UI RICHTLIJNEN (Vercel/Astro-stijl):
- Progressive disclosure: toon alleen wat relevant is
- Eenvoudige taal: vertel wat te doen, niet hoe het systeem werkt
- Duidelijke states: active, inactive, hover, focus, disabled, loading, error, success
- Monochroom chrome: kleur alleen voor status en accenten
- Border-based elevation: 1px borders, geen zware schaduwen
- Buttons: 6px radius, 32/36/40px hoogte, primary/secondary/ghost
- Cards: 12px radius, 1px border, 24px padding
- Inputs: 36px hoogte, 6px radius, focus ring 2px accent
- Transities: 150ms ease overal. Skeleton loaders, geen spinners.
- Status kleuren: success #45a557, warning #e8a317, error #e5484d, info #9b99ff

Meer details: brand.pantalytics.com

Flux Preset

Plak deze preset voor elke Flux-prompt. Het bevat de consistente merkstijl. Voeg daarna je specifieke scène toe.

Flux Preset — kopieer voor elke prompt

Abstract on heavy cream watercolor paper with beautiful visible texture, navy (#1b3a5c) ink lines and soft purple (#9b99ff) watercolor blooms, wabi-sabi imperfection, fine art print quality, no objects no figures no text no letters

Flux Prompt Voorbeelden

Voorbeeldprompts voor specifieke scènes. Combineer de preset hierboven met een van deze scènes.

Lijn + bloom — header/footer

Single thin navy (#1b3a5c) ink line drawing a long gentle curve from left to right, soft purple (#9b99ff) watercolor bloom where the line ends on the right, vast empty textured paper space, landscape format

Convergerende lijnen — hero

Two thin ink lines one navy (#1b3a5c) one lighter purple (#9b99ff) curving gently toward each other and meeting in a soft purple watercolor bloom at the center, vast empty paper space around them, the lines suggest connection and convergence

Datapunten — OG image

Single thin navy (#1b3a5c) ink line gently ascending from bottom left to upper right, three small purple (#9b99ff) watercolor blooms at different points along the line like data points on a graph, each bloom slightly different size, vast empty textured cream paper, elegant and scientific

Parallelle lijnen — blog hero

Three thin parallel navy (#1b3a5c) ink lines flowing gently across the page with slight waves like a calm river, one line ends in a soft purple (#9b99ff) watercolor bloom, the other two fade into the paper grain, vast cream white space, rhythmic and peaceful

Netwerk — social media

Delicate navy (#1b3a5c) ink dots connected by hairline lines forming a network constellation on rough handmade paper, soft purple (#9b99ff) watercolor halos around key nodes, visible paper texture and fibers, like a star map painted by hand, scientific yet poetic, square format

Verticaal — story/mobiel

Single thin navy (#1b3a5c) ink line dropping vertically with a gentle wave, ending in a soft purple (#9b99ff) watercolor bloom near the bottom, vast empty textured paper above, like a single drop of data falling, tall portrait format

UI Richtlijnen

Onze interfaces zijn geïnspireerd door Vercel en Astro: strak, minimaal, border-based elevation, en kleur alleen voor status. Elke interactie vertelt de gebruiker in eenvoudige taal wat er moet gebeuren.

UI Principes

1Progressive disclosure — toon alleen wat relevant is. Details onthul je stap voor stap.

2Eenvoudige taal — vertel de gebruiker wat te doen, niet hoe het systeem werkt.

3Duidelijke state — elk element heeft een zichtbare active, inactive, loading, error en disabled staat.

4Monochroom chrome — UI-elementen zijn grijs/neutraal. Kleur is gereserveerd voor status en accenten.

5Border-based elevation — geen zware schaduwen. Gebruik 1px borders en subtiele achtergrondverschillen.

6Micro-animaties — 150ms ease transities op hover, focus en state changes. Skeleton loaders, geen spinners.

Componenten

Buttons

Drie varianten: primary (gevuld), secondary (border), ghost (transparant). Hoogte: 32px (sm), 36px (md), 40px (lg). Border-radius: 6px. Altijd een actie-werkwoord als label.

Inputs

Hoogte: 36px. Border-radius: 6px. 1px border. Focus: 2px ring in accentkleur. Label altijd boven het veld, nooit placeholder-only. Helper text eronder in 12px grijs.

Cards

Border-radius: 12px. 1px border, geen box-shadow. Padding: 24px. Hover: subtiele achtergrondverschuiving (150ms).

Badges

Pill-shape (border-radius: 9999px). Hoogte: 20–24px. Achtergrondtint + gekleurde tekst. Gebruik voor statussen: success (groen), warning (goud), error (rood), info (paars).

Tabellen

Geen buitenrand. Header: 12px uppercase, letter-spacing 0.05em, grijs. Rij-scheiders: 1px border. Hover: subtiele achtergrond. Geen zebra-striping.

Modals

Gecentreerd, max-width 480px. Border-radius: 12px. Overlay met backdrop-blur (8px). Padding: 24px.

States

●Active — Accent border of achtergrond. Wit/licht tekst.

○Inactive — Subtiele border, gedempte tekst (#888).

↑Hover — Achtergrond één stap lichter/donkerder, 150ms transitie.

◎Focus — 2px ring in accentkleur (#9b99ff dark / #5b58d8 light).

◌Disabled — Opacity 0.5, cursor not-allowed.

⋯Loading — Skeleton shimmer, geen spinners. Button loading: inline spinner 14px.

✕Error — Rood (#e5484d) als border of achtergrondtint.

✓Success — Groen (#45a557) als border of achtergrondtint.

Spacing

4px basis grid. Veelgebruikte waarden: 4, 8, 12, 16, 24, 32, 48, 64. Card padding: 24px. Tussen formuliervelden: 16px. Paginasecties: 48–64px. Page max-width: 1200px.

Typografie in UI

Labels: 12px, 500 weight, uppercase, letter-spacing 0.05em. Body: 14px, 400 weight, line-height 1.5. Paginatitel: 24px, 500 weight. Hero: 32px.

Navigatie

→Sidebar — 240px breed, 13px items, 8px verticale padding. Active item: accentkleur achtergrond + 2px linker border.

→Tabs — Underline stijl, 2px bottom border op active. 14px font. Hoogte 32px.

→Breadcrumbs — '/' separator, grijs (#888). Huidig item in primaire tekstkleur.

Empty & error states

Gecentreerd, max-width 400px. Kleine monochrome SVG illustratie, heading 16px, beschrijving 14px grijs, één CTA button. Gebruik de 404 brand asset als inspiratie.

Visuele Exploratie

De huidige stijl is het resultaat van uitgebreide exploratie. Hieronder de richtingen die we hebben verkend en waarom we bij minimale lijn + wash zijn uitgekomen.

1Japans-Scandinavisch minimalisme — Beton, hout, eikenhout in Blue Bottle Coffee stijl. Te veel 'meubelzaak', te weinig databedrijf.

2Data op notebooks — Aquarel en blueprint tekeningen op open notitieboeken. Mooi maar niet visionair genoeg als merkidentiteit.

3Realistisch absurdisme — Fotorealistische scènes met vriendelijke navy robots die mensen bevrijden. Sterk concept maar te letterlijk, robots werden repetitief.

4Subtiel futurisme — Mensen buiten met subtiele technologie (smart glasses, sensoren). Moeilijk om abstracte assets van te maken voor headers en footers.

5Isometrische materialiteit — Exploded views van beton, PCB, hout, messing, koper. Visueel sterk maar te 'weird' als consistente merkidentiteit.

6Minimale lijn + wash (huidig) — Dunne navy lijnen en paarse aquarel blooms op textuurpapier. Minimaal, eindeloos varieerbaar, warm en herkenbaar. De perfecte balans tussen structuur en creativiteit.

Fotografie

Richtlijnen voor wanneer echte fotografie wordt gebruikt (team, events, kantoor).

Gebruik bij voorkeur

Natuurlijk daglicht, zachte schaduwen
Tactiele materialen zichtbaar (beton, hout, papier)
Rustige, opgeruimde composities met veel lege ruimte
Echte werksituaties, niet geposeerd

Vermijd

Generieke corporate stockfotografie
Flitslicht, felle kleuren, drukke achtergronden
Geforceerde poses of onnatuurlijke situaties
Stockfoto's met zichtbare watermerken of lage resolutie

Kleurbehandeling

Desatureer licht en verschuif wit-balans richting warm. Pas eventueel een subtiele teal overlay toe (10–15% opacity). Het resultaat moet aanvoelen als natuurlijk daglicht, niet als filter.

Data & Grafieken — Economist-stijl

Onze charts en datavisualisaties volgen de stijl van The Economist: helder, minimaal en met de conclusie voorop.

Conclusie in de titel

De charttitel is een volledige zin die het inzicht bevat. De subtitel geeft context (eenheid, periode).

Niet 'MRR over tijd'

Wel 'MRR steeg 34% na lancering van de selfservice-module'

Labels in de grafiek

Label lijnen en balken direct in de grafiek. Geen aparte legenda-box — dat vermindert oogbewegingen.

Eén highlightkleur

Gebruik grijs/gedempte tinten als basis. Pas de accentkleur (#9b99ff dark / #5b58d8 light) toe op de belangrijkste dataserie.

Minimale decoratie

Geen 3D-effecten, geen chart junk. Lichte horizontale gridlijnen, geen verticale. Geen zware randen of kaders.

Y-as begint bij nul

Staafdiagrammen beginnen altijd bij nul. Lijngrafieken mogen hiervan afwijken als de variatie belangrijker is, maar dit moet expliciet worden vermeld.

Bronvermelding

Kleine tekst onder de grafiek: 'Bron: [leverancier]'. Altijd vermelden, nooit weglaten.

Templates & Formaten

Standaardformaten voor alle content die we produceren. Gebruik deze afmetingen en veilige zones voor consistente output.

Social Media

Formaat	Afmetingen	Gebruik
LinkedIn post	1200 × 1200	Quote, statistiek, aankondiging
LinkedIn carousel	1080 × 1350	Slides, tips, uitleg
Instagram / Story	1080 × 1920	Verticale content

Video (Remotion)

Formaat	Afmetingen	Gebruik
YouTube thumbnail	1280 × 720	Video-voorvertoning
Video intro	1920 × 1080	Logo reveal, ~3 seconden
Video outro	1920 × 1080	CTA + logo, ~5 seconden
Lower third	1920 × 200	Naam + functietitel overlay

Blog & Website

Formaat	Afmetingen	Gebruik
Blog hero	1920 × 1080	Artikelkop (Directus)
OG image	1200 × 630	Social sharing preview
Favicon	32 × 32 / SVG	Browsertab

Brand Pattern

Het Pantalytics-netwerkpatroon kan worden gebruikt als achtergrond voor video's, social media posts, presentaties en blog hero images. Beschikbaar in dark en light varianten.

Dark

Light