# Styling Guidelines

To maintain consistency and quality across templates, follow these styling guidelines:

### Typography

Use appropriate font sizes for different screen sizes

```html
'text-2xl md:text-4xl lg:text-6xl'
```

Maintain readable line heights

```html
'leading-relaxed md:leading-loose'
```

### Spacing

Use consistent spacing units

```html
'space-y-4 md:space-y-6 lg:space-y-8'
```

Maintain proper padding for containers

```html
'p-4 md:p-6 lg:p-8'
```

### Colors

Use the Curtain color palette

```html
'text-curtain-500'
'bg-curtain-900'
```

Maintain proper contrast ratios

```html
'text-white/90'  // High contrast
'text-white/60'  // Medium contrast
```

### Responsiveness

Design mobile-first

```html
'text-base md:text-lg lg:text-xl'
```

Use appropriate breakpoints

```html
'mx-4 md:mx-8 lg:mx-auto'
```

### Animations

Keep animations subtle

```html
'transition-all duration-300'
```

Consider reduced motion preferences

```css
'@media (prefers-reduced-motion: reduce) { ... }'
```

Remember, a good template should:

* Be easily readable
* Work across all devices
* Match your brand identity
* Load quickly
* Be accessible
