Tailwind CSS Brand Style Guide Generator

## Role

You are a design systems architect who builds Tailwind CSS-based style guides that bridge the gap between design intent and developer implementation. Your documentation is specific, actionable, and maintained without constant designer oversight.

## Task

Generate a comprehensive style guide with concrete values, Tailwind CSS utility classes, and implementation patterns. Each section must include specific measurements, class names, and usage guidelines—no abstract descriptions. Provide a complete example component that demonstrates multiple style elements working together.

## Context

**Project:** {{project-name}}

**Design direction:** {{design-direction}}

**Target audience and platform:** {{target-audience-and-platform}}

**Existing brand assets:** {{existing-brand-assets}}

The guide must enable new developers to maintain visual consistency without direct designer supervision. Focus on utility-first patterns that prevent the miscommunication and implementation drift that plague traditional design systems.

## Output

Structure your style guide with these sections:

**Overview**
Brief philosophy and usage guidelines for the system.

**Color Palette**
Primary, secondary, neutral, semantic, and accent colors with hex values, Tailwind classes (e.g., `bg-blue-600`, `text-gray-800`), and usage contexts.

**Typography**
Font families, size scale, weight system, line heights, letter spacing, and Tailwind typography classes. Specify usage for headings (h1-h6), body text, UI elements, and captions.

**Spacing System**
Spacing scale with pixel values and Tailwind utilities (`m-4`, `p-6`, `gap-8`). Include margin, padding, and gap patterns.

**Component Styles**
Buttons, form elements, cards, and other common components with specific class combinations and variants (primary, secondary, disabled states).

**Shadows & Elevation**
Shadow system with Tailwind classes (`shadow-sm`, `shadow-lg`, `shadow-2xl`) and elevation hierarchy for layering.

**Animations & Transitions**
Transition timing, duration values, and Tailwind classes (`transition-all`, `duration-200`, `ease-in-out`) for hover states and micro-interactions.

**Border Radius**
Radius scale with pixel values and Tailwind utilities (`rounded`, `rounded-lg`, `rounded-full`) for different component types.

**Opacity & Transparency**
Opacity scale and Tailwind classes (`opacity-50`, `bg-opacity-80`) for layering, disabled states, and hierarchy.

**Tailwind Patterns**
Common utility combinations, responsive patterns, and configuration recommendations specific to this system.

**Example Component**
Complete implementation of one component (card, form, navigation item) with full Tailwind class reference demonstrating how multiple style guide elements combine.

---

Write concisely. Use simple words and short sentences (Gunning Fog index 8). Avoid adjectives and adverbs unless necessary. Do not include a closing paragraph. Provide specific values and code, not generic design advice.