Clareza para
decidir melhor

O BolsaLab é um simulador de investimentos com dados reais da B3. Sua apresentação deve permitir entender o que acontece na carteira e como cada decisão é avaliada.

A direção aproxima a economia de elementos da Apple do contraste e da escala usados pela SpaceX. A aplicação ao mercado financeiro privilegia interfaces legíveis, superfícies sólidas e demonstrações concretas.

O fundo grafite dá unidade ao site. As seções claras recebem os conteúdos que exigem explicação mais detalhada. A composição muda conforme o assunto, sem repetir uma sequência de cartões.

Referências de direção: Apple e SpaceX. Não são modelos a serem copiados.

Assinatura original

Preservar o símbolo dos três candles, a palavra BolsaLab e suas proporções. O arquivo vetorial original foi recuperado do site enviado. O texto da marca está convertido em contornos e não depende de fontes instaladas.

O branco identifica Bolsa e o ouro identifica Lab. Os candles usam branco, ouro claro e ouro. Não acrescentar símbolos, slogans ou efeitos ao desenho.

Regras de uso

Manter uma margem livre equivalente à largura de um candle ao redor do logo. Largura mínima recomendada: 140 px em tela e 32 mm em impressos. Abaixo dessa medida, usar o símbolo isolado.

Não distorcer, inclinar, aplicar brilho ou usar transparência. Usar a versão escura sobre fundo claro e a versão clara sobre grafite.

Paleta de apoio

Estados

Gráficos

Aplicação

O ouro ocupa uma área pequena. Aparece na marca, na qualidade decisória e em observações relevantes. O botão principal usa branco sobre o fundo escuro.

As notas de fundamentos não usam semáforo verde e vermelho. Valor numérico, escala e explicação comunicam o significado. Variações de retorno mantêm sinais explícitos de positivo e negativo.

Texto comum precisa atingir contraste de 4,5:1. Texto grande precisa de 3:1. Cor nunca é a única forma de identificar um resultado ou estado.

Positivo e negativo são dessaturados e sempre acompanham sinal ou seta. Não há amarelo de atenção, para não competir com o ouro. O foco usa contorno de 2 px em ouro claro. Os valores ficam em algarismos tabulares.

Os tokens estão em assets/css/tokens.css. As cores são definidas em sRGB. Imagens e vídeos HDR ficam limitados ao branco da interface.

Escala

Comportamento

Títulos em semibold com espaçamento compacto. Textos em regular com entrelinha de 1,6 a 1,7. Os números de destaque usam peso regular, sem itálico.

Valores de tabelas se alinham à direita e usam algarismos tabulares. Evitar rótulos monoespaçados em caixa-alta. A tipografia do site não altera o logotipo original.

Public Sans é distribuída localmente com SIL Open Font License. O fallback é Arial. Não há solicitação de fontes a serviços externos durante a navegação.

Abertura

A chamada principal fica à esquerda. O texto de apoio e as ações ficam à direita. Abaixo, uma única superfície ampla demonstra a carteira e a liga.

A demonstração mostra qualidade, retorno e número de empresas. O ranking permite comparar a qualidade com o retorno. Não apresentar cotações fictícias como dados ao vivo.

Composição

Largura máxima de 1.440 px. Margens entre 24 e 80 px. Espaçamento amplo entre assuntos, com menos espaço dentro de grupos relacionados. Em telas pequenas, a leitura passa a uma coluna.

Superfícies

Usar fundos sólidos. Bordas de 1 px delimitam a interface; raios entre 3 e 7 px suavizam apenas os elementos funcionais. Não aplicar sombras flutuantes ou efeitos de vidro.

Dados e interação

Exemplos recebem legenda próxima. Gráficos mostram unidade, período e eventos identificados. A tabela alternativa permite consultar todos os pontos por teclado.

O menu móvel informa seu estado e fecha com Escape. As perguntas usam expansão nativa. Links e botões têm foco visível. O site respeita a preferência por movimento reduzido.

Tom de voz

Frases diretas, com a clareza de um professor experiente. Explicar o que pode ser feito ou entendido, sem prometer desempenho financeiro.

Títulos sem ponto final. Perguntas podem usar interrogação. Evitar travessões, exclamações, slogans com três adjetivos e fórmulas retóricas de contraste.

Indicar que o produto está em desenvolvimento. Usar chamadas compatíveis com o destino real: os contatos da turma-piloto abrem o e-mail da equipe.

Manutenção

Antes de publicar, conferir a origem de cada número e o estado de cada funcionalidade. Revisar a leitura em desktop e celular, incluindo tabelas largas.

Os estilos do produto estão em assets/css/product.css. O manual usa a mesma paleta e a mesma tipografia. A imagem social original foi preservada e continua compatível com a marca de candles.

Esta edição acrescenta movimento à versão aprovada, que permanece preservada em uma pasta separada. O logotipo original permanece como elemento fixo da identidade.

Entrada e profundidade

A chamada se revela por linhas. A interface da carteira se aproxima discretamente durante a rolagem, variando de 94% a 100% da escala. Os dados mantêm seus valores reais do exemplo durante toda a transição.

Seções entram uma única vez, com deslocamento máximo de 28 px. O conteúdo continua disponível mesmo se a animação não executar.

Leitura e controle

Na seção de fundamentos, o texto acompanha a ficha por uma curta área de rolagem em telas grandes. A linha do Replay se desenha ao entrar em cena, preservando a tabela alternativa.

O controle Pausar efeitos interrompe as animações. A preferência de movimento reduzido do sistema desativa os efeitos automaticamente. No celular, a interface permanece em escala natural e o conteúdo segue uma coluna.