Diego Ruas

Design System

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. Todas as variáveis abaixo têm um par claro em :root[data-theme="light"] — use o alternador de tema no menu para ver os swatches mudarem ao vivo.

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
Uso Cards de Contato (Hover)
Valor 0 12px 24px -8px rgba(0,0,0,0.5)

Sombra Nível 2 (Trabalhos)

Card Trabalho
Uso Cards de Trabalho (Hover)
Valor 0 24px 48px -12px rgba(0,0,0,0.6)

Iconografia

Usamos a biblioteca Phosphor Icons (estilo Regular) para manter uma linguagem visual consistente e leve.

Estilo Regular
Tamanho Base 20px (Texto) | 28px (Cards)

Exceções de Marca (Devicon)

Origem Biblioteca de logos de desenvolvimento e design **Devicon** (altamente famosa e recomendada no mercado).
Diretriz de Uso Quando logotipos de softwares proprietários não constarem na Phosphor Icons, carregamos o CDN da Devicon e usamos suas classes CSS oficiais.
Estilização As 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.

Botões

Primário GitHub Telegram
Fonte 14px (Medium)
Padding 8px 12px
Radius 6px (MD)

Alternador de Tema

Comportamento Alterna data-theme no <html>, persiste em localStorage
Padrão Sem preferência salva, segue prefers-color-scheme do sistema
Anti-flash Script inline no <head> aplica o tema antes do primeiro paint

Tags & Badges

UI Design Frontend Figma
Fonte 12px (Mono)
Padding 4px 12px
Radius 9999px (Full)

Navegação (Abas)

Fonte 16px (Medium)
Padding 12px 16px

Botão Voltar ao Topo

Demonstração estática (50% de rolagem)

Dimensões 48px x 48px
Comportamento Surge após 300px de scroll

Links de Redes (Intro)

Dimensões 36px x 36px
Radius 8px (LG)

Links de Redes (Rodapé)

Fonte (Ícone) 20px (XL)
Espaçamento 16px (Gap)

Menu Flutuante (Acesso Rápido)

Posição Fixed (Direita)
Efeito Blur (10px)
Fundo rgba(10, 10, 10, 0.8)
Versão Mobile Barra horizontal fixa no rodapé

Timeline Item (Linha do Tempo)

  • hut8 empresa junior

    Designer UI/UX 2026 — Presente
    • Criação de wireframes e protótipos de alta fidelidade usando Figma.
    • Construção e manutenção de componentes dentro de Design Systems.
Ícone 1.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 Guia Gradiente Linear vertical destacado em var(--accent) desvanecendo até transparente
Interatividade Completamente 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
Data Estilo Pill Badge com var(--font-mono) e fundo translúcido sutil
Bullets Micro-pontos circulares (4px) em destaque var(--accent) (100% estáticos)
Título 16px (Bold) — Destaque em var(--accent)
Cargo 14px (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.

Uso Demonstrar as fases da metodologia de trabalho estruturada do designer
Layout Grid flexível (4 colunas em Desktop, 2 em Tablet, 1 em Mobile)
Hover & Animação Elevaçã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.

Fundo var(--bg-card) com efeito de gradiente radial no topo superior esquerdo para criar profundidade
Contorno 1px solid rgba(255, 255, 255, 0.1) (Hover: rgba(255, 255, 255, 0.2) + Efeito Parallax 3D com Vanilla Tilt)
Disponibilidade Flexível para contratação Júnior / Estágio (CLT, PJ) ou projetos autônomos

FAQ / Acordeão

Você atende de forma remota?

Sim. Atendo clientes de todo o Brasil remotamente e presencialmente em Pelotas/RS.

Como funciona o processo de trabalho?

O trabalho segue quatro etapas: descoberta, estrutura, visual e handover.

Estrutura <details> nativo + <summary> — zero JS, acessível por padrão e com conteúdo presente no HTML inicial (SEO/AI-friendly)
Estado aberto Primeiro item com atributo open; borda usa --fg-faint para contrastar nos dois temas e o ícone ph-caret-down gira 180°
Responsividade Lista em coluna com gap: var(--space-2); herda tokens do card (--bg-card, --border-light, --radius-xl)
Links no texto Minimalistas: cor --accent + peso --font-medium sem sublinhado no estado normal; sublinhado de 1px em --fg-faint com offset 3px aparece no hover

Página 404 (Canvas de Design)

artboard · 600 × 375
404
Página não encontrada
Conceito Erro apresentado como artboard aberto num canvas pontilhado (Figma-like), com selection handles, anotação blueprint e crosshair.
Arquivo css/error.css
Interação Crosshair e leitura de coordenadas seguem o mouse sobre o canvas (respeita prefers-reduced-motion).
Links Atalhos para as seções principais + link mono para reportar link quebrado (mailto com a URL atual).

Página Sobre (AI Disclosure)

Sobre
Quem sou, serviços, formação, localização e contato em texto claro e extraível.
Objetivo Página-resumo em texto (AI-friendly) com JSON-LD rico (Person: areaServed, alumniOf, memberOf, knowsAbout, contactPoint).
Arquivo sobre.html (raiz) + sitemap.xml
Acesso Link "Sobre" no rodapé de todas as páginas, ao lado de Design System e Privacidade.
Estrutura Quem sou · Serviços · Para quem trabalho · Onde atuo · Formação · Ferramentas · Por que me escolher · FAQ · Contato.

Favicon & Imagens

Diretrizes para o uso de ícones de favoritos e imagens de projetos para garantir consistência e performance.

Favicon

Favicon
Formato .ico
Tamanho 32px x 32px
Status Temporário

Imagens de Projetos (Thumbnails)

16:10 Aspect Ratio
Formato WebP (Recomendado)
Proporção 16:10
Carregamento Lazy 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 Foco Usar outline visível para navegação via teclado.