Brand-strict diagram primitives as web components. Drop the module into any HTML page; works in plain HTML, Vue, React, Docusaurus, Nextcloud apps. Package readme.
Hexes never rotate. The point is at the top, always. Flat-top hexes belong to other brands.
No gradients on the shape itself. No rgba alpha. Backgrounds can be hex polygons; the shape stays one colour.
KNVB orange is the highlight. Use it once per diagram, on the node you want the eye to land on. Never as a primary fill.
cobalt, orange, mint, lavender, terracotta, forest, nextcloud, commonground, red. No off-brand colours. The component rejects anything else.
Hex prisms are "the system". Rectangles (side-boxes) are what feeds it or consumes it. The shape carries hierarchy.
Diagrams are composed from <cn-*> elements. Each element renders one shape. The diagram is the layout of those shapes.
Start with the brand. conduction.nl is the root of everything; render it as a large cobalt hex. Cobalt is the default colour, so no color attribute is needed. The label is plain text in the default slot.
<!-- the apex --> <cn-hex size="xl">conduction.nl</cn-hex>
Two products link out from the apex: connext.conduction.nl (the platform proposition) and apps.conduction.nl (the app store). Render them as medium hexes flanking the apex. Still using the default cobalt; the diagram reads as one family.
<!-- flanking products --> <cn-hex size="md">connext</cn-hex> <cn-hex size="xl">conduction.nl</cn-hex> <cn-hex size="md">apps</cn-hex>
One node should be the eye-catcher. The app store is what we want visitors to click, so we promote it with color="orange". This is the one-orange-per-scene rule, in practice. Notice that we never write a hex code; the colour name is the API.
<!-- one orange accent --> <cn-hex size="md">connext</cn-hex> <cn-hex size="xl">conduction.nl</cn-hex> <cn-hex size="md" color="orange">apps</cn-hex>
Add an icon SVG to the icon slot to make each surface scannable at a glance. Add interactive on nodes that link out, you get hover scale, focus ring, and Enter/Space activation. The icon and label co-exist; default layout stacks them vertically.
<!-- icons + interactive on the linking nodes --> <cn-hex size="md" interactive> <svg slot="icon" ...>...</svg> connext </cn-hex>
interactive. The connections between hexes (lines, arrows, branches) come from the next-up components: <cn-hex-prism> for system nodes, <cn-domain-tree> for the layout itself. Until those land, you compose by hand with flexbox and SVG lines.
<cn-hex>The pointy-top hex primitive. Label + icon, nine colours, four sizes, solid or outline, optional interactive state.
<cn-hex-prism>The 3D isometric prism. Three faces, family-tinted, the atomic unit for ConNext platform diagrams.
<cn-platform>Nextcloud workspace surrounded by orbiting app hexes. The canonical "what is ConNext" diagram.
<cn-pipeline>Horizontal flow: hex prisms connected by arrows. Data → processing → users.
<cn-side-box>The rectangle-feed-prism pattern. Rectangles do, hexagons indicate; this component encodes the hierarchy.
<cn-honeycomb-bg>Honeycomb backdrop wrapper. Theme + accent + density attributes. Parallax in v2.
<cn-domain-tree>Vertical apex-and-branches layout for one-to-many domain maps. Slot-driven; multi-trunk diagrams stack two trees.