# Foundations

Foundations are the design tokens and primitive systems that every Arrow component is built on. Read these before authoring page-level layouts.

| Foundation | Purpose | File |
|------------|---------|------|
| Color | Brand, grayscale, status, fill/text/border `--tdds-color-*` tokens. Inverse-aware. | `foundations/color.md` |
| Spacing | `--tdds-spacer-*` scale and `tdds:pa-*` / `tdds:ma-*` / `tdds:gap-*` utilities. | `foundations/spacing.md` |
| Modes | `ArrowThemeProvider`, `inverse`, `brand`, and the `useArrowTheme` hook. | `foundations/modes.md` |
| Icons | 24×24 SVG system, 14 categories, `currentColor` inheritance. | `foundations/icons.md` |
| Input styling | Floating-label track + `useFloatingLabel` for text inputs. | `foundations/input_styling.md` |

## Rule of thumb

If you find yourself writing inline styles, hex values, or `px` measurements, stop — there is a token or utility for it. Foundations always win over custom CSS.
