Design System Rank
Biblioteca de UI unificada da RankMyApp. Tokens, componentes, gráficos e templates em CSS puro — adaptável por produto via sistema de temas.
Foundation
Tokens
9 arquivos de tokens: cores, tipografia, espaçamento, sombras, bordas, motion.
Themes
7 temas de produto: Ads Intelligence, RankMyGEO, RIOC, DataRank, Rank Community, Samurai/Hub, PostPigeon.
Components
Base + Feedback
Button, Card, Badge, Alert, Tooltip, EmptyState — 14 componentes fundamentais.
Forms
Input, Select, Checkbox, Radio, Switch, SearchInput, FilterBar — 13 componentes.
Navigation
Sidebar, Topbar, Breadcrumb, Tabs, Pagination, Dropdown, UserMenu — 7 componentes.
Data
DataTable, RankingList, ProgressBar, Timeline, Stepper — 15 componentes.
Analytics
MetricCard, KPIGrid, InsightCard, HealthScore, ScoreRing — 12 componentes.
Product
ChannelBadge, CreativeCard, CampaignCard, NotificationCard — 9 componentes.
Patterns
Charts
10 renderers: Line, Bar, Pie, Donut, Sparkline, ShareOfVoice, StackedBar e mais.
Templates
12 templates de página: Dashboard, Analytics, List, Detail, Settings, Login e mais.
Documentação
Rules
Contrato técnico completo para Claude e engenheiros que constroem com o DS.
Prompts
7 templates de prompt prontos para usar em sessões Claude.
Exemplos
Comparativo visual: código correto vs. violações comuns.
Adoption
Como integrar o DS em produtos: vendor local, CDN, git subtree.
Changelog
Histórico de versões e mudanças.