Library

Shared components

Canonical primitives and their variants. Website-specific patterns live in Website; product compositions live in Platform.

Button

Rounded pill. Violet with white text on light; inverse (white with violet text) on dark story sections. Add `arrow` for the primary call to action.

variant: brand · ghost · link

variant: inverse · ghost-dark (on story-bg)

size: sm · md · lg · icon

states: hover (lift) · focus-visible (ring) · disabled

Code

<Button arrow>See how it works</Button>
<Button variant="inverse" arrow>Book a demo</Button>
<Button variant="ghost">Read the docs</Button>
<Button asChild><a href="/trial">Start free trial</a></Button>

Logo

The real Metagem artwork — never redraw, recolor or stretch it.

variant: full · size sm / md / lg

variant: mark

edition: designer · full / mark / wordmark

designer · tone: dark

designer · magenta artwork on light

Code

<Logo />
<Logo variant="mark" size="lg" />
<Logo edition="designer" tone="auto" />
<Logo edition="designer" variant="mark" tone="magenta" />
<Logo variant="wordmark" tone="dark" />

HexIcon

A Phosphor icon inside a thin rounded hexagon. Use for feature lists and diagram nodes.

size: sm · md · lg

tone: dark

Code

<HexIcon icon={Database} />
<HexIcon icon={FileText} kind="doc" tone="dark" size="lg" />

HexNumber

Numbered step node, opaque so it sits on top of a connector line.

010203

tone: light — on a connector

010203

tone: dark

Code

<HexNumber n={1} />
<HexNumber n={2} tone="dark" />

HexPortrait

Team and customer portraits clipped to a rounded hexagon with a thin ring that brightens on hover.

Sean Walsh

Benjamin Miraglio

Mostafa Mahdavi

team portraits

Code

<HexPortrait src={sean} alt="Sean Walsh" className="w-40" />

HexFrame

Wide 3:2 photo in a stretched hexagon with outline and two connector ports — ties photos to the diagram language.

tone: light

tone: dark

Code

<HexFrame src={teamPhoto} alt="The Metagem team" />

Card

Rounded surface. Use `active` for the one focal card per section; `frost` over gradients, `frost-dark` on story sections.

Finance

Reconcile KPI definitions across 14 reports.

default · interactive

Supply chain

One trusted view of 3,200 supplier records.

active

HR & Workday

Policies and headcount, finally in sync.

frost

Before Metagem

Four versions of the customer master and nobody knows which is right.

frost-dark

Code

<Card variant="active" padding="lg">
  <CardTitle>Supply chain</CardTitle>
  <CardDescription>…</CardDescription>
</Card>

DataChip

Source chip inside diagrams. `doc` (magenta) for documents, `data` (violet) for structured systems.

SAPERPSnowflake

kind: data

SharePointConfluence

kind: doc

Customer_Master_v7

kind: neutral + blurred meta

Code

<DataChip kind="data" logo={sap} meta="ERP">SAP</DataChip>
<DataChip kind="doc" logo={sharepoint}>SharePoint</DataChip>