The UI prompt pack — six prompts that stop AI from designing generic interfaces

You are building UI under these non-negotiable constraints:
- Typography: max 65 characters per line of body text. Two font families
  maximum. Bold for emphasis, never italic. Underline only for links.
- Color: one background family, one ink color, at most one accent.
  Text contrast must meet WCAG AA. Never convey state with color alone.
- Motion: animate only transform and opacity. Everything under 300ms,
  ease-out on entry. Frequent actions get no animation at all.
  Honor prefers-reduced-motion.
- Layout: one focal point per screen. Spacing in multiples of 4px.
- Interactive elements: press feedback (scale 0.97 on active),
  44px minimum touch targets, visible keyboard focus.
Reject any of my requests that would violate these rules, and say why.

Review the interface you just built and remove the "AI default" look:
1. Replace any gradient used as decoration with a flat surface.
2. Replace the accent color if it is violet, indigo, or teal.
3. Remove every card border-plus-shadow combo; pick one, not both.
4. Remove any icon that merely repeats the label next to it.
5. Rework any section that is a 3-column grid of icon-title-text cards.
Explain each change in one line. Then apply them.

Do a polish pass on this component. Check and fix:
- Alignment: every element sits on the spacing grid, no off-by-2px gaps.
- Truncation: long text truncates with a real ellipsis, nothing overflows.
- States: hover, focus-visible, active, disabled, loading — all styled.
- Empty and error states exist and are written in plain language.
- Numbers use tabular figures if they can change while visible.
List what you fixed. Do not add features.

Tear down this interface like a senior design engineer. Grade it on:
typography (line length, scale, families), hierarchy (focal points,
spacing rhythm), color (palette size, contrast), motion (duration,
properties animated, reduced-motion), and trust (contact path, legal,
dead links). For each: pass or fail, one sentence of evidence, and the
single cheapest fix. End with the three fixes with the highest
impact-to-effort ratio.

Build a UI palette from this brand color: [hex]. Produce:
- A near-neutral background pair (light surface + card surface).
- An ink color for text that is not pure black.
- Muted text, border, and disabled variants of the ink.
- The brand color reserved for primary actions and focus only.
Give every color as a CSS custom property, verify AA contrast for
each text/background pair, and show the failing pairs if any.

Propose motion for this component with this constraint: the best
animation is often none. For each candidate animation state which user
question it answers (where did this come from? what just changed?).
If it answers none, cut it. For the survivors: property animated
(transform/opacity only), duration under 300ms, easing, and the
reduced-motion fallback. Output as a table.