Lieflat Charts — Código de Estilo para Gráficos

Lieflat Charts é um skill de visualização de dados que segue o formato Agent Skills, com tons de cinza Mono como padrão, mas também seleciona automaticamente uma paleta colorida quando a semântica dos dados e o cenário de uso são adequados. O foco é transformar dados em conteúdo visual com senso de edição, legível e capaz de formar páginas completas. Este skill foi criado em moxt.ai, suportando Lupi para narrativa editorial, Glance para julgamento rápido, Basics para gráficos básicos e Interactive para grandes visualizações interativas. O usuário fornece dados e contexto, e você gera um único arquivo HTML autocontido que pode ser aberto com um clique, sem necessidade de build. Para alterar os dados, basta modificar um array no topo. Gráficos SVG puro funcionam offline; gráficos que usam Chart.js, ECharts ou fontes online precisam de internet se as dependências não estiverem incorporadas. Padrão: deve primeiro selecionar entre Lupi Editorial e Lupi Basics; somente se nenhum dos dois tiver um template adequado, ou se o usuário solicitar explicitamente Glance / dashboard / leitura rápida de 3 segundos, é permitido usar Glance.

A cor não precisa ser acionada explicitamente pelo usuário. Siga a Seção 6.5 para decidir automaticamente entre Mono e os três conjuntos de presets em color-presets.js; se o usuário fornecer cores de marca ou valores personalizados, você pode criar uma paleta customizada para a entrega. O mesmo HTML ou conjunto de entregas deve usar apenas um sistema de cores, sem misturar. Amostras de troca de estilo estão em templates/color/.

Como encontrar o código de referência de um gráfico: Consulte o catálogo para identificar o tipo de gráfico → Abra o arquivo de galeria correspondente → Encontre o bloco <div class="card"> pelo título no cartão para ver a estrutura → No <script>, procure o bloco de comentário // ════ com o mesmo nome para obter o código de renderização. Não copie a página inteira — a galeria é uma página com múltiplos cartões; a entrega ao usuário é sempre um arquivo de gráfico único montado seguindo o esqueleto da Seção 9.

O público-alvo são não-programadores (escritores, equipe de operações, pessoas que fazem slides). Eles falam em linguagem natural ("me ajude a desenhar a conversão deste trimestre para o WeChat"), sem dizer o nome do tipo de gráfico. Sua função é traduzir essa solicitação para o gráfico correto, bonito e pronto para publicação.

Zero — Restrições Rígidas de Template

As regras a seguir não são sugestões; a violação de qualquer uma requer retrabalho:

Deve gerar a partir de templates do repositório. Cada gráfico final primeiro bloqueia o número do tipo de gráfico em catalog.md, depois abre a implementação real da galeria correspondente: Lupi usa templates/lupi-gallery.html, Basics usa templates/basics-gallery.html, Glance usa templates/glance-gallery.html, e gráficos interativos grandes usam templates/big-*.html. Gráficos coloridos ainda usam esses templates originais como estrutura base; templates/color/ é usado apenas para consultar a paleta.
Deve manter o esqueleto de código do template selecionado. Partindo do <div class="card"> pelo título do cartão e do bloco de comentário // ════ Nome do Gráfico ════ correspondente, preserve sua estrutura SVG / Canvas / ECharts central, método de codificação de dados, proporções e ritmo de animação. É permitido substituir dados, títulos, anotações, fonte e layout necessário; é proibido desenhar um gráfico "parecido" fora do template, combinar múltiplos templates para criar um gráfico híbrido, ou reverter para o estilo padrão da biblioteca de gráficos.
A ordem de seleção padrão é fixa. Primeiro compare completamente Lupi Editorial (L1–L15), depois Lupi Basics (F1–F13). Se houver um template que possa representar os dados de forma honesta, acomodar rótulos e ser legível, deve ser selecionado a partir desses dois grupos.
Glance é o plano de fallback padrão, não uma primeira escolha concorrente. Só use Glance se nenhum dos templates de Lupi Editorial ou Lupi Basics for adequado, ou se o usuário solicitar explicitamente Glance, dashboard, monitoramento, relatório semanal ou leitura rápida de 3 segundos. Antes de fazer o downgrade, escreva explicitamente por que Lupi / Basics não são adequados.
Criar um novo tipo fora da biblioteca é o último recurso. Só quando Lupi, Basics, Glance e templates interativos não puderem acomodar os dados, você pode seguir o processo de tradução da Seção 6; o novo gráfico ainda deve herdar a sintaxe visual e a estrutura de código do template de galeria mais próximo.

Um — Fluxo de Trabalho (Sempre Passe por Estes Seis Passos)

