{ "meta": { "name": "Zen", "version": "1.0.0", "source": "@ciromaciel/components-kit", "docs": "ciromaciel.click/design-system", "componentCount": 28, "primitiveCount": 7 }, "tokens": { "APPLE_REFERENCE": [ { "group": "Adotado", "note": "Entrou no components-kit e no dashboard-kit; vale em todo site e todo painel.", "items": [ { "topic": "Movimento", "rule": "Sob \"Reduzir movimento\", deslocamento vira nada ou esmaecimento.", "here": "Hover, pressão e rolagem suave desligam; o menu lateral do painel aparece em vez de deslizar." }, { "topic": "Pressão", "rule": "Todo botão mostra que foi apertado.", "here": "Botão pressionado volta ao chão e escurece (brightness 0.92)." }, { "topic": "Foco", "rule": "O anel segue a forma do elemento; um só em toda a interface.", "here": "2px gray.9 a 2px de distância, quadrado. Eram três cores diferentes." }, { "topic": "Contraste", "rule": "Toda cor própria tem uma variante de contraste aumentado.", "here": "prefers-contrast: more desloca gray.2–gray.6 um degrau para o escuro." }, { "topic": "Alvo de toque", "rule": "44×44 para o dedo; 28 é o padrão denso do desktop.", "here": "Ponteiro grosso ganha piso de 44px em Button, ActionIcon e CloseButton." }, { "topic": "Tempo", "rule": "Prefira fechar à mão a sumir sozinho.", "here": "notify.error fica até ser fechada; sucesso e info saem em 5s." }, { "topic": "Erro", "rule": "Diga como resolver, perto do problema, sem culpar e sem \"Ops\".", "here": "LeadForm: \"Preencha o campo E-mail\" no lugar de \"Obrigatório\"." }, { "topic": "Rastreamento", "rule": "Texto pequeno abre, texto grande fecha.", "here": "O tracking dos labels nunca chegava à tela (prop ls, que o Mantine ignora). Agora é lts, nos 152 arquivos." }, { "topic": "Escrita", "rule": "Verbo no botão, reticências quando falta informação, tooltip ≤75 caracteres.", "here": "Grupo \"Escrita\" no checklist." }, { "topic": "Sucesso", "rule": "Uma cor por significado, nunca sozinha.", "here": "Verde para todo \"deu certo\" (green.6 preenche, green.7 escreve). Eram três." }, { "topic": "Texto", "rule": "Hierarquia pela cor do papel, não por acaso.", "here": "Texto sem cor herda o corpo gray.6; título diz gray.9. O padrão era gray.9 nos sites e #000 nos painéis." }, { "topic": "Modo escuro", "rule": "A base recua; o que sobe clareia. Não é a rampa invertida.", "here": "Rampa por elevação nos dois kits; padrão Automático; um botão que alterna, com o estado dito em palavras." }, { "topic": "Consistência", "rule": "O mesmo papel com a mesma aparência em todo lugar.", "here": "Um panelTheme no dashboard-kit para os 18 painéis. h2 era 48px sobre um h1 de 36px." } ] }, { "group": "Já era assim", "note": "A Apple chega pelo outro lado à mesma regra — confirma, não muda.", "items": [ { "topic": "Cor", "rule": "Nunca só a cor para significar.", "here": "Glifo carrega o estado, palavra carrega o significado." }, { "topic": "Hierarquia", "rule": "Uma tinta em vários níveis; superfícies por papel, não por valor.", "here": "A rampa de dez cinzas com papéis nomeados." }, { "topic": "Forma", "rule": "Raio interno = raio externo − respiro.", "here": "Raio 0 satisfaz por construção." }, { "topic": "Marca", "rule": "A marca cede ao conteúdo; o logo não se repete.", "here": "Lei 1: conteúdo sobre cromo." }, { "topic": "Carregamento", "rule": "Placeholder com a forma do que vem.", "here": "Skeleton com a grade real é bloqueio de merge." }, { "topic": "Exclusão", "rule": "Desfazer vence confirmar; confirmar só o irreversível; destrutivo nunca como ação primária.", "here": "undoable com Desfazer e ⌘Z; hold de 3s para credencial; no modal de exclusão, Cancelar primeiro e destrutivo em contorno." }, { "topic": "Modal", "rule": "Um de cada vez, nunca empilhado.", "here": "useExclusiveModal." } ] }, { "group": "Não adotado", "note": "Regras de plataforma ou que contrariam uma decisão deste sistema.", "items": [ { "topic": "Caixa do botão", "rule": "Title Case em botões e menus.", "here": "Não existe em português. O botão continua em caixa alta, peso 800, 1px." }, { "topic": "Liquid Glass", "rule": "Vidro translúcido na camada de controles.", "here": "Contraria a lei 1. O cromo se separa por filete e posição, não por desfoque." }, { "topic": "Cápsula", "rule": "Controles em cápsula para o toque.", "here": "Contraria o raio 0." }, { "topic": "Tracking do SF", "rule": "Tabela de tracking positivo acima de 24pt.", "here": "É da troca óptica da SF Display. A Montserrat fecha em display: −0.04em." }, { "topic": "Peso 600", "rule": "Semibold como peso de ênfase.", "here": "O sistema pula de 500 para 700. Ênfase continua sendo 800." } ] } ], "BLOCKERS": [ { "symptom": "border-radius diferente de 0", "law": 1 }, { "symptom": "Texto de conteúdo abaixo de 12px", "law": 2 }, { "symptom": "Erro e sucesso com a mesma cor", "law": 5 }, { "symptom": "Métrica ou tabela sem skeleton com a forma do conteúdo", "law": 3 }, { "symptom": "box-shadow em qualquer lugar", "law": 1 }, { "symptom": "Cor fora da rampa gray", "law": 1 }, { "symptom": "Salto tipográfico <2× entre níveis", "law": 2 }, { "symptom": "Corpo em gray.9", "law": 2 }, { "symptom": "Seção que reimplementa o palco", "law": 3 }, { "symptom": "Prop que aceita JSX arbitrário", "law": 4 }, { "symptom": "Métrica grande sem nota", "law": 5 } ], "BORDERS": [ { "name": "Padrão", "value": "1px solid gray.2", "usage": "Delimitação neutra", "width": 1, "color": "#F3F4F6" }, { "name": "Acento", "value": "4px solid gray.2", "usage": "Topo do CTABanner: \"aja aqui\"", "width": 4, "color": "#F3F4F6" }, { "name": "Citação", "value": "2px solid gray.3", "usage": "Compete com texto, não com fundo", "width": 2, "color": "#E5E7EB" }, { "name": "Input", "value": "1px solid gray.2", "usage": "Borda inteira, radius 0", "width": 1, "color": "#F3F4F6" } ], "BREAKPOINTS": [ { "token": "xs", "em": "36em", "px": 576, "usage": "Raro" }, { "token": "sm", "em": "48em", "px": 768, "usage": "1 col → 2 col" }, { "token": "md", "em": "62em", "px": 992, "usage": "O salto principal: mobile → desktop" }, { "token": "lg", "em": "75em", "px": 1200, "usage": "2 col → 4 col" }, { "token": "xl", "em": "88em", "px": 1408, "usage": "Raro" } ], "CHECKLIST": [ { "group": "Tokens", "items": [ "Zero hex literal no componente — tudo via c=\"gray.N\" / bg / var(--mantine-color-gray-N)", "Zero px de fonte hardcoded em título — usa var(--fz-*)", "Peso é 500, 700, 800 ou 900. Nenhum outro valor", "letter-spacing é -0.04em, 1px, 1.5px ou 2px", "radius=\"0\" em todo elemento que aceita raio" ] }, { "group": "Tipografia", "items": [ "Salto entre níveis adjacentes é ≥3×", "Corpo é gray.6; dado tabular é gray.7 — nunca gray.9", "Título é gray.9 — nunca gray.6", "Todo label uppercase tem fw={800} e tracking positivo", "gray.4 só aparece em label uppercase, nunca em parágrafo", "Um único

na página", "
manual em título está dentro de .hide-mobile-br" ] }, { "group": "Cor", "items": [ "Nenhuma cor fora da rampa gray, exceto red.6 (perda, erro) e green.6/green.7 (sucesso) — sempre com palavra ou glifo", "Toda borda é 1px solid gray.2 — salvo o topo 4px do CTABanner e a citação 2px gray.3", "Fundo de palco é white ou gray.1, alternando com o palco anterior", "Sem gradiente, sem sombra colorida" ] }, { "group": "Espaço", "items": [ "Palco usa py={{ base: 80, md: 120 }} e Container size=\"lg\"", "Stack gap=\"xl\" entre anúncio e conteúdo", "Corpo tem maw ≤ 780", "Mobile (base) é 1 coluna", "Onde há filete divisor, spacing={0}", "Borda divisória tem media query que a desliga quando a grade empilha" ] }, { "group": "Forma", "items": [ "Sem sombra", "Paper só onde a superfície precisa se declarar; caso contrário Card ou Box", "Input tem borda inteira de 1px gray.2 e radius 0", "Botão é uppercase, fw={800}, lts=\"1px\"", "Botão carregando mantém a cor e mostra as barras (14px no painel, 16px no site), centralizadas; sem camada por cima", "Ícone é Tabler com stroke={1.5}" ] }, { "group": "Arquitetura", "items": [ "Componente envolve Section em vez de refazer o palco", "Props são dados, não JSX", "Contrato padrão presente: id, badge, subtitle, title, background", "Usa primitivas em vez de reimplementar", "cta segue o shape universal", "Exportado em src/index.js", "Padrão repetido em 3+ componentes foi promovido a primitiva" ] }, { "group": "Painel (telas de aplicação)", "items": [ "Texto tabular usa o papel \"dado\" (12–14px), não o corpo de 16px", "Nenhum texto abaixo de 12px, exceto label uppercase (10–11px)", "Skeleton reproduz a grade real do conteúdo, não um retângulo genérico", "Refetch não pisca skeleton por cima de dado já visível", "Erro usa red.6 — nunca a mesma cor do sucesso", "Só um componente registra ⌘K por tela", "Busca cancela a requisição anterior (AbortController)", "Ação destrutiva pede permanência (hold 3s), não um \"tem certeza?\"", "Ação destrutiva é acionável por teclado", "Linha de tabela inteira é clicável quando leva a um detalhe" ] }, { "group": "Acessibilidade", "items": [ "Imagem tem alt; vídeo tem aria-label", "CTA com href renderiza ; com onClick,