Documentação

CurvaDeMana Docs

Identidade visual

Paleta, tipografia e os tokens que sustentam a marca.

Atualizado em 11 de junho de 2026

A identidade do CurvaDeMana é clara, elegante e arcana: pergaminho luminoso, ouro solar, verde floresta e uma linguagem gráfica art déco celestial (estrelas, órbitas, arcos ascendentes). Todos os valores vivem como tokens em src/app/globals.css, no bloco @theme do Tailwind. Usar os tokens, e não valores soltos, é o que mantém a interface coesa.

Paleta

Fundos (pergaminho)

Os tokens ink-* são os fundos claros, do mais saturado ao mais limpo, e servem também de bordas douradas nos tons mais escuros.

ink-950  #f1e6cd   fundo da página
ink-900  #fbf5e6   cartões e painéis (levantam)
ink-800  #f4ead2   superfícies elevadas / hover
ink-700  #d9c49b   bordas suaves (ouro pálido)
ink-600  #c1a86d   bordas de destaque (ouro tan)

Texto (tinta floresta)

parchment-100  #20342a   texto principal
parchment-300  #4a5d50   texto secundário
parchment-500  #8a7c5c   texto de apoio

Ouro, vermelho e a paleta rica

O ouro marca rótulos, dividers, bordas e barras. As demais cores dão vida a botões, ícones e destaques.

gold-400  #9c7526   gold-500  #d4a247   gold-600  #a8842c
red/ember #b44e3d   green     #1e4d3a   teal      #236f6e
blue      #3a5fa8   violet    #6b4fa3

Tipografia

  • Display: Cinzel, serifa de inspiração clássica, usada nos títulos.
  • Corpo: Inter, para textos e interface.

O padrão de título da casa é o par kicker + título: uma linha curta, fina e espaçada em ouro acima, seguida de um título grande em Cinzel abaixo.

Linguagem gráfica

O motivo central é o brilho de quatro pontas (estrela celestial), que aparece em dividers, ícones e acentos. Os glifos da plataforma seguem o traço dourado fino do style guide: grade tática (busca), órbitas arcanas (Oráculo), arcos ascendentes da curva de mana (deck builder) e cartas empilhadas (coleção).

Classes utilitárias

Para reaproveitar a identidade, globals.css define:

  • .kicker: a linha curta espaçada acima dos títulos.
  • .label-bronze: rótulo pequeno em ouro e caixa alta, para datas e seções.
  • .btn-outline: o botão padrão, contornado em ouro, que preenche de ouro ao passar o mouse.
  • .btn-solid com .btn-green / .btn-blue / .btn-violet / .btn-red: botões de ação coloridos.
  • .frame-card: moldura de cartão clara com borda dourada e sombra suave.
  • .divider-star e o componente Sparkle: dividers e brilhos celestiais.
  • .prose-cdm: a estilização de conteúdo em markdown, usada em posts e nesta documentação.