Cartão de missão (agenda)
Usado na página inicial para as sessões da semana. Papiro, selo de cornalina e recompensa no rodapé.
Recompensa: +150 XP de diversãoInspiração
Duas fontes, uma identidade: o conto de fadas da Branca de Neve (noite azul da floresta, ouro de coroa, vermelho maçã, espelho mágico, livro de histórias), um trocadilho com o nome da mestra, aplicado à linguagem de interface dos MMORPGs clássicos dos anos 2000. Cada tabuleiro (Éden, Egito, Renascença, Anos 3000) traz a própria arte dentro do painel de campanhas.
Conto de fadas (Branca de Neve)
- Noite azul-real da floresta encantada, neve e vaga-lumes
- Azul do corpete, vermelho maçã, ouro da coroa e rosa do laço
- Espelho mágico, maçã, castelo, cogumelos e flores
- Marfim de livro de histórias para os textos longos
Inspirado no conto clássico (domínio público). Não usamos personagens, logotipos nem desenhos da Disney.
Interface de MMORPG clássico
Referências de linguagem visual: World of Warcraft, Lineage II, Ragnarok Online, Tibia, Perfect World, RuneScape.
- Molduras metálicas com cantos ornamentados
- Barras de vida, mana e XP com brilho
- Cores de raridade de item (comum → lendário)
- Tooltips, barras de ação, log de missões, chat por canais
1. Legível antes de bonitoTexto longo sempre em fundo calmo (pedra escura ou papiro). Ornamento só nas bordas.
2. Ouro é recompensaDourado chama atenção: use em ações principais, títulos e conquistas — não em tudo.
3. Cor tem significadoRaridade, vida, mana e canais de chat seguem convenções que gamers já conhecem.
4. Tudo parece um itemComponentes têm “peso”: chanfros, relevo, sombra. Nada flat demais.
Paleta de cores
Clique em qualquer cor para copiar o código.
Ouro da coroa
Destaques, títulos, ações principais (--ouro-*)
Azul-real
Secundário, navegação, mana (--lapis-*)
Vermelho maçã
Alerta, perigo, a maçã da marca (--cornalina-*)
Rosa do laço
Rótulos pequenos (kickers), detalhes (--rosa-*)
Verde da floresta
Informação, sucesso, dicas (--turquesa-*)
Marfim do livro
Fundos de leitura, cartões de missão (--papiro-*)
Noite da floresta
Fundos e superfícies
60% Noite
20% Azul
10% Ouro
Maçã
✦
Proporção recomendada em cada tela: muito azul-noite, um pouco de azul-real, ouro como tempero e uma maçã vermelha por tela.
Escala de raridade
A convenção mais reconhecível dos MMORPGs. Usamos para molduras de heróis, badges, itens do inventário e destaque de conteúdo.
Cogumelo do Bosque
Encontrado em qualquer clareira.
Comum
#b9b2a3
Rosa sem Espinhos
+2 de charme em bailes reais.
Incomum
#4fd36b
Florete de Florença
A lâmina leve dos duelistas da corte.
Raro
#3d8cff
Escaravelho de Ouro
Abre qualquer tumba do Egito.
Épico
#b45cff
Espelho Mágico
Sempre diz a verdade, mesmo a que dói.
Lendário
#ff9a2e
Maçã de Cristal
Artefato. Um desejo, um preço.
Divino (artefato)
#f2d27a
Tipografia
Três famílias com papéis bem definidos, mais uma de enfeites. Todas gratuitas no Google Fonts.
O Reino Encantado
A Maçã de Cristal
Espelho, espelho meu: toda semana, aventureiros de todo o Brasil atravessam a floresta para viver jardins mágicos, tumbas de faraós e cidades do ano 3000.
--t-4xlH1 heroTemplo--t-3xlH1 páginaTemplo--t-2xlH2 seçãoTemplo--t-xlH3Templo--t-lgDestaqueTemplo--t-mdTextoTemplo--t-smApoioTemplo--t-xsRótuloTemploBotões
Metálicos, chanfrados e com “clique” físico (afundam ao pressionar). Classe base .btn + variação.
| Classe | Quando usar |
|---|---|
.btn--gold | Ação principal da tela (só uma por área). |
.btn--lapis | Ação secundária importante. |
.btn--turquesa | Ações de ajuda, dicas, utilidades. |
.btn--danger | Apagar, sair, combate. |
.btn--ghost | Cancelar, voltar, ações terciárias. |
Painéis e molduras
As “janelas” da interface. Cantos em ouro com losango, borda dupla e fundo de pedra.
Painel de pedra
Classe .panel. Para caixas de conteúdo, modais, player da live e formulários.
Painel de papiro
Classe .panel--papiro. Para leitura longa: crônicas, regras, fichas.
- FOR
- 14
- DES
- 17
- CON
- 12
- INT
- 10
- SAB
- 15
- CAR
- 13
Sacerdote de Thoth: “Viajante… o templo só se abre para quem resolver o enigma da esfinge.”
Barras e retrato (unit frame)
Vida em vermelho, mana em azul, experiência em roxo, vigor em amarelo. Passe o valor pela variável --v.
7
Nefer-Ankh
Sacerdotisa de Ísis
☠
Guardião Chacal
Chefe · Elite
Múmia Esquecida
Barra de ação
Slots quadrados com atalho de teclado e recarga (cooldown). Clique em uma habilidade para ver a recarga.
Tooltip de item
A janelinha que aparece ao passar o mouse num item. Nome na cor da raridade, atributos em verde, citação em dourado itálico.
Olho de Hórus
Vinculado ao pegar
AmuletoPescoço
+12 Sabedoria
+8 Percepção
Uso: revela criaturas invisíveis num raio de 9 m por 1 minuto. (1x por descanso longo)
“O falcão perdeu o olho lutando contra Set. Ísis o restaurou — e ele passou a ver tudo.”
Requer nível 8
Valor: 250 40
Cetro de Anúbis
Vinculado ao equipar
CajadoDuas mãos
2d6 necróticoVelocidade 3.2
+9 Inteligência
−2 Carisma
“A balança pesa o coração. O cetro pesa a alma.”
Conjunto do Embalsamador (1/4)
Inventário
Grade de slots com borda na cor da raridade e quantidade no canto. Slots vazios ficam escuros e afundados.
Bolsa de Linho14 / 24
5
2
12
3
1
8
4
1.250 37 82
Log de missões
O “!” dourado marca missão disponível; “?” marca missão pronta para entregar. Objetivos com contador.
!
O Véu de Anúbis
Campanha · Nível 7
- Encontrar a entrada da tumba 1/1
- Derrotar guardiões chacais 3/5
- Decifrar o cartucho real 0/1
?
Escaravelhos no Celeiro
Secundária · Nível 3
Pronta para entregar ao escriba Ptahmose.
!
O Oásis Perdido
Requer nível 10
Chat por canais
Cada canal com sua cor, como nos MMOs. Útil para overlays de live e para a comunidade.
GeralGrupoGuildaCombate
- [Sistema] Branca entrou na live. A mesa está aberta!
- [Geral] escriba42: alguém viu o mapa novo?
- [Grupo] Nefer-Ankh: eu curo, vocês batem
- [Guilda] gatoSagrado: one-shot sábado 15h ✦
- [Sussurro de Khaf]: tem armadilha na porta…
- Sekhet-Ra causou 18 de dano em Guardião Chacal.
- Você recebeu: [Olho de Hórus]
- Você não pode fazer isso agora.
[Geral]
| Canal | Cor |
|---|---|
| Sistema | Ouro 300 |
| Geral | Texto |
| Grupo | Lápis 300 |
| Guilda | Incomum |
| Sussurro | Rosa #ff8ad8 |
| Combate | Cornalina 300 |
| Erro | Vermelho #ff4b4b |
Formulários
Campos afundados (relevo para dentro), foco com brilho dourado.
Notificações
Avisos grandes e centralizados, como “subiu de nível” nos MMOs. Clique para testar.
Ícones
Traço fino, cantos arredondados, grade 24×24, cor herdada do texto. Uso no PHP: branca_icon( 'apple' ). Clique para copiar o nome.
Ornamentos
Elementos decorativos. Use com moderação: no máximo um ornamento forte por tela.
Fita de enfeites ·
branca_frieze()Ornamento com maçã ·
branca_divider()
Tom de voz
Acolhedor, brincalhão e épico na medida. Falamos como uma mestra de mesa simpática, não como um manual.
| Em vez de… | Escreva… |
|---|---|
| Login | Entrar no reino |
| Agenda | Quadro de missões |
| Erro 404 | Você rolou 1 natural |
| Blog | Crônicas / Páginas do livro de contos |
| Inscreva-se | Aceitar a missão |
| Comentários | Vozes da taverna |
| Buscar | Consultar o oráculo |
Regra: o tema pode estar no rótulo, mas a ação precisa ficar óbvia. Na dúvida, clareza vence a piada.
Tokens CSS
Todas as variáveis vivem em assets/css/main.css no bloco :root. Mude ali e o site inteiro acompanha.
Variáveis principais
CSS
:root {
--ouro-300: #f7d97f; --ouro-500: #e2b13c; --ouro-700: #a77a1f;
--lapis-500: #3459cc; --cornalina-500: #d9283f (maçã); --rosa-500: #f07aa0;
--turquesa-500: #46b57c (floresta); --papiro-100: #fdf8ec (marfim);
--obsidiana: #090d22 (noite); --tumba: #1c2654; --neve: #f4f7ff;
--r-comum: #b9b2a3; --r-incomum: #4fd36b; --r-raro: #3d8cff;
--r-epico: #b45cff; --r-lendario: #ff9a2e; --r-divino: #f2d27a;
--hp: #d23a2a; --mana: #2f7bff; --xp: #c48cff; --vigor: #e8c33a;
--f-display: "Berkshire Swash"; --f-titulo: "Cormorant SC";
--f-texto: "Alegreya Sans"; --f-glifo: "Noto Sans Symbols 2";
}