Uma biblioteca, infinitas identidades.

Infraestrutura de interface do ecossistema Tinyx. A biblioteca não pertence a nenhuma marca: a camada visual é neutra e parametrizável, e a identidade de um tenant entra por quatro cores. O componente é único; o que muda é o tema.

Tokens, tipo, espaço, forma, movimento

Cada cartão é um arquivo independente em guidelines/, lendo os tokens reais de styles.css. Nenhuma paleta institucional: só escalas derivadas e papéis semânticos.

Blocos fundamentais

Elementos sem lógica de negócio, usados por todo o resto: superfícies, marcas de status, indicadores de carregamento.

Elementos interativos

Tudo que recebe uma ação ou um dado do usuário. Um só Button cobre cinco ênfases, três tamanhos e todos os estados.

Compostos por outros componentes

Montados com Primitives e Controls, nunca reimplementando-os: SearchInput usa Input, Pagination usa Button, Field embrulha qualquer controle.

Estruturas recorrentes

Combinações que se repetem em qualquer produto do ecossistema: cabeçalho de página, cartão de métrica, tabela com estados, gráficos em bloco, vazio, aviso, avaliação.

Casca de aplicação

A moldura onde as telas acontecem: fundo, barra superior, navegação lateral e a faixa de conteúdo que elas publicam em :root.

Configuração de tenant

Quatro cores, uma escolha de tema, e a biblioteca inteira se adapta. Sem Button Tenant A, sem Button Tenant B.