v2.1.0 Atualizado em 7 de novembro de 2026

Design System

Fundação visual e componentes do rodrigo.in.

tokens de cor, espaço e raio
32
componentes documentados
7
temas, claro e escuro
2
idiomas: PT, EN e ES
3
Um violeta, uma fita

Toda a cor extra vive na fita do topo. No resto, o violeta só marca o que é ação.

Hierarquia pelo tamanho

Uma fonte, dois pesos. O que é mais importante fica maior, nunca mais grosso.

Só tokens

Nenhuma cor ou medida escrita à mão. Trocar o tema troca o site inteiro.

Ver os exemplos em

Cores

Estável

Quase tudo é branco-osso e tinta azul-escura. Toda a cor fica em um violeta de ação e na fita. Os valores abaixo são lidos do CSS e mudam com o tema.

Background
background/primary
--background-primary
background/surface
--background-surface
background/tag
--background-tag
Texto
text/primary
--text-primary
text/secondary
--text-secondary
text/muted
--text-muted
text/subtle
--text-subtle
Accent
accent (violeta)
--accent-mint
accent/hover
--accent-hover
accent/12
--accent-mint-12
on-accent
--on-accent
Fita
ribbon/teal
--ribbon-teal
ribbon/lilac
--ribbon-lilac
ribbon/violet
--ribbon-violet
Border
border/default
--border-default
border/hover
--border-hover

Tipografia

Estável

Uma família só, Figtree, em dois pesos. A hierarquia vem do tamanho, nunca de negrito.

Lidero times de design.
E continuo desenhando.
Título do topo46–88px · 500 · -0.03em<em> em violeta
Como eu trabalho
Títulos de seção24–44px · 500
Na Dafiti entrei pelo DesignOps e virei gestor do time de UX no Brasil, no Chile e na Colômbia. Texto da carta, em primeira pessoa.
Texto da carta20px · 400 · 1.7até 62 caracteres por linha
2021 – 2024 · Onde trabalhei
Rótulos e datas12px · caixa alta · 0.08em

Espaçamento

Estável

Escala baseada em múltiplos de 4px. Use sempre os tokens, nunca valores arbitrários.

--spacing-4 · 4px
--spacing-8 · 8px
--spacing-12 · 12px
--spacing-16 · 16px
--spacing-24 · 24px
--spacing-32 · 32px
--spacing-48 · 48px
--spacing-64 · 64px
--spacing-80 · 80px
--spacing-96 · 96px
--spacing-120 · 120px

Border Radius

Estável
--radius-none
0
--radius-sm
4px · tags
--radius-md
8px · botões
--radius-lg
12px · painéis
--radius-full
999px

Tag

Estável

Usada para categorizar cases e projetos. A largura se ajusta automaticamente ao conteúdo, nunca defina width manualmente.

Exemplos
Design Leadership Product Design UX Research Design System Mobile 2026
Uso
<span class="tag">Design Leadership</span>
Tokens aplicados
font-size: 12px · font-weight: 500 · letter-spacing: 0
color: --text-tag · background: --background-tag
border: none · border-radius: --radius-sm
padding: --spacing-4 --spacing-12 · width: fit-content

Botões

Estável

Dois tipos: primário (fundo violeta, texto branco) e secundário (contorno violeta). Texto normal, sem caixa alta.

Variantes
Ver cases → Sobre mim
Uso
<a href="#" class="btn-primary">Ação principal →</a> <a href="#" class="btn-secondary">Ação secundária</a>

Nota de margem

Estável

Fica ao lado de cada parágrafo da carta: período, um número e uma linha. No celular, desce para baixo do texto.

Exemplo
Uso
<aside class="carta-note"> <span class="carta-note-when">2024 – 2026</span> <span class="carta-note-num">+11,5%</span> <span class="carta-note-text">Uma linha</span> </aside>

Prancha de case

Estável

Capa de um case no meio da carta. Todas com o mesmo peso: largura total e proporção 2:1. A imagem e o título vêm do banco pelo slug.

Exemplo
ClickBus Redesign do card de resultados Ler o case
Uso
<figure class="carta-plate" data-case-plate="slug-do-case"> <a class="carta-plate-link" href="case.html?slug=slug-do-case"> … </a> </figure>

Métricas

Estável

Resultados no fim de cada case: números grandes em violeta, em linha, separados por linha fina, sem cards.

Exemplo
+23%
Taxa de conversão
−40%
Tempo de checkout
4.6★
App Store
Uso
<div class="case-metrics"> <div class="case-metric"> <div class="case-metric-number">+23%</div> <div class="case-metric-label">Descrição</div> </div> </div>

Toast

Estável

Notificação temporária que aparece no canto inferior direito. Criado dinamicamente via JS, não precisa de HTML estático. Some após 5 segundos.

Variantes
Mensagem enviada!
Responderei em breve, obrigado pelo contato.
Erro ao enviar
Verifique sua conexão e tente novamente.
Uso (JS)
showToast('Título', 'Descrição do feedback.', 'success'); showToast('Erro', 'Algo deu errado.', 'error');
Tokens aplicados
background: --background-card · border: --border-default
indicador success: --accent-mint · error: #ff6b6b
border-radius: --radius-lg · z-index: 9999

Formulário

Estável

Campos com linha só embaixo e rótulo pequeno acima.

Campos
Uso
<div class="form-group"> <label class="form-label">Label *</label> <input class="form-input" type="text" placeholder="..." /> </div> <button class="btn-submit">Enviar</button>

Acessibilidade

Estável

Contraste de cada cor de texto sobre o fundo, nos dois temas, calculado agora a partir do CSS em uso. A meta é WCAG 2.1 AA: 4,5:1 para texto corrido.

TokenAmostraClaroEscuro

Changelog

  1. 2.1.07 nov. 2026

    Espanhol como terceiro idioma. Esta documentação ganhou comparação de temas lado a lado, contraste calculado ao vivo, código copiável e menu que acompanha a leitura.

  2. 2.0.04 nov. 2026

    Mundo visual "prospecto": fundo branco-osso, tinta azul-escura, um violeta de ação e a fita de cor. Figtree em dois pesos. Novos componentes da carta: nota de margem e prancha de case. Tema escuro em tinta.

  3. 1.0.0mar. 2026

    Primeira versão: tema escuro com acento verde-menta, tokens de cor, espaço e raio, e os componentes base do portfolio.