VASTA · Seu guia de Londres

Empilhada, fundo claro

Peças claras com espaço. Nome em #1E1A66.

vasta-estrela-com-nome-claro.svg

Horizontal, fundo escuro

Topo de página, cabeçalho de email, banner baixo.

vasta-horizontal-menu-escuro.svg

Horizontal, fundo claro

O mesmo uso, sobre o lilás.

vasta-horizontal-menu-claro.svg

SVG SVG com fundo PNG Estrela clara SVG

Só a estrela

Avatar, selo pequeno e faixa de 90 px.

vasta-estrela-escuro.svg

Arquivos oficiais do app

star-dark.svg star-light.svg wordmark-dark.svg wordmark-light.svg

Grade de construção

quatro pontas côncavas, duas pétalas acetinadas em diagonal, núcleo violeta e filete ciano na borda.

Unidade X: 8 u, 1/14 da estrela
Estrela: 14X x 14X
Cintura das curvas: 2X do centro em cada eixo
Margem do SVG: 1,5X, reservada ao brilho
Nome: letras de 18 u, traço 2,1 u, vão de 1,5X

Grade SVG Grade PNG

04 · Ícone de app

A estrela na tela inicial, no tema de quem usa

Acompanha o tema do celular quando dá; senão, escuro com o Luminous Arc no contorno.

VASTA

Celular no tema claroEstrela da versão clara, sobre o lilás.

VASTA

Celular no tema escuroEstrela da versão escura, sobre a noite com halos.

Sempre

Só a estrela, sem o nome. O celular arredonda os cantos; a marca não desenha a máscara.

Nunca

Nome dentro do ícone, rastro, pontinho ou brilho extra.

Tamanhos

1024 px para apresentação e arquivo mestre

PNG 1024

512 px para o Android

PNG 512 Máscara 512

180 px para a tela inicial do iPhone

PNG 180

192 px para atalho e notificação

PNG 192

favicon para a aba do navegador.

SVG ICO PNG 32

Ícone escuro com Luminous Arc, SVG PNG 1024 PNG 512 Ícone claro, SVG

05 · Certo e errado

Dez jeitos de tirar a VASTA do lugar

Basta um destes para a logo parecer de outra empresa. Na dúvida, use o arquivo oficial como ele veio do app.

XX

Respiro

a medida X é a altura do nome. Nada entra a menos de 1 X da logo.

Tamanho mínimo

horizontal com estrela de 36 px e nome de 16 px; empilhada com estrela de 72 px; só a estrela, 24 px. Abaixo disso, use só a estrela.

Certo

Arquivo oficial no fundo escuro do app.

Certo

Versão clara no lilás, com 1 X de respiro.

Certo

Estrela parada e limpa, sem rastro e sem pontinho.

Errado

Distorcer

Esticar, achatar ou inclinar a logo.

Errado

Trocar a cor

Pintar a estrela ou o nome de outra cor, ou pôr filtro.

Errado

Girar

Rodar a logo ou mudar a distância entre estrela e nome.

Errado

Fundo sem contraste

Versão escura no fundo claro, ou foto agitada atrás.

Errado

Sombra e contorno

Somar sombra, borda ou brilho que o arquivo não tem.

Vasta

Errado

Trocar fonte ou grafia

Escrever Vasta em outra fonte ou com o A com barra.

Errado

Luz nos 4 cantos

Mais luz nas quatro pontas da logo estática. A luz só existe no movimento.

Errado

Risco no centro da estrela

Traço, cruz ou linha no meio da estrela.

Errado

Recorte em PNG

Trocar o SVG por PNG recortado, print ou estrela gerada por IA.

Errado

Azul claro como fundo

O celeste é só luz: nunca área de fundo atrás da logo.

06 · Cores

Noite, lilás e um violeta que chama para a ação

No escuro, a marca vive na noite com halos; no claro, no lilás. O violeta marca a ação principal, e o azul claro aparece só como luz.

Escuro

Noite

#07091B

RGB 7, 9, 27

Fundo da tela

Noite base

#050816

RGB 5, 8, 22

Base, atrás da tela

Superfície

#121840

RGB 18, 24, 64

Cartão em destaque

Halo índigo

#381EB8

RGB 56, 30, 184

Luz do fundo, à esquerda

Halo azul noite

#1D4ED8

RGB 29, 78, 216

Luz do fundo, à direita

Violeta

#6748F6

RGB 103, 72, 246

Ação principal

Branco

#FFFFFF

RGB 255, 255, 255

Título e texto

Nome da logo

#F3F5FF

RGB 243, 245, 255

Só no nome da logo escura

Claro

Lilás

#F8F6FF a #EFE9FF

RGB 248, 246, 255 e RGB 239, 233, 255

