Tema visual

O que é o bloco Tema

O bloco Tema é um bloco de Padrões de Engenharia e define a identidade visual do sistema. O compilador transforma as declarações de tema em tokens CSS (custom properties) e instruções de design system para a IA.

O tema pode ser definido com um preset pronto ou customizado campo a campo. Em ambos os casos, o arquiteto descreve a intenção visual — "escuro e corporativo", "claro e minimalista" — e a IA implementa com base no design system declarado em Interface.

Presets disponíveis

O SPELL vem com cinco presets pré-configurados:

Preset	Descrição
`escuro-corporativo`	Fundo quase preto, acentos em azul frio. Para plataformas B2B e dashboards.
`escuro-moderno`	Preto profundo com acentos vibrantes. Para SaaS e ferramentas developer-focused.
`escuro-criativo`	Escuro com acentos em gradiente. Para plataformas de criação e portfolios.
`claro-corporativo`	Branco com acentos em azul. Para sistemas de gestão e portais corporativos.
`claro-minimalista`	Branco puro com acentos em cinza. Para landing pages e apps focados em conteúdo.

Usando um preset

Tema {
  preset: escuro-corporativo
}

Sub-bloco Cores

Para customizar o tema ou criar um do zero, use o sub-bloco Cores. Para sistemas com modo claro e escuro, use os sub-blocos aninhados Cores.claro e Cores.escuro:

Tema {
  Cores {
    primaria: #1a6bcc
    primaria-hover: #1558ad
    destaque: #f59e0b
    perigo: #dc2626
    sucesso: #16a34a
  }

  Cores.claro {
    fundo: #ffffff
    fundo-secundario: #f4f4f4
    texto: #1a1a1a
    texto-suave: #616161
    borda: #e0e0e0
  }

  Cores.escuro {
    fundo: #0f0f0f
    fundo-secundario: #1a1a1a
    texto: #f0f0f0
    texto-suave: #a0a0a0
    borda: #2a2a2a
  }
}

Tipografia

O sub-bloco Tipografia define as fontes do sistema:

Tema {
  Tipografia {
    fonte-principal: Inter
    fonte-codigo: JetBrains Mono
    fonte-titulos: Barlow Condensed
    tamanho-base: 16px
    escala: minor third (1.2)
  }
}

Formas e Componentes

O sub-bloco Formas define o raio de borda e o sub-bloco Componentes define comportamentos específicos de componentes de UI:

Tema {
  Formas {
    raio-padrao: 8px
    raio-botao: 6px
    raio-card: 12px
    sombra: suave
  }

  Componentes {
    botao-primario: preenchido com cor primária
    botao-secundario: contorno com cor primária
    input: borda suave, foco com anel de cor primária
    tabela: listras alternadas, hover em linha
    sidebar: fundo secundário, item ativo com destaque lateral
  }

  Comportamento {
    animacoes: reduzidas — respeitar prefers-reduced-motion
    tema-padrao: claro, com toggle para escuro
    persistencia-tema: localStorage
    densidade: normal — não compacto por padrão
  }
}

Exemplo de tema completo

padroes.spell — Tema completo com preset + customização

Tema {
  preset: claro-corporativo
  /// Preset base — customizações abaixo sobrescrevem o preset

  Cores {
    primaria: #005ea2      // azul da identidade visual da empresa
    destaque: #e63946      // vermelho para alertas importantes
  }

  Tipografia {
    fonte-principal: Source Sans Pro
    /// Fonte aprovada pelo time de branding — não substituir
  }

  Comportamento {
    tema-padrao: claro
    toggle-tema: nao — sistema sempre claro
  }
}