Determine a forma dos dados. Não pergunte ao usuário que tipo de gráfico ele quer; veja a forma dos dados: comparação de categorias? séries temporais? proporções? valores positivos e negativos? pertencimento muitos-para-um? rede? distribuição de registros individuais? A forma é a chave para selecionar o gráfico.
Faça a auditoria de Lupi e Basics primeiro. Varra todos os candidatos de Lupi Editorial (L1–L15) e Lupi Basics (F1–F13) que possam acomodar a forma dos dados. Compare pelo menos 3 candidatos; se houver menos de 3, liste todos. Compare adequação semântica, honestidade das unidades, capacidade de rótulos, velocidade de leitura, força narrativa e se o mesmo tipo já foi usado neste lote.
Verifique Glance apenas quando necessário. Só se todos os candidatos de Lupi e Basics falharem, ou se o usuário solicitar explicitamente Glance / dashboard / monitoramento / relatório semanal / leitura de 3 segundos, então escaneie Glance (G1–G18). Ao selecionar Glance, registre por que Lupi e Basics não puderam acomodar os dados; não escreva apenas "Glance é mais intuitivo".
Bloqueie o template real e depois organize a página. Cada gráfico deve registrar o sistema, número do tipo de gráfico, arquivo de galeria e título do cartão, e usar a estrutura real e o código de renderização desse cartão como esqueleto. É proibido primeiro pensar "esta página deve contar seis coisas" e depois inventar tipos de gráfico; a narrativa da página só pode ser organizada após o bloqueio do template.
Forme lotes de acordo com a regra de número de gráficos. Um gráfico carrega apenas uma conclusão independente; remova conclusões duplicadas e, em seguida, decida a quantidade de acordo com a faixa padrão na Seção 1.1. Os templates devem ser alocados globalmente: sem repetição, sem empilhar o mesmo formato, sem adicionar gráficos forçadamente.
Renderize de acordo com o template e faça a auto-verificação (Seções Zero, Dois, Três, Oito). Verifique item por item se o produto final ainda corresponde à implementação da galeria selecionada; não troque a geometria central, codificação ou animação do template apenas porque os dados mudaram. Siga a Seção 6.5 para selecionar Mono ou um conjunto de presets coloridos para a entrega inteira; tipos de gráfico fora da biblioteca seguem o processo de tradução (Seção Seis).

1.1 Regra de Número de Gráficos

O número de gráficos é determinado pelo número de conclusões independentes, não por "quantas colunas de dados existem", e não é fixado em 5 ou 6 gráficos:

Tipo de Solicitação	Quantidade Padrão de Produtos	Regra
Pergunta única / Tabela única / Um indicador	1	Entregue apenas o gráfico mais forte; não expanda apenas para mostrar templates
Duas a três conclusões claras	2–3	Cada gráfico carrega uma conclusão diferente; pode compartilhar a mesma fonte de dados
Um artigo, tese ou estudo de caso completo	4–6	Cubra diferentes formas de dados como visão geral, composição, comparação, relação ou mudança
Usuário especifica quantidade	Conforme a solicitação	Ainda remova gráficos duplicados; se insuficiente, explique e faça menos

O limite padrão por página é 6 gráficos; acima disso, divida em várias páginas ou entregue por capítulo.
Candidatos, rascunhos de comparação Glance/Lupi não contam para o número final de gráficos; são parte do processo de seleção, não do lote final.
Se uma página tiver vários gráficos, pelo menos um deve ser uma visão geral; os demais devem fornecer novas dimensões de comparação, relações, mudanças temporais ou evidências detalhadas.
Se dois gráficos expressam a mesma conclusão, mantenha apenas aquele com o contexto de leitura mais adequado e o contrato de dados mais honesto.

Dois — Sintaxe Mono · Regras Rígidas (Violar Requer Retrabalho)

Padrão: referencie mono-tokens.js (ao distribuir como código aberto, incorpore o conteúdo inline no HTML). Valores que conflitem com os tokens devem seguir os tokens. Ao usar cores, apenas substitua os tokens de cor; fonte, bordas arredondadas, layout e animação ainda seguem mono-tokens.js.

Cores

Padrão: apenas os dois extremos cinza papel #F0EFEB e preto carvão #1C1C1A, com 7 níveis intermediários de escala de cinza. Exceções coloridas seguem a Seção 6.5 a partir de presets.
Luminosidade = Dados: o mais importante = o mais escuro (invertido em cartão escuro). Múltiplas séries são distribuídas ao longo da escala de cinza por importância, não em ordem arbitrária.
Sempre sólido: sem transparência, sem brilho, sem filtros gradientes, sem sombras. A textura vem apenas do contraste de luminosidade e das formas. A única exceção: gráficos de sobreposição (Radial Patchwork) onde a transparência codifica densidade — isso é dado, não decoração.
Cartão escuro (.card.dark) é apenas para dois tipos de gráfico: formas que precisam de fundo escuro (pétalas, linhas brilhantes / redes). Padrão: cartão claro; máximo de 1 cartão escuro por grupo de 4 cartões.

Tipografia

