> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge Map

> Canonical badge colour and pattern map for cards, tabs, tables, and status indicators across Livepeer docs.

export const badgePatterns = [{
  id: 'workload-triad',
  title: 'Workload Type Triad',
  description: 'The primary badge vocabulary for distinguishing Video, AI, and Dual workloads across gateways and solutions.',
  entries: [{
    colour: 'blue',
    label: 'Video',
    usage: 'Video transcoding services',
    components: ['Card', 'Tab', 'Accordion', 'Table']
  }, {
    colour: 'purple',
    label: 'AI',
    usage: 'AI inference services',
    components: ['Card', 'Tab', 'Accordion', 'Table']
  }, {
    colour: 'green',
    label: 'Dual',
    usage: 'Combined AI & Video',
    components: ['Card', 'Tab', 'Accordion', 'Table']
  }]
}, {
  id: 'on-chain-off-chain',
  title: 'On-Chain / Off-Chain Markers',
  description: 'Icon pairs used to distinguish payment modes. These are NOT badges — they are inline Icon components, sometimes wrapped in a surface badge.',
  entries: [{
    icon: 'link',
    label: 'On-chain',
    usage: 'Blockchain connection, production payments via Arbitrum',
    components: ['Icon', 'Badge (surface)', 'Tab title', 'Step title']
  }, {
    icon: 'floppy-disk',
    label: 'Off-chain',
    usage: 'Local/dev mode, direct orchestrator connection',
    components: ['Icon', 'Badge (surface)', 'Tab title', 'Step title']
  }]
}, {
  id: 'os-badges',
  title: 'Operating System Badges',
  description: 'Stroke-variant badges with icons for platform indicators.',
  entries: [{
    colour: 'yellow',
    icon: 'linux',
    label: 'Linux',
    variant: 'stroke',
    size: 'sm'
  }, {
    colour: 'green',
    icon: 'apple',
    label: 'macOS',
    variant: 'stroke',
    size: 'sm'
  }, {
    colour: 'blue',
    icon: 'windows',
    label: 'Windows',
    variant: 'stroke',
    size: 'sm'
  }]
}, {
  id: 'infra-tags',
  title: 'Infrastructure Tags',
  description: 'Icon + label pairs via IconBadgeWrapper for deployment/integration taxonomy.',
  entries: [{
    icon: 'torii-gate',
    label: 'gateway',
    usage: 'Deployment architecture'
  }, {
    icon: 'server',
    label: 'self-hosted',
    usage: 'Installation model'
  }, {
    icon: 'toolbox',
    label: 'sdk',
    usage: 'Developer tools'
  }, {
    icon: 'plug',
    label: 'api',
    usage: 'Integration point'
  }, {
    icon: 'cloud',
    label: 'saas',
    usage: 'Cloud/managed service'
  }]
}, {
  id: 'product-ownership',
  title: 'Product Ownership',
  description: 'Badges indicating who operates or funds a product/project.',
  entries: [{
    colour: 'green',
    label: 'Livepeer Product',
    usage: 'Built and maintained by Livepeer Inc.'
  }, {
    colour: 'yellow',
    label: 'SPE-funded',
    usage: 'Funded by Strategic Priority Expenditure'
  }, {
    colour: 'purple',
    label: 'Commercial Product',
    usage: 'Third-party commercial offering'
  }, {
    colour: 'blue',
    label: 'Public',
    usage: 'Open/public project'
  }]
}];

