publico/.agent
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
.agent/rules/estilos-design-system.md

8 KiB
Raw Permalink Blame History

type name description scope trigger updatedAt
rule estilos-design-system Define os dois design systems do ecossistema — Floreta (iniciativa privada) e Betha (governo/setor público) — parametrizados via memorias-ia/modulo.yml global always_on 2026-10-14

Regra: Estilos e Design Systems do Ecossistema

O ecossistema Azteca opera com dois design systems distintos, selecionados conforme o público-alvo e a definição em memorias-ia/modulo.yml (modulo-id, modulo-descricao e modulo-tipo).

1. Estilo Floreta — Iniciativa Privada

Usado nos módulos voltados a empresas privadas e gestão corporativa.

Características

  • Framework UI: Vuetify (Vue 3) / eli-vue ou Tailwind CSS v4 (módulos verdes e-Licencie #688c00)
  • Cores: paleta própria definida no tema do projeto (#688c00 verde floresta e-Licencie)
  • Tipografia Obrigatória: Google Sans (Variable Font 100–900 carregada via @font-face do MinIO Paiol: https://paiol.idz.one/estaticos/GoogleSans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf e GoogleSans-Italic-VariableFont_GRAD,opsz,wght.ttf). Proibido uso de fontes genéricas ou font-mono em badges/valores (usar tabular-nums com Google Sans).
  • Iconografia Obrigatória: @lucide/vue exclusivamente. É proibido usar lucide-vue-next, @mdi/font, SVGs inline ou caracteres Unicode/ASCII (└, ➔) como ícones visuais.
  • Componentes: componentes Vuetify (v-btn, v-card, v-data-table, etc.) ou componentes modulares Vue 3
  • Estilo visual: moderno, tech, voltado a usabilidade corporativa

Quando aplicar

  • Todo código em pacotes <modulo>-front de módulos voltados ao setor privado (conforme descrito em memorias-ia/modulo.yml)
  • Landing pages e painéis públicos corporativos

2. Estilo Betha — Governo / Setor Público

Usado em módulos voltados a órgãos governamentais, gestão municipal e e-Gov (conforme identificado em memorias-ia/modulo.yml).

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 linhas de produto:

Linha de 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>

Tokens para Frontends <modulo>-front (React/MUI e Vue 3/Vuetify)

Nos módulos governamentais (memorias-ia/modulo.yml), os pacotes <modulo>-front utilizam estes tokens:

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
white-label primary alternativo #688c00 substituição de primary quando marca alternativa ativa

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

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

Configuração Vue 3 + Vuetify (src/plugins/vuetify.ts em <modulo>-front)

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

Quando o módulo suporta white-label dinâmico, os footers de <modulo>-front utilizam a função eBetha() para determinar a identidade 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
  • O footer exibe sempre a versão da API e do frontend
  • O logotipo é condicional conforme a marca ativa

Decisão: Como identificar qual estilo usar

  1. Consultar memorias-ia/modulo.yml: verificar modulo-id, modulo-descricao e modulo-tipo para identificar se o projeto é privado (Floreta/Vuetify) ou governamental (Betha)
  2. Nunca misturar: um módulo usa UM estilo — nunca combinar ambos na mesma tela
  3. Header identifica: header #343a40 = padrão governamental/Betha; barra lateral com menu Vuetify customizado = padrão privado/Floreta

Referências

  • Identidade do Módulo: memorias-ia/modulo.yml
  • 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: refactoring-ui-hierarquia-despoluicao (despoluição visual, hierarquia e espaçamento)
  • Livro Refactoring UI (Steve Schoger & Adam Wathan): https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf
  • Rule: css-global-betha (variáveis --bth-*)
  • Rule: theme-provider-mui-betha (arquitetura ThemeProvider)
  • Rule: modal-dialog-padrao-betha (estrutura de modais)