diff --git a/rules/estilos-design-system.md b/rules/estilos-design-system.md index 1fe0b8b..16ec4ac 100644 --- a/rules/estilos-design-system.md +++ b/rules/estilos-design-system.md @@ -17,10 +17,11 @@ 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.) +- **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 diff --git a/skills/ux/SKILL.md b/skills/ux/SKILL.md index a67bbcc..c2e8d15 100644 --- a/skills/ux/SKILL.md +++ b/skills/ux/SKILL.md @@ -139,11 +139,11 @@ Para cada elemento da interface, avaliar: - [ ] Em mobile, os elementos empilham verticalmente sem quebra visual? - [ ] Modais têm largura proporcional ao conteúdo? -#### Tipografia +#### Tipografia — Google Sans (obrigatório) -- [ ] Tamanhos de fonte seguem a escala: 12px (caption), 14px (body), 16px (subtitle), 20px (title), 24px (heading)? -- [ ] Textos longos usam `line-height: 1.5` para legibilidade? -- [ ] Labels de formulário são visualmente distintos do conteúdo preenchido? +- [ ] A fonte **`Google Sans`** (Variable Font 100–900 via `@font-face` de `https://paiol.idz.one/estaticos/GoogleSans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf`) está aplicada em todo o sistema (`--font-sans` e `--eli-font-family`)? +- [ ] Proibido `font-mono` em contadores, códigos e valores: usar `tabular-nums` com `Google Sans`. +- [ ] Escala: 12px (caption), 14px (body), 16px (subtitle), 20px (title), 24px (heading); `line-height: 1.5` em textos longos. #### Acessibilidade básica @@ -169,9 +169,7 @@ Ao implementar melhorias, seguir os padrões do ecossistema: Todos os ícones do projeto devem vir exclusivamente da biblioteca **`@lucide/vue`** (dependência já instalada no `package.json`). **Proibido**: -- SVG inline manual (hardcoded no template) -- Ícones de `@mdi/font` ou Material Design Icons em componentes do projeto -- Bibliotecas alternativas (Font Awesome, Heroicons, etc.) +- `lucide-vue-next`, `@mdi/font`, Font Awesome, Heroicons, SVGs inline manuais ou caracteres ASCII/Unicode (`└`, `➔`) como ícones. **Como usar**: