Concepts

Hexpunk is a hexagonal-first, wireframe-cyberpunk design system. Three concepts drive everything that ships.

Atoms vs molecules vs primitives

• Atoms are single-hex elements. hp-hex is the primitive; hp-cell is the universal labelled element, with interactive variants (anchor / action / secondary / utility), decorative variants (content / support / slot), and a tone overlay (positive / warn / alert / error) that doubles as the semantic status indicator.
• Molecules are composed structures: hp-grid (invisible axial coordinate space), hp-cluster (5-hex rosette), hp-tether (arc between molecules).
• Spatial primitives are the bigger ideas the system is built on: grid, bonding (adjacency), linking (arcs at distance), and unfolding (in-place / overlay / camera-zoom).

Pointy-top hex math

Every hex has a bounding box of w × (w · 2/√3). Axial coordinates project to pixels as x = w · (q + r/2), y = w · √3/2 · r. The grid uses an effective cell width of w − hex-stroke so adjacent hexes' stroke bands coincide into a single shared edge.

Motion is signal

Every animation communicates something specific (state change, attention, routing, scanning, snapping, unfolding). Decorative motion is forbidden — the idle state is still.