11.04 · Diagrams / cn-platform

<cn-platform>

The workspace-plus-orbiting-apps cluster. Cobalt workspace prism at the centre (Nextcloud), six application prisms arranged in a hex ring around it. The canonical "what is ConNext" diagram.

Canonical · cobalt workspace + six apps

Nextcloud WORKSPACE

Catalogi DATA

Connector CONNECT

DocuDesk DOCUMENTS

MyDash DATA

OpenAI CONNECT

Six apps · one workspace · all open-source

<cn-platform ground>
  <cn-hex-prism slot="apex" family="cobalt" size="lg">
    Nextcloud
    <span slot="kicker">WORKSPACE</span>
  </cn-hex-prism>

  <cn-hex-prism family="coral">Catalogi</cn-hex-prism>
  <cn-hex-prism family="gold">Register</cn-hex-prism>
  <cn-hex-prism family="lavender">Connector</cn-hex-prism>
  <cn-hex-prism family="mint">DocuDesk</cn-hex-prism>
  <cn-hex-prism family="coral">MyDash</cn-hex-prism>
  <cn-hex-prism family="lavender">OpenAI</cn-hex-prism>

  <span slot="caption">Six apps · one workspace</span>
</cn-platform>

With flat hexes · simpler workspace + apps

Nextcloud

Catalogi

Connector

DocuDesk

MyDash

OpenAI

Three apps only · workspace + partial ring

Nextcloud WORKSPACE

Catalogi

Connector

API · slots

Slot	Purpose
`apex`	The central element (the Nextcloud workspace prism). Required. Typically a cobalt cn-hex-prism, but a flat cn-hex works too. Same slot name as `cn-domain-tree`.
`(default)`	Orbiting apps. Up to six, positioned in this order: top-left, top-right, left, right, bottom-left, bottom-right. Pass fewer for a partial ring.
`caption`	Small uppercase line under the cluster. Optional; used for "Six apps · one workspace" style summaries.

API · attributes

Attribute	Values	Default	Purpose
`ground`	boolean (presence)	absent	Renders a soft cobalt-tinted shadow under the cluster, suggesting the platform base. Use for hero scenes.
`tone`	`cobalt-50` · `light` · `white`	`cobalt-50`	Stage background. `white` blends into a white card; `light` uses cobalt-100 for a stronger frame.

Why we built it this way

Cluster · the canonical scene

Layout, not behaviour

cn-platform owns the apex-and-ring layout, nothing more. No hover-reveal, no side lists, no connector lines pinning apps to specific workspace sides. Those richer interactions live in bespoke surface components (e.g. <platform-diagram> on the homepage) that compose on top.

CSS Grid for placement. A 5×3 grid with explicit ::slotted(:nth-child) rules pins the six neighbours into a hex ring around the apex. No JS positioning, no math at runtime.
Up to six apps, no enforcement. Pass three for a partial ring, six for a full one. The grid simply leaves empty cells where no app is provided.
Apex and apps are slot content. Use cn-hex-prism for the standard ConNext look, or cn-hex for a flatter alternative. Mix them if a page needs both.
Ground is opt-in. The platform shadow is suggestive, not load-bearing. Off by default; turn it on for hero scenes.
Tone abstracts background. Three tones cover every page context (light kit page, dark hero, embedded inside a card).
Responsive falls back to a 2-column stack. Below 700px the hex ring becomes a vertical 2-col grid, apex on top.
"Kernel" is a banned word. The central element is the workspace, not the kernel. Slot is named apex; copy and kicker labels say workspace. See identity / voice.