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.
Everything in this section paints from --conduction-color-*, not from the primitives above. So these are not pictures of the theme, they are the theme. Change a token and this section changes with it.
Use the switch to flip the token layer to dark. The page chrome around it stays light on purpose: the kit paints its own furniture from the raw primitives, and only the semantic layer has a dark mapping.
data-theme on the document
The base draws the rule and the icon. The ink carries the text. The tint is the ground. Publishing only the base is what left every product downstream inventing the other two. Warning is the one exception to "the base draws the rule": KNVB orange on its own tint measures 2.76:1, under the 3:1 a boundary needs, so its rule takes the ink. Never signal a status by colour alone, always a word or an icon beside it.
The steps a consumer needs to build on cobalt: hover fills, pressed states, borders, muted chrome. The primitives always carried these values; naming them semantically stops every product picking its own.
Two different things that one token used to have to mean. inverse is the cobalt panel behind a hero. dark is the deep ground the sites actually paint for footers, code blocks and dark mode. Both are real, so both are named.
WCAG 1.4.11 asks 3:1 of anything outlining a control. The old default was cobalt-200 at 1.79:1, so a field outline was effectively invisible to some readers. border-default is now cobalt-300. The lighter step is still right for decorative rules between cards and table rows, where no minimum applies, so reach for --c-cobalt-200 directly there.
KNVB orange reaches 3.01:1 on white. That is enough for a fill, an icon, a focus ring or a large heading, and not enough for running text. text-accent and link-hover are both text roles, so they point at a darker sibling on the same hue. KNVB itself is unchanged and still the accent.
Four treatments that ran in production for years with no published counterpart, so each product invented its own. These render from the tokens now.
Install with npm i @conduction/docusaurus-preset
npx @conduction/theme build
Zes apps, één workspace, allemaal open source.
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).