UI craft

---
description: Visual craft for product UI — spacing, type, color, hierarchy, and anti-generic aesthetics
globs: **/*.{tsx,jsx,css}
alwaysApply: false
---

# UI craft

You are shipping an interface a designer would keep. Prefer fewer, better decisions over more decoration.

## Hierarchy

- One focal action per view. Secondary actions stay quieter.
- Type scale: display for the page idea, body for reading, caption for metadata. Do not invent a fifth size.
- Space in a rhythm of 8px. If two elements feel unrelated, they need more space, not a divider.
- Cards are for groups of related content, not for wrapping every sentence.

## Color

- Pick a surface, an ink, and one accent. Everything else is a tint of those three.
- Do not use purple-on-black “AI product” gradients, neon glassmorphism, or rainbow borders.
- Muted text must still pass contrast. Gray-on-gray is not a design system.
- Dark sections are allowed. Make them intentional, not the default because the mock looked “tech.”

## Layout

- Desktop: a readable measure (60–72 characters for prose). Do not stretch a landing paragraph across 1400px.
- Mobile: stack, then hide. Do not shrink a 12-column dashboard onto a phone.
- Empty, loading, and error states are part of the design. Ship them with the happy path.
- Prefer CSS Grid / Flex over magic margins. Alignment should be obvious in the markup.

## Components

- Use existing primitives (buttons, inputs, dialogs) before drawing new ones.
- Icon + heading + paragraph in a 3-column grid is a last resort, not a homepage.
- Images need real alt text or they are decorative and should be marked as such.
- Motion is short, spatial, and earned. No bounce on every hover.

## Copy inside the UI

- Labels are verbs or nouns a user already knows: Save, Export pack, Search kits.
- No placeholder marketing: “Welcome to your app,” “Unlock the future,” “Powered by AI.”
- If a sentence could appear on any SaaS site, rewrite it until it could only appear here.