Components, Conduction Design System

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

Download panel · no-form variant · single orange CTA

This is not an app shelf.
It is Nextcloud as a platform.

The sovereign-workplace bundles are the start, not the finish. Microsoft has spent five years training a generation of citizen developers on Power Platform; Europe has eighteen to thirty-six months to ship a credible architectural answer.

Thinkpiece · 7 min read · By Ruben van der Linde, CTO

Want the full essay?

The thinkpiece on Nextcloud as a platform, the citizen-developer wave, and the sovereignty calculus on AI.

Read the thinkpiece

Same chrome as the lead-capture variant above · form replaced by a single h4 + body + KNVB-orange pill · one orange accent per component (the CTA) · use for thinkpiece links, paper announcements, or any "we made a thing" moment that does not warrant the full form

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

Token-painted abstract of a Conduction app. Fourteen apps, seventeen variants (LaunchPad carries four), one chassis. <AppMock app="procest" /> wherever you want to show what an app looks like without a real screenshot.

26b · Illustration

Widget mock

The single-tile sibling of <AppMock>. Fourteen variants: nine Conduction-app widgets (DocuDesk anonymise, Procest werkvoorraad, OpenRegister activity, etc.) and five stock Nextcloud surfaces (Mail, Calendar, Files, Decks, RSS). Reach for it when copy talks about a single dashboard tile.

26c · Illustration

Sidebar mock

The Nextcloud right-side detail panel, abstracted. Nine variants spanning Procest xWiki and Timeline, DocuDesk Signatures and PII map, OpenRegister Metadata, OpenCatalogi History, OpenConnector Run logs, DeciDesk Decision detail, and the stock Nextcloud Activity feed. Renders standalone or overlaid on an <AppMock> via the new sidebar prop.

26d · Illustration

Mock scene

The overlap shot. Compose a <SidebarMock> at the centre with three to five <WidgetMock> tiles floating around it on a tinted cobalt-50 surface. Reach for it on cards and heroes that talk about cross-cutting integration, where one product surface alone underplays the spread.

26e · Icon set

Integration icons

The third surface in the icon family, after partners and clients. Twenty-one monochromatic glyphs spanning Nextcloud-bundled apps, workflow tools (xWiki, n8n, Windmill, OpenProject, Keycloak), LLM providers (Claude, Mistral, Ollama, OpenAI, Gemini), and Conduction-extension apps. <IntegrationIcon name="..." /> tints via currentColor so it adapts to its context.

26f · Social card

OG card

The canonical 1200×630 Open Graph / social share card for an app or product. Brand eyebrow, wordmark, one-line tagline, the app's own domain, and the licence line, on canonical cobalt with pointy-top hex motifs. One card per app. Render og-card.html?name=&tagline=&domain= at 1200×630 and export to <app>/docs/static/img/og-<app>.png.

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, LaunchPad, 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.

33b · Detail page

Integrations block

Explainer section that pairs a left-rail FAQ with a right-rail product mock. Eyebrow + h2 + lede header sits above the split. Used on app detail pages and the OpenRegister marketing surfaces to show how the apps fit together in one workspace. Composes <IntegrationsItem/> for the disclosures and accepts any <MockScene/> or <AppMock/> in the right slot.

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.

34b · Detail page

MCP tool shelf

Section that lists the MCP tools a Conduction app contributes to the workspace AI chat companion. Eyebrow + title + lede header above a two-column layout: a responsive grid of tool cards on the left, an AgentTrace mock on the right. Status hex (stable/beta/soon) matches the FeatureGrid legend. 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.

38b · Academy / Opinion · Editorial emphasis

Pull quote

Orange-knvb left border, cobalt-50 fill, italic cobalt body, code-font attribution. Lifts one or two load-bearing sentences out of a long-form opinion piece, product page, or academy post. Three variants: default, hero (eyebrow hex + no italics, for a citable thesis), compact (sidebar pull-out).

39 · Academy / Docs · Tutorial body

Troubleshooting

Structured error-recovery list for academy tutorials and per-app docs. Each <TroubleshootingItem> pairs a verbatim error symptom with a one-paragraph fix. Orange hex bullet + cobalt-50 panel + KNVB-orange left border per item.

40 · Academy / Docs · End-of-tutorial

Next steps

Action-card row that closes an academy tutorial or per-app docs page. Each <NextStep> is a fully clickable card with title, body, and CTA. Default three columns; collapses to one column under 800 px. Pair with Contact CTA for the closing block.

41 · Partners · Detail page

Partner sidecard

Narrow right-rail (~320 px) for the partner-detail page. Three stacked sections, tier card (Host plain, Service gold stripe, Certified cobalt fill + gold mark), Apps they ship, Solutions they deliver, with an optional bottom CTA. The page wraps the rail in a sticky column.

