# Code

> A name from code inside a sentence: a token, a prop, an API.

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

Inline code reference. Renders a `<code>` element with the design-system mono font and a subtle muted-surface chip background. For multi-line code blocks, wrap in `<pre>` (Code itself stays inline).

## Use it for

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

## Axes

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

## Stories

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

## Decisions that name it

- ADR-046 — Markdown is painted with atoms, and apps fill its slots

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