# Amplify Canvas Design System

> Canvas is the unified design system for Amplify products (Brand, Creator, Atmosphere). It ships React components, design tokens, and templates as `@amplify-ai/ui`, `@amplify-ai/tokens-*`, and `@amplify-ai/templates`.

Each component below has a per-component rule sheet listing variants, props, defaults, and allowed values. Use these to compose UI without inventing components or hardcoding values.

## Components

- [ActionFooter](llms/ActionFooter.md): 7 props
- [AddonTeaser](llms/AddonTeaser.md): 2 props
- [Avatar](llms/Avatar.md): 3 sizes, 5 props
- [Badge](llms/Badge.md): 6 variants, 2 sizes, 5 props
- [Breadcrumb](llms/Breadcrumb.md): 2 props
- [Button](llms/Button.md): 5 variants, 4 sizes, 6 props
- [Card](llms/Card.md): 5 variants, 3 props
- [Checkbox](llms/Checkbox.md): 6 props
- [Chip](llms/Chip.md): 4 variants, 2 sizes, 5 props
- [CollapsibleCard](llms/CollapsibleCard.md): 6 props
- [CollapsibleNavGroup](llms/CollapsibleNavGroup.md): 8 props
- [CollapsibleSection](llms/CollapsibleSection.md): 4 props
- [ContentTypeCard](llms/ContentTypeCard.md): 9 props
- [DataTable](llms/DataTable.md): 8 props
- [Dialog](llms/Dialog.md): 7 props
- [EmptyState](llms/EmptyState.md): 5 props
- [FlexiSelector](llms/FlexiSelector.md): 5 props
- [GoalCard](llms/GoalCard.md): 7 props
- [IconButton](llms/IconButton.md): 3 variants, 4 sizes, 4 props
- [Input](llms/Input.md): 3 props
- [InsightBanner](llms/InsightBanner.md): 2 props
- [MetricCard](llms/MetricCard.md): 8 props
- [PackageCard](llms/PackageCard.md): 5 props
- [Pagination](llms/Pagination.md): 4 props
- [PricePill](llms/PricePill.md): 3 props
- [ProductUrlInput](llms/ProductUrlInput.md): 4 props
- [ProgressBar](llms/ProgressBar.md): 3 variants, 3 props
- [RecoReason](llms/RecoReason.md): 2 props
- [ScrapeAnimation](llms/ScrapeAnimation.md): 1 props
- [ScriptPreviewCard](llms/ScriptPreviewCard.md): 3 props
- [SearchInput](llms/SearchInput.md): 6 props
- [Select](llms/Select.md): 4 props
- [Separator](llms/Separator.md): 2 props
- [Skeleton](llms/Skeleton.md): 3 variants, 3 props
- [Slider](llms/Slider.md): 3 props
- [StatusTag](llms/StatusTag.md): 2 sizes, 5 props
- [Stepper](llms/Stepper.md): 3 variants, 3 props
- [StepPill](llms/StepPill.md): 2 props
- [Switch](llms/Switch.md): 6 props
- [Tabs](llms/Tabs.md): 5 props
- [Textarea](llms/Textarea.md): 2 props
- [Timeline](llms/Timeline.md): 2 props
- [Toast](llms/Toast.md): 4 variants, 4 props
- [Tooltip](llms/Tooltip.md): 4 props
- [TrustBar](llms/TrustBar.md): 1 props
- [WalletCard](llms/WalletCard.md): 5 props

## Tokens

- `@amplify-ai/tokens-foundation`: primitives (color, spacing, typography, shadow, radius, motion)
- `@amplify-ai/tokens-brand`: Brand product theme
- `@amplify-ai/tokens-atmosphere`: Atmosphere product theme
- `@amplify-ai/tokens-creator`: Creator product theme

## Programmatic access

- MCP server: `@amplify-ai/mcp-server` exposes the same data via stdio + HTTP transports.
- JSON contracts: `dist/contracts/<Component>.json` — TS-API-extracted, single source of truth.
- JSON mirror: `dist/llms.json` for tools that prefer flattened structured data.
