Design System Rank

Biblioteca de UI unificada da RankMyApp. Uma estrutura visual consistente, adaptável por produto via sistema de temas. Tokens globais + componentes + gráficos + templates.

Princípio central

A estrutura é fixa. O tema muda. Todos os produtos compartilham os mesmos componentes e tokens base. Cada produto aplica seu tema via CSS Custom Properties.

◆

Tokens

Variáveis CSS globais: cores, tipografia, espaçamento, sombras, bordas.

Fase 3 — P3
Em construção
◈

Themes

Temas por produto: Ads Intelligence, RankMyGEO, RIOC, DataRank, Rank Community, Samurai/Hub, PostPigeon.

Fase 4 — P4
Em construção
◻

Components

Biblioteca de componentes reutilizáveis: Button, Input, Card, Modal, Table, Badge e mais.

Fase 5 — P5
Em construção
◱

Charts

Web Components de gráficos baseados em ECharts: linha, barra, pizza, mapa e mais.

Fase 6 — P6
Em construção
◫

Templates

Páginas prontas para usar: Dashboard, Settings, Reports, Analytics e mais.

Fase 7 — P7
Em construção
✦

Rules

Contrato técnico e regras de uso para Claude e engenheiros que constroem com o DS.

Disponível
Disponível
✧

Prompts

Prompts para uso em sessões Claude ao construir telas com o Design System.

Disponível
Disponível

Dois layers

Catálogo (este site)

Interface visual para explorar e documentar o DS. Roda como app FastAPI. Consumo interno.

catalog/

Biblioteca (ds/)

CSS + JS puros para consumo pelos produtos. Incluir via CDN ou build. Zero dependências runtime.

ds/