Rules — Design System Rank

O que NUNCA fazer

✗

Cores hardcoded

Nunca usar #hex, rgb() ou nomes de cor diretamente em CSS ou inline styles.

color: #1a1a2e; /* DS001 — BLOQUEADO */ color: var(--ds-color-text-primary); /* CORRETO */

✗

Font-size manual

Nunca definir tamanho de fonte fora da escala de tokens.

font-size: 13px; /* DS020 — BLOQUEADO */ 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; /* DS010 — BLOQUEADO */ padding: var(--ds-space-3) var(--ds-space-6); /* CORRETO */

✗

Chart.js diretamente

Nunca instanciar new Chart() manualmente em produtos. Usar sempre DSCharts.*.

new Chart(ctx, {...}); /* DS050 — BLOQUEADO */ DSCharts.line('chart-id', {...}); /* CORRETO */

✗

Atributo de tema incorreto

Usar sempre data-ds-theme, nunca data-theme.

<html data-theme="datarank"> /* ERRADO */ <html data-ds-theme="datarank"> /* CORRETO */

✗

Classes sem prefixo .ds-

Nunca criar classes utilitárias ad-hoc como .mt-20, .text-blue.

<div class="blue-card mt-4"> /* BLOQUEADO */ <div class="ds-card ds-card--primary"> /* CORRETO */

✗

Inline styles com valores de design

Nunca usar style="color: ..." com valores de design.

style="color: #6366f1" /* DS060 — BLOQUEADO */ class="ds-text-primary" ou var(--ds-color-primary) /* CORRETO */

O que DEVE fazer

✓

Aplicar tema correto

Colocar data-ds-theme="[slug]" no elemento <html>.

✓

Classes .ds-* para componentes

Usar o catálogo deste site para identificar o componente e classe corretos antes de criar HTML.

✓

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

Quando precisar de um valor visual, sempre verificar os tokens disponíveis em Tokens primeiro.

✓

DSCharts.* para gráficos

Usar a API window.DSCharts: DSCharts.line(), DSCharts.bar(), DSCharts.donut(), etc.

✓

Verificar tokens antes de escrever CSS

Fazer grep -r "^ --ds-" ds/tokens/ ds/themes/base.css antes de criar componentes CSS novos.

✓

Usar DS-EXCEPTION para casos inevitáveis

Se precisar de valor fora do DS, marcar explicitamente com comentário:

color: #FF6B00; /* DS-EXCEPTION: cor de parceiro não mapeada no DS */

Como criar nova tela

1

Identificar o produto e aplicar data-ds-theme="[slug]" no <html>

2

Incluir /dist/ds.css (obrigatório) e scripts de charts se necessário

3

Escolher o template de página em Templates (Dashboard, List, Detail, etc.)

4

Montar o AppShell com .ds-app-shell + sidebar + topbar

5

Compor componentes .ds-* dentro do template, usando apenas tokens var(--ds-*)

6

Adicionar gráficos via DSCharts.* — nunca Chart.js diretamente

7

Rodar o auditor: python scripts/ds_audit.py --path . e corrigir violações

Codigos de Regra (Auditor)

Código	Regra	Severidade
DS001	Cor hex hardcoded em CSS	error
DS002	rgb()/rgba() hardcoded em CSS	error
DS010	padding/margin com valor px explícito	warning
DS020	font-size com valor px/rem explícito	error
DS021	line-height com valor numérico hardcoded	warning
DS030	border-radius com valor px explícito	warning
DS031	box-shadow com valores hardcoded	warning
DS050	new Chart() usado diretamente	error
DS051	import/require de chart.js	error
DS052	Outras libs de gráfico (echarts, d3, etc.)	error
DS060	style="color: ..." inline com valor	error