Design system  /  Apps

Every app, every treatment.

The full app glyph system. Twenty-two core apps, each shown in every treatment: the cobalt hex (canonical), the inversed outline, the orange hex for hero and marketing surfaces, the wordmark lockup, and the 32px favicon. Every glyph is the app's real Nextcloud icon. One cobalt only: #21468B. The containerised ExApp sidecars follow below.

Using these in code · <AppGlyph>

Every glyph here ships as the AppGlyph React component in @conduction/docusaurus-preset. Use it instead of hand-drawing an icon, so the product pages, the ConNext diagram, and the docs site all render the same canonical mark from one source.

import {AppGlyph} from '@conduction/docusaurus-preset/components';

<AppGlyph app="opencatalogi" />

The glyph inherits currentColor, so wrap it in a hex or tile and set the colour. On a DetailHero the app mark renders automatically from the appId prop, with no icon needed. Slugs match the symbol ids below (opencatalogi, openregister, …); the ExApp sidecar openanonymiser is available too.

The roster · 22 apps × 5 treatments
App ↓   Treatment →
Cobalt
Inversed
Orange
Wordmark
Favicon · 32px
App

OpenCatalogi

The catalogue. Discover and install apps from a federated registry of trusted publishers.

OpenCatalogi
App

OpenRegister

Structured records. Form-driven data with versioning, permissions, and an event log per row.

OpenRegister
App

OpenConnector

The integration plane. Pipe data between Conduction apps and any external API, with retries and observability.

OpenConnector
App

DocuDesk

Document workflows. Templates, signatures, and audit trails for public-sector compliance teams.

DocuDesk
App

LaunchPad

The personal home. Each user's pinned apps, recent records, and tasks, the welcome screen of the stack.

LaunchPad
App

LarpingApp

Run live-action roleplay. Characters, settings, and events in one place.

LarpingApp
App

Procest

Process management. Model and run business processes as structured data.

Procest
App

Pipelinq

Recruitment pipeline. Track candidates from intake to hire.

Pipelinq
App

Planix

Planning boards. Schedule work across teams and timelines.

Planix
App

Decidesk

Decision records. Meetings, minutes, and auditable outcomes.

Decidesk
App

SoftwareCatalog

Software catalogue. Track the apps and components your organisation runs.

SoftwareCatalog
App

NLDesign

Government theming. Dutch NL Design System tokens for Nextcloud.

NLDesign
App

Shillinq

Invoicing. Quotes, invoices, and payments for small teams.

Shillinq
App

DeskDesk

Service desk. Tickets, requests, and front-office workflows.

DeskDesk
App

OpenBuild

Build and package. Assemble Nextcloud apps from reusable components.

OpenBuild
App

Scholiq

Education. Courses, students, and results for schools.

Scholiq
App

Doriath

Access control. Secrets, keys, and permissions, audited.

Doriath
App

ZaakAfhandelApp

Case handling. Zaakgericht werken for Dutch government teams.

ZaakAfhandelApp
App

Financeq

Finance and accounting. Ledgers, budgets, and financial reporting for your business.

Financeq
App

Hrmq

People and HR. Employee records, leave, and personnel administration.

Hrmq
App

Purchaseq

Procurement. Purchase orders, suppliers, and spend approval.

Purchaseq
App

App Versions

Pin and roll back any Nextcloud app version. A safety net for fleet upgrades.

App Versions

★ Cobalt is the canonical default for every app surface. Orange is the hero and marketing treatment, one orange hex per surface. Inversed is reserved for light-on-cobalt contexts. One cobalt only across every app: #21468B.

Hero lockup · how an app introduces itself
Federated app discovery for Nextcloud. Install in two minutes; stay current.
$ occ app:install opencatalogi
Form-driven records. Versioned. Auditable. Yours.
$ occ app:install openregister
One integration plane. Every Conduction app. Every external API.
$ occ app:install openconnector
ExApp sidecars · containerised wrappers

Sidecar apps wrap an external product. Each runs as a containerised Nextcloud ExApp, on the same cobalt hex.

OpenKlant
Klantinteractie · CRM
OpenZaak
Zaakgericht werken
OpenTalk
Video meetings
Valtimo
Low-code BPM
n8n
Workflow automation
Keycloak
Identity & access (IAM)
Open WebUI
AI chat · Ollama
OpenAnonymiser
Document anonymisation · PII
Ecosystem · sites & tooling

Not Nextcloud apps, but part of the family. Public websites and fleet tooling carry the same cobalt hex.

OpenWoo
Wet open overheid · publication sites
Don't · Do
Don't

Nextcloud blue, and as a gradient on top. Nextcloud blue is a guest colour reserved for the workspace hex, and it's always solid #0082C9, never a gradient.

Don't

Two different blues. Cobalt-700 next to the canonical cobalt reads as a bug. One cobalt only, #21468B, across every app and surface.

Don't

Pure circle. Wrong vocabulary, Conduction does hex (apps) and rectangle (UI), never round chips for an app.

Do

Pointy-top hex, cobalt fill, the app's real icon in white. This is the canonical app glyph.

Tech specs

Glyph source

  • The glyph is the app's real Nextcloud icon (img/app.svg)
  • Rendered as an SVG <symbol>, referenced with <use>
  • fill="currentColor" so each treatment colours the same mark
  • One concept per glyph, never combine icons or stack symbols

Container rules

  • Pointy-top hex is canonical (clip-path: var(--hex-pointy-top))
  • Inversed (outline) for light-on-cobalt and inverse contexts
  • Orange hex for hero and marketing only; one orange per surface
  • ExApp sidecars use the same cobalt hex as the core apps

When the glyph isn't enough

  • Below 24px, use the favicon hex variant
  • Long product surfaces, wordmark lockup with the small hex
  • Hero pages, full hero stack, glyph at 96px
  • One cobalt everywhere: #21468B, never cobalt-700 or Nextcloud blue