{ "meta": { "name": "RiLiGar Zen", "version": "1.0.0", "source": "@riligar/components-kit", "docs": "website/branding/", "componentCount": 24, "primitiveCount": 6 }, "tokens": { "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 em perda quantificada)", "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}, ls=\"1px\"", "Í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,