# PlanCard

> One pricing plan: its name, price, what it includes and how to choose it.

- **Level**: molecule · **Status**: stable · **Role**: content
- **Import**: `import { PlanCard } from "@rrios-forge/ui/molecules/plan-card";`
- **Source**: `packages/ui/src/molecules/plan-card`

Higher-level pricing card for marketing surfaces and account plan pages. Layout: title + badge → price → description → features → action → footer. tone accent never carries meaning alone (R14); the title repeats it.

## Use it for

- Pricing plan → `PlanCard` or `PricingOption`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `tone` | — | `neutral` `info` `success` `warning` `danger` | `neutral` | Which semantic colour family the element speaks in. |
| `prominence` | — | `default` `featured` | `default` | How a surface stands among its siblings. |

## Stories

- [Playground](/?path=/story/components-molecules-plancard--playground) · frame: `/iframe.html?id=components-molecules-plancard--playground&viewMode=story`
- [Tones](/?path=/story/components-molecules-plancard--tones) · frame: `/iframe.html?id=components-molecules-plancard--tones&viewMode=story`
- [Highlighted](/?path=/story/components-molecules-plancard--highlighted) · frame: `/iframe.html?id=components-molecules-plancard--highlighted&viewMode=story`
- [Pricing grid](/?path=/story/components-molecules-plancard--pricing-grid) · frame: `/iframe.html?id=components-molecules-plancard--pricing-grid&viewMode=story`
- [Current plan](/?path=/story/components-molecules-plancard--current-plan) · frame: `/iframe.html?id=components-molecules-plancard--current-plan&viewMode=story`

## Decisions that name it

- ADR-005 — Visual operational rules: surfaces, interaction, motion
- ADR-006 — Geometry and typography signature
- ADR-012 — Card.fill axis for symmetric growth in grids
- ADR-030 — Axis vocabulary: one name, one meaning

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).