Manual da Marca · Iuvenis 2026

Design System &
Materiais Digitais

Referência completa para criar materiais visuais da Iuvenis com consistência, qualidade e identidade institucional.

0
Cores no sistema
0+
Componentes HTML
0
Animações ativas
0
Guias publicados
Poppins
#005F8D
#011926
A89883
Scroll Reveal
Gradiente Animado
SVG Icons
Netlify Deploy
College List
repeat(3,1fr)
repeat(4,1fr)
Orbs Flutuantes
Web Speech API
Poppins
#005F8D
#011926
A89883
Scroll Reveal
Gradiente Animado
SVG Icons
Netlify Deploy
College List
repeat(3,1fr)
repeat(4,1fr)
Orbs Flutuantes
Web Speech API
01Design System

Identidade Visual

Paleta de cores, tipografia e logo. Use exatamente estes valores em todos os materiais digitais da Iuvenis.

Paleta de Cores

Navy
#011926
Hero · CTA · Footer · Títulos
Mid (Primário)
#005F8D
Accent · Ícones · Destaques · Botões
Light
#1B94C4
Match cards · Links · Hover
Sky
#5BADCC
Hero badge · Ticker · Em tags
Warm (Dourado)
#A89883
Callout especial · Safety cards
Page
#f2f7fb
Fundo da página
Alt
#e8f1f8
Seções alternadas (.bg-alt)
Text
#2e3e50
Corpo de texto principal

Tipografia

H1 — Hero
Iuvenis 2026
Poppins 900 · clamp(38px, 6.5vw, 72px) · line-height 1.06
H2 — Seção
Título da Seção
Poppins 800 · clamp(28px, 3.8vw, 46px) · line-height 1.12
Subtítulo (sec-lead)
Subtítulo explicativo da seção, máximo duas linhas, descritivo e direto.
Poppins 300 · 17px · color --muted · line-height 1.7
Corpo de texto
Texto de parágrafo normal usado nas seções de conteúdo. Poppins regular com espaçamento generoso para leitura confortável.
Poppins 400 · 16px · color --text · line-height 1.75
Label / Tag
CATEGORIA · FUNDAMENTOS
Poppins 700–800 · 10–12px · uppercase · letter-spacing 2–3px

Logo

Versão Branca — fundos escuros (navbar, footer, hero)
Iuvenis

Navbar: height 32px

Iuvenis

Footer: height 28px, opacity 0.6

Caminho do arquivo: G:/Meu Drive/iuvenis-vault/empresa/.../RGB/PNG/HORIZONTAL - Mono - Branco.png
A logo é embutida em base64 no build script — o HTML final não depende de arquivo externo.

02HTML

Componentes padrão

Todos os blocos de construção dos guias. Cada componente tem classe CSS própria — sempre reutilizar, nunca recriar.

Cards (card-grid — sempre 3 colunas)

Card padrão

Fundo branco, sombra sutil, borda leve, hover com elevação. Sempre grupos de 3 ou 6.

Ícone SVG

Container 50×50px, fundo azul 8% opacity, border-radius 12px. Nunca emojis coloridos.

Grid fixo

Sempre repeat(3,1fr) — nunca auto-fit. Garante alinhamento 3+3 em qualquer tela.

Callouts

Callout azul (padrão): Para regras, avisos importantes e destaques de conteúdo. Border-left azul, fundo azul 6% opacity.

Callout dourado (warm): Para dicas especiais da Maria, regras de ouro e destaques estratégicos. Border-left e strong em #A89883.

Steps (passos numerados)

Componente .steps
1

Título do passo

Descrição do que fazer neste passo. Fundo azul no número, borda inferior separadora.

2

Próximo passo

Continua a sequência. Último step não tem borda inferior.

FAQ Accordion

Clique em qualquer pergunta para expandir a resposta. O ícone "+" roda 45° virando "×". Só uma pergunta abre por vez. Implementado com JavaScript puro — sem dependências.

Entre 6 e 10 perguntas. Cubra as dúvidas mais frequentes do público-alvo — no caso dos guias Iuvenis, estudantes brasileiros iniciando o processo de candidatura internacional.

Dicas (tips-grid — sempre 3 colunas)

Regra 01

Border-left 3px azul, sem borda superior, border-radius apenas no lado direito.

Regra 02

Sempre múltiplos de 3 (6, 9, 12 itens) para grid perfeito sem linha incompleta.

Regra 03

Fundo branco com sombra sutil. A cor dourada pode ser usada variando o border-left.

Sites / Ferramentas (sites-grid — sempre 4 colunas)

Categoria

Nome do Site

Breve descrição em 2 linhas. Link externo sempre com target="_blank" rel="noopener".

dominio.com ↗
Calculadora

Ferramenta

Sites sem URL externa (planilhas, calculadoras internas) não têm tag anchor.

Google Sheets / Notion
Dados

Dados Oficiais

