Style Guide – RPG de Musa

00

Inspiraçã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.

01

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.

02

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

03

Tipografia

Três famílias com papéis bem definidos, mais uma de enfeites. Todas gratuitas no Google Fonts.

Berkshire SwashDisplay · letra de livro de contos · só títulos grandes

O Reino Encantado

Cormorant SCTítulos, botões, rótulos · 600–700

A Maçã de Cristal

Alegreya SansTexto corrido · 400/700

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.

Noto Sans Symbols 2Enfeites · nunca para informação

--t-4xlH1 heroTemplo

--t-3xlH1 páginaTemplo

--t-2xlH2 seçãoTemplo

--t-xlH3Templo

--t-lgDestaqueTemplo

--t-mdTextoTemplo

--t-smApoioTemplo

--t-xsRótuloTemplo

04

Botõ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.

05

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.

Ficha do personagem

FOR: 14
DES: 17
CON: 12
INT: 10
SAB: 15
CAR: 13

Janela de diálogo

Sacerdote de Thoth: “Viajante… o templo só se abre para quem resolver o enigma da esfinge.”

06

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.

Vida 78 / 100

Mana 45 / 100

Vigor

Nível 7 · 62%

pequena

7

Nefer-Ankh Sacerdotisa de Ísis

72 / 100

95 / 100

☠

Guardião Chacal Chefe · Elite

340 / 340

Múmia Esquecida

07

Barra de ação

Slots quadrados com atalho de teclado e recarga (cooldown). Clique em uma habilidade para ver a recarga.

09

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

10

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

Terça 20h

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ão

11

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

12

Formulários

Campos afundados (relevo para dentro), foco com brilho dourado.

13

Notificações

Avisos grandes e centralizados, como “subiu de nível” nos MMOs. Clique para testar.

Dica: a live começa às 20h.

Inscrição na one-shot confirmada.

Vagas acabando: 1 restante.

Algo deu errado. Tente de novo.

14

Ícones

Traço fino, cantos arredondados, grade 24×24, cor herdada do texto. Uso no PHP: branca_icon( 'apple' ). Clique para copiar o nome.

15

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()

Espelho (logo) RPG de Musa Mesas da Branca

Espelho mágico

Faixa do topo

16

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.

17

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";
}