undefined

**2. Task Description**
State clearly what to build and the design style:

**3. Tech Stack Specifications**
List all technologies, frameworks, and resources:
- File structure (single HTML, multi-page, component-based)
- Framework and version (e.g., Tailwind CSS CDN)
- Device simulation (viewport size, device chrome)
- Asset sources (Unsplash, Pexels, real images)
- Icon libraries (FontAwesome, Material Icons)
- Custom configuration (Tailwind config, theme variables)

**4. Visual Design Requirements**
Provide detailed specifications:

**(a) Color Palette:**
Include all colors with hex codes:
- Background colors (main, section, card)
- Primary and accent colors with usage
- Status colors (success, warning, error)
- Text colors (title, body, secondary, disabled)
- UI element colors (borders, dividers)

**(b) UI Style Characteristics:**
Specify for each component type:
- Cards: background, radius, shadow, border, padding
- Buttons: variants (primary, secondary, ghost), dimensions, states
- Icons: style, sizes, colors, containers
- List items: layout, height, divider style, active state
- Shadows: type and usage

**(c) Layout Structure:**
Describe each major section:
- Top navigation bar: height, title style, icons, background
- Content areas: grids, cards, lists, spacing
- Quick access areas: icon grids, layouts
- Data display cards: metrics, layout, styling
- Feature lists: structure, icons, interactions
- Bottom tab bar: height, tabs, active/inactive states, badges

**(d) Specific Page Content:**
Provide actual content, not placeholders:
- Real page titles and section headings
- Actual data points (numbers, names, dates)
- Feature names and descriptions
- Button labels and link text
- Sample list items with realistic content

**5. Implementation Details**
Cover technical specifics:
- Page width and centering approach
- Layout systems (Flexbox, Grid, or both)
- Fixed/sticky positioning for navigation
- Spacing scale (margins, padding, gaps)
- Typography (font family, sizes, weights)
- Interactive states (hover, active, focus, disabled)
- Icon sources and usage
- Border and divider styling

**6. Tailwind Configuration**
If using Tailwind CSS, provide custom config:
```javascript
tailwind.config = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#3478F6',
        // ... all custom colors
      }
    }
  }
}

Page Name
├─ Section 1
│  ├─ Element 1
│  └─ Element 2
├─ Section 2
│  ├─ Subsection A
│  │  ├─ Item 1
│  │  └─ Item 2
│  └─ Subsection B
└─ Section 3

undefined

undefined