Visão geral

Buttonestável

Button

Ação. Uma altura por tamanho, compartilhada com input e chip. Toque afunda 2%. No foco, o anel de 2px chega agora e o halo azul entra depois.

Inputestável

Input

Papel com anel fino. Foco vira azul com halo de 4px. Erro diz o que fazer, com ícone e aria.

Selectestável

Select

Campo nativo. Mesmo anel e a mesma altura do Input, com a seta Graffiti do campo. O menu aberto é o do sistema.

Textareaestável

Textarea

Campo de várias linhas. Mesmo anel do Input. Mínimo de 96px, cresce na vertical.

Tabsestável

Tabs

Segmento: trilho rebaixado com um papel que desliza até a aba ativa. Linha: sublinhado azul para conteúdo longo. Base Radix.

FilterChipbeta

FilterChip

Chip de filtro: rótulo + valor, popover de vidro. Ativo vira papel com anel azul e ganha X para limpar.

Checkboxbeta

Checkbox

A mesma marca do FilterChip: papel com anel fino, azul preenchido com check branco. Independente ou em lote. Traço quando só alguns filhos estão marcados.

RadioGroupbeta

Radio

Uma entre poucas. Círculo da mesma família do FilterChip single. fieldset + legend em rótulo de máquina.

Switchbeta

Switch

Liga ou desliga uma configuração. Trilho com raio da escala: apagado em papel com anel Graffiti, aceso em Vivid Blue com luz interna. Thumb de papel.

FileUploadbeta

FileUpload

Zona rebaixada, anel tracejado, coruja vigiando. No arraste ela trabalha. Arquivo vira linha de papel com tamanho mono e X. Sem nuvem genérica.

ChoiceCardGroupbeta

ChoiceCard

Escolha que precisa mostrar o preço da decisão. É o Radio quando a opção não cabe numa linha: ícone, título, explicação e o total no pé. Marca no canto, luz azul quando ativo.

Sliderbeta

Slider

Faixa contínua de valor. Trilho wash preenchido pelo degradê Graffiti → Vivid Blue, polegar de papel. O número atual fica visível o tempo todo.

Badgeestável

Badge

Etiqueta de estado com raio 6, nunca pílula. O ponto diz que o estado está vivo. O app mapeia o domínio para um tom do Core.

EmptyStateestável

EmptyState

Vazio: a coruja vigia até ter o que mostrar. Sem ilustração genérica. Sempre que puder, um próximo passo. É o StatusView no tom neutro.

ErrorBannerestável

ErrorBanner

Erro recuperável com a saída já montada: causa em linguagem humana e "Tentar de novo". É o Notice de perigo com o botão pronto.

Spinnerestável

Spinner

Arco curto em currentColor, para dentro de um botão ou ao lado de um texto.

Skeletonbeta

Skeleton

A forma da peça que ainda não chegou. Raio, altura e etiqueta iguais aos da peça real. Sempre aria-hidden; quem carrega anuncia.

Progressbeta

Progress

Trilha wash. Com número, o corpo é Graffiti e a ponta é Vivid Blue. Indeterminado: a coruja trabalha e a barra desliza.

ToastProviderbeta

Toast

Aviso de vidro. Na mesa, canto inferior direito. No celular, topo, sob a barra. Tom é um ponto de luz, não uma faixa. Some sozinho. Não decide por ninguém.

Stepperbeta

Stepper

Onde a pessoa está numa jornada de poucos passos. Concluído vira check e nunca volta a ser número. No horizontal estreito cabe só o número; no vertical a descrição fica.

Noticeestável

Notice

Aviso preso ao conteúdo, nos quatro tons. Tom aparece como preenchimento e tinta — nunca como faixa colorida no topo do cartão.

StatusViewestável

StatusView

Tela inteira que só tem um estado para contar: vazio, esperando, aprovado ou falhou. Um desenho para os quatro; o tom troca o ícone no tile branco. EmptyState é o preset neutro.

DataTableestável

DataTable

Tabela de trabalho em papel. Linha de 48 (36 no denso), cabeçalho de máquina que ordena, número à direita em Sora tabular. O link da linha é o alvo do teclado.

Avatarbeta

Avatar

Iniciais em Sora sobre uma cor de token: Vivid Blue, Graffiti, success-ink, warning-ink ou danger-ink. A cor vem do e-mail, então a mesma pessoa tem sempre a mesma cor. Ninguém atribuído é tracejado.

MetricWidgetbeta

MetricWidget

Métrica: rótulo de máquina, número em Sora tabular, contexto embaixo. O tom é luz, não faixa. Bar mostra proporção.

Paginationbeta

Pagination

Intervalo em Sora tabular e duas setas no rodapé da lista. No estreito o texto sai da vista e fica no leitor.

SummaryListbeta

SummaryList

Resumo de uma decisão: rótulo à esquerda, valor tabular à direita, linha fina entre as duas. O total é a única linha que grita. Papel sozinho; flush dentro de outro cartão.

Modalestável

Modal

Papel sobre scrim de Graffiti. No celular vira folha que sobe; no desktop pousa e a borda de luz acende depois. O rodapé é a faixa da decisão; o corpo rola.

ConfirmGateestável

ConfirmGate

Gate para ações irreversíveis: dinheiro, permissão, exclusão, execução de agente. Pode exigir motivo e palavra digitada.

DropdownMenubeta

DropdownMenu

Menu de vidro no desktop; folha de papel no celular. Item 34 (40 no toque), perigo em tinta rosa. Nunca é navegação e nunca é filtro.

Tooltipbeta

Tooltip

Chip Graffiti com seta, 12px, atraso de 400ms. Entra só por opacidade. Explica o que já está na tela. Nunca carrega a regra.

Cardestável

Card

Superfície. Quatro materiais: papel guarda dado e decisão, rebaixado abriga prévia, vidro só no que flutua, noite é a superfície da marca.

Gridbeta

Grid

1 a 6 colunas. Gap da escala (8 · 12 · 16 · 24 · 32) e os cortes da margem (md 768, xl 1280).

HibouMarkestável

HibouMark

O símbolo oficial, com o traço exato do imagotipo. Ocioso ele pisca a cada 6 s; trabalhando ganha órbita. É o ícone do agente.

Wordmarkestável

Wordmark

Imagotipo oficial: coruja + "hibou" + "pay". "pay" é sempre Vivid Blue; "hibou" é preto no claro e branco no escuro.