# Design Analysis Checklist

Checklist completo para extrair o design system de qualquer site alvo.
Usar com WebFetch + inferencia visual quando CSS nao estiver acessivel.

## 1. FONTES (Typography)

### O que extrair:
- [ ] Font family principal (headlines)
- [ ] Font family secundaria (body, se diferente)
- [ ] Font weights usados (100-900)
- [ ] Font sizes por elemento:
  - Hero headline: tipicamente 48-72px desktop, 32-40px mobile
  - Section headline: 32-48px desktop, 24-32px mobile
  - Subheadline: 20-24px
  - Body text: 16-18px
  - Small/caption: 12-14px
  - Button text: 14-16px
- [ ] Line-height (1.2 headlines, 1.5-1.7 body)
- [ ] Letter-spacing (tracking)
- [ ] Text transform (uppercase, capitalize, none)

### Fontes mais comuns em landing pages BR premium:
| Fonte | Estilo | Quando inferir |
|-------|--------|---------------|
| Inter | Sans-serif geometrica | Default seguro, clean |
| Plus Jakarta Sans | Sans-serif moderna | Headlines bold, tech |
| DM Sans | Sans-serif amigavel | Numeros, precos |
| Satoshi | Sans-serif premium | Design agencies |
| Poppins | Sans-serif arredondada | Marketing BR mainstream |
| Montserrat | Sans-serif forte | Headlines impactantes |
| Space Grotesk | Sans-serif tecnica | SaaS, tech |
| Sora | Sans-serif futurista | Startups, inovacao |

### Como inferir quando CSS nao esta acessivel:
- Headlines muito bold + geometricas = Inter, DM Sans, ou Plus Jakarta Sans
- Arredondadas e amigaveis = Poppins ou Nunito
- Tecnicas e angulares = Space Grotesk ou JetBrains Mono
- Premium brasileira = Inter + DM Sans e a aposta mais segura

## 2. CORES (Color Palette)

### O que extrair:
- [ ] Background primario (pagina)
- [ ] Background secundario (secoes alternadas)
- [ ] Background terciario (cards, destaques)
- [ ] Texto primario (headlines)
- [ ] Texto secundario (body, descricoes)
- [ ] Texto terciario (captions, muted)
- [ ] Accent primario (CTA principal)
- [ ] Accent hover (CTA hover state)
- [ ] Accent secundario (badges, tags)
- [ ] Success (verde — validacao)
- [ ] Error/Urgencia (vermelho — precos riscados, alertas)
- [ ] Border color (divisores, card borders)
- [ ] Gradientes (direcao, cores, onde usados)

### Padroes comuns por tipo de pagina:
| Tipo | Background | Accent | Vibe |
|------|-----------|--------|------|
| Sales page BR | white + gray-50 | orange/amber | Urgencia controlada |
| SaaS landing | white + slate-50 | blue/violet | Profissional |
| Course/mentoria | white + warm-50 | violet/pink | Premium acessivel |
| Agency | dark + gray-900 | cyan/lime | Sofisticado |
| E-commerce | white | red/orange | Conversao direta |

## 3. FOTOS (Photo Style)

### O que extrair:
- [ ] Tipo de foto (headshot, produto, lifestyle, cutout, ilustracao)
- [ ] Tratamento (recortada, com fundo, com sombra, com borda)
- [ ] Border-radius (rounded-none, rounded-lg, rounded-xl, rounded-full)
- [ ] Sombra (none, shadow-md, shadow-lg, shadow-xl)
- [ ] Borda (none, border-2 border-white, border-4)
- [ ] Filtro (none, grayscale, sepia, brightness, contrast)
- [ ] Overlay (none, gradient overlay, color overlay)
- [ ] Aspect ratio (1:1 square, 3:4 portrait, 16:9 landscape)
- [ ] Tamanho de avatar (24px, 32px, 40px, 48px, 64px)

