Styling Guidelines

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

Typography

Use appropriate font sizes for different screen sizes

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

Maintain readable line heights

'leading-relaxed md:leading-loose'

Spacing

Use consistent spacing units

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

Maintain proper padding for containers

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

Colors

Use the Curtain color palette

'text-curtain-500'
'bg-curtain-900'

Maintain proper contrast ratios

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

Responsiveness

Design mobile-first

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

Use appropriate breakpoints

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

Animations

Keep animations subtle

'transition-all duration-300'

Consider reduced motion preferences

'@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