frontend-design

Structure the hero with a badge, headline, subheading, and dual CTA buttons centered in a max-w-4xl container. Use a bold text-4xl to text-6xl headline, an 18px subhead in a tinted neutral, and a primary solid button paired with a secondary outlined button.

Use a grid with grid-cols-1 on mobile, sm:grid-cols-2, and lg:grid-cols-4 for four metric cards. Each card uses rounded-xl borders, p-6 padding, a text-3xl semibold value, and conditional green or red text for trend indicators.

Avoid defaulting to Inter or Arial fonts, pure gray neutrals, purple gradient backgrounds, cards nested inside cards, and bounce easing animations. Use tinted neutrals like slate or zinc, brand-derived colors, and ease-out transitions instead.

The design principles for spacing, typography, color, and hierarchy apply to any CSS approach. The code examples use Tailwind utility classes, but the same scales and patterns translate to plain CSS or other frameworks.

Body text must meet WCAG AA contrast of 4.5:1 and large text 3:1. Use semantic HTML, proper heading hierarchy, alt text, 44px minimum touch targets on mobile, and respect prefers-reduced-motion for animations.