Primitives · the seven atoms every component composes from

Seven primitives, one source.

These atoms surfaced when porting the kit to React. Each one appears in three or more component CSS files; centralising them removes the temptation to duplicate clip-path: var(--hex-pointy-top) in every new component.

HexBullet <HexBullet/>

The 12×14 (or 8×9, or 44×50) pointy-top clip-path hexagon. Used as the bullet inside eyebrows, status badges, footer triad, and pill chips. Pointy-top, never rotated, solid colour fill.

Eyebrow <Eyebrow/>

Uppercase Plex Mono caption sitting above section headings. Optional leading <HexBullet/> in KNVB orange.

The platform
Most installed
What you get on day one

Section <Section/>

The 1280px max-width 64px-padded section wrapper that every page in preview/pages/* uses. Background variants: default (white), tinted (cobalt-50), inverse (cobalt). Spacing variants: default 96px, tight 48px, flush 0.

background="default" · spacing="default"
background="tinted"
background="inverse"

SectionHead <SectionHead/>

The eyebrow + h2 + lede block used at the top of every section. Splits left (eyebrow + h2) from right (lede) on a 1.1fr/1fr grid. Single column under 900px.

Most installed
Three apps that ship the most outcomes.
Start with the apps that solve a concrete problem on day one. They're all stable, GDPR-compliant, free to install.

Card <Card/>

White container with cobalt-100 border, radius-lg corners, configurable padding. Three tones: surface (default), ghost (dashed), inverse (cobalt-900). Renders as <a> when href is provided.

surface · default tone, 20px padding, white background, cobalt-100 border
ghost · transparent + dashed border, for empty-state CTAs
inverse · cobalt-900 with white type, for footer modules

Pill <Pill/>

Inline-flex pill chip with optional leading <HexBullet/>. Used for status badges (STABLE / BETA), built-on app tags, sector labels, version tags.

Stable Beta Coming soon Strategic Certified

Button <Button/>

Three brand variants (primary / secondary / ghost) plus on-dark inversions for use inside cobalt CTA panels. Renders as <a> when href is provided, <button> otherwise.

Install from app store Read the docs View on GitHub →