# Figure

> A large display numeral with automatic size step-down.

Source: https://lopifi.com/components/figure
Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com)

---

- **Family:** Primitives — The layer everything else composes. Build these first; nothing above them is right until they are.
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/01-primitives

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/figure
```

## Specification

> A large display numeral. The only place a figure may leave the figure face.

```tsx
<Figure value={{ amount: 24819024, currency: "USD" }} size="hero" family="display" />
```

**The step-down:** at `hero` (40px), a value exceeding a character threshold steps to `lg` (28px), then `md` (20px). Driven by a **container query on character count**, not `clamp()` — so the value always lands on a type-scale token rather than between two.

**The display gate:** `family="display"` is only valid when the component is provably solitary. In `KpiRow`, where figures align across cards, the prop is ignored and the figure face is forced. Enforce it in the parent, not by trusting the caller.

**Never truncates.** Escalation ladder in [numerics](../foundations/06-numerics.md#overflow).

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.