Pular para o conteúdo
HivvoSEASON 404 / DESIGN SYSTEMVoltar à CMS ↗
TEMPORADA 01 / INTERNET AFTER DARK

O mundo não foi encontrado. Você, sim.

Internet Jerk × Web 2.0 × Digital Horror. Cromo gasto, pixels corrompidos e verde ácido. Uma identidade para se perder na internet — sem se perder na interface.

Inter para leitura · Mono para títulosBase de espaçamento: 4 pxÍcones originais do jogo
00

Marca e moedas

Assinaturas

H — ícone do hotelHivvo sem temporada

H no botão do hotel e favicon. Assinatura sem temporada em espaços compactos.

Hivvies e diamantes

HivviesDiamantes

Cromo e verde ácido para Hivvies. Facetas em ciano para distinguir diamantes.

01

Paleta e funções

Clique em uma cor para copiar o código. Preto e grafite formam a base. Verde ácido marca interação; vermelho sinaliza erro real. O cromo aparece nas molduras.

Ação: #34420bHover da ação: #465917Links: #ccff55
02

Tipografia e leitura

Explore a Hivvo

Título de seção · Mono bold

Texto principal em #eceee8. Frases curtas, ações claras e números fáceis de comparar.

Texto de apoio em #b1b8be, sem reduzir a opacidade.

Exemplo de link identificável →

Escala de texto

Título de página
32 px / mono bold
Seção
24 px / 600
Corpo CMS
14–16 px / 400
Controle compacto do jogo
12–14 px / 500
Legenda
12 px / 400
03

Espaçamento e formas

Escala de 4 px

4Detalhes
8Ícone + texto
12Controles relacionados
16Cards no mobile
24Cards e seções da CMS
32Separação de grupos

Estrutura

  • Cards: 24 px internos; 16 px no mobile.
  • Seções: 24 px entre grupos; 16 px no mobile.
  • Campos e botões da CMS: pelo menos 42 px de altura.
  • Bordas de 1 px. Raio de 3 px nos controles e painéis; barra inferior reta.
  • No mobile: telas inteiras ou bottom sheets, sem controles fora da tela.
04

Componentes e estados

Botões

Passe o mouse e use Tab para conferir hover e foco.

Campos

Demonstração: não salva dados.

Abas

Explore os quartos da comunidade.

Progresso

64 / 100 XP

Carteira e identificação

250Hivvies
120Diamantes
Tag · até 5 caracteresDisponível

Ícones padrão do jogo

InícioQuartosLojaInventárioAmigosCâmera

Feedback

✓ Alterações salvas.

! Confira os campos antes de publicar.

× Não foi possível concluir. Tente novamente.

i Stories ficam disponíveis por 24 horas.

O significado não depende apenas da cor.

Janelas e menus

Mesmo fundo, borda, títulos e ações em todas as superfícies.

Mais opções

Feche com X ou Esc. A janela mantém o foco do teclado.

05

Imagens e cores do jogo

As imagens e as cores escolhidas permanecem visíveis, inclusive na opção selecionada.

06

Contraste verificado

Texto normal: meta mínima de 4,5:1. Os valores abaixo são calculados a partir das cores do tema carregado.

UsoTexto / fundoRelaçãoResultado

Exemplo de janela

Superfície #1b1d20, texto #eceee8 e borda cromada #858d96. O conteúdo continua legível ao receber foco.