rodrigo.in
Design System
Fundação visual e de componentes do portfolio rodrigo.in.
Cada token e componente reflete as Figma Variables do arquivo de design.
Todas as cores são definidas como CSS custom properties. Nunca use valores hardcoded, sempre use var(--token).
Background
background/primary
--background-primary
#0A0A0A
background/secondary
--background-secondary
#111111
background/surface
--background-surface
#161616
background/card
--background-card
#1A1A1A
Texto
text/primary
--text-primary
#F0EDE8
text/muted
--text-muted
rgba(240,237,232, 0.55)
Accent
accent/mint
--accent-mint
#4BFFA5
accent/mint-12
--accent-mint-12
rgba(75,255,165, 0.12)
Border
border/default
--border-default
rgba(255,255,255, 0.07)
border/hover
--border-hover
rgba(75,255,165, 0.25)
Três famílias tipográficas com papéis bem definidos. Use sempre as variáveis, nunca nomes de fonte diretamente.
Display · Instrument Serif
--font-family-display
Títulos principais · Hero · Seções
Italic disponível
Heading · Syne Bold
--font-family-heading
Subtítulos · Labels · Nav
400 / 600 / 700 / 800
Body · DM Sans Light, para textos corridos, descrições e conteúdo editorial. Leve, com ótima legibilidade em qualquer tamanho.
--font-family-body
Corpo de texto · UI · Labels
300 / 400 / 500 / 700
Escala baseada em múltiplos de 4px. Use sempre os tokens, nunca valores arbitrários.
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: 10px · font-weight: 700 · letter-spacing: 1.5px
color: --text-muted · background: --background-surface
border: 1px solid --border-default · border-radius: --radius-full
padding: --spacing-4 --spacing-12 · width: fit-content
Dois tipos: primário (ação principal, fundo mint) e secundário (ação alternativa, sem fundo).
Uso
<a href="#" class="btn-primary">Ação principal →</a>
<a href="#" class="btn-secondary">Ação secundária</a>
Label de seção com linha decorativa. Usado no início de cada bloco de conteúdo para contextualizar o que vem a seguir.
Uso
<div class="section-eyebrow">
<span class="eyebrow-line"></span>
<span class="eyebrow-text">Label da seção</span>
</div>
Item de lista de cases na home. Clicável, com número, empresa, título, tags e thumbnail.
Exemplo
01
ClickBus
Redesign da jornada de compra de passagens
Design Leadership
Product Design
2026
Uso
<div class="case-item" onclick="window.location='case-xxx.html'">
<span class="case-num">01</span>
<div class="case-info">
<div class="case-company">Empresa</div>
<div class="case-title">Título do case</div>
<div class="case-tags">
<span class="tag">Tag</span>
</div>
</div>
<div class="case-thumb">
<div class="case-thumb-inner thumb-cb"></div>
</div>
</div>
Bloco de resultados quantitativos nos cases. Número grande em display, label em caps abaixo.
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>
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