05 · Components

Rectangles do, hexagons indicate.

Functional containers (buttons, inputs, cards) stay rectangular. Status, order, and category get the hex.

Buttons

Primary uses cobalt fill. Focus ring is KNVB orange. Never an orange button fill.

Status badges · pointy-top hex

Stable Beta Experimental Deprecated Preview

Filter chips · pill, never hex

All apps Data Processes Connectors AI Documents

Category tags

OPENCATALOGI OPENCONNECTOR OPENREGISTER DOCUDESK

App cards

OpenCatalogi

Public software catalog, every app, every dataset, in one searchable index.

Stable v2.4 · OSS

OpenRegister

Schemas, registers, and data objects, the backbone for your app's structured data.

Stable v3.1 · OSS

OpenConnector

Connect Nextcloud to anything, REST, SOAP, GraphQL, file drops, message queues.

Beta v1.2 · OSS

Form fields · rectangles always

Email address

Organisation

Use case

Notes

Focus ring is orange (3px), border becomes cobalt. WCAG AA contrast on placeholders.

Hex pagination · install wizard, onboarding

Step 3 of 5, Configure schema

Alerts

Note: The Nextcloud app store install requires admin permissions on your instance.

Beta: OpenConnector v1.2 is in beta. Connector contracts may change before v2.

Error: Schema validation failed: missing required field oin.

Section divider · line broken by a hex

Apps stay free and open-source.

Support is optional, a separate, transparent layer.

CTA banner · cobalt panel with hex ornaments

Cobalt fill · conduction-bg parallax honeycomb (default theme) · one orange accent · white primary · ghost-on-dark secondary

Testimonial · split panel with hex-cut transition

Photo · placeholder

Conduction's open-source apps replaced two SaaS subscriptions and a custom integration. We installed OpenCatalogi and OpenRegister in an afternoon.

Sanne de Vries CTO, Gemeente Voorbeeld

Read the case study

Photo cell uses a hex-derived notch on its right edge (point at 50%) so the join itself signals "Conduction", no extra ornament needed

Feature panel · stacked cards, hex-platform illustration

Open ecosystem

Connect anything to Nextcloud.

OpenConnector ships with REST, SOAP, GraphQL, file-drop and message-queue adapters. No vendor lock-in. Drop in your own connector when you need to, it's all open-source.

Browse 40+ connectors →

Behind-cards use category-family pastels (mint · gold · coral) · hex prisms in the illo carry app glyphs · dotted connectors echo the "wires between modules" metaphor

Chat popover · floating helper with hex FAB

FAB is a hex prism (cobalt) instead of a circle. Popover uses cut-corner trbl, so the cut points down-right toward the FAB. Hex avatars (cobalt-700 / KNVB / mint with status dot) instead of circular ones.

Testimonial row · staggered mini-cards

OpenCatalogi gave us in two weeks what our previous integrator quoted for nine months.

Sanne
de Vries CTO
Gemeente Voorbeeld

The schemas in OpenRegister mean we finally stopped writing migration scripts every quarter.

Martijn
Kuipers Lead engineer
Provincie Zuid

One platform, real open-source, and a Dutch team that actually picks up the phone. Done.

Robin van
Zandvoort IT-manager
Waterschap Noord

WOO compliance went from "scary project" to "checkbox" the moment we deployed Conduction.

Esther
Janssen Privacy officer
Stadsdeel Zuid

OpenConnector saved a six-figure SaaS subscription. Now it's a one-time install.

Kasper
Bakker CFO
Mediabedrijf BV

Cards staggered vertically (translateY 0/28/0/16/36) for visual rhythm. Quote-mark in KNVB orange · vertical separator between name and role instead of avatars.

Download / lead-capture panel · cut-corner form on cobalt-800

The 2026 Open-Source
Government Stack, report.

Forty-two Dutch organisations, eighteen months of installs, what worked and what didn't. The full benchmark, with TCO numbers, migration paths, and which Conduction app maps onto which legacy SaaS.

PDF · 64 pages · Dutch + English · No paywall, no upsell.

Get the report

By downloading you agree to receive one follow-up email from Conduction. We don't share your details and you can unsubscribe in one click. Privacy statement.

Form card uses cut-corner-tlbr-lg so the top-left cut points back at the pitch headline · form lives on white inside cobalt-800 · single primary button, cobalt fill

Page-level components · standalone HTML files in preview/components/

01 · Chrome

Top navbar

Site-wide top navigation, ConNext wordmark with brand-cited "Next" in Nextcloud-blue, primary section links, and the ghost/cobalt CTA pair. Used on every page.

02 · Above the fold

