Design System

Cores

A paleta usa alto contraste e legibilidade nos temas escuro e claro. Textos contínuos e auxiliares mantêm contraste mínimo de 4,5:1, inclusive com --fg-faint. Use o alternador de tema no menu para ver os swatches mudarem ao vivo.

Cores Base & Superfícies

Tipografia & Destaques

Cores Semânticas

Tipografia

A tipografia do projeto é a JetBrains Mono, self-hosted em /fonts e carregada por @font-face no base.css. É a única família do site, usada em todos os pesos da variável (100–800), com os tokens --font-regular (400), --font-medium (500) e --font-bold (600). Código, números e badges usam a mesma família por --font-mono.

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.

Elevação & Sombras

As sombras são usadas para criar profundidade e indicar interatividade. Elas são aplicadas principalmente em estados de hover.

Iconografia

Usamos Phosphor Icons Regular 2.1.1, servido localmente por /css/phosphor.css e /fonts/phosphor-regular-2.1.1.woff2. O build gera os dois só com os ícones usados no site (subset) e versiona a URL por hash; o layout pré-carrega a fonte, que usa font-display: block.

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 Compartilhar Filtrar Ativo

Fonte 14px (Medium)

Dimensões Padding 8px 16px, altura mínima 40px e 44px até 768px

Radius 6px (MD)

Card de trabalho em destaque

• 

  Maleta.dev

  App

  Site editorial e app para compor ambientes de agentes, exportar o manifest e aplicar a configuração pela CLI.

Uso .work-list-featured ocupa todas as colunas para destacar o primeiro projeto da página inicial.

Imagem Proporção 16:9 e sem animação no hover da home. Nas páginas do portfólio, a captura acompanha o tema; esta prévia mostra a versão clara.

Moldura de capturas (Shot Stage)

maleta.dev

Par de ações (Hero / CTA)

Fale comigo Currículo (PDF) (abre em nova aba)

Contêineres .intro-actions, .page-hero-actions e .case-cta-actions

Composição Ação principal primeiro; ação secundária com ícone e aviso oculto quando abrir nova aba

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)

Cores Superfície var(--bg-hover) e borda var(--border-light), sem cores fixas

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 no desktop; área mínima de 44px até 768px

Radius 8px (LG)

Links de Redes (Rodapé)

Fonte (Ícone) 20px (XL)

Espaçamento 16px (Gap)

Links de texto Altura mínima de 24px até 768px em rodapé, breadcrumbs e metadados de case

Quebra de linha Até 600px o rodapé vira linha de itens com gap de 8px e os separadores somem

Menu Flutuante (Acesso Rápido)

• 1. Cores
• 2. Tipografia

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 & Marcador Elevação translateY(-4px), borda iluminada e número em var(--fg-faint) sem redução de opacidade

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.

Galeria, carrossel e zoom

1 / 5

Controles Setas de 44px, dots de 24px, contador com aria-live e navegação por teclado

Zoom O botão usa o texto alternativo no nome acessível; o lightbox real prende o foco, aplica inert ao fundo e fecha com Escape

Demonstração Estado estático; a interação completa é inicializada por /js/gallery.js nas páginas de case

CTA de case

Vamos conversar?

Estou em busca de oportunidades como Designer de Interfaces / UI/UX (estágio, CLT ou PJ) e atendo projetos freelance.

Fale comigo Ver todos os trabalhos

Posição Largura total da grade, alinhado à borda esquerda do conteúdo

Uso Inserido no fim de cada case e da página Sobre, antes do fechamento de <main>

Favicon & Imagens

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

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.

Estados & Acessibilidade

Garantir que a interface seja acessível e dê feedback claro ao usuário.