03 · Color

Cobalt-first, with one accent.

Dutch flag blue at the center. KNVB orange for accents. Vermillion for errors only. White holds 70% of every surface.

Why these colors · the design rationale

Why cobalt #21468B?

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.

CandidateHexL%On whiteVerdict
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.

Why KNVB orange #F36C21?

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.

CandidateHexOn cobaltVerdict
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.

What orange means for Conduction
01 · Warmth

People, not an institution.

We're a company of humans, not a monolith. Orange carries the warmth and approachability that cobalt — by design — doesn't.

02 · Identity

"Oranje" without the government.

National team, Koningsdag, Oranjegekte — recognised by everyone, owned by no agency. Mass-appeal Dutch identity without Rijks-association.

03 · Optimism

Pragmatic energy.

Action, motion, "we build things that work". Counterweight to cobalt: cobalt carries structure and trust, orange carries movement.

04 · Focus

One thing at a time.

In UI, orange pulls the eye to one thing per screen — the primary CTA highlight, the focus ring, the badge. Never two.

05 · The 8% rule

Accent, not co-star.

Maximum 8% of any surface. Above 10%, orange starts competing with cobalt and loses its attention-pulling power. The number is the discipline.

06 · Where it doesn't go

No big fills, no body.

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.

Position · against neighbouring Dutch palettes

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.

Conduction 2026
Cobalt L=34, KNVB H=22. Warm-professional, Dutch-accessible.
Rabobank
Navy L=20 (almost black). Bank-feel, not product-feel.
ING
Same dark register as Rabo. Modern fintech.
Rijkshuisstijl
Orange darker, browner. Government — bewust uitgesloten.
KNVB · elftal
Same orange — we borrow it, they don't borrow ours. Their navy is darker.

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.

Proportion · the 70 / 20 / 8 / 2 rule
White · #FFFFFF70%
Cobalt · #21468B20%
Orange · #F36C218%
Vermillion2%
Brand
9.05 AAA
Cobalt
Primary · brand, structure, body text, CTAs
#21468Bcobalt-500
3.45 AA-large
KNVB Orange
Accent · focus rings, hover, badges
#F36C21coral-500
6.83 AA
Vermillion
Tertiary · errors, destructive only
#AE1C28red
guest
Nextcloud Blue
Guest color · ConNext context only
#0082C9 → #1CAFFFnextcloud
Cobalt scale · derived for surfaces, fills, hex-prism faces
50#EEF2F8
100#DCE3F0
200#B6C2DD
300#8095BD
400#4D69A4
500 ★#21468B
600#1B3A75
700#152D5C
800#102246
900#0A172F
Hex-prism category families · pastel, for illustration faces
Coral
100300500
Apps · OpenCatalogi family. KNVB orange tip.
Lavender
100300500
Connectors · OpenConnector, integrations.
Gold
100300500
Data · OpenRegister, schemas, storage.
Mint
100300500
Processes · DocuDesk, AI, status: stable.
Gray
100300500
Neutrals · diagram supports, ambient elements.
Status colors
Stable
--c-mint-500 · #2E9866
Beta
--c-orange-knvb · #F36C21
Error · destructive
--c-red-vermillion · #AE1C28
Pairing rules
Aa
Cobalt + white · Primary surface. AAA at 9.05:1. Default for inverted hero, footer, primary CTA.
Aa
White + cobalt body · Default page. Body text in cobalt rather than charcoal grey — owns the brand.
Install
Orange as accent · One accent per screen — focus ring, hover state, or one badge. Never as a primary fill.
Brand citation · "Next" in Nextcloud-blue
Make Nextcloud your workspace.
Welcome to ConNext — Conduction's apps for Nextcloud.

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).