Every system choice has a reason. If something feels arbitrary, read this; it isn't.
The official blue of the Dutch flag, heavier than legacy SaaS blues, lighter than bank navy. It reads trustworthy and Dutch without becoming nostalgic or government grey. Fills 20% of each surface; the proportion is the rule, not just the hex.
The orange of the Dutch football team: warm, instantly recognisable as Dutch, but not the Rijkshuisstijl orange (which would drag us into government-document territory). Capped at ~8% of each surface. Never as a primary fill, never as a button background.
The red of the Dutch flag. Rare: for status (errors, deletions, banned-word callouts) and for the rare moments we want flag energy without leaning on orange. Capped at ~2% of each surface.
Nextcloud's official blue. A guest colour in our system, used only where the context is ConNext-specific: the "Next" in the wordmark, the workspace hex in platform diagrams, brand quotations in copy. Never on functional "next" (next page, next year). Always solid #0082C9, never as a gradient.
Cobalt sits deliberately between government blue (too dark, too institutional) and corporate blue (too generic, too SaaS). Heavier than commercial blues, lighter than national-government blues: the spot for a Dutch open-source product company.
Round terminals, neutral character, a wide weight range. Reads calm, not corporate-cold. Open Font License (OFL), so bundleable. Works from 12px up to display sizes without changing character.
Generous x-height, readable at small sizes, has character without becoming cute. For code blocks, eyebrows ("THE PLATFORM OVERVIEW"), code-style metadata, and our cookies CLI prompt. OFL licensed.
We don't ship a separate display font. Figtree at 700 with negative letter-spacing handles every heading up to 64px without invoking a second typeface. Less to load, more consistency, fewer foundry licensing questions.
Ligatures, swashes, alternates, all off. Why? They render inconsistently across platforms (especially WCAG screen readers + older PDFs) and pull the eye in ways that hurt scannability. Web-rendered Figtree always reads as Figtree.
tabular-nums for numeric tables. Otherwise font-feature-settings: "liga" 0; on the root.Nowhere in the brand do flat-top variants appear. The pointy-top hex runs from app icons to bullets, status badges, pagination: anywhere a shape means something. Functional containers (buttons, inputs, cards) stay rectangular. Hexes point. Rectangles do.
A logo wrapper is only the start. The hex appears as a bullet on every list, a status indicator next to every app, an avatar wrapper for every team member, a divider between sections, a timeline node in step diagrams. Wherever a shape means something, the hex is that shape.
#0082C9.Hex prisms: the same pointy-top hex extruded with a slight isometric depth, flat shadow, no Pixar lighting. Every illustration in the system uses this geometry, with pastel category palettes per face. Reference: Honeycomb's platform-overview diagram.