Shadcn UI Designer

Core Design Prompt

When designing any UI, apply this philosophy:

"Design a modern, clean UI following Shadcn principles: apply minimalism with ample white space and simple sans-serif typography; use strategic, subtle shadows for depth and hierarchy; ensure accessibility with high-contrast neutrals and scalable elements; provide beautiful defaults for buttons, cards, and forms that compose modularly; incorporate fluid, non-intrusive animations; maintain a professional palette of soft grays, whites, and minimal accents like purple; output as responsive, customizable React code with Tailwind CSS."

Design Rules

1. Typography Rule

• Limit to 2-3 font weights and sizes per screen
• Use Inter or system fonts for consistency

<h1 className="text-2xl font-semibold">Title</h1>
<p className="text-sm text-muted-foreground">Description</p>

2. Spacing Rule