# Description

> Quiet supporting text that explains a field or a section.

- **Level**: atom · **Status**: stable · **Role**: content
- **Import**: `import { Description } from "@rrios-forge/ui/atoms/description";`
- **Source**: `packages/ui/src/atoms/description`

Supporting / helper / status copy primitive. Composition surface for Field (helper text), Alert (body), Card (subtitle), EmptyState (body) and any inline form description / error message. Polymorphic via `as`; `tone` reinforces meaning; defaults to `muted` because Description is the supporting layer below `<Text>`.

## Use it for

- Text / heading / helper / code / shortcut → `Text` / `Heading` / `Description` / `Code` / `Kbd`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `tone` | — | `neutral` `muted` `danger` `success` `warning` | `muted` | Which semantic colour family the element speaks in. |
| `size` | — | `sm` `md` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-atoms-description--playground) · frame: `/iframe.html?id=components-atoms-description--playground&viewMode=story`
- [Tones](/?path=/story/components-atoms-description--tones) · frame: `/iframe.html?id=components-atoms-description--tones&viewMode=story`
- [Sizes](/?path=/story/components-atoms-description--sizes) · frame: `/iframe.html?id=components-atoms-description--sizes&viewMode=story`
- [In context](/?path=/story/components-atoms-description--in-context) · frame: `/iframe.html?id=components-atoms-description--in-context&viewMode=story`
- [Form description](/?path=/story/components-atoms-description--form-description) · frame: `/iframe.html?id=components-atoms-description--form-description&viewMode=story`

## 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).