Nome do card
Texto de apoio explicando o propósito do componente dentro do sistema.
Cor, tipografia e componentes
O sistema visual por trás deste portfólio, documentado com o próprio CSS que roda nas páginas do site. Nada aqui é reprodução: é o sistema real em uso.
- 3 famílias tipográficas
- 8 cores
- 100% HTML/CSS/JS nativo
Cor
Paleta dark editorial com um único acento: verde de dados sobre um preto frio. A cor sempre carrega significado, nunca é decoração gratuita.
Neutros
A base que sustenta o restante da interface: fundo, superfícies e divisórias.
Texto
Três camadas de leitura, da mais importante à mais discreta.
Acento
O único destaque do sistema. Usado com moderação, nunca em excesso.
Tipografia
Três famílias, cada uma com um papel único: serifada para narrativa, sans para interface, mono para dados e metadados.
Display
Aa Gg Rr
Interface
Aa Gg Rr
Dados
Aa Gg Rr
Hero40 – 96px
Aa
Título de seção30 – 57px
Aa Título
Subtítulo21 – 28px
Aa Subtítulo
Lead17 – 22px
Texto de destaque e introdução
Corpo17px
Texto de parágrafo padrão do site
Rótulo12px
Texto em caixa alta
Componentes
Cada peça abaixo usa o CSS real do site. Não é reprodução, é o próprio sistema em uso.
Botões
Tags & badges
- Tag com reflexo
- Ferramenta
Cartões
Etapa
01
Nome da capacidade
- Detalhe do primeiro item
- Detalhe do segundo item
Linha do tempo
-
20XX
Nome do marco
Instituição
Painel de metadados
Motion & Interação
Movimento com função, não decoração. Toda animação é progressive enhancement e respeita a preferência do usuário.
Revelação no scroll
IntersectionObserver aplica .is-visible aos elementos [data-reveal] conforme entram na tela — sem dependência externa.
Cursor customizado
Ativo só em ponteiros finos (progressive enhancement). Troca de rótulo via data-cursor, como "ver" e "em breve".
Botões magnéticos
Elementos com data-magnetic seguem sutilmente o mouse dentro da própria área.
Mouse "de dados"
Uma malha de pontos de fundo acende em verde através de uma máscara radial que segue o cursor.
Marquee contínuo
Loop infinito de skills no hero, contido por overflow: hidden e mascarado nas bordas.
Motion responsável
Toda animação e transição respeita prefers-reduced-motion: reduce, sem exceções.
Ícones & Marca
Poucos glifos, sempre os mesmos, e um símbolo, o GR, usado com moderação.
- Recolorir apenas via opacidade, nunca aplicar cores fora da paleta do sistema.
- Manter uma área de respiro mínima equivalente à largura do símbolo.
- Não distorcer a proporção original.
- Altura mínima recomendada: 20px.
Quer ver esse sistema em uso, do primeiro pixel ao protótipo?
Ver o portfólio