KippiDS

Âncoras de marca

Escala de tons — Roxo (posição 10 = âncora)

Escala de tons — Coral

Texto, fundo e ação

Feedback

Regra: coral puro nunca como texto/ícone isolado

Display (Ashby — cai para Inter se a fonte não estiver instalada)

Text (Inter)

Escala de espaçamento (grid de 4px)

Escala de raio

Sombra / elevação

Anel de foco — clique e dê Tab no botão

Backdrop blur

duration-fast (150ms) e duration-spin (0,8s) — passe o mouse / observe o giro

Em movimento reduzido (prefers-reduced-motion), a transição do botão quase zera e o spinner só desacelera (nunca para) — ver 00-fundacao/movimento.md.

Matriz de combinações aprovadas

Vetor real do wordmark (assets/logos/kippi-wordmark.svg), embutido uma única vez como <symbol> e reusado nas 6 combinações via <use> — mesma técnica de sprite do v1.

A legenda abaixo do logo (ex. "Secundária · 2.78:1") é texto de interface comum — segue a regra de pareamento on-color normalmente, mesmo quando o logo por cima dela tem contraste baixo por decisão de governança de marca (caso "Restrita"). São duas regras diferentes: a cor do logo vem da matriz de marca (fixa, documentada); a cor do texto ao redor vem do pareamento on-color (calculado). Por isso a legenda sobre coral usa texto escuro, não branco — ver cores.md.

Solar Icons (Linear, 1.5px) — amostra, cores da marca

Renderizados ao vivo via API pública do Iconify (api.iconify.design) — precisa de internet pra carregar; nomes a confirmar contra o pacote oficial (@iconify-json/solar) quando ele for instalado de verdade no projeto.

Início

Buscar

Perfil

Config.

Notif.

Calendário

Mensagem

Curtir

Favorito

Excluir

Concluído

Cancelar

Solar Icons (Line Duotone) — duas cores da marca

Estilo Line Duotone do Solar (mesmo traço 1.5px do resto do pack, já fechado em icones.md) — cada ícone vem dividido em duas camadas no dado do pack; camada "cheia" recebe action-primary (roxo), camada de apoio recebe action-accent (coral), as duas em opacidade plena — regra já documentada em 00-fundacao/icones.md §Como a cor da Kippi entra (duotone de verdade com as duas cores primárias, não uma cor em duas intensidades). Embutido como SVG inline (dado real de @iconify-json/solar, MIT) — a API pública só recolore com uma cor só, não dá pra pintar as duas camadas separadamente por URL. "Buscar" e "Favorito" são exceções do pack (sem 2ª camada Duotone) — mesma lista já prevista em icones.md.

Aplicação primária (branco sobre roxo) e sobre fundo claro

Frio 24h

Quente 12h

Parede dupla

Aço inox

Eco

Livre de BPA

Todo par fundo → texto companheiro da fundação, calculado ao vivo

Calculado nesta página em JavaScript, pela fórmula de luminância relativa da WCAG 2.1 (§1.4.3) — não é uma tabela digitada à mão. Se um valor de token mudar no futuro sem atualizar o par, o selo aqui vira "falha" sozinho. Ver a regra completa em cores.md.

Fundo fora da paleta fixa — escolha automática (pickTextColor)

Pra qualquer cor que ainda não é token, a mesma fórmula decide entre text-default e branco — nunca cor fixa "porque geralmente funciona". Teste ao vivo:

Variantes × forma (pílula / retangular)

Estrutura vem do button.tsx do ReUI (shadcn/ui, MIT) — <button> nativo, anel de foco em :focus-visible, estado desabilitado, aria-invalid. Nada do visual original foi mantido: cada par fundo/texto abaixo é um par on-color já verificado em cores.md. Duas formas por variante: pílula (padrão, radius-full) e retangular (radius-md, 8px) — a mesma cor/estado, só o raio muda. link não tem forma própria (não é uma "caixa"). Documentação completa em botoes.md; código-fonte em button.css (HTML/CSS) e Button.tsx (React/cva).

