.agent/rules/estilos-design-system.md

type	name	description	scope	trigger	updatedAt
rule	estilos-design-system	Define os dois design systems do ecossistema e-licencie — Floreta (iniciativa privada) e Betha (governo) — e quando usar cada um	global	always_on	2026-09-28

Regra: Estilos e Design Systems do Ecossistema

O ecossistema e-licencie opera com dois design systems distintos, selecionados conforme o público-alvo da aplicação.

1. Estilo Floreta — Iniciativa Privada

Usado em: e-licencie, e-licencie.qualifica, e-licencie.gee e todos os módulos voltados a empresas privadas.

Características

• Framework UI: Vuetify (Vue 3)
• Cores: paleta própria definida no tema Vuetify do projeto
• Tipografia: controlada pelo tema Vuetify
• Componentes: componentes Vuetify (v-btn, v-card, v-data-table, etc.)
• Estilo visual: moderno, tech, voltado a usabilidade corporativa

Quando aplicar

• Todo código em pacotes *-front dos produtos e-licencie voltados ao mercado privado
• Landing pages e painéis públicos de empresas

---

2. Estilo Betha — Governo / Setor Público

Usado em: aplicações integradas à plataforma Betha (gestão municipal, e-Gov).

Documentação oficial: https://design.plataforma.betha.cloud/doc/index.html

Cores

Cor	Hex	Classe bg	Classe tx
Brand	#0761FF	.bg__brand	.tx__brand
Blue	#3374DB	.bg__blue	.tx__blue
Aqua	#46AFD2	.bg__aqua	.tx__aqua
Yellow	#E8B730	.bg__yellow	.tx__yellow
Red	#DD413C	.bg__red	.tx__red
Green	#3EC18F	.bg__green	.tx__green
Orange	#E87D30	.bg__orange	.tx__orange
Purple	#9F62B2	.bg__purple	.tx__purple
Pink	#CB528F	.bg__pink	.tx__pink
Gray	#BFBFC0	.bg__gray	.tx__gray

Variações tonais:

• Dark (mais escura): sufixos --d10, --d20, --d30, --d40
• Light (mais clara): sufixos --l10, --l20, --l30, --l40
• Exemplo: .bg__blue--d20, .tx__red--l30

Cores de produtos Betha:

Produto	Hex
Gestão Municipal	#9A8B7D
Planejamento e Contabilidade	#A6B8FF
Arrecadação e Fiscalização	#00BD7E
Atendimento	#A5A6A7
Gestão de Compras e Contratos	#FF7F7A
Pessoal e Recursos Humanos	#00B0FF
Saúde e Assistência Social	#A7C27E
Educação e Gestão Escolar	#F9B02E
Gestão de Leis Municipais	#F4812E
Componentes genéricos / Perf. Corp.	#263E81

Tipografia

• Fonte: Open Sans (Regular, Semibold, Bold)
• Tamanhos: H1=36px, H2=30px, H3=20px, H4=18px, H5=14px, H6=12px

Componentes (classes CSS)

Botões

• .btn-default — ação secundária
• .btn-primary — ação principal (#337AB7)
• .btn-success — ação positiva/adicionar
• .btn-danger — ação destrutiva/crítica
• .btn-warning — ação que requer atenção
• .btn-info — ação principal discreta
• .btn-link — estilo link
• Tamanhos: .btn-lg, .btn (padrão), .btn-sm, .btn-xs

Grid

• 12 colunas responsivas (Bootstrap 3)
• Container fixo: max-width 1360px
• Gutter: 8px
• Classes: .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*

Integração (CDN)

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.betha.cloud/base/g4/design/4.0.0/bth-design.css" />

<!-- JS -->
<script src="https://cdn.betha.cloud/base/g4/front-end/2.7/js/base.js"></script>
<script src="https://cdn.betha.cloud/base/g4/design/4.0.0/bth-design.js"></script>

Quando aplicar

• Módulos integrados à plataforma Betha de gestão municipal
• Interfaces que operam dentro do ecossistema e-Gov Betha
• Aplicações web com body class="suite-pla iv"

Tokens Reais — Ecossistema GOV (React/MUI)

Os frontends React (QUIPO-FRONT, QUIPO-PORTAL3, AUTENTICACAO-FRONT) usam estes tokens via MUI ThemeProvider:

Token	Hex	Uso
primary	#007bff	botões, links, destaques
primary dark	#0069d9	hover de botões primários
secondary	#6c757d	ações secundárias
dark (header)	#343a40	header de telas, DialogTitle, navbar
body bg	#EBEDF0	background da aplicação
light bg	#f8f9fa	DialogActions, cards neutros
border	#dee2e6	bordas de separadores
text	#212529	texto principal
text muted	#495057	texto secundário/labels
success	#28a745	status positivo
danger	#dc3545	erro/exclusão
warning	#ffc107	alerta
info	#17a2b8	informação
e-licencie primary	#688c00	substituição de primary quando marca e-licencie ativa

Seleção de itens (cartões interativos):

• Selecionado: #cce5ff / hover: #b8daff
• Não selecionado: #f8f9fa / hover: #e9ecef

Vue 3 + Vuetify — QUIPO-CONSOLE

O QUIPO-CONSOLE usa Vue 3 + Vuetify 3. Configuração do tema em src/plugins/vuetify.ts:

theme: {
  defaultTheme: "bethaTema",
  themes: {
    bethaTema: {
      dark: false,
      colors: {
        primary:    "#007bff",
        secondary:  "#6c757d",
        background: "#EBEDF0",
        surface:    "#ffffff",
        error:      "#dc3545",
        warning:    "#ffc107",
        success:    "#28a745",
        info:       "#17a2b8",
      }
    }
  }
}

• Navbar (App.vue): <v-app-bar flat color="#343a40" theme="dark">
• Botões: sempre color="primary" para usar o token do tema

---

3. Branding Dinâmico — eBetha() nos Footers

Todos os footers do ecossistema usam a função eBetha() para determinar a identidade da empresa exibida:

import { eBetha } from "p-ambiente";

// eBetha() == true  → Betha Sistemas Ltda, CNPJ 00.456.865/0001-67, Criciúma-SC
// eBetha() == false → Azteca Software LTDA, CNPJ 29.979.144/0001-13, Içara-SC

Arquivos de footer por frontend:

Frontend	Arquivo
QUIPO-FRONT	src/components/Footer.tsx e src/pages/Portal/PortalFooter.tsx
QUIPO-PORTAL3	src/components/Footer/Footer.tsx
AUTENTICACAO-FRONT	sem footer próprio

• O footer exibe sempre a versão da API e do frontend
• O logotipo é condicional: logotipo diferente por marca

---

Decisão: Como identificar qual estilo usar

1. Pergunte o contexto: se o operador não especificar, pergunte se o módulo é para iniciativa privada (Floreta/Vuetify) ou governo (Betha)
2. Nunca misture: um módulo usa UM estilo — nunca combine Vuetify com Betha Design
3. Header identifica: header #343a40 com logo = Betha; barra lateral com menu Vuetify customizado = Floreta

Referências

• Betha Design System: https://design.plataforma.betha.cloud/doc/index.html
• Framework Design CDN: https://cdn.betha.cloud/base/g4/design/4.0.0/
• Rule: css-global-betha (variáveis --bth-*)
• Rule: theme-provider-mui-betha (arquitetura ThemeProvider)
• Rule: modal-dialog-padrao-betha (estrutura de modais)