Themes

Cada produto RankMyApp tem sua identidade visual aplicada como tema CSS. Um tema sobrescreve tokens de cor via [data-ds-theme="slug"] — estrutura e espaçamento permanecem intactos.

Ads Intelligence ads-intelligence paleta real
RankMyGEO rankmygeo paleta real
RIOC rioc provisório
DataRank datarank provisório
Rank Community rank-community paleta real
Samurai / Hub samurai-hub provisório
PostPigeon postpigeon provisório

Ads Intelligence

data-ds-theme="ads-intelligence" paleta real · 2026-05-22

Accents

#5667EA Azul Royal --ds-color-primary
#B2E62E Lima Vibrante --ds-color-accent
#914BE8 Roxo Elétrico --ds-color-secondary
#3BA9C4 Ciano Claro --ds-chart-4

Content

#141418 Content Primary --ds-color-text-primary
#6F7280 Content Secondary --ds-color-text-secondary
#9F96A3 Content Tertiary --ds-color-text-muted

Background

#F4F4F5 Background Screen --ds-color-bg
#FFFFFF Background Elevated --ds-color-surface
#ECECEC Background Neutral --ds-color-bg-muted

Support

#E0D9F9 Lavanda Suave --ds-chart-5
#D9EEF7 Azul Gelo --ds-color-info-soft
#F0FAD4 Lima BG --ds-color-accent-soft
#EEF0FD Blue Light --ds-color-primary-soft

Sentiment / Feedback

#2E7D32 Positive --ds-color-success
#F9A825 Warning --ds-color-warning
#C9292B Negative --ds-color-danger
#2563EB Info --ds-color-info

Chart Palette

chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
chart-7
chart-8
chart-positive
chart-negative
chart-neutral
Nota: A paleta original enviada trazia #5G67EA (G inválido em hexadecimal). O valor foi corrigido para #5667EA por ser o mais provável visualmente. Confirmar o hex oficial quando disponível em formato texto.

RankMyGEO

data-ds-theme="rankmygeo" paleta real · 2026-05-22

Accents

#00A884 GEO Teal --ds-color-primary
#B8E62E Rank Lime --ds-color-accent
#2FBF71 Emerald --ds-color-secondary
#24451A Deep Moss --ds-chart-6

Content

#172014 Content Primary --ds-color-text-primary
#52624A Content Secondary --ds-color-text-secondary
#7B8874 Content Tertiary --ds-color-text-muted

Background

#F7FAF0 Background Screen --ds-color-bg
#FFFFFF Background Elevated --ds-color-surface
#EEF2E6 Background Neutral --ds-color-bg-muted

Support

#DDF8F0 Teal BG --ds-color-primary-soft
#F2FBCC Lime BG --ds-color-accent-soft

Sentiment / Feedback

#2E7D32 Positive --ds-color-success
#F9A825 Warning --ds-color-warning
#C62828 Negative --ds-color-danger
#00A884 Info --ds-color-info

Chart Palette

chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
chart-7
chart-8
chart-positive
chart-negative
chart-neutral

Rank Community

data-ds-theme="rank-community" paleta real · 2026-05-22

Brand / Purple

#7C3AED Brand-500 --ds-color-primary
#6D28D9 Brand-600 --ds-color-primary-hover
#5B21B6 Brand-700 --ds-color-primary-active
#EDE9FE Brand-100 --ds-color-primary-soft
#F5F3FF Brand-50 --ds-color-primary-subtle

Energy / Amber

#F59E0B Energy-500 --ds-color-accent / --ds-color-warning
#FBBF24 Energy-400 --ds-chart-6
#FEF3C7 Energy-100 --ds-color-accent-soft

GEO / Teal

#14B8A6 GEO-500 --ds-color-secondary / --ds-color-info
#2DD4BF GEO-400 --ds-chart-5
#CCFBF1 GEO-100 --ds-color-info-soft

Content

#0F172A Content Primary --ds-color-text-primary
#475569 Content Secondary --ds-color-text-secondary
#94A3B8 Content Tertiary --ds-color-text-muted

Background

#F8FAFC Background Screen --ds-color-bg
#FFFFFF Background Elevated --ds-color-surface
#F1F5F9 Background Neutral --ds-color-bg-muted

Sentiment / Feedback

#16A34A Positive --ds-color-success
#F59E0B Warning --ds-color-warning
#DC2626 Negative --ds-color-danger
#14B8A6 Info --ds-color-info

Chart Palette — Brand · Energy · GEO

chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
chart-7
chart-8
chart-positive
chart-negative
chart-neutral

Como aplicar um tema

<!-- No HTML do produto -->
<html data-ds-theme="ads-intelligence" lang="pt-BR">
  <head>
    <link rel="stylesheet" href="/static/vendor/design-system-rank/v1.0.0/ds.css">
  </head>
</html>

<!-- Via JS (troca dinâmica) -->
<script>
  window.DSThemes.set('ads-intelligence');
</script>
Copiado!