Theme · conduction-2026

The Conduction design system.

Cobalt-first, hex-shaped, MKB-direct. The visual spine for connext.conduction.nl, every Conduction app on Nextcloud, and the materials around them.

Primary#21468B Cobalt TypeFigtree · Plex Mono MotifPointy-top hex LicenseOFL · MIT
01

Identity

The verbal brand, who we are, what we build, who we build for. Identity is central; everything that follows on this page (type, colour, components, pages) flows from it. Five Dutch values, the Conduction × ConNext × Nextcloud triad, three audience tiers in tiers, not in equal weight.

02

Type

Figtree for body and headings. IBM Plex Mono for code. Nine-step ramp from 12 to 48 px, plus display.

Aa 400 / 500 / 600 / 700
03

Colors

Cobalt-first palette with one orange accent. The 70/20/8/2 proportion rule. Pastel families for hex-prism illustrations.

04

Spacing

Twelve spacing tokens on a 4-pixel grid. Five radii. Three cobalt-tinted shadows. Hex shape conventions.

05

Components

Buttons, badges, app cards, hex pagination, form fields. Rectangles do; hexagons indicate.

Stable
06

Brand

Three brands in their lanes: Conduction (the company), ConNext (the product), Nextcloud (the platform). When to use the "Next"-blue citation. Voice and apps-vs-solutions copy rules.

Conduction avatar
ConNext
07

Apps

Canonical glyphs for every app, OpenCatalogi, OpenRegister, OpenConnector, DocuDesk, MyDash, OpenAI Bridge, across hex, square, monogram, and avatar treatments.

08

Pages

Full-page layouts composed from the components, chrome, content, footer. Apps catalogue and long-form solution page. Standalone HTML you can clone and lift.

2 layouts
09

Print

Paper artefacts for the consultant's day, business cards, letterhead, reports, quotations, invoices, envelopes, leave-behinds, app fact-sheets, banners. Plus deck templates and email signatures. Tokens-driven HTML, ready to print to PDF, on the road to real bleed-aware print runs.

Conduction
Ruben
CTO
Slide 01 Title slide
13 artefacts · 13 deck layouts
10

Downloads

The asset shelf for consultants. Logos, hexes, app glyphs, status badges, icons, diagram parts, cover-page templates, team headshots, partner marks, screenshots. One click per file, drop straight into a deck or report.

SVG · PNG · WEBP
11

Diagrams

Brand-strict diagram primitives as web components. Pointy-top hexes, hex prisms, platform overviews, pipelines, side-boxes, honeycomb backdrops, domain trees. Drop one <script type="module"> tag and start composing. Works in plain HTML, Vue, React, Docusaurus, Nextcloud apps; one render path, every surface.

<cn-hex> · 1 of 7 · web components
12

Chassis

Three canonical chassis patterns, one kit. Card for content and docs, hub for landing pages, chrome for print artefacts. Plus the shared atoms (.section-label, .tile, .specimen, .spark, .api-block) used inside any of them. Pick by role, never invent a new one.

card · hub · chrome