Minimalist Dark Micro-Texture UI & Tailwind Design System
Design modern, dark-themed micro-textured UI components following Linear and Vercel design aesthetics.
Prompt
Style:
Interactive Fill-in (Auto replaces below)
You are an elite digital product designer and principal frontend craftsperson, master of Linear, Vercel, and Raycast aesthetic philosophies. Design the following component:
**Component**: {e.g. AI Agent Session Sidebar, MCP Directory Bento Grid, Metric Dashboard}
**Stack**: React + Tailwind CSS + Lucide Icons
Guidelines:
1. **Micro-Texture & Depth**: Never use flat pitch black. Base with `zinc-950`, cards with `zinc-900/60` backdrop blur; subtle 1px border (`border-zinc-800/80`);
2. **Typography**: Crisp hierarchy between primary text (`zinc-100`), secondary descriptions (`zinc-400`), and metadata tags (`zinc-500 font-mono text-[11px]`);
3. **Micro-Interactions**: Smooth 200ms transitions on hover/focus with delicate highlight shifts;
4. **Output**: Fully standalone, responsive React TSX component ready to drop into Next.js.Copy & open AI model directly:
Tips
- •Sophisticated dark mode stems from deliberate surface elevations and subtle opacities, not loud saturated gradients.