O sistema, em uma página.
Tudo o que as telas do Urbanium podem usar: a paleta, a escala, os ícones e os componentes em seus estados. Nada aqui é tela de produto — esta rota existe para conferir o sistema de uma vez, nos dois temas.
Três aplicações
Ladrilho teal com três torres em negativo, cada uma com sua porta. O vazio lê como quarteirão e como a letra U. A palavra acompanha com tracking de .14em.
Paleta
Teal como única cor de ação, sobre base de grafite e papel. Sem gradiente: a cor marca o que é clicável, ativo ou importante — e mais nada.
Duas famílias, cinco tamanhos
Space Grotesk nos títulos, com tracking de −0,03em em tamanho grande. Manrope no texto, a 1,55 de entrelinha.
Grotesk
Ícones de linha
Traço de 1,9px, pontas arredondadas, grade de 24px. Sem preenchimento e sem duas cores.
Botões
Um primário por tela. O secundário se sustenta na borda de 1px; o terciário, no cinza sutil. Nenhum deles tem sombra — botão não é camada flutuante.
Percorra com Tab: todo controle desta página mostra anel teal com deslocamento de 2px.
Campos
Rótulo acima, ajuda ou erro abaixo, e o anel de foco no invólucro para envolver ícone e sufixo.
Como aparece nos contratos.
Informe um e-mail válido.
Envia um aviso quando a negociação muda de etapa.
Marca como vencida a negociação parada além do SLA.
Etiquetas
Pílulas de fundo suave e texto escuro. Etiqueta informa, não age — por isso nenhuma usa o teal cheio.
Cartões e elevação
Borda de 1px antes de sombra. A sombra fica reservada ao que flutua: menu, diálogo, dica e card arrastado.
Plano
Borda de 1px, sem sombra. O padrão.
elevacao="plano"Embutido
Cinza sutil, sem borda. Vive dentro de outro cartão.
elevacao="embutido"Flutuante
Só para camada solta sobre o conteúdo.
elevacao="flutuante"Menu, diálogo, dica e abas
Abrem com o mesmo movimento curto de 160ms e fecham com Esc. O foco volta para o gatilho — Radix cuida disso, e não abrimos exceção.
Doze negociações abertas, quatro delas paradas além do prazo.
Carregamento e vazio
O esqueleto imita a anatomia do conteúdo que vem, em cinza — nunca em cor de marca. O estado vazio fala no presente e oferece a próxima ação.
Nenhuma negociação nesta etapa
Arraste um card de outra coluna ou crie a primeira negociação da etapa.
Raio, espaço e elevação
Três regras curtas que valem para toda tela nova.
Parado · suspenso (arrasto) · flutuante (menu, diálogo).