# Composition — Overview

Composition guides how to combine multiple Arrow components and tokens to build a page. Component-level files in `guidelines/components/` cover individual props and APIs; the files here cover the patterns that connect them together: visual hierarchy, page layout, surfaces (cards, modals, toasts), and icon placement.

Read these in order when generating a new page or screen — start with hierarchy to decide what is most important, use layout to position it, choose the right surface for elevation, then apply icons for affordance and decoration.

## Composition guides

| Concept | Purpose | File |
|---|---|---|
| Hierarchy | Order content visually: eyebrow, headline, body, action. Limit primary actions per section. | `composition/hierarchy.md` |
| Layout | Position content with the 12-column grid, containers, gaps, and responsive breakpoints. | `composition/layout.md` |
| Surfaces | Choose the right elevated container — card, modal, snackbar, notice bar, full-page interruption. | `composition/surfaces.md` |
| Icons | Place and size icons in inputs, buttons, lists, tiles, and standalone IconButtons. | `composition/icons.md` |

## Related foundations

- `foundations/color.md` — surface and content color tokens
- `foundations/icons.md` — icon set and naming
- `guidelines/patterns.md` — component-pair patterns (forms, modals, lists)
- `guidelines/overview.md` — system-level rules (imports, theme, hooks)