Hero

Site nav + cobalt headline, CTA cluster, and the ConNext hex-prism ecosystem visual centred on the Nextcloud workspace.

03 · Platform

Platform overview

The platform-as-honeycomb visual with the Nextcloud workspace and orbiting apps. The canonical "what is ConNext" diagram.

04 · Illustration

Pipeline flow

Horizontal hex-prism string showing data → processing → users. Section-level illustration block.

05 · Numbers

Stats strip

Four-up tile of headline numbers, apps, install time, price, license. Sub-hero band on the cobalt-50 surface.

06 · Browse

Apps grid

Filter chips + 3-column grid of app cards with hex-icon containers, status badges, and one CTA per card. The repeating block on every catalogue surface.

07 · Filtering

Faceted filters

Sidebar facet rail with native checkboxes (categorie, status, NL-versie, compliantie) plus the matching active-chip strip that appears above the result list. Pairs with the apps grid.

08 · Partners

Partner cards

Three tiers in one row, standard Partner, Certified with the gold avatar, and Strategic with the inverse cobalt treatment plus dual-hex mark and apps-used pills.

08b · Clients

Clients marquee

Three-row pointy-top hex honeycomb scrolling right-to-left, with each row at a slightly different speed so the lanes desync. Logos are grayscale by default and restore colour on hover; the lane pauses on hover and respects prefers-reduced-motion. Below 720 px the marquee collapses to one lane.

09 · Team

Employee cards

Two variants side by side, Compact hex avatar with initials for team-grid pages, and Detail with bio, "apps I work on" pills, and contact links for individual /about/team profiles.

10 · Detail page · USPs

Feature list

Broad-column section that pairs a hex glyph with a heading and short body. Designed for the three-to-eight USPs that sell the app. Pair it with the Feature grid below for the full spec.

17 · Detail page · Spec

Feature grid

Compact multi-column list for ten-to-sixty-plus features. Each item shows a status hex and short label always; the full description reveals on hover and on keyboard focus. Optional group headers split long lists by category.

11 · Detail page

Pair cards

Compact "related item" cards used on detail pages for "Pairs well with" or "See also" rows. Smaller and denser than .app-card; three-up grid layout.

12 · Chrome

Footer

Site-wide footer on cobalt-900, five-column link grid (apps · solutions · resources · Conduction), brand-triad row, EUPL license + GDPR-compliant badge, GitHub link. Used on every page.

13 · Chrome

Cookie CLI

The cookie consent prompt as a terminal. ASCII Conduction logo, three equal-weight actions, no dark patterns. Open-source-native, by people who run their own servers.

14 · Illustration

Conduction background

A reusable parallax honeycomb backdrop. Smaller hexes sit deeper, drift slower, breathe gentler. Always pointy-top, one orange accent per scene, never competes with the foreground.

15 · Browse

Solution cards

Two-up grid for the solutions catalogue. Sector modifier (.public, .mkb, .health) tints the icon hex; built-on pills at the foot link back to the apps each solution stands on.

16 · Detail page

Reference cards

Customer reference cards on partner detail pages. Sector tag, customer name, what we did, and the stack pills used. Three-up grid layout.

17 · React primitives

Primitives

The seven atoms every higher-level component composes from: HexBullet, Eyebrow, Section, SectionHead, Card, Pill, Button. Each one extracted from a CSS rule that recurred in 3+ kit files.

18 · Detail page

Detail hero

The shared 1fr/360px hero pattern between app-detail, solution-page, and partner-detail. Crumb + status badge + h1 + tagline + 3 CTAs on the left, big 360x416 cobalt hex on the right.

19 · Section

How steps

Numbered process-step row used wherever a flow goes "three things, in this order": /support help-routing, /install onboarding, partner-programme tiers explainer.

20 · Hero column

Hex rain

The "Twelve apps" mini-game that drops in the right column of the landing-page hero. First click starts a 60-second collect-the-apps game; deselect-on-doubleclick is the twist.

21 · Verbatim code

Compose block

Branded copy-paste panel: cobalt-900 background, Plex Mono, optional filename pill, copy button on hover. For docker-compose, bash recipes, and any verbatim content where Docusaurus's default Prism theme would clash with the brand.

One Nextcloud, built on Common Ground, with one orange accent per screen.

22 · Brand citations

NextBlue · CgYellow · KnvbOrange

Three thin React wrappers around the global brand-citation classes. Type-checked, autocompletable replacements for ad-hoc <span className="next-blue">. Spec lives at the bottom of the brand page.

23 · Section

Showcase

