Introdução

O Design System da Urbis apresenta os padrões de interface, comportamento e estilo que devem ser seguidos por designers, desenvolvedores e colaboradores. Ele serve como a fonte de apoio para garantir uma experiência coesa, acessível e eficiente na interação do sistema.

Por que padronizar a experiência de gestão pública digital?

Esta iniciativa potencializa a eficácia dos times técnicos na criação de novas funcionalidades, reduzindo o tempo de desenvolvimento e garantindo que, independentemente da cidade que utilize o Urbis Map, a usabilidade e a acessibilidade sejam preservadas.

O que é um Design System?

Um design system é uma biblioteca viva de padrões visuais e componentes de código, guiada por princípios claros, que garante consistência, escala e eficiência na criação de produtos digitais.

Isso beneficia o ecossistema como um todo:

• Para o Desenvolvedor: Elimina a incerteza sobre qual cor, espaçamento ou fonte utilizar, acelerando a entrega.
• Para o Designer: Garante que o que foi desenhado seja viável e fielmente reproduzido.
• Para a Gestão Pública: Assegura um produto final estável, acessível e de fácil manutenção.

A ideia é que este sistema seja utilizado para consulta nas tomadas de decisões técnicas relacionadas a criação e ampliação do Urbis Map.

Princípios de um Design System

Os princípios abaixo servem para guiar decisões quando uma regra específica não existir. Eles são os pilares que sustentam a arquitetura visual do projeto.

Consistência e Previsibilidade

Para reduzir a curva de aprendizado, operamos com um alinhamento "1 para 1" entre design e desenvolvimento. Se um token existe no Figma, ele possui um correspondente exato no código. Isso garante previsibilidade: o desenvolvedor sabe que a interface se comportará exatamente como projetada, e o usuário final sente segurança ao navegar por telas que seguem a mesma lógica visual.

Neutralidade Funcional

A Urbis é uma ferramenta de trabalho e análise. A interface deve ser "invisível" para destacar as informações necessárias. A estética é projetada para garantir que as informações críticas tenham o destaque hierárquico correto.

Acessibilidade Universal

Como uma plataforma voltada ao setor público, a inclusão não é opcional. Tokens de cor e tipografia foram projetados para suportar nativamente Alto Contraste e Modo Escuro, garantindo legibilidade para todos os perfis de usuários.

Escalabilidade Multi-inquilino

O sistema foi desenhado para ser tematizável. Ao respeitar sua estrutura, é possível personalizar cores e tipografias sem comprometer a usabilidade nem a integridade visual da plataforma.

Objetivos Principais

• Acelerar o desenvolvimento: Fazer com que contribuidores foquem na lógica e nas funcionalidades, não com UI.
• Padronizar a linguagem: Unificar o vocabulário entre designers e devs através de padrões claros.
• Facilitar a contribuição: Permitir que novos contribuidores entendam as regras visuais e cronstruam de forma rápida.
• Garantir a qualidade visual: Impedir a fragmentação da interface através de regras pré-definidas.