Proventum
Your Business HQ
Design System v2.0
The definitive reference for building consistent, beautiful interfaces across the Proventum platform. Every color, component, pattern, and guideline in one place.
Brand Voice & Writing
Professional but warm. Direct, never salesy. Written for busy B2B SaaS operators who don't have time for fluff.
Direct
Active voice. Present tense. Say what you mean in as few words as possible. Every word must earn its place.
Human
Warm, not corporate. Write like you're helping a colleague, not issuing a press release. No jargon or buzzwords.
Precise
Max 5 words for buttons. Max 40 characters for labels. If it doesn't fit, rethink it.
Writing Rules
13 locales supported
da, de, en, en_AU, fi, fr, nl, nl_AM, nl_FR, nl_SA, nl_TW, pl, sv. All UI text uses {{ 'key'|trans }} in Twig. When adding strings, add keys to all 13 files.
Examples
"Save changes"
"Click here to save your changes"
"3 tickets need attention"
"There are currently 3 tickets that require your attention"
"Delete company"
"Are you sure you want to permanently remove this company record?"
Color Palette
Click any swatch to copy the hex value. Our palette is built on a blue primary with semantic colors for feedback states.
Primary
Semantic
Neutral Gray
<!-- Usage in Tailwind --> <div class="bg-primary-600 text-white">Primary action</div> <div class="text-gray-700">Body text</div> <div class="bg-green-50 text-green-600 border border-green-200">Success state</div>
Typography
Inter-based system font stack. All sizing follows Tailwind defaults with our specific weight and color choices.
Page Heading
Section Heading
Card Heading
Subsection Heading
Label Heading
Body text -- The quick brown fox jumps over the lazy dog. This is the default text style used throughout the application for paragraphs, descriptions, and general content.
Helper text, timestamps, secondary information
Section Label / Overline
<!-- Font stack (tailwind.config.js) -->
fontFamily: {
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif']
}
<!-- Heading -->
<h1 class="text-2xl font-bold text-gray-900">...</h1>
<!-- Body -->
<p class="text-sm text-gray-700">...</p>
<!-- Muted -->
<span class="text-xs text-gray-500">...</span>
Spacing & Grid
Built on a 4px base grid. All spacing uses Tailwind's default scale which maps to multiples of 4px.
4px Base Grid
Responsive Container Widths
Standard Page Padding
<!-- Standard page wrapper --> <div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8"> <!-- Dashboard content --> </div> <!-- Form wrapper --> <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8"> <!-- Form content --> </div> <!-- Spacing between sections --> <div class="space-y-6">...</div> <!-- 24px gap --> <div class="space-y-8">...</div> <!-- 32px gap (page sections) -->
Accessibility
WCAG 2.1 AA compliance. Every component must meet these minimum requirements.
Contrast Checks
| Pair | Ratio | Normal | Large | Preview |
|---|---|---|---|---|
| primary-600 on white | 4.56:1 | PASS AA | PASS AAA | Sample |
| gray-700 on white | 9.12:1 | PASS AAA | PASS AAA | Sample |
| gray-500 on white | 4.64:1 | PASS AA | PASS AAA | Sample |
| gray-400 on white | 2.97:1 | FAIL | PASS AA | Sample |
| white on primary-600 | 4.56:1 | PASS AA | PASS AAA | Sample |
Focus Rings
All interactive elements show a visible focus ring on keyboard navigation.
focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
Touch Targets
Minimum 44px for all tappable elements (WCAG 2.5.5).
ARIA Labels
Icon-only buttons must always include aria-label.
<!-- Icon-only button --> <button aria-label="Close dialog"> <svg>...</svg> </button> <!-- Visually hidden label --> <span class="sr-only">Open menu</span>
Keyboard Navigation
All interactive elements must be reachable via Tab. Modals trap focus.
Form Inputs
Consistent form controls with labels, helper text, error states, and disabled states.
Your full legal name as it appears on documents.
Please enter a valid email address.
Guidelines
Labels above inputs, always visible.
Placeholder-only labels that disappear on focus.
Inline validation on blur with specific error messages.
Only show errors after form submit.
<!-- Standard text input --> <label class="block text-sm font-medium text-gray-700 mb-1.5">Label</label> <input type="text" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"> <p class="mt-1.5 text-xs text-gray-500">Helper text.</p> <!-- Error state --> <input class="... bg-red-50 border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500"> <p class="mt-1.5 text-xs text-red-600">Error message.</p>
Cards
Versatile card patterns used across dashboards, settings, and feature showcases.
Basic Card
A simple card with heading and body text. Used for general content containers.
vs $42,890 last month
Feature Card
With an icon, heading, and descriptive text. Great for feature lists and settings.
Guidelines
Consistent padding (p-5 or p-6) across all cards in the same view.
Mixed padding (p-3 on one card, p-8 on another) within the same page.
<!-- Basic card --> <div class="bg-white rounded-xl border border-gray-200 p-6"> <h4 class="text-sm font-semibold text-gray-900 mb-1">Title</h4> <p class="text-sm text-gray-500">Description text...</p> </div> <!-- Stat card --> <div class="bg-white rounded-xl border border-gray-200 p-6"> <span class="text-xs font-medium text-gray-500 uppercase">Metric</span> <div class="text-2xl font-bold text-gray-900 mt-2">$48,352</div> </div>
Badges & Tags
Status indicators, counts, and categorization labels. Use semantic colors consistently.
Status Badges
Count Badges
Tags (dismissible)
Use semantic colors: green = active/success, red = error/closed.
Random color assignment with no semantic meaning.
<!-- Status badge --> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium bg-green-50 text-green-700 rounded-full"> <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Active </span> <!-- Dismissible tag --> <span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded-lg"> Label <button aria-label="Remove tag">×</button> </span>
Tables
Data tables with sorting indicators, hover states, and pagination. Used for CRM lists, deals, tickets, and more.
| Contact | Status | Value | Updated | Actions |
|---|---|---|---|---|
|
WS
William Sprakel
william@storekeeper.com
|
Won | $24,500 | 2 hours ago | |
|
DV
Darran Veenstra
darran@storekeeper.com
|
In Progress | $18,200 | 5 hours ago | |
|
JK
Jan de Koning
jan@example.nl
|
Pending | $7,800 | 1 day ago |
Modals & Dialogs
Click to open interactive modal examples. All modals close on backdrop click or Escape key.
Alerts & Notifications
Contextual feedback messages. Click the dismiss button to remove alerts.
Changes saved successfully
Your contact information has been updated.
Trial ending soon
Your free trial expires in 3 days. Upgrade to keep your data.
Payment failed
We could not process your payment. Please update your card.
New feature available
AI Operators are now available for your plan. Try Kai, Scout, or Pulse.
<!-- Alert pattern -->
<div class="flex items-start gap-3 p-4
bg-green-50 border border-green-200 rounded-lg">
<svg class="w-5 h-5 text-green-600 mt-0.5">...</svg>
<div class="flex-1">
<p class="text-sm font-medium text-green-800">Title</p>
<p class="text-sm text-green-700 mt-0.5">Description.</p>
</div>
<button aria-label="Dismiss">×</button>
</div>
Avatars
User and entity avatars with initials fallback, sizes, groups, and status indicators.
Sizes
Group (overlapping)
Status indicator
Icons
Heroicons (outline) as the standard icon set. 24px default size, 20px in buttons, 16px inline.
<!-- Standard icon (24px container, 20px icon) -->
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
<!-- Icon sizes: w-4 h-4 (inline), w-5 h-5 (default), w-6 h-6 (large) -->
Motion & Transitions
Purposeful animation that improves UX without being distracting. All motion respects prefers-reduced-motion.
Hover Lift
Fade In Up
Spinner
Shimmer Skeleton
<!-- Standard transitions -->
transition-all duration-150 /* Fast: hover states, focus rings */
transition-all duration-200 /* Default: most interactions */
transition-all duration-300 /* Slow: modals, panels, overlays */
<!-- Easing -->
ease-out /* Enter animations */
ease-in /* Exit animations */
cubic-bezier(0.34,1.56,0.64,1) /* Springy: modals, toasts */
<!-- Loading spinner -->
<svg class="animate-spin h-5 w-5" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10"
stroke="currentColor" stroke-width="4"/>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
</svg>
Page Layouts
Four standard page compositions. Dotted borders show the layout skeleton -- these are wireframes, not pixel-perfect mockups.
Dashboard
List Page
Detail Page
Settings Page
<!-- Dashboard layout -->
<div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8 space-y-6">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">...stats...</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2">...chart...</div>
<div>...widgets...</div>
</div>
</div>
<!-- Detail page -->
<div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
<nav>...breadcrumb...</nav>
<header>...title + actions...</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2">...main...</div>
<aside>...sidebar...</aside>
</div>
</div>
Operator Sub-brands
Three AI operators with their own visual identity. Each has a gradient, avatar, color system, and card style.
Kai
Support Copilot
Based on your KB article "Password Reset", I drafted a response for ticket #1042.
Scout
Lead Qualifier
Acme Corp matches your ICP: B2B SaaS, 50-200 employees, NL market. Score: 87/100.
Pulse
Health Alerts
TechFlow BV usage dropped 40% this week. Last login: 6 days ago. Consider outreach.
<!-- Operator avatar -->
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600
rounded-2xl flex items-center justify-center">
<svg class="w-5 h-5 text-white">...icon...</svg>
</div>
<!-- Operator card (Kai example) -->
<div class="bg-blue-50 border border-blue-100 rounded-lg p-3">
<div class="flex items-center gap-2 mb-2">
<!-- avatar -->
<span class="text-xs font-semibold text-blue-900">Title</span>
</div>
<p class="text-xs text-blue-700">Message...</p>
</div>
<!-- Operator colors -->
Kai: from-blue-500 to-indigo-600 | bg-blue-50 | text-blue-700
Scout: from-emerald-500 to-teal-600 | bg-emerald-50 | text-emerald-700
Pulse: from-amber-500 to-orange-600 | bg-amber-50 | text-amber-700
Data Visualization
Chart color palette, bar/line chart guidelines, and a pure CSS bar chart example.
Chart Color Palette (in order)
Bar Chart (pure CSS)
Chart Guidelines
Email Templates
Guidelines for transactional and marketing emails. Emails must work in every client from Outlook 2007 to Apple Mail.
Email Specs
Email Template Mockup
<!-- Email button (inline styles for email clients) -->
<a href="https://..."
style="display:inline-block;
background:#2563eb;
color:#ffffff;
padding:12px 32px;
border-radius:8px;
font-size:14px;
font-weight:600;
text-decoration:none;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
Go to Dashboard
</a>
<!-- Email structure -->
Max width: 600px
Background: #f9fafb
Content: #ffffff with 1px #e5e7eb border
Header: Logo + account name
Footer: Unsubscribe + company address