Multi-item collapsible showcase, screenshot-and-body pattern. Used on /commonground for the five-laag model and anywhere a "this then this then this" reveal carries the page.

24 · Section

Rotating cards

Carousel of cards that auto-cycle on a slow timer with manual nav. For testimonial decks, "what you can build" rotators, and any module where a static grid would over-pack the section.

25 · Illustration

Hex network

Centre hex with surrounding satellite hexes, used on /support to render the partner ecosystem around the Conduction core. Composes the standard pointy-top hex token, no bespoke geometry.

26 · Illustration

App mock

Selector that renders one of sixteen app-specific UI mockups (DeciDesk, DocuDesk, MyDash, OpenCatalogi, OpenRegister, OpenConnector, Procest, ZaakAfhandelApp, etc.). Used wherever you want to show what an app looks like without a real screenshot.

27 · Verbatim

Agent trace

Terminal-styled agent execution log. Cursor + mode chrome, monospace lines, designed for showing what an LLM agent did inside an app. Cousin of the compose block; reads as a trace, not a script.

28 · Academy

Academy components

The card and chrome patterns for academy.conduction.nl: ContentCard, FeaturedCard, ContentTypeFilter chips, NewsletterCta, RelatedPosts, ContentDetailHero. One feed, five content types, distinguished by a frontmatter contentType:.

28b · Academy

App cross-links

Right-rail and inline block that connects the three app surfaces: product page, docs, academy. Driven by the shared apps-registry so URLs stay in lockstep. Used on /apps/<slug>.mdx (rail), academy post detail (inline), and docs site footer (inline, auto-injected via DocItem/Footer swizzle).

29 · Hero column

Game modal

End-of-game dialog with cross-game progress tracking. Subscribes to connext:gameend events and persists to localStorage so the score survives navigation. Pairs with the Hex rain hero mini-game.

30 · Marketing

Managed Common Ground

Yellow Common Ground+ panel with centred header, dual CTA, and a three-column row of bundled components (OpenRegister, OpenCatalogi, OpenConnector, DocuDesk, MyDash, OpenAI Bridge) at €250 per component per month, plus the public-sector eligibility footnote. Used on /commonground and /support.

31 · Browse

Partner directory

Faceted-filter sidebar plus the partner-card grid plus a trailing "Become a partner" CTA tile. Three tier facets (Strategic, Certified, Partner) and an apps-and-services facet auto-derived from the partner list. The full /partners surface in one composite component.

32 · Browse

External app shelf

"Open source we use, not own" shelf for third-party ExApps (OpenTalk, Matrix, Mattermost, OpenExchange, Windmill, n8n, OpenProject, Keycloak). Each card carries a brand-coloured hex glyph, name, ExApp meta tag, and a one-line description with an outbound arrow. Used on /connext.

33 · Detail page

FAQ + FAQItem

Vertical list of disclosures using native <details> / <summary> for keyboard, screen-reader, and no-JS support. Hex bullet on the left turns from cobalt-200 to brand cobalt when an item opens; plus-icon rotates to a close. Used on /support.

34 · Detail page

Widget shelf

Section that lists the dashboard widgets a Conduction app ships for Nextcloud. Eyebrow + title + lede header above an N-column grid; each card has a tinted preview panel on top, then a hex icon + title + status pill, then a one-line description. Used on every app detail page.

35 · Academy · Shared shell

Hex card

Tinted academy panel with a top-left hex badge holding an icon. The shared shell behind ContactCta, Outcomes, and Prerequisites — same cobalt-50 surface, three preset glyphs (mail, lightbulb, clipboard), optional right-side actions slot and right-edge hex motif.

36 · Academy · Tutorial header

Outcomes

"What you'll learn" card for the top of academy tutorials. Lightbulb hex badge in the top-left corner, orange checkmark glyphs per item. Pairs with Prerequisites below the lede paragraph.

37 · Academy · Tutorial header

Prerequisites

"What you need" checklist for the top of academy tutorials. Clipboard hex badge in the top-left corner, orange hex bullets per item. Pairs with Outcomes above the tutorial body.

38 · Academy · End-of-tutorial

Contact CTA

"Mail ons" prompt at the bottom of academy tutorials. Mail hex badge in the top-left corner, primary button on the right, decorative right-edge hex motif. Calmer than the dark CtaBanner footer, louder than a plain link.

Beyond components · the diagram set

Web component primitives

These atoms compose into diagrams.

Hex prisms, platform overviews, pipelines, domain trees. Built as framework-agnostic web components so the same render path runs in plain HTML, Vue, React, Docusaurus, and Nextcloud apps. <cn-hex> is shipped; six more planned.

Diagram set →