Projeto 04: Hierarquia Tipográfica e Escala Modular 🔤

🎯 1. Contexto & Desafio Prático

A legibilidade e o escaneamento de uma interface dependem de uma hierarquia tipográfica consistente. Você criará a página de documentação tipográfica do sistema, combinando uma fonte primária (Sans-Serif) para UI e ajustando line-height e letter-spacing proporcionais.

📋 2. Requisitos Técnicos Obrigatórios

• R1 (Escala Modular): Definir a escala baseada em 16px com proporção Major Third (1.25): Display (39px), H1 (31px), H2 (25px), H3 (20px), Body (16px), Small (13px), Caption (10px).
• R2 (Altura de Linha / Line Height): Ajustar line-height proporcional: 120% para títulos grandes e 150% para parágrafos de leitura contínua.
• R3 (Estilos de Texto no Figma): Cadastrar todos os níveis no painel de Text Styles com notação semântica: Heading/H1, Body/Regular, Body/Bold, Caption.
• R4 (Tela de Aplicação Prática): Projetar um artigo de notícias mobile demonstrando o contraste harmônico entre os estilos criados.

📐 3. Diagrama Conceitual & Fluxo Visual

graph TD
    Scale["Escala Base: 16px (Major Third 1.25)"] --> H1["H1: 31px (Line Height 120%)"]
    Scale --> H2["H2: 25px (Line Height 125%)"]
    Scale --> H3["H3: 20px (Line Height 130%)"]
    Scale --> Body["Body: 16px (Line Height 150%)"]
    Scale --> Small["Small: 13px (Line Height 140%)"]
    style Scale fill:#e1f5fe,stroke:#01579b
    style H1 fill:#fff3e0,stroke:#e65100
    style Body fill:#e8f5e9,stroke:#2e7d32
    style Small fill:#f3e5f5,stroke:#7b1fa2

💻 4. Especificação Técnica & Código de Referência

// tokens_tipografia.txt
TOKENS TIPOGRÁFICOS:
- font-family: 'Inter', sans-serif
- text-display: 39px / line-height: 48px / weight: 700
- text-h1: 31px / line-height: 38px / weight: 700
- text-h2: 25px / line-height: 32px / weight: 600
- text-h3: 20px / line-height: 26px / weight: 600
- text-body: 16px / line-height: 24px / weight: 400
- text-caption: 12px / line-height: 16px / weight: 500

📦 5. Critérios de Avaliação e Entrega

1. Mínimo de 6 Text Styles cadastrados no painel do Figma.
2. Tela de leitura (artigo de blog ou notícias) aplicando a hierarquia.
3. Contraste claro e ausência de textos sem line-height ajustado.