11.02 · Diagrams / cn-hex-prism

<cn-hex-prism>

The 3D isometric prism. Three faces tinted from one family palette: top (lit), left (mid), right (deep). Six families ship; cobalt is reserved for the workspace (Nextcloud). The atomic unit for every ConNext platform diagram.

Six families · one shape, six tints

Workspace

Catalogi

Connector

DocuDesk

Infra

<cn-hex-prism family="cobalt">Workspace</cn-hex-prism>
<cn-hex-prism family="coral">Catalogi</cn-hex-prism>
<cn-hex-prism family="lavender">Connector</cn-hex-prism>

Sizes · sm · md · lg · xl

Small

Medium

Large

Workspace

With icon + kicker · the canonical prism

OpenCatalogi DATA · STABLE

OpenConnector CONNECT · BETA

OpenRegister DATA · STABLE

<cn-hex-prism family="coral" size="lg">
  <svg slot="icon" viewBox="0 0 24 24" ...>...</svg>
  OpenCatalogi
  <span slot="kicker">DATA · STABLE</span>
</cn-hex-prism>

State · coming-soon badge

DocuDesk DOCUMENTS

LarpingApp PROCESS

<cn-hex-prism family="gold" size="lg" state="coming">
  <svg slot="icon" ...>...</svg>
  DocuDesk
  <span slot="kicker">DOCUMENTS</span>
</cn-hex-prism>

Platform composition · prisms on a soft ground

Catalogi DATA

Nextcloud WORKSPACE

Connector CONNECT

<!-- Three prisms, workspace raised, flankers stepped -->
<div class="prisms">
  <cn-hex-prism family="coral">Catalogi</cn-hex-prism>
  <cn-hex-prism family="cobalt" size="lg">Nextcloud</cn-hex-prism>
  <cn-hex-prism family="mint">Connector</cn-hex-prism>
</div>

API · slots

Slot	Purpose
`(default)`	The prism's name. Required. Shows on the top face as the primary label.
`icon`	Icon SVG or `<img>`. Optional. Sits above the label, inherits `currentColor` (the family-700 ink).
`kicker`	Small uppercase line under the label. Used for category + status, e.g. "DATA · STABLE".
`pills`	Optional pill stack for feature chips floating on the top face.

API · attributes

Attribute	Values	Default	Purpose
`family`	`cobalt` · `coral` · `lavender` · `gold` · `mint` · `gray`	`coral`	Pastel family palette. Cobalt is reserved for the workspace (Nextcloud); six total. Each family auto-tints all three faces from -100 / -300 / -500 plus -700 ink.
`size`	`sm` (96px) · `md` (144px) · `lg` (192px) · `xl` (240px), or any CSS length	`md`	Width of the prism. Height is auto-derived from the SVG aspect ratio.
`state`	`coming`	absent	Renders a "Coming" pill in the upper-right corner. Used for unreleased apps.

Why we built it this way

Atom · system carrier

The prism is the system. Side-boxes are everything else.

A flat hex (<cn-hex>) is a node label. A prism (<cn-hex-prism>) is a system component you can install. The shape difference carries the hierarchy.

Six families, one geometry. The shape is the same; only the four CSS variables (--face-top, --face-left, --face-right, --ink) change per family. Add a new family and every existing prism that requests it retints automatically.
Cobalt is reserved. Only the workspace (Nextcloud, the platform) gets cobalt. Apps and integrations always pick another family. This is the visual hierarchy.
Top face is the working surface. Icon, name, kicker, pills all sit on the lit face, never on the side faces. The padding-bottom: 18% on the content layer enforces this.
Face edges at 18% opacity. Subtle facet lines, not bold strokes. The prism reads as a 3D form, not as a drawn shape.
Three slots beyond the label. Icon + kicker + pills cover every case we have seen on platform diagrams; if you need something more, the diagram is wrong, not the prism.
Coming-state is one attribute. Add state="coming" on unreleased apps. The badge sits over the upper-right corner of the top face. No new variant per state.