### Padroes por contexto:
| Contexto | Tratamento tipico |
|----------|------------------|
| Speaker/instructor | Cutout ou headshot profissional, rounded-xl ou rounded-full |
| Testimonials | Circular (rounded-full), 40-48px, border-2 border-white |
| Produtos | Fundo limpo, shadow-lg, rounded-xl |
| Lifestyle | Full-width, rounded-none ou rounded-2xl, sem filtro |
| Cases/Results | Screenshot com shadow-2xl e rounded-xl |

## 4. BOTOES (Buttons)

### O que extrair:
- [ ] Border-radius (rounded-md, rounded-lg, rounded-xl, rounded-full)
- [ ] Padding (px-4 py-2 small, px-6 py-3 medium, px-8 py-4 large)
- [ ] Cor primaria (solid, gradient)
- [ ] Cor hover (darker shade, scale, shadow increase)
- [ ] Sombra (none, shadow-md, shadow-lg, colored shadow)
- [ ] Texto (weight, size, transform, color)
- [ ] Icone (none, arrow-right, cart, chevron)
- [ ] Variantes (primary, secondary/outline, ghost)

### Padroes comuns:
| Estilo | Classes Tailwind |
|--------|-----------------|
| Pill CTA (sales page) | `rounded-full px-8 py-4 bg-orange-500 text-white font-semibold shadow-lg` |
| Rounded CTA | `rounded-xl px-6 py-3 bg-violet-600 text-white font-medium` |
| Outline | `rounded-lg px-6 py-3 border-2 border-gray-300 text-gray-700` |
| Ghost | `px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100` |

## 5. CARDS

### O que extrair:
- [ ] Border-radius (rounded-lg, rounded-xl, rounded-2xl, rounded-3xl)
- [ ] Background (white, gray-50, gradient)
- [ ] Border (none, border border-gray-100, border border-gray-200)
- [ ] Sombra (shadow-sm, shadow-md, shadow-lg, shadow-xl)
- [ ] Padding (p-4, p-6, p-8, p-10, p-12)
- [ ] Hover effect (y-lift, scale, shadow-increase, border-color-change)

## 6. LAYOUT

### O que extrair:
- [ ] Max-width do container (max-w-5xl, max-w-6xl, max-w-7xl)
- [ ] Section padding vertical (py-12, py-16, py-20, py-24)
- [ ] Section padding horizontal (px-4, px-6, px-8)
- [ ] Grid columns (1 mobile, 2 tablet, 3 desktop)
- [ ] Gap entre elementos (gap-4, gap-6, gap-8, gap-12)
- [ ] Alinhamento (text-center, text-left, mixed)
- [ ] Dividers entre secoes (border, gradient, none)

## 7. ANIMACOES

### O que detectar:
- [ ] Scroll fade-in (elementos aparecem ao rolar)
- [ ] Stagger (elementos aparecem em sequencia)
- [ ] Counter/number animation (numeros contam ao entrar na viewport)
- [ ] Carousel/slider (testimonials, cases)
- [ ] Hover lift (cards sobem ao hover)
- [ ] Parallax (elementos movem em velocidades diferentes)
- [ ] Text reveal (texto aparece letra por letra ou palavra por palavra)
- [ ] Bar/chart animation (barras crescem de 0 ao valor)
- [ ] Accordion animation (FAQ expande com height transition)
- [ ] Smooth scroll (Lenis ou CSS scroll-behavior)

## 8. VIBE / AESTHETIC

### Classificar em:
- [ ] **Temperatura:** Quente (orange, red, yellow) vs Fria (blue, violet, cyan)
- [ ] **Peso:** Leve (airy, whitespace) vs Denso (packed, content-heavy)
- [ ] **Formalidade:** Corporativo vs Casual vs Premium acessivel
- [ ] **Urgencia:** Alta (countdown, badges, scarcity) vs Baixa (sereno, informativo)
- [ ] **Dark/Light:** Dark mode, light mode, ou mixed
- [ ] **Referencia mais proxima:**
  - Apple-like minimalism
  - Stripe-style tech elegance
  - Sales page BR premium (Orbyka, V4, Empiricus)
  - SaaS landing (Linear, Vercel)
  - Agency portfolio (Awwwards style)