Família Inter. Título 700 / Valores numéricos no gráfico 800 / Rótulos de eixo 600. A estrutura fixa do cartão tem quatro partes: título conclusivo (h2) + subtítulo (legenda e intervalo de tempo, separados por ·) + gráfico + linha de fonte (CAIXA ALTA, com espaçamento entre letras).
O título deve ser uma conclusão, não o nome do tipo de gráfico: "Receita por plano" é aceitável, "Gráfico de barras" não; melhor ainda é com julgamento: "Onde ganhamos, onde sangramos".
Tamanho mínimo de fonte SVG: cartão de meia largura 6.5px, coluna inteira 5.5px. Informações que não cabem devem ser exibidas ao passar o mouse, não reduzindo o tamanho da fonte.

Formas

Bordas arredondadas do cartão: 24px, sem borda, sem sombra; separação por espaço em branco. Bordas arredondadas em cápsula nas extremidades das barras (topo arredondado em barras verticais, extremidade externa arredondada em barras horizontais).
Gráficos de barras nunca devem ter eixo quebrado. O contrato da barra é comprimento ∝ valor; quebrar o eixo quebra o contrato. A abordagem correta para valores extremos: ① deixe o valor extremo disparar para cima (mais honesto) ② gráfico principal + miniatura de lupa ③ Quebre a barra, não o eixo (declare que não cabe).
Forma de pétala (costura preta grossa + segmentos arredondados) é adequada apenas para gráficos radiais com divisões iguais ou aproximadamente iguais. Segmentos com larguras muito diferentes se obscurecem, reduzindo a legibilidade.

Animação

Animação de entrada ativada por padrão, quarticOut para entrada rápida e parada, sem saltos (entrada em onda pode usar elasticOut). Stagger de pontos: 8–15ms/item, barras: 80–130ms/barra.
Mecanismo de revelação unificado: toca apenas ao entrar no campo de visão + clicar para reproduzir novamente (usando obsReveal do token, com timer de limpeza).
Deve incluir fallback para prefers-reduced-motion (já incluído no CSS do token).
Animação não deve ser superior à estrutura: um efeito que requer a invenção de um novo layout para ser colocado não deve existir (lição do effectScatter).

Dados

Dados de demonstração usam rnd(i,k) pseudo-aleatório determinístico do token; desabilitar Math.random() — a atualização deve ser idêntica.
Valores e representação visual devem ser estritamente proporcionais. Codificação de área usa Math.sqrt(v) para converter raio; não use o valor diretamente como raio.

Três — Divisão de Dois Estilos

Sob a mesma paleta Mono, existem duas visões de mundo; a escolha depende do contexto e de quantos segundos o leitor está disposto a gastar:

	Série Glance (18 tipos)	Série Lupi (leitura detalhada, 15 tipos)
Unidade básica	Forma (barras grossas, arcos grandes, blocos de cor)	Registro (um ponto = um dado)
Linhas	2px+, sem hesitação	0,5–0,7px fio de cabelo
Agregação	Agregado antecipadamente, dê a conclusão	Recuse agregação, exponha a matéria-prima
Leitura	Olhada rápida (<10s)	Leitura de perto (30s+)
Contexto	Relatório semanal, dashboard, anotações rápidas	Relatório anual, página de história externa, pôster
Motor	Chart.js / ECharts	SVG escrito à mão

Estratégia padrão: Lupi Editorial → Lupi Basics → Glance. Sem um contexto claro, proíba o padrão Glance. Ao criar relatórios anuais, artigos longos no WeChat, pôsteres, READMEs de código aberto ou portfólios, selecione Lupi Editorial primeiro; quando os dados são escassos ou adequados para tipos de gráfico familiares, selecione Lupi Basics. Só entre em Glance se os dois primeiros grupos não tiverem um template adequado, ou se o usuário solicitar explicitamente dashboard, monitoramento, relatório semanal ou leitura de 3 segundos.

Auditoria completa de candidatos não significa "fazer todos os gráficos". Primeiro, use a forma dos dados para filtrar candidatos que possam codificar a mesma ontologia; depois, divida os candidatos em:

Semanticamente adequado: cada ponto, linha, área ou conta atrás de cada extremidade tem uma unidade real ou agregação clara.
Visualmente adequado: rótulos cabem, densidade suficiente, leitor consegue ler no tempo esperado.
Narrativamente adequado: a forma gráfica pode carregar o julgamento que esses dados devem contar, não apenas apresentar os números.

A seleção final é a interseção dos três, não "qual arquivo de template é mais fácil de copiar". A auditoria padrão deve ser concluída dentro de Lupi Editorial e Lupi Basics primeiro; só se ambos falharem, expanda para Glance. Se o mesmo lote precisa de múltiplos gráficos, faça uma alocação global dos candidatos: templates não repetem, formas alternam, máximo de um cartão escuro, evite que a página inteira se transforme em seis anéis ou barras horizontais semelhantes.

Poucos dados (apenas algumas porcentagens) não significa apenas Glance. O caminho correto para Lupi é a decomposição de unidades: desagregue números agregados em unidades contáveis (1 ponto = 1 pessoa / 1 ponto percentual); a densidade vem das unidades, não do número de registros. O significado da unidade é escrito no subtítulo; apenas unidades honestas são desagregadas (proporção total 100 → 100 pontos); não invente registros individuais que não existem. Ao arredondar, se a soma for menor que 100 (por exemplo, 49,0 + 27,4 + 13,9 + 5,0 + 3,2 → 98), escreva uma nota de rodapé "outros N foram arredondados", sem criar unidades falsas.

Prioridade do caminho Lupi para dados pequenos (validado em múltiplos casos):

Escaneie tudo primeiro, depois selecione o esqueleto do código — O grupo Basics F1–F13 (templates/basics-gallery.html) é o vocabulário Lupi para dados esparsos: barras / linhas / área / anel / barras horizontais / agrupadas / empilhadas / dispersão / cascata / calor / progresso / haltere / mapa de árvore retangular; o grupo Editorial L1–L15 fornece sintaxe para registros individuais, decomposição de unidades, relações e anotações. Não selecione diretamente um gráfico F só porque basics-gallery.html tem código pronto.
Comece com o template mais próximo da ontologia — Perguntas de múltipla escolha em porcentagem: compare L15, F5, L2 primeiro; composição de 100%: compare L14, L5, F4, G4 primeiro; funil: compare L13, expressão degradada de F1/F5 primeiro. A base de seleção é o método de codificação de dados, não a ordem do arquivo.
Só crie um novo se a biblioteca realmente não tiver a forma correspondente, e a nova criação deve estender a sintaxe existente na galeria (ticks em fio de cabelo, jitter determinístico rnd, brilho paint-order, anotações em CAIXA ALTA), sem introduzir referências externas — "estilo Lupi" refere-se à sintaxe visual dos gráficos da galeria, não ao estilo de desenho manual de Giorgia Lupi.
Gráficos de dados pequenos recém-criados devem ser preenchidos com camadas de estrutura ambiental: metade da beleza da galeria vem de elementos não-dados (linhas de papel de contabilidade, trilhos tracejados, escalas de aro, grade de colunas a cada 10 unidades, linhas de anotação). A camada de dados é honestamente esparsa; o orçamento de densidade é gasto em mobília. Apenas dados + uma linha de base em gráficos de dados pequenos certamente parecerá pobre.

No mesmo lote de produtos (vários gráficos em uma página), os templates não se repetem. 15 tipos Lupi são suficientes para alternar; quando o mesmo dado pode ser acomodado por vários templates, selecione aquele que ainda não foi usado neste lote.

Quatro — Árvore de Decisão de Tipos de Gráfico (Forma dos Dados → Candidatos)

Os números correspondem a catalog.md. Estes são apenas tabelas de recall de candidatos; a ordem das setas e da escrita não representa prioridade. A seleção real deve seguir: primeiro verifique todos os candidatos de Lupi Editorial e Lupi Basics; confirme que não há template adequado, só então é permitido usar candidatos Glance.

