ROADMAP

/ ├── Landing Page (Home) ← vende o projeto ├── /docs ← documentação completa │ ├── /getting-started │ ├── /guides │ ├── /api-reference │ └── /examples ├── /blog ← changelogs, artigos, roadmap ├── /community ← links, contributors, Discord └── /playground (opcional) ← demo interativo

┌─────────────────────────────────────────────┐ │ NAVBAR │ │ Logo | Docs | Blog | Community | ⭐ GitHub │ ├─────────────────────────────────────────────┤ │ │ │ 🔥 HERO SECTION │ │ │ │ [Badge: v1.0 — Just Released] │ │ │ │ Headline grande e bold │ │ "Build X without the Y headache" │ │ │ │ Sub-headline em tom conversacional │ │ explicando o que faz em 1-2 linhas │ │ │ │ [Get Started] [GitHub ⭐ 1.2k] │ │ │ │ ┌──────────────────────────────────┐ │ │ │ $ npm install seu-projeto │ │ │ │ // code snippet sexy │ │ │ └──────────────────────────────────┘ │ │ │ ├─────────────────────────────────────────────┤ │ │ │ ✨ FEATURES GRID (3-4 colunas) │ │ │ │ 🚀 Fast 🔒 Secure │ │ 🧩 Extensible 📦 Lightweight │ │ │ ├─────────────────────────────────────────────┤ │ │ │ 💻 CODE SHOWCASE │ │ Exemplo real lado a lado: │ │ "Antes (sem o projeto)" vs "Depois (com)" │ │ ou um code block interativo │ │ │ ├─────────────────────────────────────────────┤ │ │ │ 📊 SOCIAL PROOF / TRUST │ │ "Used by" logos (mesmo que poucos) │ │ GitHub stars | Downloads | Contributors │ │ │ ├─────────────────────────────────────────────┤ │ │ │ 🗺️ ROADMAP PREVIEW (opcional) │ │ Timeline visual do que vem por aí │ │ │ ├─────────────────────────────────────────────┤ │ │ │ 👥 COMMUNITY CTA │ │ "Join the community" │ │ [Discord] [GitHub Discussions] [Twitter] │ │ │ ├─────────────────────────────────────────────┤ │ FOOTER │ │ Links | License | "Made with ❤️ by [você]" │ └─────────────────────────────────────────────┘

