Badges

The full ten-stage map. Cool for early stages, warm for late, red for terminal.

<span class="rounded px-2 py-0.5 text-xs font-semibold {stageClass}">{stage}</span>

Same colours plus a matching border, at 60% opacity until selected. The selected state is a ring in the chip's own colour: ring-2 ring-offset-1 ring-current.

class="rounded border px-2 py-0.5 text-xs font-medium transition-opacity {stageColors[s]}
  {selected ? 'ring-2 ring-offset-1 ring-current' : 'opacity-60 hover:opacity-100'}"

Here the ten stages collapse to two colours: green for Active, Stable, Distributed, Development and Prototype, grey for everything else. A card and the identity bar of the same NDO therefore show different colours for the same stage.

const activeStages = new Set(['Active', 'Stable', 'Distributed', 'Development', 'Prototype']);
const lifecycleClass = activeStages.has(stage) ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600';

Five natures, identical in NdoCard and NdoIdentityLayer. The one map in the app that does not disagree with itself.

class="rounded px-2 py-0.5 text-xs font-medium {natureClass}"

A dashed border marks the regime, in both the card and the identity bar — the app's convention for something declarative rather than observed. The card ignores the colour map and renders every regime grey; the identity bar colours them.

<!-- NdoCard: no colour -->
<span class="rounded border border-dashed border-gray-400 px-2 py-0.5 text-xs text-gray-700">{regime}</span>

<!-- NdoIdentityLayer: coloured -->
<span class="rounded border border-dashed px-2 py-0.5 text-xs font-medium {regimeClass}">{regime}</span>