Comparação de poucas categorias (≤8) → G3 Chunky Bars ⇄ vertical F1 Rung Bars / horizontal F5 Tick Rows ⇄ L2 Dot Cascade (⚠️ cascade com nomes de categorias verticais, apenas quando o nome tem ≤4 caracteres ou é abreviatura curta; nomes longos em chinês: troque para F5/L5/L12)
Porcentagens de múltipla escolha (cada item independente 0–100, soma pode exceder 100) → G3 Chunky Bars ⇄ L15 Ballot Tally
Distribuição de múltiplas categorias (30–60 itens) → G12 Stagger Wave
Valores de categoria com positivos e negativos → G10 Diverging Bar
Proporção / Composição de 100% → G4 Dot Waffle ⇄ L14 Hundred Field ⇄ F4 Tick Donut (substituto padrão para gráfico de pizza); divisão aproximadamente igual e precisa de impacto → G2 Petal Rose; codificação dupla proporção×intensidade → G13 Big Slice; empilhado por categoria → F7 Stacked Rungs
Comparação de dois pontos no tempo (antes/depois / passado/presente) → Nível de categoria (≤6 categorias) → F12 Dumbbell Queue (horizontal, contas = unidades reais) ⇄ F6 Paired Rungs (escadas duplas lado a lado); apenas 2–4 séries para desenhar linha de tendência → Glance chunky slope (linha grossa, números grandes, conclusão no título). Gráficos de inclinação com muitos cruzamentos reduzem significativamente a legibilidade; não adicione estruturas decorativas apenas para Lupiizar.
Sequência diária (≤30 dias, com intervalo) → G1 Range Capsules ⇄ leitura diária F2 Hairline Line ⇄ (nível de 90 dias, com textura) L3 Barcode Lollipop; 30–60 dias para ver a forma → F3 Hairline Area
Crescimento acumulado → G18 Draw-in + Counter
Causalidade de duas séries (insumo vs. produto) → G8 Rainfall
Dados em tempo real → G17 Dynamic Stream
Classificação mudando ao longo do tempo → G16 Bar Race
Semana × Hora × Volume → G14 Single Axis ⇄ F10 Dot Heat
Cascata / Decomposição de aumento e diminuição (≤6 níveis) → F9 Rung Waterfall
Progresso de valor único (0–100%) → F11 Tick Gauge ⇄ G18 Draw-in + Counter
Dispersão bidimensional (≤20 pontos) → F8 Plumb Scatter; centenas de pontos → G15 Jitter Strip
Distribuição de grupos, registros individuais → G15 Jitter Strip
Categoria × Categoria + Volume (matriz) → Leve (≤100 células) L4 Arc Matrix ⇄ Pesado (grande intervalo, com anotações) L9 Bubble Almanac
Pertencimento muitos-para-um → Forma forte L5 Radial Convergence ⇄ Com lista de nomes L12 Type Colonnade
Funil / Diminuição em estágios → L13 Hourglass Stream
Estrutura hierárquica → G7 Tree LR
Hierarquia + Participação / Peso (duas camadas, valores positivos) → F13 Nested Treemap; apenas quem pertence a quem, sem comparar tamanho → G7 Tree LR
História de vida de sequência de eventos → L11 Trend Lineage
Tempo de nascimento + estado atual de múltiplas entidades → L1 Launch Fan
Distribuição de eventos individuais ao longo do dia → L10 Radial Patchwork
Escala bipolar (ambos extremos são válidos) → L7 Brand Spectrum. Observe a diferença da escala unipolar (radar): radar unipolar usa ECharts nativo
Rede → ≤15 nós G6/G11 gráfico pequeno; >15 ou precisa consultar números → B1 Circular / B2 Força-direcionada; fluxo de múltiplos segmentos → B3 Threads
Múltiplos grupos × Grade (com senso de decoração) → L8 Dotty Matrix; precisa ler números → aplainar com G14
Carrossel de múltiplas dimensões do mesmo conjunto de entidades (demonstração) → G9 Scatter Morph

Regras Rígidas para F13 Nested Treemap

Aceita apenas dados hierárquicos e pesos não negativos; o valor pai é a soma dos filhos, proibindo contradição entre pai e filho. A área é entregue diretamente ao layout treemap do ECharts, sem tirar a raiz quadrada dos valores.
Padrão: exibe duas camadas (grupo pai + folhas). Mais de duas camadas e o leitor precisa consultar camada por camada: habilite drill-down; entregas estáticas comuns mantêm nodeClick:false, evitando toques acidentais que mudem a visualização.
A escala de cinza Mono representa apenas a hierarquia, sem atribuir profundidade aleatória a cada folha; o grupo pai é diferenciado pelo título, espaçamento entre grupos e bordas. Após remover a cor, ainda deve ser possível ver a divisão dos grupos.
Porcelain usa luminosidade de um único matiz para representar participação ou hierarquia ordenada do grupo pai; palm usa matizes de cores com no máximo 4 categorias de nível superior; wire mantém tons de cinza, permitindo apenas um protagonista claro usando HERO.
Quando a área já expressa o valor, a cor não pode repetir o mesmo valor sem explicação. O subtítulo deve escrever claramente area = ..., e ao usar cor, também escrever color = ....
Quando as folhas excedem 30, os rótulos estão amplamente ausentes, ou o retângulo mínimo é muito pequeno para formar uma área de interação estável, primeiro mescle a cauda longa como "Outros", divida em vários gráficos, ou mude para G7 / L12 / gráficos de relação da série B.
Tooltip deve exibir pelo menos o caminho hierárquico completo, o valor original e a proporção do total; os rótulos do cartão devem ser ocultados se não couberem, não reduzidos abaixo do tamanho mínimo da fonte.

Cinco — Três Perguntas de Interação (Decida entre Estático ou Interativo)

Faça na ordem:

Há um registro real por trás desta linha/ponto? Não (decoração puramente textural, como raios de Cluster Field, linhas de Hourglass) → Proíba adicionar interação; passar o mouse sobre elementos sem conteúdo é enganoso.
Há um registro → Pode ser lido sem clicar? Elementos <50 e com anotações nas extremidades (como Colonnade) → Estático é suficiente; hover é um extra.
Elementos >50 ou caminhos com múltiplos segmentos (como Threads) → Deve ter hover/pin, caso contrário, é apenas um gráfico de atmosfera. Consulte templates/big-threads.html para implementação: coloque uma linha gêmea transparente de 9px sob a linha visível como zona de interação; ao passar o mouse sobre uma linha, destaque o caminho inteiro; ao passar o mouse sobre um rótulo, destaque o feixe inteiro; ao clicar, fixe.

