Rules

Contrato técnico para Claude e engenheiros que constroem com o Design System Rank. Seguir estas regras garante consistência, acessibilidade e manutenibilidade.

O que NUNCA fazer

✗
Cores hardcoded

Nunca usar #hex, rgb() ou nomes de cor diretamente em CSS. Sempre usar var(--ds-color-*).

color: #1a1a2e; /* NUNCA */ color: var(--ds-color-text); /* CORRETO */
✗
Font-size manual

Nunca definir tamanho de fonte fora da escala de tokens.

font-size: 13px; /* NUNCA */ font-size: var(--ds-font-size-sm); /* CORRETO */
✗
Padding/margin arbitrários

Nunca usar valores fora da escala de espaçamento do DS.

padding: 13px 22px; /* NUNCA */ padding: var(--ds-space-3) var(--ds-space-6); /* CORRETO */
✗
Classes utilitárias ad-hoc

Nunca criar classes .mt-20, .text-blue ou similares. Usar as classes .ds-* do DS.

✗
Gráficos diretamente com ECharts

Nunca instanciar echarts.init() manualmente em produtos. Usar sempre os Web Components <ds-chart-*>.

O que DEVE fazer

✓
Classes .ds-*

Usar classes semânticas do DS: .ds-btn, .ds-card, .ds-table, etc.

✓
var(--ds-*) para customizações

Quando precisar de valores específicos, sempre via CSS Custom Properties do DS.

✓
Web Components <ds-*>

Usar os Web Components para gráficos e componentes interativos complexos.

✓
data-theme no html

Aplicar o tema do produto via <html data-theme="produto"> no elemento raiz.

Como criar nova tela

1
Aplicar data-theme="produto" no elemento raiz
2
Incluir /dist/ds.css e /dist/ds.js
3
Usar estrutura de layout .ds-layout-sidebar ou .ds-layout-full
4
Compor componentes .ds-* dentro do layout
5
Adicionar gráficos via <ds-chart-*> Web Components