Dutch flag blue at the center. KNVB orange for accents. Vermillion for errors only. White holds 70% of every surface.
Our legacy blue (#4376FC) read as "cloud / SaaS", light, frisky, lacking weight. A product company that works with governments needs to project trust. Cobalt is the official blue of the Dutch flag, Dutch by birthright, dark enough to feel serious, light enough to stay blue, and AAA-contrast on white so it can carry body text.
| Candidate | Hex | L% | On white | Verdict |
|---|---|---|---|---|
| Legacy | #4376FC | 63% | 3.99 | Too light, too "tech", fails AA for body text. |
| Cobalt | #21468B | 34% | 9.05 | Dutch flag blue. Dark enough to be trustworthy, light enough to stay blue. AAA on white. |
| NLDS Utrecht | #154273 | 27% | 10.19 | Nice, but no flag association, reads as municipal design system. |
| Rijks-lint | #01689B | 31% | 6.07 | Strong government signal, confusing for us as a company. |
| Midnight | #0C2D48 | 17% | 14.19 | Too dark, loses blue identity, drifts toward black. |
Three Dutch oranges considered. Rijkshuisstijl orange fails on three fronts at once: worst contrast on cobalt (under WCAG 3:1), highest positioning risk (reads as government), and darkest luminance, sinks into cobalt instead of popping. KNVB wins on harmony with cobalt and "Oranje" mass-appeal without the government baggage.
| Candidate | Hex | On cobalt | Verdict |
|---|---|---|---|
| Wimpel | #FF7F00 | 3.58 | Pure orange, ceremonial / poster-feel. Vibrates against cobalt. |
| Rijks | #E17000 | 2.82 | Fails contrast on cobalt. Reads as Rijkshuisstijl, confuses brand position. |
| KNVB | #F36C21 | 3.01 | Slightly red-leaning, lower saturation. Warmer pairing with cobalt. "Oranje" without governmental weight. |
Cost we pay: ~0.57 contrast points less on cobalt. For icon and accent use that's fine (WCAG AA for non-text is 3:1). For larger elements that need to be readable, we use orange on white (4.96:1, AAA-large), not on cobalt.
We're a company of humans, not a monolith. Orange carries the warmth and approachability that cobalt, by design, doesn't.
National team, Koningsdag, Oranjegekte, recognised by everyone, owned by no agency. Mass-appeal Dutch identity without Rijks-association.
Action, motion, "we build things that work". Counterweight to cobalt: cobalt carries structure and trust, orange carries movement.
In UI, orange pulls the eye to one thing per screen, the primary CTA highlight, the focus ring, the badge. Never two.
Maximum 8% of any surface. Above 10%, orange starts competing with cobalt and loses its attention-pulling power. The number is the discipline.
No hero backgrounds, no sidebar fills, no card backgrounds, no body text on white. Orange is for accents and one-thing-per-screen highlights only.
Cobalt + KNVB-orange isn't unclaimed territory. Banks, government, sport, multiple Dutch identities live in this register. Our position sits in the gap between bank-navy (too dark, too corporate) and Rijks (too brown, too institutional). Bright enough to not feel corporate, dark enough to be trustworthy, warmer than government.
No neighbour shares exactly our pair, but a fast glance can read like Rabo, ING or "something governmental". Our distinction comes from proportion and application as much as hue: the 8% rule, the hex wrapper, Figtree, white dominance. Together those mark us, not the hex values alone.
Dutch products in document, case, and overheidsdata land near our palette. We keep them here so a fresh glance at a deck or website doesn't quietly drift their way. Links go to the live site, the note is the palette read, the line under the name is what they ship.
Brand is flat-hex only (the 3D prism mechanism was removed in v3.0.0). Per the policy locked in tokens.css: each diagram hex picks exactly one of lavender, mint, forest, terracotta. The workspace hex uses workspace-blue (= Nextcloud's own brand blue). Cobalt is brand chrome, never a category. Each family ships two stops: -300 is the lighter hover/wash, -500 is the saturated face you use most.
--c-workspace-* aliases --c-workspaceblue-*; 500 is Nextcloud blue. Always solid, never a gradient.
These scales live in tokens.css alongside the categorical families but serve different jobs and must not be picked up as a category. Coral is the KNVB-orange accent scale (≤ 8 % page area). Gold is the Conduction-Certified trustmark scale. Gray is the neutral support scale. All three ship the same two stops.
--c-orange-knvb). Focus, hover, the one highlight per scene. Capped at ~8 % of any surface. Never as a primary hex fill.Only the "Next" in ConNext, the brand-word "Nextcloud" in copy, and idiomatic "next" when it's directly about Nextcloud-as-platform. Not on functional "next" (next page, next year).
Use .cg-yellow on the brand-word "Common Ground" and on commonground.nu when referring to the platform-as-platform. Pairs with how Nextcloud-blue is used for "Nextcloud". Never on functional words ("ground" alone, "common" alone).