Protocolo de Design da World
Princípios, Diretrizes e Recursos
Princípios de Design
Humano
Acreditamos que as qualidades orgânicas e imprevisíveis do ser humano são essenciais para a inovação.
Universal
Uma linguagem visual que garante a inclusão, acessibilidade e conexão global.
Otimista
Uma crença na humanidade e no papel que a tecnologia pode desempenhar para elevar a todos.
Visão Geral da Marca
Todas as ferramentas existem sob o guarda-chuva da marca principal World.
Identidade Visual
Logo World
O logo World é um ponto de referência visual para a nossa marca — simples, claro e universal. Baseado em princípios de design atemporais, ele representa o nosso compromisso com a acessibilidade, inovação e conexão global.
Nossa logomarca é a representação central da identidade da nossa marca. Sempre use o logo em sua forma original e mantenha espaço livre ao redor para garantir visibilidade e impacto. Modificações, distorções ou uso de cores não autorizadas podem comprometer a sua integridade.
Nosso logotipo é um componente-chave da identidade visual da nossa marca, trabalhando em harmonia com o símbolo do logo para comunicar o nosso nome com clareza e estilo. Alterações, estiramento ou aplicação de efeitos não aprovados no logotipo não são permitidos.
O lockup do logo combina o símbolo do logo e o logotipo em um design unificado, representando a nossa marca em sua forma mais completa. Esse lockup deve sempre ser usado conforme fornecido, mantendo as proporções, espaçamento e alinhamento corretos entre os elementos. Evite separar, reorganizar ou redimensionar os componentes individualmente. Sempre consulte as diretrizes acerca de tamanho, espaçamento e posicionamento para preservar a sua integridade.
O espaço livre é a distância mínima entre o logo e os outros elementos em um layout. A largura do "o" em World define o espaço livre ao redor do logo.
O Que Fazer — Logo e Cor
O Que Não Fazer — Logo e Cor
Ao exibir parcerias ou colaborações, o logo da World pode ser combinado com o logo de outra marca nos seguintes formatos.
Cores
As cores secundárias são utilizadas para fins tanto expressivos quanto utilitários dentro da marca World. Exemplos incluem codificação de cores de diferentes níveis de acesso em crachás de eventos, cores de bandeiras em gradiente para materiais de lançamento, semântica de cores em interfaces de usuário e visuais expressivos de suporte.
Tipografia
A World Pro foi desenvolvida sob medida para se adaptar e oferecer um sistema visual universal para todos que usam, integram ou interagem com a World. É a única fonte usada na marca World.
Pesos
Existem dois pesos da World Pro: Regular e Médio. O Regular é o mais usado na maioria dos casos, enquanto o Médio funciona como destaque quando é preciso dar ênfase.
Entrelinha & Espaçamento entre Caracteres
Alinhamento
A World Pro Regular é considerada versátil o suficiente para ser usada tanto em títulos quanto em textos corridos, com o uso da escala mais comum para criar hierarquia.
A World Pro Medium pode ser usada para subtítulos menores, quando é necessário um peso adicional.
Nós usamos a fonte Noto juntamente com nossas fontes latinas primárias para garantir suporte abrangente a todos os alfabetos não latinos. A Noto foi escolhida por sua ampla cobertura de idiomas globais, oferecendo tipografia consistente e visualmente harmoniosa em vários alfabetos, incluindo chinês, árabe, cirílico e japonês.
Essa abordagem permite manter a consistência e inclusão da marca, garantindo que a nossa comunicação alcance usuários em todo o mundo em seus alfabetos nativos, sem comprometer a legibilidade ou a coerência estética.
Em situações limitadas em que a World Pro não está disponível, por exemplo, no Google Apresentações, pode-se usar uma fonte alternativa da biblioteca Google Fonts: para texto corrido, utiliza-se a fonte Inter; para títulos, a fonte Inter Tight. Apenas essas fontes do Google Fonts podem ser usadas e apenas quando não for possível usar a World Pro.
Composição
A grade é uma das ferramentas mais importantes do sistema de design. Ela é essencial para todos os layouts e composições e deve ser usada sempre. Se a grade será de 2, 4, 6 ou 8 colunas depende do tamanho do artboard e do número de elementos, mas todos os elementos de uma composição devem estar alinhados à grade subjacente e espaçados proporcionalmente às margens.
Materiais internos
Para todos os materiais internos e acessórios com marca, onde o logo aparece com outros recursos e conteúdos, ele deve ser colocado no canto superior esquerdo do layout para garantir consistência.
Logo solo
Em layouts onde o logo é o único elemento, como cartões de vídeo ou certas campanhas ou comunicados, o logo deve ser usado no centro do layout.
Perfis de redes sociais
Ilustração
Cada um dos principais produtos World possui uma ilustração associada a ele, derivada da natureza do produto ou da sua oferta.
Embora existam muitas maneiras de representar dados, um estilo consistente deve ser aplicado. Contornos, formas geométricas para gráficos e diagramas, usos sutis e intencionais de preenchimentos e cor são os elementos consistentes na visualização gráfica de dados.
Grades em gradiente funcionam como gráficos coloridos e expressivos e são usadas de duas maneiras:
- Como representações localizadas usando as cores do mapa de um país como entradas para a transição do gradiente
- Gráficos ambientes, não ligados a cores específicas, mas apenas expressando um clima ou energia.
Iconografia
Abaixo está o conjunto completo de ícones conforme existem atualmente. Mais ícones podem e serão criados, mas devem ser feitos utilizando as diretrizes de construção para manter a consistência.
Os ícones da World são projetados como extensões da nossa tipografia, refletindo o peso do traço e as curvas.
É essencial que todos os ícones combinados com texto mantenham as mesmas proporções e alinhamento para serem harmoniosos com a fonte. Os ícones são desenhados para que os ícones retangulares horizontais estejam alinhados ao topo e à base da altura das maiúsculas e centralizados verticalmente.
Tamanho dos ícones
Todos os ícones SVG estão contidos em um quadro padrão. Para manter o tamanho consistente em relação à tipografia, podemos aplicar uma fórmula ao quadro do ícone: multiplique o tamanho da fonte por 1,07 para obter o tamanho do quadro do ícone. Por exemplo: se o tamanho da fonte for 180px, o quadro do ícone deve ter (180x1,07)=192,6px de largura.
Recursos
Recursos para imagens principais, gradiente, símbolo da moeda WLD, Orb, World App, World Chain etc.