Sempre múltiplos de 4 (8, 12, 16 itens) para grid 4×N perfeitamente alinhado.

site.com/caminho ↗
Referência

Referência

Hover: elevação de -5px e sombra mais intensa. Mesmo padrão dos cards.

site.com ↗
03Motion

Animações obrigatórias

Seis efeitos que estão presentes em todos os guias Iuvenis. Não são opcionais — fazem parte da identidade dos materiais.

Gradiente animado

Hero e CTA: gradShift 14s ease infinite. Gradiente -45° entre navy, dark, mid e dark. Background-size 400%.

Orbs flutuantes

3 orbs no hero: floatOrb 10s infinite. translateY -40px + scale 1.08 no peak. filter blur 90px.

Ticker rolando

Faixa navy abaixo do hero: tickerRun 35s linear infinite. Duplicar conteúdo para loop contínuo. Pausa no hover.

Scroll reveal

IntersectionObserver: classe .reveal → .in. translateY 32px → 0, opacity 0 → 1. Delays: -d1 (0.1s), -d2 (0.2s).

Contador animado

Stats do hero contam de 0 ao valor com easing cúbico via requestAnimationFrame. Ativa no load da página.

Banda gradiente

Separador antes do CTA: gradSlide 5s linear infinite. Height 6px. Sequência: dark → mid → light → sky → light → mid → dark.

Regra geral: As animações são elegantes e sutis — não chamativas. Efeitos de fundo (gradiente, orbs) reforçam profundidade. Animações de entrada (reveal, fadeUp) guiam o olhar. O ticker mantém o ritmo visual. Nunca adicionar animações que distraem do conteúdo.

04Iconografia

Ícones SVG de linha

Regra absoluta: nunca emojis coloridos. Sempre SVG de linha monocromático azul. Identidade institucional, não WhatsApp.

Stroke, não fill

Sempre fill="none" + stroke="currentColor". A cor vem do CSS via color: var(--mid).

Stroke-width 1.8

Espessura padrão 1.8 em todos os ícones. Garante consistência visual mesmo em tamanhos diferentes (16px a 28px).

Fontes: Heroicons / Lucide

Ambas são stroke-based e gratuitas. Buscar o path SVG e passar para a função ic() no script.

Como adicionar um novo ícone

# 1. Buscar o path em heroicons.com ou lucide.dev # 2. Adicionar ao dicionário ICONS no build script: ICONS = { "ICO_NOME": ic('<path d="M12 2..."/>'), ... } # 3. Usar no HTML como placeholder: # <div class="card-icon">ICO_NOME</div> # 4. O loop no final do script substitui automaticamente: for emoji, svg in ICONS.items(): html = html.replace(emoji, svg)

Galeria de ícones disponíveis

05Processo

Como criar um novo guia

Passo a passo completo desde a pesquisa de conteúdo até a publicação no Netlify com URL personalizada.

Regra da Maria: Sempre pesquisar antes de escrever. Buscar vídeos no YouTube (canais de top universities, College Board), guias oficiais de Harvard/MIT/Yale e sites especializados verificados. Nunca inventar dados sobre universidades, bolsas ou prazos.

1

Pesquisa de conteúdo

Buscar vídeos no YouTube sobre o tema + guias de universidades oficiais + sites especializados (collegevine.com, collegeessayguy.com, toptieradmissions.com). Consultar o vault em G:/Meu Drive/iuvenis-vault/oportunidades/ para dados atualizados.

2

Planejar as seções

Definir 10–11 seções seguindo a estrutura padrão (fundamentos → conceitos → dados → critérios → estratégia → lista curada → detalhes → ferramentas → dicas → cronograma → FAQ). Planejar número de cards em múltiplos de 3 e sites em múltiplos de 4.

3

Criar o build script

Duplicar C:/Users/maria/build_guide3.py → renomear para build_guia-[tema].py. Alterar OUT_PATH para o novo arquivo HTML. Manter todo o CSS, JavaScript e estrutura base.

4

Escrever conteúdo e AUDIO_TEXT

Substituir o conteúdo HTML de cada seção. Reescrever a constante AUDIO_TEXT com o texto narrado do novo guia para o player podcast. Adicionar novos ícones ao dicionário ICONS se necessário.

5

Gerar e revisar o HTML

Rodar py -3 build_guia-[tema].py. Abrir o HTML no navegador e verificar: grids alinhados, ícones sem emojis coloridos, links funcionando, responsivo no mobile.

6

Publicar no Netlify com URL personalizada

Deletar netlify_site_id.txt (garante novo site). Editar HTML no netlify_deploy.py para o novo arquivo. Rodar o deploy. Após publicar, renomear o site via API para guia-[tema]-iuvenis → URL final: https://guia-[tema]-iuvenis.netlify.app

7

Documentar no vault e na memória

Criar guia-[tema]-documentacao.md no Obsidian com URL, arquivos e instruções de atualização. Atualizar a tabela de guias publicados neste manual. Atualizar reference_guias_html_iuvenis.md na memória do Claude.

