# UI Product Standards

Read this file when designing screens, choosing components, or judging whether a UI is ready to ship.

## Product Bar

- Build interfaces that feel like real production software, not prototypes.
- Optimize for consistent layout, clear hierarchy, predictable UX, strong performance, and scalable composition.
- Keep the interface calm, premium, structured, and intentional.

## Design Direction

- Use generous whitespace and a steady layout rhythm.
- Keep typography clean, readable, and deliberate.
- Use refined color with restraint.
- Prefer modern minimalism over visual noise.
- Avoid cluttered layouts, inconsistent spacing, and generic AI-looking compositions.

## Component Strategy

- Use a design-system-first mindset.
- Check Magic UI MCP first when it is available.
- Check shadcn or shadcn-solid before building custom components.
- Read `/home/tdvorak/.codex/skills/frontend-design/SKILL.md` for design-heavy or blank-canvas frontend work.
- Inspect existing project components before creating something new.
- Use Tailwind utilities where practical and prefer composition over custom overrides.

## Interaction and Motion

- Use subtle transitions, clear hover states, and responsive feedback.
- Keep animation in service of clarity rather than decoration.
- Avoid heavy or distracting motion.
- Prioritize performance.
- Use `https://haptics.lochie.me/` as a motion reference when useful.

## Quality Targets

Aim for the polish level associated with products such as Linear, Vercel, Stripe Dashboard, Supabase, and Notion without copying them directly.

## UI Rules

- Make layouts mobile responsive by default.
- Support dark and light mode unless the task clearly does not need both.
- Keep components accessible.
- Use a predictable spacing scale and consistent border radii.
- Avoid emojis in the UI unless the user explicitly asks for them.

## Final Review

Before finishing, confirm that the interface has:

1. Clean whitespace
2. Consistent spacing
3. Readable typography
4. Strong visual hierarchy
5. Balanced layout
6. Responsive behavior

If the result still looks generic or autogenerated, redesign it.