Design Philosophy
Our design principles guide every visual and interaction decision. From UI design to video production — these five principles form the foundation.
Principles
Progressive Disclosure
Show only what's needed, reveal complexity on demand. Users see the result first, then the details. Every additional option is a deliberate choice, not a default.
Simplicity First
Inspired by Vercel and Linear: clean, minimal, purposeful. Every element earns its place. If something can be removed without losing function, remove it.
Odoo-Native Where Possible
We respect Odoo's conventions and framework. We don't add custom CSS where standard Odoo widgets suffice. But we do elevate the aesthetics where possible without breaking upgrade compatibility.
Accessible by Default
WCAG AA is the minimum, not the goal. Good contrast ratios, clear focus states, readable font sizes. Accessibility isn't a feature — it's the baseline.
Content Over Chrome
UI serves the content, not the other way around. Data, text, and results take center stage. Decoration is secondary. An interface is good when the user forgets the interface.
Visual Identity
Our visual language is minimal ink and watercolor on beautiful textured paper. Thin navy lines, soft purple watercolor blooms, and the warmth of handmade paper. Where precision meets poetry.
Vision
Pantalytics builds technology that frees people. Our visuals capture that in essence: a thin line choosing a direction, a bloom where something comes to fruition. Minimal, purposeful, human.
Style: minimal line + wash
Abstract compositions on heavy cream watercolor paper with visible texture and deckled edges. Thin navy (#1b3a5c) ink lines combine with soft purple (#9b99ff) watercolor blooms. The line is structure, the bloom is creativity. Together they tell the story.
Image principles
Composition types
Line + bloom
Single line + bloom — one navy line with a purple bloom at the end. The most minimal expression. Headers, footers, backgrounds.
Converging lines
Converging lines — two or more lines meeting in a bloom. Connection, collaboration. Social media, hero visuals.
Line + data points
Line with data points — an ascending line with purple blooms as data points. Growth, progress. Blog headers, OG images.
Parallel lines
Parallel lines — multiple lines alongside each other with blooms. Rhythm, flow, processes. Wide banners, video stills.
Network constellation
Network constellation — dots connected by lines with purple halos. Data as star map. Square formats, social media.
Color in visuals
Navy (#1b3a5c) for lines and structure. Purple (#9b99ff) for watercolor blooms and accents. Optionally gold (#e8a317) as a third color for warmth. Always on cream/warm white paper — never on pure white or colored backgrounds.
Navy — lines
Purple — blooms
Gold — warmth
Cream paper
Tone
Quiet, elegant and human. The visuals feel like handmade artwork — not something generated by a computer. The imperfection makes it warm, the minimality makes it powerful.
Avoid
Avoid
- Too many lines or blooms — keep it minimal
- Bright or saturated colors — everything is soft and muted
- Photography or 3D renders alongside the watercolor
- Text or letters within the watercolor itself
- Perfectly symmetrical compositions — let it be organic
AI System Prompt
Give this text to any AI tool (Claude, ChatGPT, Copilot) as context when creating content or visuals for Pantalytics. Copy it in full.
Pantalytics Brand System Prompt
You are creating content for Pantalytics, a European AI and ERP company based in Utrecht, Netherlands.
VISION: Technology should free people, not burden them. AI and automation enable people to do what makes them happy: being outdoors, social connection, nature, music, art, exercise. Technology is the enabler, not the subject.
MISSION: Bring order to business processes with secure, open source software and AI. We strengthen teams, not replace them. European-hosted, GDPR-compliant, no vendor lock-in.
BRAND VALUES: Reliable, Open, Practical, Smart.
WRITING STYLE (McKinsey Pyramid Principle):
- Always lead with the conclusion
- Support with 2-5 arguments (MECE)
- Every point must survive the "so what?" test
- Slide/paragraph titles are complete sentences with the insight, not topic labels
- Tone: professional, warm, honest. First person plural ("we"). Direct address ("you").
- Use active voice, be specific, avoid jargon.
CHARTS & DATA (Economist style):
- Conclusion in the chart title (complete sentence)
- Labels directly in the chart, no separate legend
- One highlight color on a grey base
- Minimal decoration, no 3D, always attribute sources
VISUAL STYLE (Minimal Line + Wash):
- Abstract compositions on heavy cream watercolor paper with visible texture
- Thin navy (#1b3a5c) ink lines: direction, connection, growth
- Soft purple (#9b99ff) watercolor blooms: data, moments, outcomes
- At least 60% untouched paper — empty space is essential
- Wabi-sabi: imperfection desired, ink that bleeds, irregular edges
- Composition types: line+bloom, converging lines, line+data points, parallel lines, network constellation
- Avoid: too many elements, bright colors, photography, symmetry
COLORS:
- Navy (#1b3a5c): lines and structure
- Purple (#9b99ff): watercolor blooms and accents
- Optional gold (#e8a317): warmth accent
- Natural colors dominate: green, sunlight gold, sky blue, sand
- Dark mode UI: bg #001d21, accent #9b99ff
- Light mode UI: bg #ffffff, accent #5b58d8
TYPOGRAPHY: Murecho 400-700 (single font for headings, body and UI). Japanese-Latin sans-serif, self-hosted, OFL.
UI GUIDELINES (Vercel/Astro style):
- Progressive disclosure: show only what's relevant
- Simple language: tell what to do, not how the system works
- Clear states: active, inactive, hover, focus, disabled, loading, error, success
- Monochrome chrome: color only for status and accents
- Border-based elevation: 1px borders, no heavy shadows
- Buttons: 6px radius, 32/36/40px height, primary/secondary/ghost
- Cards: 12px radius, 1px border, 24px padding
- Inputs: 36px height, 6px radius, focus ring 2px accent
- Transitions: 150ms ease everywhere. Skeleton loaders, not spinners.
- Status colors: success #45a557, warning #e8a317, error #e5484d, info #9b99ff
More details: brand.pantalytics.comFlux Preset
Paste this preset before every Flux prompt. It contains the consistent brand style. Then add your specific scene.
Flux Preset — copy before every 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 lettersFlux Prompt Examples
Example prompts for specific scenes. Combine the preset above with one of these scenes.
Line + 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 formatConverging lines — 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 convergenceData points — 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 scientificParallel lines — 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 peacefulNetwork — 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 formatVertical — story/mobile
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 formatUI Guidelines
Our interfaces are inspired by Vercel and Astro: clean, minimal, border-based elevation, and color only for status. Every interaction tells the user in simple language what needs to happen.
UI Principles
Components
Buttons
Three variants: primary (filled), secondary (border), ghost (transparent). Height: 32px (sm), 36px (md), 40px (lg). Border-radius: 6px. Always an action verb as label.
Inputs
Height: 36px. Border-radius: 6px. 1px border. Focus: 2px ring in accent color. Label always above the field, never placeholder-only. Helper text below in 12px grey.
Cards
Border-radius: 12px. 1px border, no box-shadow. Padding: 24px. Hover: subtle background shift (150ms).
Badges
Pill-shape (border-radius: 9999px). Height: 20–24px. Background tint + colored text. Use for statuses: success (green), warning (gold), error (red), info (purple).
Tables
No outer border. Header: 12px uppercase, letter-spacing 0.05em, grey. Row dividers: 1px border. Hover: subtle background. No zebra striping.
Modals
Centered, max-width 480px. Border-radius: 12px. Overlay with backdrop-blur (8px). Padding: 24px.
States
Spacing
4px base grid. Common values: 4, 8, 12, 16, 24, 32, 48, 64. Card padding: 24px. Between form fields: 16px. Page sections: 48–64px. Page max-width: 1200px.
Typography in UI
Labels: 12px, 500 weight, uppercase, letter-spacing 0.05em. Body: 14px, 400 weight, line-height 1.5. Page title: 24px, 500 weight. Hero: 32px.
Navigation
Empty & error states
Centered, max-width 400px. Small monochrome SVG illustration, heading 16px, description 14px grey, one CTA button. Use the 404 brand asset as inspiration.
Visual Exploration
The current style is the result of extensive exploration. Below are the directions we explored and why we arrived at minimal line + wash.
Photography
Guidelines for when real photography is used (team, events, office).
Prefer
- Natural daylight, soft shadows
- Tactile materials visible (concrete, wood, paper)
- Calm, clean compositions with generous negative space
- Real work situations, not posed
Avoid
- Generic corporate stock photography
- Flash lighting, bright colors, busy backgrounds
- Forced poses or unnatural situations
- Stock photos with visible watermarks or low resolution
Color treatment
Slightly desaturate and shift white balance toward warm. Optionally apply a subtle teal overlay (10–15% opacity). The result should feel like natural daylight, not a filter.
Data & Charts — Economist Style
Our charts and data visualizations follow The Economist style: clear, minimal, and conclusion-first.
Conclusion in the title
The chart title is a complete sentence containing the insight. The subtitle provides context (unit, period).
Labels in the chart
Label lines and bars directly in the chart. No separate legend box — this reduces eye travel.
One highlight color
Use grey/muted tones as the base. Apply the accent color (#9b99ff dark / #5b58d8 light) to the key data series.
Minimal decoration
No 3D effects, no chart junk. Light horizontal gridlines only, no vertical. No heavy borders or frames.
Y-axis starts at zero
Bar charts always start at zero. Line charts may break this rule when variation matters more than absolute level, but this must be explicitly noted.
Source attribution
Small text below the chart: 'Source: [provider]'. Always attribute, never omit.
Templates & Formats
Standard formats for all content we produce. Use these dimensions and safe zones for consistent output.
Social Media
| Format | Dimensions | Usage |
|---|---|---|
| LinkedIn post | 1200 × 1200 | Quote, statistic, announcement |
| LinkedIn carousel | 1080 × 1350 | Slides, tips, explainer |
| Instagram / Story | 1080 × 1920 | Vertical content |
Video (Remotion)
| Format | Dimensions | Usage |
|---|---|---|
| YouTube thumbnail | 1280 × 720 | Video preview |
| Video intro | 1920 × 1080 | Logo reveal, ~3 seconds |
| Video outro | 1920 × 1080 | CTA + logo, ~5 seconds |
| Lower third | 1920 × 200 | Name + title overlay |
Blog & Website
| Format | Dimensions | Usage |
|---|---|---|
| Blog hero | 1920 × 1080 | Article header (Directus) |
| OG image | 1200 × 630 | Social sharing preview |
| Favicon | 32 × 32 / SVG | Browser tab |
Brand Pattern
The Pantalytics network pattern can be used as a background for videos, social media posts, presentations and blog hero images. Available in dark and light variants.