frontend-aesthetics

Guide creation of refined, modern minimalist interfaces using React and Tailwind CSS. Focus on harmony, restraint, and intentional design choices.

## Design Philosophy

Before coding, establish a clear aesthetic direction:
- **Harmony**: Colors, spacing, and typography should feel balanced and unified
- **Restraint**: Every element must earn its place; remove until it breaks
- **Whitespace**: Generous breathing room creates elegance and focus
- **Consistency**: Repetition of patterns builds visual rhythm

## Color Harmony

Build palettes with intentional relationships:
- **Monochromatic**: Single hue with tonal variations (`slate-50` to `slate-900`)
- **Analogous**: Adjacent colors for subtle warmth (`blue-500`, `indigo-500`, `violet-500`)
- **Complementary accents**: One accent color used sparingly for emphasis

Avoid: Multiple competing accent colors, saturated backgrounds, harsh contrasts.

```tsx
// Harmonic palette with Tailwind
const colors = {
  background: 'bg-slate-50',
  surface: 'bg-white',
  text: 'text-slate-800',
  muted: 'text-slate-500',
  accent: 'text-indigo-600',
  border: 'border-slate-200',
}
```

## Typography

Minimal type scale with clear hierarchy:
- **One typeface**: System font stack or single Google Font (Inter, Geist, Satoshi)
- **Limited sizes**: 3-4 sizes maximum (`text-sm`, `text-base`, `text-lg`, `text-2xl`)
- **Weight for emphasis**: Use `font-medium` and `font-semibold` sparingly

## Spacing & Layout

Use Tailwind's spacing scale consistently:
- **Base unit**: `p-4` / `gap-4` as foundation
- **Section spacing**: `py-16` or `py-24` for major sections
- **Component padding**: `p-6` for cards, `px-4 py-2` for buttons
- **Consistent gaps**: Same gap values throughout a component

## Component Patterns

```tsx
// Clean card with harmonious styling
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
  <h3 className="text-lg font-semibold text-slate-900">Title</h3>
  <p className="mt-2 text-slate-600">Description