export const badgeColourSemantics = [{
  colour: 'green',
  scanCount: 273,
  contexts: [{
    context: 'Workload mode',
    meaning: 'Dual (AI & Video)',
    example: '<Badge color="green">Dual</Badge>'
  }, {
    context: 'Solutions',
    meaning: 'Livepeer Product / Livepeer Inc.',
    example: '<Badge color="green">Livepeer Product</Badge>'
  }, {
    context: 'Pricing',
    meaning: 'ETH currency',
    example: '<Badge color="green">ETH(wei)</Badge>'
  }, {
    context: 'Status',
    meaning: 'Confirmed / active',
    example: '<Badge color="green">Active</Badge>'
  }, {
    context: 'OS (stroke)',
    meaning: 'macOS',
    example: '<Badge stroke color="green" icon="apple" size="sm">macOS</Badge>'
  }]
}, {
  colour: 'blue',
  scanCount: 145,
  contexts: [{
    context: 'Workload mode',
    meaning: 'Video',
    example: '<Badge color="blue">Video</Badge>'
  }, {
    context: 'Status',
    meaning: 'Public',
    example: '<Badge color="blue">Public</Badge>'
  }, {
    context: 'OS (stroke)',
    meaning: 'Windows',
    example: '<Badge stroke color="blue" icon="windows" size="sm">Windows</Badge>'
  }]
}, {
  colour: 'purple',
  scanCount: 101,
  contexts: [{
    context: 'Workload mode',
    meaning: 'AI',
    example: '<Badge color="purple">AI</Badge>'
  }, {
    context: 'Solutions',
    meaning: 'Commercial product',
    example: '<Badge color="purple">Commercial Product</Badge>'
  }]
}, {
  colour: 'yellow',
  scanCount: 25,
  contexts: [{
    context: 'Status',
    meaning: 'Draft / conditional',
    example: '<Badge color="yellow">draft</Badge>'
  }, {
    context: 'Solutions',
    meaning: 'SPE-funded',
    example: '<Badge color="yellow">SPE-funded</Badge>'
  }, {
    context: 'OS (stroke)',
    meaning: 'Linux',
    example: '<Badge stroke color="yellow" icon="linux" size="sm">Linux</Badge>'
  }]
}, {
  colour: 'gray',
  scanCount: 59,
  contexts: [{
    context: 'Reference',
    meaning: 'Configuration values, neutral metadata',
    example: '<Badge color="gray">value</Badge>'
  }]
}, {
  colour: 'surface',
  scanCount: 28,
  contexts: [{
    context: 'Compound',
    meaning: 'Neutral state, metadata, icon containers',
    example: '<Badge color="surface"><Icon icon="link" /></Badge>'
  }, {
    context: 'Deployment',
    meaning: 'On-chain / Off-chain / Solo / Pool Node',
    example: '<Badge color="surface">On-chain</Badge>'
  }]
}, {
  colour: 'orange',
  scanCount: 13,
  contexts: [{
    context: 'Status',
    meaning: 'Warning / caution',
    example: '<Badge color="orange">Warning</Badge>'
  }]
}, {
  colour: 'red',
  scanCount: 4,
  contexts: [{
    context: 'Status',
    meaning: 'Critical / destructive',
    example: '<Badge color="red">Agents</Badge>'
  }]
}, {
  colour: 'surface-destructive',
  scanCount: 8,
  contexts: [{
    context: 'Status',
    meaning: 'Destructive operation',
    example: '<Badge color="surface-destructive">Delete</Badge>'
  }]
}];

export const badgeMapMethodology = {
  generatedOn: '2026-04-08',
  scope: 'Current English MDX under v2/ and docs-guide/ (locale copies and internal excluded)',
  exclusions: ['_archive', 'x-archived', 'v2/cn', 'v2/fr', 'v2/es', 'v2/internal'],
  notes: ['This is a canonical semantic map, not a hard validation contract.', 'Scan counts reflect current repo usage.', 'Badge colours are context-dependent — green means different things in solutions vs gateways.']
};

export const TableCell = ({children, align = "left", header = false, style = {}, className = "", ...rest}) => {
  const Component = header ? "th" : "td";
  return <Component className={className} style={{
    padding: "0.75rem 1rem",
    textAlign: align,
    border: header ? "none" : "1px solid var(--lp-color-border-default)",
    ...style
  }} {...rest}>
      {children}
    </Component>;
};

export const TableRow = ({children, header = false, hover = false, style = {}, className = "", ...rest}) => {
  const rowId = `table-row-${Math.random().toString(36).substr(2, 9)}`;
  return <>
      {hover && <style>{`
          #${rowId}:hover {
            background-color: var(--lp-color-bg-card);
          }
        `}</style>}
      <tr id={rowId} className={className} style={{
    ...header && ({
      backgroundColor: "var(--lp-color-accent-strong)",
      color: "var(--lp-color-on-accent)",
      fontWeight: "bold"
    }),
    ...style
  }} {...rest}>
        {children}
      </tr>
    </>;
};

export const StyledTable = ({children, variant = "default", style = {}, className = "", ...rest}) => {
  const wrapperVariants = {
    default: {
      border: "1px solid var(--lp-color-border-default)",
      backgroundColor: "var(--lp-color-bg-card)",
      overflow: "hidden"
    },
    bordered: {
      border: "2px solid var(--lp-color-accent)",
      backgroundColor: "var(--lp-color-bg-page)",
      overflow: "hidden"
    },
    minimal: {
      border: "none",
      backgroundColor: "transparent",
      overflow: "visible"
    }
  };
  return <div data-docs-styled-table-shell className={className} style={{
    width: "100%",
    padding: 0,
    margin: 0,
    ...wrapperVariants[variant],
    ...style
  }} {...rest}>
      <table data-docs-styled-table style={{
    width: "100%",
    borderCollapse: "collapse",
    borderSpacing: 0,
    margin: 0,
    backgroundColor: "transparent"
  }}>
        {children}
      </table>
    </div>;
};

