Uma documentação viva que reúne os princípios visuais, componentes reutilizáveis e diretrizes que garantem a consistência e a identidade do meu portfólio. Este guia serve como referência para design e desenvolvimento, garantindo uma experiência coesa e escalável.
Cores
A paleta de cores é construída sobre uma base escura (Dark Mode padrão), focando em alto contraste e legibilidade. Usamos tons neutros para superfícies e textos, e o branco como cor de destaque.
Cores Base & Superfícies
Fundo--bg
Superfície--bg-card
Hover--bg-hover
Borda--border-light
Tipografia & Destaques
Texto Primário--fg
Texto Secundário--fg-muted
Texto Desativado--fg-faint
Destaque--accent
Cores Semânticas
Success--color-success
Error--color-error
Warning--color-warning
Info--color-info
Tipografia
A tipografia principal do projeto é a Google Sans Flex (importada do Google Fonts), uma fonte moderna e geométrica. Para elementos que requerem largura fixa (como códigos ou números), usamos fontes monoespaçadas padrão do sistema.
Título 1 (40px) — var(--text-4xl)
O rápido urso pardo salta
Título 2 (32px) — var(--text-3xl)
O rápido urso pardo salta
Título 3 (24px) — var(--text-2xl)
O rápido urso pardo salta
Título 4 (20px) — var(--text-xl)
O rápido urso pardo salta
Corpo Grande (18px) — var(--text-lg)
O rápido urso pardo salta sobre o cão preguiçoso.
Corpo Padrão (16px) — var(--text-base)
O rápido urso pardo salta sobre o cão preguiçoso. Design System estruturado.
Text Small / var(--text-sm) / var(--font-regular)
O rápido urso pardo salta sobre o cão preguiçoso. Detalhes menores e descrições.
Text Extra Small / var(--text-xs) / var(--font-regular)
O rápido urso pardo salta sobre o cão preguiçoso.
Espaçamentos
O sistema de espaçamento é baseado em uma grade de 4px e 8px. Todos os paddings, margins e gaps utilizam essas variáveis para garantir ritmo vertical e consistência visual em todo o layout.
--space-1 (4px)
--space-2 (8px)
--space-3 (12px)
--space-4 (16px)
--space-5 (20px)
--space-6 (24px)
--space-8 (32px)
--space-12 (48px)
--space-16 (64px)
Elevação & Sombras
As sombras são usadas para criar profundidade e indicar interatividade. Elas são aplicadas principalmente em estados de hover.
Sombra Nível 1 (Contato)
Card Contato
UsoCards de Contato (Hover)
Valor0 12px 24px -8px rgba(0,0,0,0.5)
Sombra Nível 2 (Trabalhos)
Card Trabalho
UsoCards de Trabalho (Hover)
Valor0 24px 48px -12px rgba(0,0,0,0.6)
Efeito 3D (Tilt)
Mova o mouse
BibliotecaVanillaTilt.js
EfeitoParalaxe 3D
Iconografia
Usamos a biblioteca Phosphor Icons (estilo Regular) para manter uma linguagem visual consistente e leve.
EstiloRegular
Tamanho Base20px (Texto) | 28px (Cards)
Exceções de Marca (Devicon)
OrigemBiblioteca de logos de desenvolvimento e design **Devicon** (altamente famosa e recomendada no mercado).
Diretriz de UsoQuando logotipos de softwares proprietários não constarem na Phosphor Icons, carregamos o CDN da Devicon e usamos suas classes CSS oficiais.
EstilizaçãoAs classes `-plain` utilizam fontes de ícone baseadas em currentColor, integrando-se nativamente com as cores e transições de hover do portfólio.
Componentes
Os componentes são os blocos de construção da interface. Eles são modulares, reutilizáveis e seguem estritamente as regras de cores e tipografia definidas acima.
Criação de wireframes e protótipos de alta fidelidade usando Figma.
Construção e manutenção de componentes dentro de Design Systems.
Ícone1.85rem (29.6px), Phosphor Icon centralizado em var(--accent) com máscara circular (box-shadow) para ocultar a linha guia traseira de forma limpa
Linha GuiaGradiente Linear vertical destacado em var(--accent) desvanecendo até transparente
InteratividadeCompletamente estática e livre de fadiga de movimento. A sofisticação reside no layout em formato de cartões translúcidos (Glassmorphism) com borda fina e leve elevação interna
DataEstilo Pill Badge com var(--font-mono) e fundo translúcido sutil
BulletsMicro-pontos circulares (4px) em destaque var(--accent) (100% estáticos)
Título16px (Bold) — Destaque em var(--accent)
Cargo14px (Medium) — var(--fg-muted)
Metodologia de Design (Process Card)
01
Descoberta & Pesquisa
Compreensão profunda das necessidades dos usuários, limitações técnicas e objetivos do projeto.
UsoDemonstrar as fases da metodologia de trabalho estruturada do designer
LayoutGrid flexível (4 colunas em Desktop, 2 em Tablet, 1 em Mobile)
Hover & AnimaçãoElevação translateY(-4px), borda iluminada, radial glare e opacidade do número aumentada (0.15 para 0.40)
Card de Oportunidade / CTA
Oportunidades
Vamos criar algo incrível juntos?
Estou aberto a novas oportunidades como Designer de Interfaces / UI/UX.
Fundovar(--bg-card) com efeito de gradiente radial no topo superior esquerdo para criar profundidade
Contorno1px solid rgba(255, 255, 255, 0.1) (Hover: rgba(255, 255, 255, 0.2) + Efeito Parallax 3D com Vanilla Tilt)
DisponibilidadeFlexível para contratação Júnior / Estágio (CLT, PJ) ou projetos autônomos
Favicon & Imagens
Diretrizes para o uso de ícones de favoritos e imagens de projetos para garantir consistência e performance.
Favicon
Formato.ico
Tamanho32px x 32px
StatusTemporário
Imagens de Projetos (Thumbnails)
16:10 Aspect Ratio
FormatoWebP (Recomendado)
Proporção16:10
CarregamentoLazy Loading
Responsividade
O design se adapta a diferentes tamanhos de tela usando breakpoints estratégicos.
Desktop> 768px
Tablet / Mobile<= 768px
Small Mobile<= 600px
Estados & Acessibilidade
Garantir que a interface seja acessível e dê feedback claro ao usuário.
Regra de FocoUsar outline visível para navegação via teclado.