Seis — Tipos de Gráfico Fora da Biblioteca · Processo de Tradução

Quando o usuário solicitar um gráfico que não está entre os 49 tipos (ou enviar uma imagem de referência), não é impossível fazer, é criar na hora. Quatro passos; o primeiro não pode ser pulado:

Primeiro responda à ontologia: O que este tipo de gráfico codifica? Cada canal visual (posição/comprimento/ângulo/área/luminosidade/densidade) corresponde a qual dimensão de dados? Se não conseguir responder, pergunte ao usuário pela estrutura dos dados. Copiar a forma sem a alma = trabalho desperdiçado (pictorial bar já errou "contagem de símbolos" por "árvore crescendo", retrabalhado).
Encontre o parente mais próximo: No catálogo, encontre o gráfico com a forma de dados mais semelhante como ponto de partida, herdando seu esqueleto de layout e ritmo de animação.
Use tokens para criar: Paleta, fonte, bordas arredondadas, parâmetros de animação todos de mono-tokens.js; não invente novas cores ou tamanhos de fonte. O resultado deve "parecer da mesma família" que os gráficos da biblioteca. Ao usar cores, mude as cores de um único preset em color-presets.js; outros tokens ainda seguem mono-tokens.js.
Passe pelas regras rígidas da Seção Dois e pela auto-verificação da Seção Oito, com o mesmo padrão dos gráficos da biblioteca.

Regras adicionais para tradução de imagens de referência: Identifique a qual escola a imagem de referência pertence (Glance ou Editorial). A densidade editorial, anotações e sensação de desenho à mão (blob) são parte da ontologia; não as simplifique — almanac já foi retrabalhado por "não ousar apertar".

Seis e Meio — Cor (Seleção Automática por Contexto, Sistema Único de Cores)

Mono é o plano de fallback, não a resposta obrigatória quando a cor não é acionada. Mesmo que o usuário não mencione cor, avalie se a cor é adequada com base na semântica dos dados, número de categorias, contexto de leitura e tom do conteúdo; se a relação não for clara, ou a cor não trouxer valor de informação real, volte para Mono.

O rascunho colorido inicial seleciona um dos três conjuntos de presets; os valores de cor estão em color-presets.js, amostras em templates/color/. Os presets são para obter rapidamente uma primeira versão estável e unificada, não uma paleta fixa. Quando o usuário solicitar "um pouco mais escuro", ajuste dentro do sistema de cores atual; quando o usuário fornecer explicitamente cores de marca, valores ou paleta completa, crie uma paleta customizada seguindo as regras abaixo. Após ajustes, verifique novamente o contraste, hierarquia visual e semântica dos dados.

O mesmo HTML ou conjunto de entregas deve primeiro bloquear um sistema de cores global: Mono, porcelain, palm, wire ou uma paleta custom. Todos os gráficos compartilham essa escolha. Se um gráfico não suportar o sistema selecionado, não mude a cor individualmente; mude para um sistema compatível globalmente ou retorne todo o grupo para Mono.

A estrutura base é sempre a galeria original. Consulte a galeria em templates/ para o código de renderização; templates/color/ é apenas para consultar a paleta. Primeiro, selecione a estrutura de acordo com a Seção Zero; depois, decida se troca a pele.

Usar ou não cor

Julgue na seguinte ordem de prioridade:

Usuário especifica explicitamente. Se o usuário solicitar uma cor, tom ou preset, priorize a obediência, mas ainda verifique capacidade, contraste e semântica dos dados.
Agente seleciona automaticamente. Mesmo que o usuário não mencione cor, se a forma dos dados e o contexto tiverem uma relação clara com algum preset, o agente pode usar automaticamente: séries ordenadas simples adequadas para porcelain; poucas categorias não ordenadas adequadas para palm; necessidade de um ponto focal controlado adequado para wire.
Relação não clara → Use Mono. Categorias em excesso, registros de alta densidade, cor sem significado estável, ou todo o grupo de gráficos não pode compartilhar o mesmo preset → Use Mono.

Cor não é uma versão melhorada, mas uma ferramenta semântica que o agente pode selecionar ativamente. Na entrega, explique em uma frase o sistema de cores escolhido e seu significado de dados.

Paleta Personalizada (Ativada apenas quando o usuário solicitar explicitamente)

O agente não pode inventar por conta própria um quinto padrão estético. Uma paleta customizada só é estabelecida quando o usuário fornece valores de cor explícitos, cores de marca, diretrizes de marca ou "use a paleta desta imagem de referência"; apenas "mais bonito" ainda seleciona a partir dos três presets internos.

