--- type: rule name: estilos-design-system description: Define os dois design systems do ecossistema — Floreta (iniciativa privada) e Betha (governo/setor público) — parametrizados via memorias-ia/modulo.yml scope: global trigger: always_on updatedAt: "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` - **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` 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) ```html ``` ### Tokens para Frontends `-front` (React/MUI e Vue 3/Vuetify) Nos módulos governamentais (`memorias-ia/modulo.yml`), os pacotes `-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 `-front`) ```typescript 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`): `` - **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 `-front` utilizam a função `eBetha()` para determinar a identidade exibida: ```typescript 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: `css-global-betha` (variáveis --bth-*) - Rule: `theme-provider-mui-betha` (arquitetura ThemeProvider) - Rule: `modal-dialog-padrao-betha` (estrutura de modais)