Feedback & status
Draft
Components that communicate state. Status is never color alone: hue + icon + text, on a static surface.
Status color is warm, and separate from the brand
Section titled “Status color is warm, and separate from the brand”Warm tones (amber / orange / red) are status signals only, never decorative. Cyan stays the single brand accent; it is not a status color, and status is never cyan (see Design laws).
Severity hierarchy
Section titled “Severity hierarchy”- Info: neutral / cool, lowest urgency.
- Success: green.
- Warning: amber.
- Error: red, highest urgency; pairs with an icon and text every time.
Pick the level by consequence, not by how much attention you want.
Motion is purposeful
Section titled “Motion is purposeful”- Progress, spinners, and shimmer animate interpolatable properties only (opacity, scale, transform), never a fill swap (see Motion).
- A status dot signals via opacity / scale, never a colored glow.
- Motion is choreographed, not decoration, and respects reduced-motion. Fall back to a static state.
Components
Section titled “Components”| Component | Status |
|---|---|
| Banner / inline alert | ▢ queued |
| Info block / callout | ▢ queued |
| Toast / snackbar | ▢ queued |
| Progress bar | ▢ queued |
| Spinner / loading | ▢ queued |
| Skeleton loader | ▢ queued |
| Empty state | ▢ queued |
| Status dot / badge | ▢ queued |