┌──────────┬────────────────────────┬──────────┐ │ │ │ │ │ Sidebar │ Conteúdo Principal │ TOC │ │ (nav) │ │ (On this │ │ │ # Título │ page) │ │ Getting │ │ │ │ Started │ Texto, código, │ • Seção1 │ │ > Install│ exemplos │ • Seção2 │ │ > Config │ │ • Seção3 │ │ │ ┌──────────────┐ │ │ │ Guides │ │ code block │ │ │ │ > Auth │ │ com copy btn │ │ │ │ > Deploy │ └──────────────┘ │ │ │ │ │ │ │ API Ref │ [← Prev] [Next →] │ │ │ │ │ │ └──────────┴────────────────────────┴──────────┘

Componentes de conteúdo que você PRECISA:

1. 📋 Code blocks com syntax highlighting + botão de copiar
2. 💡 Callouts (tip, warning, danger, info)
3. 📑 Tabs (para mostrar variações: npm/yarn/pnpm)
4. 🔍 Search (Algolia DocSearch é grátis pra OSS)
5. 🌙 Dark/Light mode
6. ✏️ "Edit this page on GitHub" link
7. 📖 Breadcrumbs
8. ⏱️ Reading time (opcional mas legal)

📚 Documentation │ ├── 🚀 Getting Started │ ├── Introduction ← "O que é e por quê" │ ├── Installation ← 30 segundos pro primeiro uso │ ├── Quick Start ← Hello World funcional │ └── Project Structure ← Como se organiza │ ├── 📖 Guides │ ├── Core Concepts ← Mental model │ ├── [Feature A] │ ├── [Feature B] │ └── [Feature C] │ ├── 🔧 API Reference │ ├── Configuration │ ├── Methods │ └── Types/Interfaces │ ├── 📦 Examples │ ├── Basic │ ├── Advanced │ └── Real-world │ ├── 🔄 Migration Guide │ └── ❓ FAQ / Troubleshooting

BRAND SYSTEM │ ├── 🎯 Nome │ └── Curto, memorável, "googlável" │ Ex: Astro, Prisma, Vite, Bun │ ├── 🖼️ Logo │ ├── Ícone (favicon, GitHub, npm) │ ├── Logo completo (navbar) │ └── Variações (dark/light) │ ├── 🎨 Cores │ ├── Primary (1 cor forte e marcante) │ ├── Secondary │ ├── Background (dark mode first!) │ └── Accent (para CTAs e highlights) │ ├── ✍️ Tipografia │ ├── Headlines: Inter/Cal Sans/Geist (bold, impactante) │ ├── Body: Inter/Geist │ └── Code: JetBrains Mono/Fira Code │ ├── 🗣️ Tom de Voz │ ├── Técnico mas acessível │ ├── Confiante sem ser arrogante │ └── "Dev falando com dev" │ └── 🌟 Elementos Visuais ├── Gradients sutis ├── Glow effects (tendência atual) ├── Grid/dot patterns no background └── Ilustrações/ícones consistentes

:root {
/_ Background _/
--bg-primary: #0a0a0b; /_ quase preto _/
--bg-secondary: #111113; /_ cards _/
--bg-tertiary: #1a1a1f; /_ hover states _/

/_ Brand — ESCOLHA UMA identidade _/
--brand: #6366f1; /_ indigo (confiança, tech) _/
/_ ou _/
--brand: #22d3ee; /_ cyan (moderno, fresh) _/
/_ ou _/
--brand: #f97316; /_ orange (energia, bold) _/
/_ ou _/
--brand: #10b981; /_ emerald (growth, stable) _/

/_ Text _/
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #52525b;

/_ Accents _/
--glow: rgba(99, 102, 241, 0.15);
--border: rgba(255, 255, 255, 0.08);
}

Para o site/docs: │ ├── 🏗️ Framework │ ├── ⭐ Astro + Starlight ← MELHOR para docs OSS │ ├── Nextra (Next.js) ← Se já usa Next │ ├── VitePress ← Se o projeto é Vue │ └── Docusaurus ← Facebook, muito completo │ ├── 🎨 Styling │ ├── Tailwind CSS ← obvio │ └── + shadcn/ui ← componentes prontos │ ├── 📝 Conteúdo │ ├── MDX ← Markdown + Components │ └── Content Collections ← (Astro) │ ├── 🔍 Search │ └── Algolia DocSearch ← grátis para OSS │ ├── 🚀 Deploy │ ├── Vercel ← grátis para OSS │ ├── Cloudflare Pages ← grátis │ └── Netlify ← grátis │ └── 📊 Analytics └── Plausible/Umami ← privacy-friendly

PRÉ-LANÇAMENTO: ├── [ ] README.md impecável no GitHub ├── [ ] Logo + favicon ├── [ ] Landing page no ar ├── [ ] Docs: Getting Started funcional ├── [ ] Docs: pelo menos 1 guide completo ├── [ ] Quick Start em < 5 minutos ├── [ ] LICENSE definida ├── [ ] CONTRIBUTING.md ├── [ ] Code of Conduct ├── [ ] Link "Edit on GitHub" nas docs ├── [ ] Open Graph images (para preview social) ├── [ ] GitHub repo com description + topics + website link

PÓS-LANÇAMENTO: ├── [ ] Blog post de anúncio ├── [ ] Post no Twitter/X ├── [ ] Post no Reddit (r/webdev, r/programming, etc) ├── [ ] Dev.to / Hashnode article ├── [ ] Discord server ou GitHub Discussions └── [ ] Changelog automatizado

💡 Dica Final: A Regra do "5-30-300" text ⏱️ 5 segundos → O visitante entende O QUE É ⏱️ 30 segundos → Ele sabe POR QUE deveria usar ⏱️ 300 segundos → Ele tem o primeiro "Hello World" rodando Se o seu site consegue isso, você já está na frente de 90% dos projetos OSS.

Anti-Patterns to AVOID Design ❌ Purple gradients on white backgrounds (overused AI aesthetic) ❌ Centered hero sections with generic CTAs ❌ Generic card grids (Pinterest layout) ❌ Overuse of drop shadows ❌ Excessive animations (distraction)

Typography ❌ Inter/Roboto/Arial (boring defaults) ❌ Too many font families (> 3) ❌ Poor hierarchy (everything same size)

Color ❌ Low-contrast color schemes ❌ Rainbow gradients everywhere ❌ Using accent colors for large areas

Code ❌ Inline styles (use Tailwind classes) ❌ !important overrides ❌ Massive component files (> 300 lines) ❌ No component reusability

alidation Checklist Before considering the UI complete, verify:

Aesthetic is DISTINCTIVE (not generic AI slop) Typography uses specified fonts + scale Color system matches specification exactly Animations feel polished, not janky Performance budgets met Accessibility standards met (WCAG AA) Mobile responsive (all breakpoints tested) Dark theme consistent throughout Network graph is the MEMORABLE element Code is production-ready (no TODOs, proper error handling)