# Prism Design System

> One component system behind a family of products (commerce, campus, finance, health, hospitality, media). 106 React components and 608 design tokens. Products differ only by a signature attribute; they share one component library. This file helps coding agents generate on-system Prism code.

## How to use Prism

Load the token stylesheet and the compiled bundle, then read components off a single global namespace.

```html
<link rel="stylesheet" href="/runtime/styles.css" />
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="/runtime/_ds_bundle.js"></script>
```

```jsx
const { Button, TextField, DataGrid } = window.PrismDesignSystem_39d121;
```

Theme with cascading attributes, never by overriding component internals:

- `data-signature="commerce|campus|finance|health|hospitality|media"` — re-skin to a product.
- `data-theme="dark"` — dark mode.
- `data-density="compact|neutral|relaxed"` — information density.
- `data-scale="cinema"` — ten-foot / TV tier.

Rules: use semantic role tokens (`--accent`, `--text-primary`, `--surface-card`, `--positive`/`--notice`/`--negative`, `--focus-ring`) not raw ramp steps; never restyle the focus ring away; reserve semantic colors for real meaning.

## Components (106)

### Core

- [Avatar](https://prism.artoftechconsulting.com/components/core/Avatar): Avatar — Prism component.
- [Badge](https://prism.artoftechconsulting.com/components/core/Badge): Badge — Prism component.
- [Button](https://prism.artoftechconsulting.com/components/core/Button): The primary action control
- [ButtonGroup](https://prism.artoftechconsulting.com/components/core/ButtonGroup): ButtonGroup — Prism component.
- [Card](https://prism.artoftechconsulting.com/components/core/Card): Card — Prism component.
- [Fab](https://prism.artoftechconsulting.com/components/core/Fab): Fab — Prism component.
- [IconButton](https://prism.artoftechconsulting.com/components/core/IconButton): IconButton — Prism component.
- [NavButton](https://prism.artoftechconsulting.com/components/core/NavButton): NavButton — Prism component.
- [Spinner](https://prism.artoftechconsulting.com/components/core/Spinner): Spinner — Prism component.
- [Tag](https://prism.artoftechconsulting.com/components/core/Tag): Tag — Prism component.
- [Toolbar](https://prism.artoftechconsulting.com/components/core/Toolbar): Toolbar — Prism component.
- [ToolbarSeparator](https://prism.artoftechconsulting.com/components/core/ToolbarSeparator): ToolbarSeparator — Prism component.

### Forms & inputs

- [AutosaveIndicator](https://prism.artoftechconsulting.com/components/forms/AutosaveIndicator): AutosaveIndicator — Prism component.
- [Checkbox](https://prism.artoftechconsulting.com/components/forms/Checkbox): Checkbox — Prism component.
- [ComboBox](https://prism.artoftechconsulting.com/components/forms/ComboBox): ComboBox — Prism component.
- [DropZone](https://prism.artoftechconsulting.com/components/forms/DropZone): DropZone — Prism component.
- [ErrorSummary](https://prism.artoftechconsulting.com/components/forms/ErrorSummary): ErrorSummary — Prism component.
- [Field](https://prism.artoftechconsulting.com/components/forms/Field): Field — Prism component.
- [FormActions](https://prism.artoftechconsulting.com/components/forms/FormActions): FormActions — Prism component.
- [FormRow](https://prism.artoftechconsulting.com/components/forms/FormRow): FormRow — Prism component.
- [FormSection](https://prism.artoftechconsulting.com/components/forms/FormSection): FormSection — Prism component.
- [MultiStepForm](https://prism.artoftechconsulting.com/components/forms/MultiStepForm): MultiStepForm — Prism component.
- [NumberField](https://prism.artoftechconsulting.com/components/forms/NumberField): NumberField — Prism component.
- [Radio](https://prism.artoftechconsulting.com/components/forms/Radio): Radio — Prism component.
- [RadioGroup](https://prism.artoftechconsulting.com/components/forms/RadioGroup): RadioGroup — Prism component.
- [SearchField](https://prism.artoftechconsulting.com/components/forms/SearchField): SearchField — Prism component.
- [Select](https://prism.artoftechconsulting.com/components/forms/Select): Select — Prism component.
- [Slider](https://prism.artoftechconsulting.com/components/forms/Slider): Slider — Prism component.
- [Switch](https://prism.artoftechconsulting.com/components/forms/Switch): Switch — Prism component.
- [TextField](https://prism.artoftechconsulting.com/components/forms/TextField): A labelled text input with description + error wiring.
- [ToggleButtonGroup](https://prism.artoftechconsulting.com/components/forms/ToggleButtonGroup): ToggleButtonGroup — Prism component.

### Navigation

- [Accordion](https://prism.artoftechconsulting.com/components/navigation/Accordion): Accordion — Prism component.
- [AppHeader](https://prism.artoftechconsulting.com/components/navigation/AppHeader): AppHeader — Prism component.
- [Breadcrumbs](https://prism.artoftechconsulting.com/components/navigation/Breadcrumbs): Breadcrumbs — Prism component.
- [Stepper](https://prism.artoftechconsulting.com/components/navigation/Stepper): Force a state; otherwise derived from currentStep.
- [Tabs](https://prism.artoftechconsulting.com/components/navigation/Tabs): An accessible tab set with arrow-key roving focus and tabpanels

### Data display

- [DataGrid](https://prism.artoftechconsulting.com/components/data/DataGrid): Fixed px width — required for pinned columns to compute offsets cleanly.
- [Table](https://prism.artoftechconsulting.com/components/data/Table): Custom cell renderer: (row) => node.
- [Tree](https://prism.artoftechconsulting.com/components/data/Tree): Tree — Prism component.

### Charts

- [BarChart](https://prism.artoftechconsulting.com/components/charts/BarChart): BarChart — Prism component.
- [DonutChart](https://prism.artoftechconsulting.com/components/charts/DonutChart): DonutChart — Prism component.
- [Gauge](https://prism.artoftechconsulting.com/components/charts/Gauge): Gauge — Prism component.
- [Legend](https://prism.artoftechconsulting.com/components/charts/Legend): Legend — Prism component.
- [LineChart](https://prism.artoftechconsulting.com/components/charts/LineChart): LineChart — Prism component.
- [Sparkline](https://prism.artoftechconsulting.com/components/charts/Sparkline): Sparkline — Prism component.

### Cards

- [EditorialCard](https://prism.artoftechconsulting.com/components/cards/EditorialCard): EditorialCard — Prism component.
- [HeroCard](https://prism.artoftechconsulting.com/components/cards/HeroCard): HeroCard — Prism component.
- [MediaCard](https://prism.artoftechconsulting.com/components/cards/MediaCard): MediaCard — Prism component.
- [MetricCard](https://prism.artoftechconsulting.com/components/cards/MetricCard): MetricCard — Prism component.
- [PlanCard](https://prism.artoftechconsulting.com/components/cards/PlanCard): PlanCard — Prism component.
- [ProfileCard](https://prism.artoftechconsulting.com/components/cards/ProfileCard): ProfileCard — Prism component.
- [ProgressCard](https://prism.artoftechconsulting.com/components/cards/ProgressCard): ProgressCard — Prism component.
- [StatCard](https://prism.artoftechconsulting.com/components/cards/StatCard): StatCard — Prism component.
- [TileCard](https://prism.artoftechconsulting.com/components/cards/TileCard): TileCard — Prism component.

### Feedback

- [Alert](https://prism.artoftechconsulting.com/components/feedback/Alert): Alert — Prism component.
- [ProgressBar](https://prism.artoftechconsulting.com/components/feedback/ProgressBar): ProgressBar — Prism component.
- [ToastProvider](https://prism.artoftechconsulting.com/components/feedback/ToastProvider): Override auto-dismiss for this toast (ms).
- [ToastRegion](https://prism.artoftechconsulting.com/components/feedback/ToastRegion): ToastRegion — Prism component.

### Overlays

- [Dialog](https://prism.artoftechconsulting.com/components/overlays/Dialog): Dialog — Prism component.
- [Menu](https://prism.artoftechconsulting.com/components/overlays/Menu): Menu — Prism component.
- [Tooltip](https://prism.artoftechconsulting.com/components/overlays/Tooltip): Tooltip — Prism component.

### Date & time

- [Calendar](https://prism.artoftechconsulting.com/components/datetime/Calendar): Calendar — Prism component.
- [DatePicker](https://prism.artoftechconsulting.com/components/datetime/DatePicker): DatePicker — Prism component.
- [DateRangePicker](https://prism.artoftechconsulting.com/components/datetime/DateRangePicker): DateRangePicker — Prism component.
- [TimePicker](https://prism.artoftechconsulting.com/components/datetime/TimePicker): TimePicker — Prism component.

### Layout

- [AppFooter](https://prism.artoftechconsulting.com/components/layout/AppFooter): AppFooter — Prism component.
- [MediaHero](https://prism.artoftechconsulting.com/components/layout/MediaHero): Alt text for image (omit/empty for decorative).
- [PageHero](https://prism.artoftechconsulting.com/components/layout/PageHero): PageHero — Prism component.
- [Sidebar](https://prism.artoftechconsulting.com/components/layout/Sidebar): Pop-up menu (settings, sign out, …); omit for a static chip.
- [SideNav](https://prism.artoftechconsulting.com/components/layout/SideNav): SideNav — Prism component.

### Lockups

- [PageHeader](https://prism.artoftechconsulting.com/components/lockups/PageHeader): PageHeader — Prism component.
- [SectionHeader](https://prism.artoftechconsulting.com/components/lockups/SectionHeader): SectionHeader — Prism component.

### Workflow

- [ActivityTimeline](https://prism.artoftechconsulting.com/components/workflow/ActivityTimeline): ActivityTimeline — Prism component.
- [ReviewActionBar](https://prism.artoftechconsulting.com/components/workflow/ReviewActionBar): ReviewActionBar — Prism component.
- [StatusPipeline](https://prism.artoftechconsulting.com/components/workflow/StatusPipeline): StatusPipeline — Prism component.

### States

- [EmptyState](https://prism.artoftechconsulting.com/components/states/EmptyState): EmptyState — Prism component.

### Permissions

- [LockedOverlay](https://prism.artoftechconsulting.com/components/permissions/LockedOverlay): LockedOverlay — Prism component.
- [ReadOnlyBanner](https://prism.artoftechconsulting.com/components/permissions/ReadOnlyBanner): ReadOnlyBanner — Prism component.
- [RestrictedState](https://prism.artoftechconsulting.com/components/permissions/RestrictedState): RestrictedState — Prism component.
- [RoleBadge](https://prism.artoftechconsulting.com/components/permissions/RoleBadge): RoleBadge — Prism component.

### Privacy

- [AuditLogEntry](https://prism.artoftechconsulting.com/components/privacy/AuditLogEntry): AuditLogEntry — Prism component.
- [ConsentBanner](https://prism.artoftechconsulting.com/components/privacy/ConsentBanner): ConsentBanner — Prism component.
- [MaskedField](https://prism.artoftechconsulting.com/components/privacy/MaskedField): MaskedField — Prism component.
- [SensitivityTag](https://prism.artoftechconsulting.com/components/privacy/SensitivityTag): SensitivityTag — Prism component.
- [SessionTimeoutDialog](https://prism.artoftechconsulting.com/components/privacy/SessionTimeoutDialog): SessionTimeoutDialog — Prism component.

### Typography

- [Blockquote](https://prism.artoftechconsulting.com/components/typography/Blockquote): Blockquote — Prism component.
- [Eyebrow](https://prism.artoftechconsulting.com/components/typography/Eyebrow): Eyebrow — Prism component.
- [Heading](https://prism.artoftechconsulting.com/components/typography/Heading): Heading — Prism component.
- [Prose](https://prism.artoftechconsulting.com/components/typography/Prose): Prose — Prism component.
- [Pullquote](https://prism.artoftechconsulting.com/components/typography/Pullquote): Pullquote — Prism component.
- [Text](https://prism.artoftechconsulting.com/components/typography/Text): Text — Prism component.

### TV & cinema

- [TVButton](https://prism.artoftechconsulting.com/components/tv/TVButton): TVButton — Prism component.
- [TVCard](https://prism.artoftechconsulting.com/components/tv/TVCard): TVCard — Prism component.
- [TVEmergencyScreen](https://prism.artoftechconsulting.com/components/tv/TVEmergencyScreen): TVEmergencyScreen — Prism component.
- [TVHero](https://prism.artoftechconsulting.com/components/tv/TVHero): TVHero — Prism component.
- [TVIdleScreen](https://prism.artoftechconsulting.com/components/tv/TVIdleScreen): TVIdleScreen — Prism component.
- [TVLanguageSelector](https://prism.artoftechconsulting.com/components/tv/TVLanguageSelector): The English name (e.g
- [TVMediaControls](https://prism.artoftechconsulting.com/components/tv/TVMediaControls): TVMediaControls — Prism component.
- [TVModal](https://prism.artoftechconsulting.com/components/tv/TVModal): TVModal — Prism component.
- [TVQRHandoff](https://prism.artoftechconsulting.com/components/tv/TVQRHandoff): TVQRHandoff — Prism component.
- [TVRail](https://prism.artoftechconsulting.com/components/tv/TVRail): TVRail — Prism component.
- [TVRemoteHelp](https://prism.artoftechconsulting.com/components/tv/TVRemoteHelp): Button glyphs for this row, e.g
- [TVScene](https://prism.artoftechconsulting.com/components/tv/TVScene): TVScene — Prism component.
- [TVTabs](https://prism.artoftechconsulting.com/components/tv/TVTabs): TVTabs — Prism component.
- [TVToast](https://prism.artoftechconsulting.com/components/tv/TVToast): lucide icon name; defaults by tone.
- [TVTopBar](https://prism.artoftechconsulting.com/components/tv/TVTopBar): TVTopBar — Prism component.

## Machine-readable

- [Component specs (JSON)](https://prism.artoftechconsulting.com/ai/components.json): every component with full prop types, generated from source.
- [Foundations](https://prism.artoftechconsulting.com/foundations/overview), [Patterns](https://prism.artoftechconsulting.com/patterns/overview), [Build with AI](https://prism.artoftechconsulting.com/ai/overview).