Checklist de qualidade

Visual

Todos os grids com colunas fixas (nenhum auto-fit). Nenhum emoji colorido — apenas SVGs azuis de linha. Logo carregando corretamente.

Conteúdo

Todos os dados verificados em fontes oficiais. Links externos com target="_blank" rel="noopener". Stats do hero com valores reais.

Técnico

AUDIO_TEXT atualizado para o tema. Testado no mobile (1 coluna ≤600px). Title e meta description corretos.

06Sobre a Iuvenis

A plataforma e o método

Contexto essencial para quem cria materiais para a Iuvenis entender quem é o público, qual é a proposta e como a marca fala.

O que é a Iuvenis

Ecossistema educacional — não agência de intercâmbio. Método + comunidade + curadoria de oportunidades para estudantes brasileiros conquistarem bolsas de até 100% no exterior.

Fundadora

Maria Lucia Rosiak — saiu do interior do Mato Grosso, aprendeu inglês sozinha e conquistou +20 aprovações internacionais (EUA, Japão, Itália). Prova viva de que origem não define destino.

Posicionamento central

“Você não precisa ser nota 10 nem filho de rico. Precisa do método e do ambiente certo.” Aspiracional mas acessível — intercâmbio não é para elite.

Público-alvo

Quem é

Estudantes brasileiros do Ensino Médio à pós-graduação. Qualquer área, nível de inglês e região do Brasil. Sem necessidade de alto poder aquisitivo.

O que quer

Estudar fora com bolsa que cubra o máximo possível. Busca orientação confiável, método claro e comunidade de pessoas que já conseguiram.

Objeção principal

“Intercâmbio é para quem tem dinheiro / é muito difícil / não é para mim.” A Iuvenis existe para desconstruir exatamente isso com prova real.

O que a plataforma oferece

RecursoDescriçãoPlano
200+ horas de aulas50+ módulos do zero ao avançado: mindset, candidatura, essays, bolsas por paísMensal + Anual
IuNews quinzenalCuradoria das 10 melhores oportunidades abertas no momentoMensal + Anual
Banco de Oportunidades+40 tipos de intercâmbio e bolsas, todas as idades e áreasMensal + Anual
Plantão ao VivoEncontros mensais com mentores e aprovados em Yale, Stanford e outrasMensal + Anual
Templates prontosCV internacional, essays, cartas de recomendação de alto impactoMensal + Anual
Reunião individualOnboarding 1:1 com Maria Lucia RosiakApenas Anual

Preços

Plano Mensal

R$ 47/mês
Acesso completo, sem compromisso. Cancele quando quiser. Menos de R$2 por dia.

Plano Anual

R$ 87,57/mês
12 parcelas. Inclui reunião individual com a Maria. Economiza vs. mensal.

ROI da mentoria

Uma bolsa no exterior vale R$ 80.000–500.000 em educação + custo de vida. O plano anual completo custa R$ 1.050,84.

Tom de voz nos materiais

Como soamos

Amiga que já foi lá. Direta, motivadora, inclusiva. Real — urgência genuína com prazos reais. Fala como pessoa, não como empresa.

Como NÃO soamos

Corporativo, frio, elitista. Sem frases como "para os melhores alunos" ou "exclusivo para selecionados". Sem promessas vagas sem substância.

Canais ativos

Instagram @iuvenisoficial (49k), Threads, WhatsApp Business, Comunidade (TheMembers), Site iuvenisoficial.com/comunidade.

07Publicados

Guias ativos

Todos os guias HTML publicados da Iuvenis. Acesse, compartilhe e use como referência de padrão visual e editorial para novos materiais.

Publicado · 2026

Guia College List

50 universidades com bolsa integral, Dream/Match/Safety, framework 6 Ps, cronograma e FAQ completo.

guia-college-list-iuvenis.netlify.app ↗
Publicado · 2026

Guia Oportunidades na ONU

Empregos, estágios, voluntariado, YPP, agências especializadas, salários e ferramentas de candidatura na ONU.

guia-onu-iuvenis.netlify.app ↗
Em breve

Guia SAT/ACT

Estratégia de preparação para testes padronizados, cronograma de estudos e recursos para brasileiros.

Em desenvolvimento
Em breve

Guia de Essays

Como escrever o Personal Statement e essays suplementares para top universities americanas.

Em desenvolvimento

Documentação técnica: Cada guia tem arquivo .md em G:/Meu Drive/iuvenis-vault/conteudo/ com URL, arquivos e instruções de atualização. Referência de criação: como-criar-guias-iuvenis.md na mesma pasta.

Pronto para criar o próximo guia Iuvenis?

Acesse o guia de referência completo no vault ou entre na Comunidade Iuvenis para conectar estudantes ao conteúdo que você está criando.

Comunidade Iuvenis

Fundado por Maria Lucia Rosiak · @iuvenisoficial