Passe o mouse (escurece/clareia) e dê Tab (anel de foco) pra testar ao vivo. Primeira coluna: pílula. Segunda: retangular.

Tamanhos (variante default) — pílula e retangular

Botão só-ícone sempre leva aria-label — sem texto visível, é o único jeito do leitor de tela saber o que o botão faz.

Com ícone, carregando, inválido, desabilitado — pílula e retangular

Padrões implementados (Fase 1) — copiar com feedback, assíncrono

As duas primeiras composições de prioridade Alta sem dependência nova, catalogadas na área de variações abaixo (marcadas Feito). Clique pra testar de verdade — cópia real (Clipboard API) e uma ação assíncrona simulada. Fonte: padroes.css + padroes.js (HTML/CSS/JS puro) e CopyButton.tsx / AsyncButton.tsx (React). Documentação completa em botoes.md §Padrões implementados.

Copiar: confirma por 2s (ícone de check + fundo feedback-success) e volta ao normal. Assíncrono: disabled + spinner (~1,2s simulado) → sucesso (~1,6s) → normal. Mudança de estado anunciada via aria-live="polite" pra leitor de tela.

Padrões implementados (Fase 3) — voltar, hambúrguer animado, expansível

As 3 composições de prioridade Baixa sem nenhuma dependência nova. Fonte: padroes.css + padroes.js e HamburgerButton.tsx (React — voltar/expansível são só composição do Button existente, sem componente novo). Documentação completa em botoes.md §Padrões implementados.

Passe o mouse (ou Tab) no hambúrguer e no botão de curtir pra ver a animação. Hambúrguer usa aria-expanded como única fonte de verdade — o CSS lê o próprio atributo, sem classe .is-open separada.

Cores × aparência (preenchido / outline / light)

Estrutura vem do badge.tsx do ReUI (shadcn/ui, MIT) — 6 cores semânticas × 3 aparências. Todo o visual é da fundação Kippi: preenchido usa o par on-color já verificado, outline usa a cor crua como borda/texto (quando passa em contraste), light usa color-mix(cor 15%, white) — mesmo padrão das tags coloridas deste manual. warning é a exceção: cru mede 2,07:1 como texto (falha), por isso outline/light usam a versão escurecida 65% (achado documentado em badges.md). Código-fonte em badge.css e Badge.tsx.

Raio padrão é radius-sm (chip, não pílula) — .k-badge--full pra pílula opcional: Full radius

Tamanhos

Com ícone, removível, ponto de status, como link

Clique no × pra testar a remoção de verdade (sai do DOM depois da transição de saída). Badge estático não tem anel de foco — só o botão de remover e o badge-como-link, que são os únicos interativos.

Badge de contagem sobre botão

Fecha o item que ficava catalogado em botoes.md §Área de variações, esperando o Badge existir. .k-badge-anchor (wrapper position: relative) + .k-badge--count (posição absoluta, borda de 2px na cor da superfície pra separar do ícone atrás) — usa Badge + Botão básicos, nenhum token novo.

Input — tamanhos e estados

Input — composições (ícone, senha, contador)

Textarea

Select

Checkbox

Radio

Setas do teclado alternam entre as opções do mesmo grupo (mesmo name) — comportamento nativo do navegador, testado via Tab + setas.

Field — orientação vertical (padrão)

Field — orientação horizontal e responsiva

horizontal é fixo (sempre lado a lado); responsive usa Container Query — redimensione a janela do navegador pra ver o segundo grupo virar coluna abaixo de ~480px de largura do próprio contêiner, não da tela inteira.

Arraste o canto do quadro tracejado (só nesta demo) pra simular o contêiner ficando estreito.

Field — separador

Formulário com validação

Constraint Validation API nativa (required, type=email) no submit — setFieldInvalid() liga aria-invalid do controle, o texto de erro e data-invalid do Field juntos. Tente enviar em branco.

FormActions — fileira de ações

