11.07 · Diagrams / cn-honeycomb-bg

<cn-honeycomb-bg>

Honeycomb backdrop wrapper. A reusable hex-pattern fill for any brand surface. Always pointy-top, never flat-top, never rotated. v1 ships a static pattern; parallax + depth tiers come later when Motion One is layered in.

Cobalt theme · default brand surface

Make Nextcloud your workspace.

Drop in the apps that turn a file-sync platform into a real workplace. Open-source, free, no upgrade nags.

<cn-honeycomb-bg theme="cobalt">
  <h2>Make Nextcloud your workspace.</h2>
  <p>Drop in the apps that turn a file-sync platform into a real workplace.</p>
</cn-honeycomb-bg>

Light theme · low-contrast inverse

Apps stay free and open-source.

Support is optional, a separate, transparent layer.

With orange accent · one per scene, never more

The 2026 Open-Source Government Stack.

Forty-page report on what runs underneath Conduction's apps.

Density · sm, md, lg

sm · 24px

md · 36px

lg · 56px

API · attributes

Attribute	Values	Default	Purpose
`theme`	`cobalt` · `light`	`cobalt`	Cobalt = white hexes on cobalt-900 (default brand). Light = cobalt hexes on white (low-contrast inverse for content sections).
`accent`	boolean (presence)	absent	Renders one KNVB-orange hex accent in a stable position. Use once per scene, never more.
`density`	`sm` (24) · `md` (36) · `lg` (56)	`md`	Hex-tile size in pixels. Smaller = denser pattern. Larger = looser, more breathing room.

Why we built it this way

Backdrop · the brand under everything

The pattern is the brand. The content sits on top.

Drop any markup inside a cn-honeycomb-bg and it gains the backdrop without writing a line of CSS. Theme + density + accent are the only knobs; the hex shape never changes.

SVG pattern, not background-image. Two staggered hexes form a tessellating tile; the SVG <pattern> tiles them across the whole surface, perfectly aligned at any size.
Theme over colour list. Two themes covers every page surface. Cobalt for hero / inverse panels, light for body content sections.
Accent is opt-in and singular. One accent attribute drops one KNVB-orange hex in a stable spot. Never two.
v1 is static. Parallax depth tiers (smaller hexes deeper, drift slower) come later with Motion One. The brand rules already lock the visual language; animation joins when we have a real consumer.
Slotted content sits on top. Z-index 1 above the SVG layer; padding inherits the brand's hero spacing tokens.