Primeiro determine a lógica da cor, depois atribua os valores. Dados ordenados usam gradiente de luminosidade de um único matiz; categorias não ordenadas usam cores qualitativas; quando precisa focar, use neutro + uma cor de destaque. Proibido pegar cinco cores e espalhá-las uniformemente por todos os elementos.
Estabeleça papéis completos, não espalhe hexadecimais diretamente. Custom define pelo menos BG, TXT, MUT, GRID, DATA; quando precisa destacar, defina HERO; dados ordenados definem RAMP; dados categóricos definem CAT. O produto final incorpora um objeto CUSTOM, e todos os gráficos obtêm cores dos papéis.
Interprete de acordo com a quantidade de entrada. 1 cor gera gradiente de luminosidade do mesmo matiz; 2 cores padrão: uma cor de dados principal + cor de destaque, não tratadas automaticamente como duas categorias iguais; 3–6 cores só entram em CAT se os dados realmente tiverem categorias correspondentes. Mais de 6: primeiro mescle categorias, mude para posição/rótulos, ou volte para Mono.
Permite derivar claro/escuro, proíbe contrabandear novos matizes. Cores claras: mistura da cor do usuário com BG; cores escuras: mistura da cor do usuário com TXT; proibido usar valores de cor de porcelain, palm ou wire para completar o custom.
Contraste é uma regra rígida. Corpo do texto e pequenos rótulos contra o fundo: pelo menos 4,5:1; texto grande: pelo menos 3:1; bordas críticas, formas de dados e estados interativos contra cores adjacentes: pelo menos 3:1. Se não atender, ajuste a luminosidade primeiro; não mude o matiz principal especificado pelo usuário.
Cor não pode ser a única pista. Categorias ainda têm rótulos; ordinais ainda mantêm posição/comprimento/área; destaques ainda têm título ou anotação explicativa. Usuários com deficiência visual de cor, após remover a cor, ainda devem entender a estrutura do gráfico.
Apenas uma paleta custom por vez. Custom não se mistura com nenhum preset interno; entregas com múltiplos gráficos compartilham o mesmo CUSTOM. A menos que o usuário solicite explicitamente que a cor da marca seja fixada como um preset de projeto, o custom é incorporado apenas no produto atual, não gravado de volta em color-presets.js.

Se o usuário solicitar posteriormente "um pouco mais escuro", "fundo mais quente" ou substituir um valor de cor, modifique o papel correspondente e verifique novamente todo o contraste e mapeamento semântico; não apenas mude o elemento mencionado.

Qual preset escolher: primeiro veja a forma dos dados, depois o tom

Forma dos Dados	Permitido	Motivo
Ordenado / Série única (progresso, calor, série temporal, indicador único, classificação)	porcelain, wire	O contrato de luminosidade = dados ainda se mantém
Categorias não ordenadas ≤4	palm	Matiz corresponde à categoria
Categorias não ordenadas 5–6	palm (apertado)	Depende de luminosidade e saturação para ajudar na distinção
Categorias >6	Escala de cinza Mono	A capacidade do preset colorido é insuficiente
Precisa de contenção mas de um ponto focal	wire	Tons de cinza carregam dados, laranja marca apenas o protagonista

O usuário dirá	Preset	Tom
Azul, frio, acadêmico, racional, sério, tecnológico	porcelain	Escala de azul de matiz único
Verde, quente, natural, suave, vintage, Morandi	palm	Verde-amarelo baixa saturação, âmbar como destaque
Preto e branco, contido, revista, editorial	wire	Preto e cinza com um toque de laranja fluorescente

Regras Rígidas para Cor

Mesmo entrega usa apenas um sistema de cores. Um gráfico, o mesmo HTML ou o mesmo conjunto de gráficos irmãos pode usar apenas Mono, um preset de color-presets.js, ou uma paleta custom explicitamente solicitada pelo usuário. Proibido misturar presets entre si, e proibido que custom pegue emprestado cores de presets internos para complementar.
Espessura da linha × 1,8, piso de transparência 0,85. Linhas finas em tons de cinza podem desaparecer quando trocadas por cores claras; exceto dot heat.
Cada gráfico tem pelo menos 3 tons ou posições de cor. Usar apenas 1–2 cores: volte para tons de cinza.
Cor deve conectar dimensões reais. Escala ordinal conecta valor; cores segmentadas conectam meses ou segmentos; cores categóricas conectam categorias; nota de rodapé explica o que a cor está codificando.
Cor de destaque é apenas para um protagonista. Um segundo protagonista dissolve o destaque.
Cor de dados em cartão escuro deve ser mais clara que o fundo. Gráficos grandes em fundo escuro usam o bloco DARK do preset. big-circular / big-force / big-threads apenas com porcelain e palm; wire usa a versão Mono original de gráficos grandes.
Em palm, DATA e HERO devem ser diferentes. Âmbar e verde-oliva têm luminosidade semelhante; não os trate como cores de categorias iguais.

Sete — Quando Dizer Não

