O problema
Afogamento infantil é rápido e silencioso. Não tem grito, não tem barulho de água, e o intervalo entre alguém sumir de vista e ser tarde demais se mede em minutos. É por isso que existe um produto que monitora perímetro e água e dispara sirene sozinho.
Quando o projeto chegou até mim, esse produto existia em três documentos técnicos de investidor e em mais nada. Sem código, sem arquivo de design, sem logo, sem nome definitivo. Havia arquitetura de sensor, máquina de estados, taxonomia de evento e metas de latência, tudo escrito, e nenhuma tela.
O custo disso é concreto: um produto de segurança que não consegue se mostrar não levanta investimento, não fecha condomínio e não chega em casa nenhuma. E quando ele chegar, a interface é o que decide se o alarme vira ação ou vira confusão.
As restrições
As decisões
O crítico é sólido, e o vidro para na porta do alarme
A linguagem visual do sistema é vidro líquido: painéis translúcidos com desfoque, sobre um campo de água que se move devagar. Funciona bem, e dá ao produto o ar calmo e caro que ele precisa ter em dia normal.
O alerta crítico confirmado, a tela de emergência e as confirmações destrutivas não usam nada disso. Elas renderizam em preenchimento sólido, com contraste WCAG AA cheio.
Vidro é para o ambiente, não para o momento que importa. Quem está lendo aquela tela acordou com uma sirene e está com o coração acelerado, possivelmente no escuro, possivelmente correndo.
Aplicar o vidro em todas as superfícies, pela coerência do sistema. Descartado: coerência estética é barata comparada a um segundo perdido lendo texto sobre fundo translúcido.
Cor nunca significa sozinha
Todo estado combina três coisas: cor, ícone e rótulo em texto. Verde armado, âmbar atenção, laranja falha e vermelho crítico existem, mas nenhum deles carrega o significado sem companhia.
Há o motivo de acessibilidade, que já bastaria. Mas há um pior: a tela vai ser lida ao sol, de relance, por alguém em pânico, às vezes num aparelho que não é o dono da casa. Sob essas condições, a cor é a primeira informação a se perder.
Confiar na cor para o estado, que deixaria a interface mais limpa e mais silenciosa visualmente. Descartado: economia de dois elementos gráficos contra a chance de alguém ler o estado errado.
Todo alerta crítico responde quatro perguntas, sempre na mesma ordem
O quê, onde, quando, o que fazer. Nessa sequência, sem exceção, do push à tela de emergência.
A ordem não é estilo, é operação. Quem acorda com o alarme às três da manhã precisa saber para qual piscina correr antes de saber qualquer outra coisa, e num condomínio com várias áreas a resposta a "onde" é o que separa uma resposta útil de uma corrida no lugar errado.
Mensagem curta, só com o evento, e o resto na tela de detalhe. Descartado: obriga um toque a mais no único momento em que ninguém tem tempo de tocar de novo.
Falha é um estado de primeira classe, com cor própria
Sensor sem conexão, bateria acabando, sirene sem resposta e violação do equipamento não aparecem como erro genérico. Existe um estado chamado proteção degradada, com cor, ícone e texto próprios, que pode inclusive disparar um aviso local.
Sistema de segurança que falha em silêncio é pior que sistema de segurança nenhum, porque produz confiança falsa. A família dorme achando que está protegida por um sensor que caiu há três dias.
Tratar falha como notificação comum, no meio das outras. Descartado: some na lista, e o dia em que importa é justamente o dia em que ninguém abriu o aplicativo.
O resultado
A entrega foi a linguagem completa mais três kits de interface em tela cheia: o site público com planos e fluxo de contratação, o aplicativo do morador com armar, desarmar, status ao vivo, alertas e emergência, e o painel do administrador com múltiplas propriedades, saúde de dispositivos e histórico de incidentes.
Junto vão as regras de conteúdo, que nesse produto pesam tanto quanto os tokens: o tom por severidade, a estrutura obrigatória do alerta crítico, o formato de número e hora em português, e a proibição de qualquer texto que sugira que o sistema dispensa supervisão.
A mudança concreta é que o produto passou a poder ser mostrado. Existe uma interface para colocar na frente de investidor, de síndico e de família, e ela representa os estados que o sistema realmente tem, incluindo os feios.
Não há número de uso porque não há uso ainda. O que existe são as metas de latência que o sistema declara, e o painel foi desenhado para exibi-las, que é a diferença entre prometer confiabilidade e deixar alguém conferir.
Três substituições ficaram declaradas em vez de escondidas: as fontes, o conjunto de ícones e a marca, todos provisórios e todos trocáveis sem redesenho.
ficha técnica
- stack
- Design tokens · CSS · Lucide · HTML
- papel
- Direção visual, design system e kits de interface