Enterprise Design System

Component Structure

---
// Astro Component Template
import BaseLayout from '../layouts/BaseLayout.astro';
import PremiumButton from '../components/ui/PremiumButton.astro';

export interface Props {
  variant?: 'default' | 'premium';
  title: string;
}

const { variant = 'default', title } = Astro.props;
---

<section class="enterprise-section">
  <h2>{title}</h2>
  <slot />
</section>

<style>
  .enterprise-section {
    @apply px-4 py-16 bg-gradient-to-br from-gray-50 to-white;
  }
</style>

CSS Architecture

• Use Tailwind utilities first
• Component-specific styles in style tags
• CSS custom properties for dynamic values
• BEM naming for custom classes

Performance Guidelines

• Lazy load images below the fold
• Use responsive images with srcset
• Implement critical CSS inlining
• Minimize JavaScript bundle size
• Use Astro's static site generation

Accessibility Checklist

• WCAG 2.1 AA compliance minimum
• Semantic HTML structure
• Proper ARIA labels and roles
• Keyboard navigation support
• Focus indicators visible
• Color contrast ratios met