# UDS Styling

## Use UDS palette colors only

- Only use UDS palette colors — never use raw color values like `bg-white`, `text-white`, `bg-gray-100`, etc.
- Background colors: `primary`, `secondary`, `brand`, `brand-secondary`, `alert`, `alert-secondary`, `positive`, `positive-secondary`, `warning`, `warning-secondary`, `info`, `info-secondary`
- Foreground (text/icon) colors: `primary`, `secondary`, `tertiary`, `muted`, `on-color`, `brand`, `alert`, `positive`, `warning`, `info`

## Color pairing rules

- On dark or brand backgrounds (`brand`, `positive`, `info`, `warning`, `alert`), use `color="on-color"` for text and icons
- On secondary/lighter background variants (`brand-secondary`, `positive-secondary`, etc.), use the matching semantic color (e.g., `color="brand"` on `backgroundColor="brand-secondary"`)
- Never use `color="on-color"` on white or light backgrounds — it creates invisible white text
- Never use a dark semantic color (e.g., `brand`, `positive`) directly on its own secondary background variant as contrast will be poor

## General styling

- Prefer UDS TypeScript props (`backgroundColor`, `spacing`, `borderRadius`, etc.) over Tailwind `className` for design tokens