Fundo da tela

Superfície

#FFFFFF a 92%

RGB 255, 255, 255

Cartão

Lavanda

#C4B5FD

RGB 196, 181, 253

Borda e destaque

Violeta

#6B4AF6

RGB 107, 74, 246

Ação principal

Tinta

#181453

RGB 24, 20, 83

Título e texto

Tinta suave

#44417A

RGB 68, 65, 122

Texto de apoio

Nome da logo

#1E1A66

RGB 30, 26, 102

Só no nome da logo clara

Luz

Celeste

#7DD3FC e #38BDF8

RGB 125, 211, 252 e RGB 56, 189, 248

Só no filete do arco, no rastro e no brilho

Faixa de proporção

noite ou lilás 60% · cartões 22% · violeta 10% · texto 6% · luz celeste 2%.

Azul claro só no efeito luminoso. Nunca em fundo, bloco, texto ou botão.

Contraste medido pelos tokens WCAG 2.1, razão de luminância calculada a partir dos códigos do app

Branco sobre noite#FFFFFF sobre #07091B19,74 para 1 · AAA em qualquer texto

Nome da logo sobre noite#F3F5FF sobre #07091B18,16 para 1 · AAA em qualquer texto

Branco sobre superfície#FFFFFF sobre #12184017,07 para 1 · AAA em qualquer texto

Lavanda sobre noite#C4B5FD sobre #07091B10,69 para 1 · AAA em qualquer texto

Branco sobre violeta escuro#FFFFFF sobre #6748F65,48 para 1 · AA em qualquer texto

Branco sobre violeta claro#FFFFFF sobre #6B4AF65,34 para 1 · AA em qualquer texto

Tinta sobre lilás#181453 sobre #F8F6FF15,52 para 1 · AAA em qualquer texto

Tinta sobre lilás fundo#181453 sobre #EFE9FF14,06 para 1 · AAA em qualquer texto

Tinta suave sobre lilás#44417A sobre #F8F6FF8,59 para 1 · AAA em qualquer texto

Nome da logo sobre lilás#1E1A66 sobre #F8F6FF14,06 para 1 · AAA em qualquer texto

Violeta claro sobre lilás#6B4AF6 sobre #F8F6FF4,98 para 1 · AA em qualquer texto

Tinta suave sobre lavanda#44417A sobre #C4B5FD4,98 para 1 · AA em qualquer texto

07 · Tipografia

Duas fontes, as mesmas do app

Plus Jakarta Sans nos títulos. Manrope no texto, nos botões e em todos os números, com algarismos tabulares, como na tela Gastos. As duas são livres.

Títulos · 600, 700 e 800

Aa

Plus Jakarta Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
àáâãçéêíóôõú 0123456789 £ R$

Fonte WOFF2 Licença OFL

Texto, botões e números · 400 a 800

Aa

Manrope

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
àáâãçéêíóôõú 0123456789 £ R$

Fonte WOFF2 Licença OFL

Escala

DisplayPlus Jakarta Sans 80064 px

Londres decidida

TítuloPlus Jakarta Sans 80040 px

Chegue a Londres sabendo o que fazer

SubtítuloPlus Jakarta Sans 70026 px

Antes de ir, o roteiro decidido dia a dia

Linha de cimaManrope 600, caixa alta13 px

app de viagem para Londres, em português

ParágrafoManrope 40017 px

Um toque reordena as paradas do dia para você andar menos a partir do hotel.

BotãoManrope 60016 px

Quero conhecer o VASTA

ContagemManrope 800, tabular32 px

130 atrações · 249 restaurantes

ValorManrope 600, tabular24 px

£ 0,00 ≈ R$ 0,00

AssinaturaManrope 50016 px

Seu guia de Londres

Números em Manrope, em toda tela e peça. O valor zerado mostra só o estilo; nenhum preço entra no manual.

08 · Fundos e gradientes

Seis degradês, todos dentro da paleta

Dois fundos oficiais, noite e lilás, e seis degradês feitos só com as cores do sistema. Nenhum usa o azul claro como área.

Noite com halos

#07091B com halo índigo à esquerda e azul noite à direita.

Lilás com brilho

#F8F6FF a #EFE9FF, com um brilho leve na base.

Foto com véu

Foto com véu noite do centro para as bordas, para o texto respirar.

Usar

halo grande e suave, um ou dois por tela
cartão de superfície sobre o fundo da tela.

Evitar

Errado

degradê de canto a canto no escuro, que vira faixas no vídeo
padrão repetido
foto sem véu atrás de texto
fundo azul claro.

Os seis degradês

1

Acento escuro

Botão principal no escuro, #886EFF a #4A2EE0 (do app)

2

Acento claro

