Protocolo de Design da World
Princípios, Diretrizes e Recursos
Princípios de Design
Humano
Acreditamos que as qualidades orgânicas e imprevisíveis de ser humano são essenciais para a inovação.
Universal
Uma linguagem visual que transcende todas as fronteiras, culturas e histórias — garantindo 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 nossa marca — simples, claro e universal. Baseado em princípios de design atemporais, ele representa nosso compromisso com 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 sua integridade.
Nosso logotipo é um componente-chave da identidade visual da nossa marca, trabalhando em harmonia com o símbolo do logo para comunicar 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 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 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.
Ao exibir parcerias ou colaborações, o logo da World pode ser combinado com o logo de outra marca nos seguintes formatos.
Cores & Gradiente
Criar um Gradiente (Tutorial em PDF)
- O gradiente da World é um elemento importante do sistema central da marca. Ele transmite esperança e otimismo e pode ser usado como um recurso reconhecível da marca quando utilizado como fundo.
- Ele deve ser usado apenas nas cores designadas.
- O gradiente deve ser criado como um bitmap e então ser colorido, garantindo que a resolução do bitmap siga as diretrizes das páginas seguintes.
Gradiente - Resolução
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
Lausanne é uma fonte sem serifa sofisticada e modernista, extremamente versátil para textos e exibição. Ela se destaca junto aos grandes clássicos sem serifa, ao mesmo tempo que integra as particularidades da tipografia digital. É a única fonte usada na marca World.
Pesos
Abaixo estão os três pesos de Lausanne usados em toda a marca World. Eles são a base de todo o conteúdo, e quaisquer exceções ou acréscimos devem ser aprovados internamente.
De modo geral, as seguintes regras podem ser aplicadas a quase todos os cenários tipográficos nas mensagens da marca.
Texto corrido e seções longas são compostos em peso 300. Títulos gerais e grandes destaques usam peso 400, enquanto subtítulos e títulos menores usam 450 para manter a ousadia, mas ainda um pouco menores que os títulos gerais principais.
Entrelinha & Espaçamento entre Caracteres
Alinhamento
A Tiempos Collection é uma família serifada moderna para tipografia editorial. Tiempos Headline foi desenhada para títulos maiores, equilibrando praticidade e elegância.
Pesos
Abaixo estão os dois pesos de Tiempos Headline usados em toda a marca World. Quaisquer exceções ou acréscimos devem ser aprovados internamente.
Tiempos Headline é nossa fonte secundária, usada apenas em alguns casos específicos, principalmente quando a marca fala diretamente com o usuário e quer criar proximidade.
O uso pode ser em publicidade, merchandising e algumas telas de UX. Todo conteúdo e quaisquer exceções ou acréscimos devem ser aprovados internamente.
Função da Fonte
Posts em Redes Sociais, Campanhas, Exclusividade
Tiempos adiciona um toque humano e uma voz direta à linguagem visual da marca. É ideal para criar um tom acolhedor, acessível e elevado em cenários específicos quando a intenção é comunicar de forma mais íntima com os usuários.
Nós usamos a fonte Noto juntamente com nossas fontes latinas primárias para garantir suporte abrangente a todos os alfabetos não latinos. 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 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 Lausanne 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 somente quando não for possível usar Lausanne.
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
Logo sobre gradiente
Quando o logo é colocado sobre um fundo em gradiente, ele deve sempre ficar na área clara para não prejudicar a legibilidade.
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 gráfica da visualização de dados.
Grades em gradiente funcionam como gráficos coloridos e expressivos, e são usadas de duas maneiras:
- Como representações localizadas usando 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
Para auxiliar na identificação e navegação, cada produto possui um ícone associado, desenvolvido como uma forma simplificada da respectiva ilustração do produto.
Os ícones de produto devem manter a mesma sensação de peso em diferentes tamanhos. O peso base usado é 1,0 px quando o ícone está em largura de 60 px; ao aumentar ou diminuir o ícone, o peso deve ser ajustado para manter a aparência ótica do peso base.
Quando os ícones são usados em contexto junto a outros elementos em um layout, como na web, devem sempre estar alinhados no canto superior esquerdo. Em algumas situações, quando os ícones são exibidos juntos e sem outros elementos, eles podem ser centralizados na composição.
Recursos
Recursos para imagens principais, gradiente, símbolo da moeda WLD, Orb, World App, World Chain etc.
