rialtolisted

# Rialto Design System Rialto is a 62-component React design system with warm-neutral aluminum surfaces, gold accent, spring-physics motion, and CSS token architecture. Import everything from the barrel: ```tsx import { Button, Input, Card, Stack, Text } from "rialto"; import "rialto/tokens"; ``` ## Required Providers ```tsx <RialtoProvider vibe="default" theme="system"> <ToastProvider> <App /> </ToastProvider> </RialtoProvider> ``` - `RialtoProvider` — device context, theming, vibe token overrides - `ToastProvider` — required before calling `useToast()` ## 6 Cardinal Rules 1. **Tokens only** — Never hardcode colors, spacing, radii, or easing. Always `var(--rialto-*)`. 2. **Gold is surgical** — `--rialto-accent` only for focus rings, active/selected states, primary button fills. Never decorative. 3. **forwardRef always** — Every component uses `React.forwardRef`. New components must too. 4. **Respect reduced motion** — Check `useReducedMotion()` from Framer Motion. Skip animation when true. 5. **Logical properties** — Use `margin-inline-start`, `padding-inline-end`, `inset-inline-start` — never `left`/`right`. 6. **Barrel imports** — Always `import { X } from "rialto"`. Never `import X from "rialto/components/X"`. ## Component Selection > Full details: [decision-trees.md](references/decision-trees.md) | Need | Start Here | | ------------ | -----------------------------