As frases explicam a situação, a decisão tomada e o resultado. Termos técnicos aparecem apenas quando ajudam a entender o trabalho.
Como o portfólio
foi construído.
Aqui estão as fontes, cores, espaçamentos, componentes e animações usados no portfólio. As regras servem para manter a leitura e o comportamento consistentes em telas grandes e pequenas.
01
Regras geraisTexto direto Leitura primeiro Projetos diferentes
O que se repete em todas as páginas.
Cor e movimento indicam relações e ações. Nenhum efeito pode cobrir texto ou ser necessário para acessar uma informação.
Cada projeto usa sua própria paleta nos cards e wireframes. Tipografia, espaçamento e comportamento mantêm o conjunto organizado.
02
TipografiaFontes e tamanhos
Fontes e tamanhos
usados na leitura.
Arial
Usada na navegação, nos textos, nas tabelas e nos botões. As letras têm formas simples e funcionam bem em blocos longos e tamanhos menores.
Regular 400 · Medium 500 · Bold 700Georgia
Usada em palavras destacadas nos títulos. O itálico cria contraste com a Arial sem reduzir a clareza da frase.
Regular 400 · Italic 40003
Cores e medidas
Valores usados no sistema.
O verde claro aparece sobre fundos escuros. Em fundos claros, títulos e links usam azul escuro para manter o contraste. O branco puro foi substituído por um fundo levemente quente nas áreas de leitura.
Token IDValorUso
color.ink#121212Títulos, textos e fundos escuros
color.paper#F3F0E9Fundo das páginas e das áreas de leitura
color.signal#C9FF4AAções e pequenos pontos de destaque em fundo escuro
color.coral#FF6C4ADestaques pontuais e estados ativos
color.deep#253A88Fundos azuis e ações com texto branco
space.18pxDistância entre itens pequenos
space.216pxDistância entre texto, ícone e controle
space.324pxEspaço interno de cards
space.440pxDistância entre grupos de conteúdo
radius.card24pxCantos dos cards principais
04
Movimento
Quando e como os elementos se movem.
Os cards mudam de posição conforme o scroll, a luz acompanha o cursor e os resumos abrem sem saltos. As formas do topo se movem devagar e param quando a redução de movimento está ativa no aparelho.
IDDuraçãoCurvaUso
motion.reveal700mscubic-bezier(.16,1,.3,1)Mostra títulos e conteúdo ao carregar
motion.card420mscubic-bezier(.16,1,.3,1)Abre e fecha o resumo de cada projeto
motion.lava14sease-in-out infiniteMove as formas do topo lentamente
motion.liquid260msease-outAcompanha o cursor dentro dos cards
motion.reduced1mslinearRemove o movimento quando essa opção está ativa no aparelho
05
ComponentesCard de projeto Ação principal Status
Blocos usados mais de uma vez.
Neutra+
Mostra o contexto, as áreas do trabalho e o acesso ao resumo do projeto.
Vamos conversar.
Usa texto curto e contraste alto para indicar o próximo passo.
Disponível
Informa disponibilidade sem interromper a leitura do topo.