# UI UX Design Brief

This brief translates product intent into an interface that can be reviewed before high-fidelity work begins. **[DESIGN STYLE]** must describe concrete visual and interaction rules, not only adjectives such as “modern.”

[Kit README](README.md) · [Project Overview](Project%20Overview.md) · [PRD](Full%20PRD%20Template.md) · [Master Build Prompt](Master%20Build%20Prompt.md) · [Completion Checklist](Project%20Completion%20Checklist.md)

## Experience Goal

When **[TARGET USERS]** use **[PROJECT NAME]** to **[CORE TASK]**, the experience should feel **[THREE RELEVANT QUALITIES]** because the interface provides **[SPECIFIC EVIDENCE: hierarchy, feedback, speed, or control]**.

Domain direction: content-first layouts, a clear visual hierarchy, predictable navigation, readable line lengths, and mobile breakpoints tested at 320 px and above.

## Required Surfaces

| Surface | Purpose | Primary Action | Required States | Small-Screen Behavior |
| --- | --- | --- | --- | --- |
| [ENTRY / HOME] | Orient the user | [ACTION] | ready, empty, error | [RULE] |
| [CORE WORKSPACE] | Complete the main task | [ACTION] | input, processing, success, failure | [RULE] |
| [DETAIL / RESULT] | Understand or manage output | [ACTION] | current, stale, unavailable | [RULE] |
| [SETTINGS / HELP] | Control preferences and recovery | [ACTION] | saved, validation error | [RULE] |

## Interaction Principles

1. **One dominant action per decision.** Secondary actions must not compete visually.
2. **Feedback follows the action.** Show validation near the field, progress for work longer than about one second, and durable confirmation for state changes.
3. **Recognition over memory.** Keep labels, current filters, status, and scope visible.
4. **Safe recovery.** Preserve valid input, distinguish retryable from final errors, and warn before destructive or costly actions.
5. **Honest system state.** Sample, offline, stale, estimated, and incomplete results must be labeled.

## Responsive and Accessibility Requirements

- [ ] Define layouts for narrow, medium, and wide widths based on content pressure.
- [ ] Support keyboard access and visible focus for all interactive controls where the platform allows it.
- [ ] Use semantic names, labels, headings, and landmarks.
- [ ] Do not communicate status by color alone; add text, shape, pattern, or icon with an accessible name.
- [ ] Support 200% zoom/reflow and user text sizing without hiding the primary action.
- [ ] Respect reduced-motion preferences and provide pause/stop controls for non-essential movement.
- [ ] Give meaningful images, charts, audio, and video appropriate text alternatives or captions.
- [ ] Test touch targets and gesture alternatives on touch interfaces.

## Content Design

- Use the user’s vocabulary from interviews.
- Buttons describe the result: “Save draft,” “Create workspace,” or “Run evaluation,” not “Submit.”
- Error copy states what happened, what remains safe, and the next valid step.
- Confirmation copy states the object and actual state change.
- Explain permission, cost, and data-use consequences before commitment.

## Handoff Package

Deliver annotated wireframes, responsive rules, component inventory, interaction states, copy deck, tokens, accessibility notes, assets with licenses, and acceptance criteria. Link final decisions to [Design System](Design%20System.md) and [User Flow](User%20Flow.md).

## Review Tasks

Test at least these domain tasks: “understand the offer within ten seconds”, “reach any primary page in two navigation actions”, “submit a contact request with clear confirmation”. A design is ready when representative users can explain the page purpose, locate the primary action, recover from a realistic error, and complete the main task without coaching.