Botão principal no claro, #9D82FF a #6B4AF6 (do app)

3

Aurora sobre o Tâmisa

Capa, hero e story escuros

4

Névoa lilás

Peças claras e email

5

Vidro noturno

Cartões e banners escuros

6

Feixe violeta

Fundo de vídeo e transição

Degradês com a logo certa, em SVG para baixar

vasta-gradiente-01-noite-vasta.svg

vasta-gradiente-02-indigo-profundo.svg

vasta-gradiente-03-violeta-vasta.svg

vasta-gradiente-04-arco-luminoso.svg

vasta-gradiente-05-lavanda-clara.svg

vasta-gradiente-06-perola-lilas.svg

Lista dos degradês, TXT

09 · Gesto e sistema

Um arco de luz que aponta o que importa

O gesto da VASTA é o arco: a curva da estrela cadente no vídeo e o Luminous Arc no contorno do cartão. Ele aparece no máximo uma ou duas vezes por tela, no destaque e na ação principal.

Luminous Arc

Contorno de luz que nasce branco no canto de cima e se apaga no meio do cartão.

Em destaque

Com arco: o cartão que a pessoa precisa ver primeiro.

Cartão comum

Sem arco: só a borda lavanda ou índigo.

Ícones

Traço fino, cantos redondos, grade de 24 px. Violeta só no item ativo.

Espaço

Tudo em múltiplos de 8. Cantos de 16 a 22 nos cartões.

Foto em cartão

Luz só no contorno externo; véu de leitura só na parte de baixo.

Iconografia

Botão em 3 estados

Normal

Ao passar o mouse

Foco do teclado

:root {
  --vasta-noite: #07091B;
  --vasta-superficie: #121840;
  --vasta-violeta: #6748F6;
  --vasta-lavanda: #C4B5FD;
  --vasta-acento: linear-gradient(135deg, #886EFF 0%, #6748F6 50%, #4A2EE0 100%);
  --vasta-curva: cubic-bezier(0.16, 1, 0.3, 1);
}
.vasta-botao {
  font: 600 16px/1 "Manrope", sans-serif;
  color: #FFFFFF;
  background: var(--vasta-acento);
  border: 0;
  border-radius: 9999px;
  padding: 16px 24px;
  transition: transform 150ms var(--vasta-curva), box-shadow 150ms var(--vasta-curva);
}
.vasta-botao:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(103, 72, 246, 0.8);
}
.vasta-botao:focus-visible {
  outline: 2px solid var(--vasta-lavanda);
  outline-offset: 3px;
}

Fotografia

Fotografia: usar

Londres de verdade: Tâmisa, metrô, ruas, pontes e parques.
Luz natural, hora azul, dia nublado bonito.
O celular na rua, com tela real do app.
Quem viaja junto curtindo a cidade, a cena de chegada (Brief 3).
Foto real da equipe, só com autorização.

Fotografia: evitar

Monumento de outra cidade.
Cena de medo, gente perdida ou constrangida: a marca mostra a cena desejada (MA 7).
Sorriso posado para a câmera e banco de imagem.
Placa, marca ou logo de terceiros legível.
Rosto gerado por IA no lugar de cliente ou da equipe; filtro saturado e céu trocado.

Fotos livres (CC0) do Wikimedia Commons, de Thomas Kelley, TheFrog001 e Susan Yin. São fotos de banco livre, não da equipe nem de clientes. Lista em midia/fotos/creditos.md.

10 · Movimento

A luz só existe enquanto a estrela chega

Um pontinho cruza a tela em arco, puxando um rastro, e pousa na ponta de cima da estrela. O rastro se recolhe, o pontinho pulsa uma vez e se apaga. Fica a logo oficial, limpa.

A regra

Rastro e pontinho só no movimento. O último quadro é sempre a logo oficial.

1,85 s

Viagem do pontinho.

3,2 s

Do início ao quadro limpo. O nome entra depois da estrela inteira.

Sem som

A assinatura usa a trilha do vídeo onde entra.

Interface

150 ms no toque; 600 a 800 ms na entrada de página.

abertura 16:9, claro e escurovasta-assinatura-16x9-abertura-youtube-escuro.mp4

vasta-assinatura-16x9-abertura-youtube-claro.mp4

story 9:16, claro e escurovasta-assinatura-9x16-stories-escuro.mp4

vasta-assinatura-9x16-stories-claro.mp4

fim de criativo 4:5, claro e escuro.vasta-assinatura-4x5-feed-criativos-escuro.mp4

vasta-assinatura-4x5-feed-criativos-claro.mp4

Revelação da logovasta-revelacao-logo-16x9-escuro.mp4

Ícone animadovasta-icone-app-animado-1x1-escuro.mp4