Tabula

Overview

Tabula is a freeform canvas moodboarding application that reimagines how creative professionals organize visual inspiration, notes, and references. The design language embraces 'Minimalist Spaciousness'—a philosophy where generous whitespace, subtle grays (hsl(0, 0%, 95.1%) to hsl(0, 0%, 99%)), and a single accent color (#575ecf) create an environment of calm focus. The interface itself functions as a moodboard: users drag, drop, and arrange boards, notes, links, and images freely on an infinite canvas, mirroring the organic, non-linear nature of creative thinking. The emotional response is one of liberation—no rigid grids, no forced hierarchies, just a blank canvas waiting for ideas.

The brand voice is conversational, Dutch-forward, and respectfully minimal. Tabula speaks in imperative, action-oriented language: 'Selecteer een element op het moodboard' (Select an element on the moodboard). The vocabulary avoids jargon; instead of 'interface,' it says 'canvas.' Tone is encouraging without being breathless. Example sentence in brand voice: 'Zet er boards, notities, links en beeld op en open een board met één klik' (Put boards, notes, links, and images on it, and open a board with one click).

Colors

Tabula's color system prioritizes restraint and clarity. The palette is anchored in a warm, off-white surface (#ffffff for primary surfaces, #f6f4f0 for subtle container backgrounds) that reduces eye strain during long creative sessions. The gray scale (--gray1 through --gray12, ranging from hsl(0, 0%, 99%) to hsl(0, 0%, 9%)) provides semantic hierarchy without visual noise: --gray3 (#f0f0f0) for subtle dividers, --gray9 (#8f8f8f) for secondary text, --gray12 (#171717) for primary text. The single accent color, Primary (#575ecf), is reserved exclusively for interactive elements—focus states, primary buttons, and active navigation. This violet-blue sits at the intersection of calm and energy, evoking both professionalism and creative possibility. Secondary colors support status and context:

Typography

The type system uses a single font family—the system stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.)—to ensure consistency across platforms and reduce cognitive load. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major headings; Headline-lg (32px, 600 weight) structures primary content sections; Body-lg (16px, 400 weight, 24px line-height) ensures comfortable reading at standard viewing distance. Labels (12px, 500 weight, 0.01em tracking) appear on buttons and badges, with increased letter-spacing (0.02em) for small labels (11px) to maintain legibility at reduced sizes. Font weights are deliberately limited to 400 (regular) and 600 (semibold) to avoid visual clutter; no ultra-light or ultra-bold weights are used. When small labels appear over bu

Layout

Tabula uses a fluid, 12-column grid system with a maximum container width of 1280px, allowing the interface to scale gracefully from mobile (single column, 16px gutter) to desktop (full 12 columns, 24px gutter). The infinite canvas—the core interaction model—operates outside this grid; it is a free-form space where users position elements at arbitrary coordinates. Fixed UI elements (header, left toolbar, right panel) use the grid system to maintain alignment and predictability. Spacing follows a semantic scale: xs (4px) for micro-interactions and icon spacing, sm (8px) for compact component padding, md (16px) for standard component padding and section spacing, lg (24px) for major section separation, and xl (32px) for page-level margins. The 'gutter' token (24px) defines horizontal padding

Elevation & Depth

Depth in Tabula is conveyed through subtle shadows and layering, not through dramatic color shifts or blur effects. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.04)) for resting cards and input fields, creating a barely perceptible lift; md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards and dropdown panels, signaling interactivity; and lg (0 4px 12px rgba(0, 0, 0, 0.1)) for modals and floating panels that demand attention. The badge component uses a custom multi-layer shadow (0 0 0 1px rgba(0, 0, 0, 0.88), 0 1px 0 0 rgba(0, 0, 0, 0.04), 0 2px 2px -1px rgba(0, 0, 0, 0

Shapes

Tabula employs 'Soft-Technical' border-radius philosophy: sharp enough to feel modern and intentional, soft enough to avoid harshness. Buttons and primary interactive elements use lg radius (8px), creating a friendly, approachable feel while maintaining clear affordance. Cards and containers use lg radius (8px) for consistency. Input fields use DEFAULT radius (4px), a subtle curve that signals form-ness without drawing attention. Icon buttons use md radius (6px) as a middle ground. The canvas itself (the infinite moodboard) uses 22% border-radius on draggable elements, creating organic, almost

Components

Action Elements Buttons follow a two-tier system: Primary buttons (background: #575ecf, text: white, padding: 8px 16px, height: 36px, rounded: 8px) are used for main CTAs like 'Installeer Tabula' and 'PDF' export. On hover, the background shifts to #4a52b8 with a subtle shadow (0 2px 8px rgba(87, 94, 207, 0.2)) to indicate interactivity. On active/press, the background darkens to #3d4399 with an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.1)) for tactile feedback. Secondary buttons (background: transparent, border: 1px solid #cccccc, text: #575ecf) are used for less critical actions; on hover, they gain a light background (#e9ecef) and darker border (#6c757d). All buttons use a 0.2s ease transition for smooth state changes. Icon buttons (width: 40px, height: 40px, background: transpa

Do's and Don'ts

**Do**

• Do use the primary color (#575ecf) exclusively for interactive elements—buttons, links, focus states—to create a clear visual hierarchy and reduce cognitive load.
• Do maintain generous whitespace (lg spacing: 24px) between major sections to support the minimalist aesthetic and reduce eye fatigue during extended use.
• Do apply the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto) consistently across all platforms to ensure predictable rendering and reduce load times.
• Do use the gray scale (--gray1 through --gray12) for semantic hierarchy: --gray1/--gray2 for subtle backgrounds, --gray9 for secondary text, --gray12 for primary text.
• Do provide clear focus states (2px solid #575ecf outline with 2px offset) on all interactive elements to support keyboard navigation and accessibility.
• Do use md (16px) and lg (24px) spacing for component padding and section separation; avoid arbitrary spacing values that break the rhythm.

**Don't**

• Don't use colors outside the defined palette (primary, secondary, tertiary, error, and the gray scale) for UI elements; this breaks visual consistency and confuses users.
• Don't apply shadows darker than md (0 3px 8px rgba(0, 0, 0, 0.15)) to standard cards; excessive shadow weight contradicts the minimalist aesthetic.
• Don't mix font weights beyond 400 and 600; ultra-light or ultra-bold weights create visual noise and reduce readability.
• Don't use border-radius values outside the defined scale (sm: 2px, DEFAULT: 4px, md: 6px, lg: 8px, xl: 12px, full: 9999px); arbitrary radius values break the soft-technical design language.
• Don't place small labels (11px) or badges over busy image backgrounds without a text-shadow (0 1px 2px rgba(0, 0, 0, 0.1)) to ensure legibility.
• Don't use color alone to convey status or interactivity; always pair color changes with shadow, border, or scale changes for users with color vision deficiency.