# DesignOS documentation

Generated from the Figma `Design - OS` library. Light Mode only.

- [**Coverage**](coverage.md) — what is and is not documented, and verification status
- [**Dark mode**](dark-mode.md) — emitted verbatim, with its known weaknesses
- [**Foundations**](foundations.md) — all 623 variables, corrections, added roles, radius themes, surfaces
- [Component reference (interactive)](../index.html) — every component rendered live

## Components — 721 variants across 17 components

| Component | Node | Variants | Doc |
|---|---|---|---|
| Button | `442:2632` | 216 | [button.md](components/button.md) |
| Input field | `762:8731` | 130 | [input-field.md](components/input-field.md) |
| Text area | `1803:768` | 5 | [text-area.md](components/text-area.md) |
| OTP input | `1881:949` | 18 | [otp-input.md](components/otp-input.md) |
| Badges & chips | `968:9919` | 216 | [badges-chips.md](components/badges-chips.md) |
| Alert (Notification) & Snackbar | `271:340` | 35 | [alert-snackbar.md](components/alert-snackbar.md) |
| Banner | `271:630` | 15 | [banner.md](components/banner.md) |
| Checkbox & radio | `1067:74 / 1067:1206` | 20 | [checkbox-radio.md](components/checkbox-radio.md) |
| Toggle | `1067:1425` | 12 | [toggle.md](components/toggle.md) |
| Content divider | `630:2995` | 5 | [content-divider.md](components/content-divider.md) |
| Pagination | `1097:3241` | 4 | [pagination.md](components/pagination.md) |
| Tooltip | `584:7980` | 18 | [tooltip.md](components/tooltip.md) |
| Loader | `1323:783` | 1 | [loader.md](components/loader.md) |
| Avatar | `not read — skill reference §11.5.3` | 18 | [avatar.md](components/avatar.md) |
| Button group | `983:11145` | 2 | [button-group.md](components/button-group.md) |
| Breadcrumbs | `1074:12348` | 3 | [breadcrumbs.md](components/breadcrumbs.md) |
| Calender | `1074:460` | 3 | [calender.md](components/calender.md) |

## Regenerating

```bash
node design-os/extract-variables.mjs   # Figma export -> variables.json
node design-os/build-tokens.mjs        # variables.json -> tokens.css
node design-os/build-docs.mjs          # contracts.mjs + variables.json -> docs/
node design-os/build-reference.mjs     # everything -> index.html
```

Component contracts live in `contracts.mjs`. Edit there, never in the generated
markdown.