41b · Partners · App / solution pages

Partners-for section

"Who ships this" section that drops directly below the "What it does" block on every app and solution page. Reuses the full <PartnerCard/> in a 3-column grid, with a trailing <BecomePartner/> tile. Wired to partners-catalog.js so the cards stay in sync with /partners. Empty-state collapses to just the BecomePartner cell.

42 · OpenRegister docs · Detail page

Leaf card

Metadata header for an Open Register leaf integration. Pointy-top hex + label + status pill + a six-field meta grid. <LeafGrid> renders a responsive 3-up grid of cards for the leaf-system overview; <LeafCard> on its own anchors a per-leaf docs page. Four status tints: backend-ready / stub / external / built-in.

43 · Architecture · Docs page

Atom zones

Five-zone reference for the canonical Conduction app chassis. Each card focuses one atom (Topbar, Left navigation, Main column, Page header, Sidebar) in KNVB orange and fades the rest. Used on architecture pages in per-app docs sites to teach where each atom sits.

44 · Docs · In-body

Setup steps

Vertical numbered-row pattern for docs setup, install, and walkthrough sections. Small orange hex with the number on the left, bold title + one short paragraph on the right. Auto-numbers in document order. Distinct from HowSteps (3-up card row for marketing surfaces); this one is for sequential prose in MDX docs.

45 · Docs · Integration page

Config grid

Two side-by-side spec panels for documenting both ends of an integration (Open Register side vs the external system). Each panel is a white card with a mono-uppercase header and a stack of label / value rows. Used on every /integrations/<leaf> page; drops to one column under 800 px.

46 · About / Roadmap

Timeline + Milestone

Vertical year-by-year story strip with a gradient axis line (orange-fading-to-cobalt at the endpoints) and a pointy-top hex marker per milestone. The current milestone gets now for a slow pulse so the timeline reads as still-going.

47 · Bottom-of-page

Contact strip

Bottom-of-page contact block on cobalt-900. Two columns: title + lede on the left, list of icon-prefixed channels on the right (GitHub, LinkedIn, mail, phone, address). Translucent-fill rows brighten on hover.

48 · Primitive · Ambient state

Cycling verb

Tiny word-swap primitive. Cycles through a list of verbs on a slow loop with a 200 ms opacity fade. Reads as ambient state, not motion. Default cobalt-400 italic; optional cobalt or orange variants. Respects prefers-reduced-motion.

49 · Partners · Explainer

Tier explain

Three-up explanation row for the partner-tier hierarchy. Each card has a tier pill (cobalt-700 for Host, gold for Service, cobalt-blue for Certified), title, lede, and a short benefits list. Distinct from PartnerCard — this explains the tiers themselves.

50 · Lead capture

Form card

Lead-capture panel with mono-uppercase eyebrow + h3 + lede + fields + primary submit. Two variants: white card (default contact form) and cobalt-900 dark (high-stakes / commitment forms like partner application).

51 · Chrome

Page strip

Lightweight banner above the content rail. Smaller and quieter than the full Hero, for index pages and second-level surfaces where the visual budget should go to the content below. Crumbs + h1 + lede. Default + tinted variants.

52 · Product page

Feature-page blocks

Four building blocks of the product-pages feature template: FeatureHero (pull-quote panel), BenefitRow (3-up tile case), Checklist (2-column mint hex bullets), PairsRow ("pairs well with" tiles). Independently usable but designed to compose top-to-bottom.

53 · Docs · Structure

Anatomy card

Two-column explainer for "this is how an X is structured" content. Eyebrow + h2 + paragraphs on the left, a stylised file-tree code block on the right. <AnatomyTree/> auto-styles root / folder / note spans.

54 · Hub chrome

Preview tile

Iframe-preview card grid used by hub pages to show the full render of a sub-page in-place. Container-query scaling keeps the preview reading as the full desktop layout, just shrunk. Generalises the .component-tile on this page.

55 · Technical docs

ADR table

Architecture-decision-record index. Four columns (ID, Title, Status, Date) with a colour-coded status pill: mint Accepted, cobalt Proposed, orange Draft, muted Superseded, vermillion Rejected. Used at the top of every technical-docs.html page.

56 · API reference

Redoc shell + VerbPill

Three-column API-reference layout that wraps Redocusaurus output with Conduction-brand chrome. Left rail = sticky endpoint nav with HTTP-verb pills; middle = operation prose + parameter tables; right rail = dark code-sample box with cURL / Node / PHP tabs. <VerbPill/> exported separately.

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 →

Rectangles do, hexagons indicate.

Ready to install your first app?