11.01 · Diagrams / cn-hex

<cn-hex>

The pointy-top hex primitive. Every diagram in the kit composes from this one element. Label, icon, both at once, nine brand colours, four sizes, solid or outline, optional interactive state with keyboard activation.

Label only

Connect

Build

Catalog

<cn-hex size="md">Connect</cn-hex>
<cn-hex size="lg" color="orange">Build</cn-hex>
<cn-hex size="xl" color="mint">Catalog</cn-hex>

Icon only

<cn-hex size="md">
  <svg slot="icon" viewBox="0 0 24 24" ...>...</svg>
</cn-hex>

Label + icon · vertical (default)

Catalog

Connect

Apps

<cn-hex size="lg">
  <svg slot="icon" ...>...</svg>
  Catalog
</cn-hex>

Label + icon · horizontal

Catalog

Cloud

<cn-hex size="xl" layout="horizontal">
  <svg slot="icon" ...>...</svg>
  Catalog
</cn-hex>

All nine colours · brand-strict palette

Cobalt

Orange

Mint

Lavender

Terra

Forest

Cloud

Red

Sizes · sm · md · lg · xl

Outline variant

Cobalt

Orange

Mint

Interactive · hover, click, keyboard

Click

Tab + Enter

API · slots

Slot	Purpose
`(default)`	Label text. Optional. Plain text or any inline content.
`icon`	Icon SVG or `<img>`. Optional. Sits above the label by default; left of it with `layout="horizontal"`. Inherits `currentColor`.

API · attributes

Attribute	Values	Default	Purpose
`color`	`cobalt` · `orange` · `mint` · `lavender` · `terracotta` · `forest` · `nextcloud` · `commonground` · `red`	`cobalt`	Brand colour. Names only, no hex codes. Use `nextcloud` for Nextcloud refs and `commonground` for Common Ground refs (parallel to how their own brands use them).
`size`	`sm` (40px) · `md` (64px) · `lg` (96px) · `xl` (128px), or any CSS length	`md`	Width of the hex. Height = width × 1.155.
`variant`	`solid` · `outline`	`solid`	Outline draws a stroke at the brand colour with a transparent body.
`layout`	`vertical` · `horizontal`	`vertical`	Icon-above-label vs icon-left-of-label.
`interactive`	boolean (presence)	absent	Adds `cursor: pointer`, hover scale, focus ring, `tabindex="0"`, `role="button"`, Enter/Space activation.

Why we built it this way

Atom · the brand carrier

The atom carries the brand

Every hex on every Conduction surface goes through this one element. If the rules live here, they hold everywhere automatically.

Colours by name, never hex. The API rejects off-palette values implicitly. You cannot accidentally ship a teal hex; the attribute does not accept it.
Pointy-top is hard-coded. The polygon is not a prop. There is no flat-top variant. The brand says one orientation; the component says one orientation.
Slots over props for content. Label and icon are slotted in, so any HTML, any SVG, any image works. No string-only API to grow.
Per-colour ink overrides. Most fills get white ink. Yellow (commonground) gets cobalt-900 ink so the label still hits AA contrast.
Interactive is a single attribute. Set it once and you get the cursor, the hover scale, the focus ring, and the keyboard activation. No need to remember six things; the component owns the affordance.
No build step. Drop a script tag, write a hex. The design-system can use this today; the website can use it tomorrow without changing a line.
Shadow DOM isolates styles. Page CSS cannot reach inside and break the hex. The brand stays brand.