Layout guide

Identidade, fundamentos e componentes para construir um portfólio consistente.

Sistema em definição. A estrutura e a regra 60/30/10 foram solicitadas. As cores, a tipografia e os exemplos abaixo são provisórios, herdados da documentação inicial. A identidade final depende das suas respostas.

Marca e direção

O que já sabemos

Uma landing page de portfólio em português, com projetos reais e contato claro. Cada decisão visual será documentada com sua finalidade e regra de uso.

O que vamos definir

Especialidade, público, proposta de valor, diferenciais, personalidade, tom de voz e conceito criativo. “Filipe Ronald” é o nome presente no projeto; seu uso como marca ainda precisa ser confirmado.

Cores e proporção

60% de base, 30% de estrutura e 10% de destaque. Uma referência para a composição da página, sem exigir uma divisão matemática em cada seção.

60%Base

30%Estrutura

10%Acento

Paleta técnica provisória
Token	Valor	Aplicação
`--color-bg`	`#fafaf9`	Base dominante · referência de 60%
`--color-surface`	`#ffffff`	Superfícies de apoio
`--color-text`	`#18181b`	Texto e estrutura · referência de 30%
`--color-muted`	`#52525b`	Texto de apoio
`--color-accent`	`#1d4ed8`	Ações e pontos focais · referência de 10%
`--color-accent-hover`	`#1e40af`	Ação sob o ponteiro
`--color-on-accent`	`#ffffff`	Texto sobre o acento
`--color-border`	`#d4d4d8`	Bordas decorativas
`--color-control-border`	`#71717a`	Identificação de controles

Tipografia

Segoe UI com Arial e sans-serif como alternativas. Uma família do sistema, sem download de fontes nesta etapa. Pesos 400, 500, 600 e 700 conforme a hierarquia.

Forma e função.

Uma hierarquia que orienta

Texto de exemplo para avaliar leitura, ritmo e contraste. A copy da landing page será escrita depois da definição do posicionamento.

Texto de apoio continua legível e contém informação complementar.

Título principal: 2–4 rem; títulos de seção: 1,5–2 rem.
Subtítulos: 1,25 rem; corpo: 1 rem; metadados: 0,875 rem.
Entrelinha de corpo: 1,5. Limite de leitura: 65 caracteres.

Layout e ritmo

Grid responsivo

Conteúdo até 72 rem. Margens iguais de 24 px no desktop e 16 px no celular. Uma coluna como base; duas quando houver espaço para leitura confortável.

Raios de 4 e 8 px. Superfícies se distinguem por tom, sem sombra em repouso. Ícones, quando necessários, devem vir de uma única família e ter rótulo acessível.

Escala de espaços

4 px

8 px

12 px

16 px

24 px

32 px

48 px

64 px

96 px

Componentes e estados

Âncoras navegam; botões executam ações. Estes links demonstram a aparência das ações usando destinos reais dentro do guia.

Revisar definições Ver estrutura de conteúdo

Regras de interação

Links e ações têm estado normal, hover, foco visível e ativo. Loading, erro, sucesso e desabilitado serão especificados apenas nos componentes que precisarem deles. O foco não pode ficar oculto; conteúdo essencial deve funcionar sem hover.

Projetos e navegação

Projetos apresentam título, contexto, papel, contribuição, tecnologias e imagem real com texto alternativo. Links só aparecem quando houver destino válido. Menu móvel, se necessário, terá controle por teclado, Escape e estado expandido anunciado.

Acessibilidade e movimento

Alvo de acessibilidade: WCAG 2.2 AA. Texto normal com contraste mínimo de 4,5:1; texto grande, 3:1. Alvos de interação preferencialmente de 44 × 44 px. Feedback de 120–200 ms somente quando necessário, respeitando movimento reduzido. Este guia não usa animações.

Conteúdo da LP

Estrutura candidata: a ordem final e os textos dependem do objetivo prioritário e das evidências disponíveis.

Apresentação: nome, especialidade, proposta de valor e ação principal.
Projetos: problema, papel, decisões e resultado verificável.
Sobre: trajetória e diferenciais sustentados por trabalho real.
Contato: convite alinhado ao objetivo e links confirmados.

Títulos, descrições, navegação, CTAs e microcopy finais aguardam o briefing. Não publicar métricas, clientes ou depoimentos inventados.

Definições pendentes

Responda a estas perguntas na conversa para consolidarmos a identidade. As decisões serão registradas na memória do projeto.

Área principal. UI/UX e Product Design, desenvolvimento web e front-end, branding, design multidisciplinar ou outra área?
Público. Empresas e recrutadores, clientes, agências e estúdios ou uma combinação? Qual é a prioridade?
Linguagem visual. Editorial, minimalista, experimental, tech ou orgânica?
Base visual. Clara, escura, mista ou uma direção inesperada?
Identidade. Marca pessoal ou estúdio? Qual nome deve aparecer e como deve ser escrito?
Objetivo. Emprego, projetos freelance ou autoridade? Se houver mais de um, qual vem primeiro?
Referências. Quais sites, cores ou estilos você gosta? O que devemos evitar?
Material real. Quais projetos, contribuições, diferenciais e links de contato podem ser publicados?