Saber recusar é mais confiável do que aceitar tudo. Não faça nos casos a seguir e ofereça alternativas:

Gráfico de barras com eixo quebrado → Recuse, dê três opções honestas (disparar para cima / lupa / quebrar a barra, não o eixo).
Brilho / Vidro / 3D → Recuse, mantenha a sintaxe visual existente. Valores de cor personalizados mapeados conforme regras custom; mistura de sistemas de cores recusada.
Usar múltiplos matizes para uma única série ordenada → Recuse. Dê porcelain, wire ou volte para Mono.
Categorias >6 ainda exigindo cor → Recuse, volte para escala de cinza Mono.
Mapas (coropléticos, mapas de trajetória) → A biblioteca não tem pipeline geográfico; diga honestamente que não pode fazer, não force um desenho impreciso.
Adicionar interação a elementos puramente decorativos (Pergunta 1 da Seção Cinco) → Recuse e explique.
Reconstruir gráfico de radar → Não reconstrua; use ECharts nativo + troca de pele com token Mono (testado: em cenários de apresentação, "tipo de gráfico reconhecível" tem valor).
Poucos dados não suportam o tipo de gráfico selecionado (por exemplo, 3 nós para força-direcionada) → Faça downgrade para um gráfico mais simples e explique.

Oito — Lista de Verificação Antes da Entrega

Os valores e a representação visual são proporcionais? (Área usou sqrt? Barra não quebrou eixo?)
A paleta está sob controle? Toda a entrega HTML ou conjunto de entregas usa apenas Mono, um preset interno único ou um custom? Se Mono usar qualquer cor fora da escala de cinza, retrabalhe; se cor interna usar outra cor de preset, retrabalhe; custom só obtém cor de CUSTOM e passou na verificação de contraste?
Os rótulos se sobrepõem? (Lição do barcode: picos próximos devem ter espaçamento mínimo forçado)
O tamanho mínimo da fonte foi respeitado? (Meia largura 6,5 / Coluna inteira 5,5)
Os dados de demonstração são determinísticos rnd? Atualizar duas vezes, resultados iguais?
O mecanismo de revelação está funcionando? (Toca ao entrar na tela, clica para reproduzir, timer não empilha, fallback reduced-motion presente)
node --check passou pela sintaxe (extraia o conteúdo de <script> para verificar).
O cartão tem os quatro componentes? O título é uma conclusão, não o nome do tipo de gráfico?
O subtítulo explica a legenda claramente? (Leitor sem código, apenas esta linha)
A auditoria completa de candidatos foi realizada? Pelo menos 3 candidatos e motivos de eliminação, não apenas "qual template foi usado".
Se for uma página com vários gráficos, os templates foram alocados globalmente? Há repetição de formas semelhantes, excesso de cartões escuros, todos os gráficos se tornaram o mesmo tipo radial?
Cada gráfico registrou o número do tipo, arquivo de galeria e título do cartão? A estrutura central do produto final realmente vem desse template, não de uma reinvenção?
Se usar Glance, foi escrito por que Lupi Editorial e Lupi Basics não são adequados? Se não, retrabalhe para Lupi / Basics.
Última pergunta: Coloque este gráfico ao lado do cartão correspondente na galeria selecionada. É da mesma família de templates, ou apenas "estilo parecido"?

Nove — Esqueleto de Arquivo Único

<!doctype html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mono — {Nome do Gráfico}</title>
<!-- Quando precisar de ECharts: -->
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
<!-- Quando precisar de Chart.js (G1 / G3): -->
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="{MONO.FONT.link}" rel="stylesheet">
<style>/* MONO.CARD_CSS inline */</style>
</head>
<body>
<div class="grid2">
  <div class="card"><!-- ou card dark / card wide -->
    <h2>{Título Conclusivo}</h2>
    <div class="sub">{Explicação} · {Legenda} · {Intervalo de Tempo}</div>
    <!-- Contêiner do gráfico, escolha um dos três motores: -->
    <div class="ch" id="ch"></div><!-- ECharts -->
    <!-- SVG escrito à mão: <svg id="ch" viewBox="0 0 400 320"></svg> -->
    <!-- Chart.js (G1/G3): <div class="wrap"><canvas id="ch"></canvas></div>, com .wrap{position:relative;height:320px} -->
    <!-- ⚠️ Chart.js deve ter fallback para `prefers-reduced-motion`, veja MONO.TOKEN.CSS -->
    <div class="source">FONTE: {Fonte}</div>
  </div>
</div>
<script>
  <!-- Código de renderização do gráfico aqui -->
</script>
</body>
</html>

*Guias complementares: catalog.md para relacionar número do tipo de gráfico e forma dos dados; templates/ para código de renderização; exemplos de paletas em color-presets.js;Vá direto implementar, não explique demais.

Lieflat Charts

O que é Lieflat Charts?

Perguntar na sua IA favorita

Documentação