O design system do portfólio
Esta página reúne os tokens de cor, a tipografia e os componentes reais usados em todo o site — a fonte única para manter tudo coerente. Tudo aqui é o componente de verdade (não imagem): passe o mouse e troque o tema para ver como cada peça reage.
Botões & links com vida
Cada estilo tem um papel definido. Use o Principal (magnético) na ação primária de uma tela; o Outline em ações secundárias; o Sólido para CTAs sobre fundo claro; o Ghost em ações terciárias; e os Links para navegação inline no meio do texto. Tudo respeita quem prefere menos movimento.
Sem jargão. Só resultado que dá pra ver.
Exemplo de composição: cards de serviço montados só com Heading, Text e a grade divisória. Serve de referência de ritmo e espaçamento entre blocos.
Sites que vendem
Páginas e landing pages que explicam seu negócio de forma simples e convencem o visitante a entrar em contato.
Interfaces rápidas e bonitas
Aplicações e sistemas com visual moderno, leves no celular e fáceis de usar — do jeito que as pessoas esperam hoje.
Do design ao ar
Cuido de tudo: do layout à publicação online. Você acompanha e eu entrego pronto para o mundo ver.
Cartões de projeto
Padrão dos cards da página de trabalhos: imagem com hover, metadados nos cantos e a seta que gira ao passar o mouse. Demonstra proporção (4:3), raios e o realce no hover.
Tokens de tema
Use sempre os nomes semânticos (não cores fixas): eles se adaptam ao dark e ao light automaticamente. foreground é o texto/elementos sólidos, background o fundo e surface os cartões. Troque o tema no canto superior direito para comparar.
Opacidades de foreground — usadas em bordas, hovers e detalhes (ex.: border-foreground/10).
Escala
Duas famílias: Roobert (sans) para títulos e UI, e Playfair Display (serif itálica) reservada a destaques editoriais — uma ou duas palavras por título, nunca o título inteiro. As escalas display abaixo são fluidas (encolhem no mobile).