export const CustomDivider = ({color = "var(--lp-color-border-default)", middleText = "", spacing = "default", style = {}, className = "", ...rest}) => {
  const spacingPresets = {
    default: {
      margin: "24px 0"
    },
    overlap: {
      margin: "-1rem 0 -1rem 0"
    },
    tight: {
      margin: "0 0 -1rem 0"
    },
    section: {
      margin: "0 0 -2rem 0"
    },
    sectionOverlap: {
      margin: "-1rem 0 -2rem 0"
    },
    deepOverlap: {
      margin: "-1rem 0 -1.5rem 0"
    }
  };
  const spacingStyle = spacingPresets[spacing] || spacingPresets.default;
  return <div role="separator" aria-orientation="horizontal" className={className} style={{
    display: "flex",
    alignItems: "center",
    ...spacingStyle,
    fontSize: style?.fontSize || "16px",
    height: "fit-content",
    ...style
  }} {...rest}>
      <span style={{
    marginRight: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
      </span>
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      {middleText && <>
          <Icon icon="circle" size={2} />
          <span style={{
    margin: "0 8px",
    fontWeight: "bold",
    color: color,
    opacity: 0.7
  }}>
            {middleText}
          </span>
          <Icon icon="circle" size={2} />
        </>}
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      <span style={{
    marginLeft: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <span style={{
    display: "inline-block",
    transform: "scaleX(-1)"
  }}>
          <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
        </span>
      </span>
    </div>;
};

export const scope_0 = undefined

export const exclusions_0 = undefined

export const join_0 = undefined

export const generatedOn_0 = undefined

export const flatMap_0 = undefined

export const entry_0 = undefined

export const contexts_0 = undefined

export const map_0 = undefined

export const ctx_0 = undefined

export const i_0 = undefined

export const colour_0 = undefined

export const scanCount_0 = undefined

export const context_0 = undefined

export const meaning_0 = undefined

export const example_0 = undefined

export const pattern_0 = undefined

export const id_0 = undefined

export const title_0 = undefined

export const description_0 = undefined

export const entries_0 = undefined

export const label_0 = undefined

export const icon_0 = undefined

export const usage_0 = undefined

export const components_0 = undefined

<Note>
  This is the canonical badge colour and pattern reference for Livepeer docs. Use it to make consistent badge choices. When a colour has multiple context-dependent meanings, the context column clarifies which applies.
</Note>

<Tip>
  The rendered page is backed by `/snippets/data/reference-maps/badge-map.jsx` so the same data feeds validators and authoring helpers.
</Tip>

<CustomDivider />

## Scope

* Scan scope: {badgeMapMethodology.scope_0}
* Exclusions: {badgeMapMethodology.exclusions_0.join_0(', ')}
* Updated: {badgeMapMethodology.generatedOn_0}

<CustomDivider />

## Badge Colour Semantics

<StyledTable>
  <TableRow header>
    <TableCell header>Colour</TableCell>
    <TableCell header>Count</TableCell>
    <TableCell header>Context</TableCell>
    <TableCell header>Meaning</TableCell>
    <TableCell header>Example</TableCell>
  </TableRow>

  {badgeColourSemanti_0_0_0_0cs.flatMap_0((entry_0_0_0_0_0_0) =>
      entry.context_0s_0.map_0((ctx_0_0_0_0, i) => (
        <TableRow key={`${entry.colour_0_0_0}-${i}`}>
          <TableCell>{i === 0 ? <strong><Badge color={entry.colour}>{entry.colour}</Badge></strong> : ''}</TableCell>
          <TableCell>{i === 0 ? entry.scanCount_0 : ''}</TableCell>
          <TableCell>{ctx.context}</TableCell>
          <TableCell>{ctx.meaning_0}</TableCell>
          <TableCell><code>{ctx.example_0}</code></TableCell>
        </TableRow>
      ))
    )}
</StyledTable>

<CustomDivider />

## Established Patterns

{badgePatterns.map_0_0((pattern_0_0_0_0_0_0_0) => (
  <di_0_0v key={pattern.id_0_0_0} id={pattern.id}>
    <h3>{pattern.title_0}</h3>
    <p>{pattern.description_0}</p>

    <StyledTable>
      <TableRow header>
        <TableCell header>Badge</TableCell>
        <TableCell header>Usage</TableCell>
        <TableCell header>Components</TableCell>
      </TableRow>

      {pattern.entries_0.map((entry_0_0_0_0_0_0_0_0, i) => (
        <TableRow key={`${pattern.id}-${i}`}>
          <TableCell>
            {entry.colour_0_0
              ? <Badge color={entry.colour}>{entry.label_0_0}</Badge>
              : <span><Icon icon_0={entry.icon} size={16} /> {entry.label}</span>
            }
          </TableCell>
          <TableCell>{entry.usage_0}</TableCell>
          <TableCell>{(entry.components_0 || []).join_0(', ')}</TableCell>
        </TableRow>
      ))}
    </StyledTable>
  </div>
  ))}

<CustomDivider />

## Data Location

The mapping lives in `/snippets/data/reference-maps/badge-map.jsx`.

This is deliberate:

* The page renders a reusable data source
* Future validators can consume the same map
* The icon-map and badge-map sit side by side under `snippets/data/reference-maps/`