Alinhamento padrão à direita (ação principal por último, leitura ocidental "fim = confirmar"); variação --between separa uma ação de escape (ex.: "Limpar") na ponta oposta sem trocar a ordem no HTML — a ordem de tabulação (Tab) continua igual à leitura visual esquerda→direita. Variação --sticky (fileira fixa no fim da tela, formulário longo) está implementada mas não demonstrada ao vivo aqui — a maioria dos formulários do catálogo é curta o bastante pra não precisar.

FormSummary — resumo de erros no topo

Ao enviar com erro, o foco vai pro resumo (não pro primeiro campo) — cada item da lista foca e rola até o campo certo. Sem role="alert" de propósito (ver formularios.md §Acessibilidade — evita anúncio duplicado pelo leitor de tela). Tente enviar em branco.

FormGrid — grade responsiva

Container Query, mesma técnica do Field responsivo (ver §Campos de formulário) — redimensione o quadro tracejado (só nesta demo) pra ver a grade colapsar pra 1 coluna abaixo de ~560px de largura do próprio contêiner. "Endereço" ocupa a largura inteira da grade (k-form-grid-span-full) mesmo com 2 colunas ativas.

FormSuccess — confirmação pós-envio

Contraste deliberado com FormSummary: role="status" (educado, não interrompe o leitor de tela) em vez de role="alert", e o foco NÃO se move pra dentro dela — depois de um envio bem-sucedido não sobra nada que a pessoa precise fazer. Mesmo ícone de check usado em Botões (copiar com feedback / ação assíncrona).

Horizontal — com navegação

Avance com "Próximo" (marca a etapa como concluída) ou clique numa etapa já concluída pra voltar direto a ela.

Vertical

Mesma estrutura de gatilho, etapas empilhadas — conector vira uma linha vertical de altura fixa (48px) sob o indicador.

Variante de cor — bullets coral

Mesmo componente, indicador preenchido em --action-accent (coral de marca) em vez de --action-primary (roxo) — o conector continua sempre roxo nas duas orientações. Número/check usam --text-default (texto escuro), nunca branco sobre coral — ver cores.md §Pareamento on-color.

Criar conta — 3 etapas

Tente clicar em "Próximo" sem preencher — só os campos da etapa visível ficam inválidos. Depois de enviar, clique em qualquer etapa concluída no indicador acima pra revisar o que foi preenchido.

Tabs — horizontal, tamanhos

Tabs — variante segmented, vertical

Breadcrumb — padrão e colapsado

Pagination — padrão, circular, tamanhos

Ações de linha (kebab)

A Tabela usa a mesma peça com data-k-menu-portal (painel movido pro <body>, necessário dentro de um contêiner com rolagem/coluna sticky) — não demonstrado isolado aqui porque depende de um contêiner de rolagem real.

Item-checkbox (ex.: menu "Colunas")

Cortina — abre pela direita

O visual do gatilho reaproveita .k-btn-hamburger de Botões, mas não usa initHamburgerButtons — o Drawer sincroniza o próprio aria-expanded/aria-label do gatilho junto com a animação, véu e foco preso, coisas que o padrão simples de Botões não faz.

Cortina — abre pela esquerda

data-side="left" — mesma peça, só inverte o lado que desliza; útil quando o gatilho mora numa sidebar/app shell em vez de uma navbar de site.

Pedidos — conjunto completo

Ordenação (clique num cabeçalho), seleção com barra de ações em lote, paginação, busca, densidade, colunas ocultáveis ("Colunas"), linha expansível (chevron), edição inline (duplo-clique ou Enter no campo "Qtd."), cabeçalho e coluna de ações fixos na rolagem, chips de filtro removíveis e estados simulados de carregando/vazio/erro.

Dropzone — múltiplos arquivos

Clique, tecle Enter/Espaço ou arraste arquivos do sistema pra cima da área tracejada. Tente soltar um arquivo maior que 5MB ou um tipo fora de image/*,.pdf pra ver a validação recusar antes de virar item da lista.

Avatar — arquivo único, círculo

Capa — arquivo único, retângulo

Grade ordenável

Arraste uma miniatura sobre outra pra trocar de posição (arraste nativo do navegador nesta demo). Mesmo comportamento visual da versão React com @dnd-kit — a diferença fica só no motor por baixo, ver upload.md §Stack.