feat: Implement and document the new "Zen" design system philosophy by updating theme configurations and anti-pattern guidelines.

Author: ciro-maciel

.agent/skills/riligar-design-system/SKILL.md

@@ -1,55 +1,120 @@
 ---
 name: riligar-design-system
-description: Especialista no Sistema Visual da RiLiGar. Use para: (1) Criação de interfaces web e mobile (Light/Dark Mode), (2) Implementação de componentes UI (Mantine Only), (3) Garantir estética minimalista "Content-First", (4) Aplicar tokens de design via Mantine Theme.
+description: Especialista no Sistema Visual Zen da RiLiGar. Use para: (1) Criação de interfaces com estética "Content over Chrome", (2) Aplicar hierarquia massiva via Big Type Metrics, (3) Diferenciar contextos Zen Stage (impacto) e Zen Dense (densidade), (4) Implementar componentes UI (Mantine Only), (5) Garantir padrão monocromático e palco central limpo.
 ---
 
-# RiLiGar Design System Expert
+# 🏮 RiLiGar Zen Design System
 
-Você é um especialista em design e interface seguindo as diretrizes da RiLiGar. Sua missão é garantir que qualquer código gerado use **APENAS** a API do Mantine 8, sem CSS customizado ou inline.
+Você é um especialista em design e interface seguindo a filosofia **Zen** da RiLiGar. Sua missão é garantir que qualquer código gerado siga os princípios do Zen e use **APENAS** a API do Mantine 8, sem CSS customizado ou inline.
 
-## Filosofia: "Content-First" & "Theme-Aware"
+> _"O Zen não é sobre o que você coloca, é sobre o que você decide não colocar."_
 
-A interface deve ser invisível e funcionar perfeitamente em Light e Dark Mode.
+---
+
+## A Filosofia Zen: 3 Pilares
+
+### 1. Content over Chrome
+
+A interface **não compete** com a informação. Botões, bordas e sombras são reduzidos ao mínimo absoluto. Se um elemento não ajuda na leitura do dado, ele é removido sem piedade.
+
+### 2. The Stage (O Palco)
+
+Cada visualização é tratada como um **palco teatral**:
+
+- O cabeçalho é o "anúncio" → Subtítulo leve (Small Caps, 10-12px, fw 800) + Título pesado (48-72px, fw 900)
+- O conteúdo é a "performance" → Centro da tela limpo, focado, sem distrações laterais
+- O `ZenLayout` garante essa fundação: container `size="xl"`, padding vertical generoso (`py={80}`)
+
+### 3. Hierarquia Massiva
+
+Dados não são exibidos — são **declarados**. Números se tornam declarações de design:
+
+- **Big Type Metrics**: fw 900, fz 64-120px, lh 1
+- **Labels**: fw 800, fz 10-12px, uppercase, letter-spacing 1.5px, cor gray.4
+- **Títulos**: fw 900, fz 48-72px, letter-spacing -0.04em
+
+---
+
+## Dois Contextos de Aplicação
+
+O agente **DEVE** identificar o contexto antes de gerar qualquer interface:
+
+### 🎭 Zen Stage (Impacto Teatral)
+
+**Quando usar:** Landing pages, dashboards de métricas, onboarding, telas de apresentação.
 
--   **Estrutura:** Whitespace e alinhamento preciso.
--   **Estética:** Monocromática, funcional, estilo Notion/Linear.
--   **Técnica:** Zero CSS files. Zero `style={{}}`. Tudo via Props.
+- Tipografia massiva (Big Type Metrics 64px+)
+- Inputs minimalistas (unstyled, apenas `border-bottom`)
+- Padding vertical generoso (80px)
+- Container centralizado size XL
+- Máximo de respiro, mínimo de elementos
+
+### 📊 Zen Dense (Densidade Admin)
+
+**Quando usar:** Painéis admin, tabelas, formulários CRUD, configurações.
+
+- Densidade de dados estilo Notion/Linear
+- Inputs com borda completa (compactos, 32px)
+- Tabelas com padding tight (`py-xs`)
+- Foco em escaneabilidade e eficiência
+
+**Importante:** Ambos os contextos compartilham a mesma alma — monocromia, Content over Chrome, zero ornamentos. A diferença está no **ritmo** e na **escala tipográfica**.
+
+---
 
 ## Guia de Referência
 
-Para atingir a excelência:
+Para atingir a excelência Zen:
 
--   **[Excellence Patterns](references/master-patterns.md)**: Código "Gold Standard" usando Mantine Props. **Sempre use como base.**
--   **[Theme Config](assets/theme.js)**: Configuração do tema com suporte a Dark Mode automático.
--   **[Visual references](references/visual-references.md)**: Mapeamento de nuances estéticas.
--   **[Anti-patterns](references/anti-patterns.md)**: O que evitar (especialmente CSS inline).
--   **[Design Guidelines](references/design-system.md)**: Tipografia, cores e hierarquia visual detalhada.
+- **[Master Patterns](references/master-patterns.md)**: Código "Gold Standard" com patterns Stage e Dense. **Sempre use como base.**
+- **[Theme Config](assets/theme.js)**: Configuração do tema Zen com headings fw 900 e Dark Mode automático.
+- **[Visual References](references/visual-references.md)**: Dicionário Visual-Code com especificações Zen.
+- **[Anti-patterns](references/anti-patterns.md)**: O que evitar (CSS inline, inputs decorados, títulos leves).
+- **[Design Guidelines](references/design-system.md)**: Tipografia, cores, hierarquia e contextos detalhados.
+
+---
 
-## Checklist de Lapidação (RiLiGar Excellence)
+## Checklist de Lapidação Zen
 
 Antes de entregar qualquer interface, o agente **DEVE** validar:
 
-1. [ ] Configurei `defaultProps` no theme.js para evitar repetição de props?
-2. [ ] O código do componente está "limpo"? (Ex: `<Button>Save</Button>` sem `radius/size`).
-3. [ ] Removi **TODO** o CSS inline (`style={{}}`)?
-4. [ ] Usei props semânticas do Mantine (`bd`, `bg`, `c`)?
-5. [ ] As cores são semânticas e theme-aware? (Ex: `c="dimmed"`).
-6. [ ] Removi todas as tags HTML nativas (`div`, `button`)?
-7. [ ] Usei Montserrat via font-family do tema?
-8. [ ] O padding vertical em listas e tabelas é compacto?
-9. [ ] Os ícones usam `stroke={1.5}`?
-10. [ ] O resultado é "Clean" e livre de ruído visual?
+### Foundation
+
+1. [ ] Identifiquei o contexto correto? (Stage vs Dense)
+2. [ ] Configurei `defaultProps` no theme.js para evitar repetição?
+3. [ ] O código está "limpo"? (Ex: `<Button>Save</Button>` sem `radius/size`)
+4. [ ] Removi **TODO** o CSS inline (`style={{}}`)? Zero CSS files?
+5. [ ] Removi todas as tags HTML nativas (`div`, `button`)?
+
+### Zen Soul
+
+6. [ ] Títulos usam fw 900 e letter-spacing -0.04em?
+7. [ ] Labels/subtítulos usam Small Caps (uppercase, fw 800, ls 1.5px)?
+8. [ ] Métricas principais usam Big Type (64px+, fw 900, lh 1)?
+9. [ ] Inputs no contexto Stage usam estilo unstyled (border-bottom only)?
+10. [ ] O layout segue o conceito de "Palco"? (container XL, py generoso)
+
+### Excellence
+
+11. [ ] Cores são semânticas e theme-aware? (Ex: `c="dimmed"`)
+12. [ ] Ícones usam `stroke={1.5}` e tamanho 16-18px?
+13. [ ] O padding vertical em listas/tabelas é compacto no contexto Dense?
+14. [ ] O resultado é "Clean" e livre de ruído visual?
+
+---
 
 ## Princípios de Implementação
 
-1. **Theme First:** Se você está repetindo `size="sm"` em todo lugar, mova para `theme.components`.
-2. **Mantine Nativo:** Use APENAS a API do Mantine. Zero CSS files.
-3. **Semântica:** Use `bg="default"` ou `bg="body"` para superfícies que mudam com o tema.
-4. **Bordas:** Use `withBorder` em componentes ou `bd` em Caixas.
-5. **Tipografia:** Use `Title`, `Text` e `Code` do sistema.
+1.  **Theme First:** Se você está repetindo uma prop, mova para `theme.components`.
+2.  **Mantine Nativo:** Use APENAS a API do Mantine. Zero CSS files.
+3.  **Semântica:** Use `bg="default"` ou `bg="body"` para superfícies que mudam com o tema.
+4.  **Bordas:** Use `withBorder` em componentes ou `bd` em Caixas.
+5.  **Tipografia:** Use `Title`, `Text` e `Code` do sistema — nunca tags HTML.
+
+## Master Prompt (Geração Zen)
 
-## Instruções de Geração
+Ao gerar novas interfaces, use este prompt mental como guia:
 
-Ao gerar UI, sempre prefira as estruturas em **[Master Patterns](references/master-patterns.md)**.
+> "Crie uma interface com estética Zen-Modern de alto impacto. Princípios: Conteúdo sobre Cromo (foco total na tipografia e dados). Paleta minimalista (Pure White backgrounds, Dark-9/Gray-9 texts). Hierarquia Massiva (Títulos em Bold/900 com letter-spacing -0.04em, Labels em Small Caps/LTS 1.5px). Big Type Metrics: fontes gigantes (64px+) para valores de dados principais. Inputs Minimalistas: estilo unstyled com apenas border-bottom. Palco Unificado: containers largos (XL) com padding vertical generoso (80px)."
 
 **Atenção:** Código verboso com muitas props repetidas será considerado uma falha de design system.

.agent/skills/riligar-design-system/assets/theme.js

@@ -3,35 +3,47 @@ import { createTheme, rem } from '@mantine/core'
 export const theme = createTheme({
     fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
 
+    // --- ZEN HEADINGS ---
+    // fw 900 + tracking -0.04em = Hierarquia Massiva (Zen Manifesto §3)
+    headings: {
+        fontWeight: '900',
+        sizes: {
+            h1: { fontSize: rem(56), lineHeight: '1', letterSpacing: '-0.04em' },
+            h2: { fontSize: rem(48), lineHeight: '1', letterSpacing: '-0.04em' },
+            h3: { fontSize: rem(32), lineHeight: '1.1', letterSpacing: '-0.03em' },
+            h4: { fontSize: rem(20), lineHeight: '1.2', letterSpacing: '-0.02em' },
+        },
+    },
+
     colors: {
         // Escala Neutra Universal (Substitui o gray padrão)
         gray: [
-            '#F9FAFB', // 0: App Background
-            '#F3F4F6', // 1: Hover/Subtle
-            '#E5E7EB', // 2: Borders
+            '#F9FAFB', // 0: App Background / Canvas
+            '#F3F4F6', // 1: Hover / Subtle Feedback
+            '#E5E7EB', // 2: Borders (a borda universal Zen)
             '#D1D5DB', // 3: Disabled
-            '#9CA3AF', // 4: Placeholder
+            '#9CA3AF', // 4: Zen Labels (Small Caps)
             '#6B7280', // 5: Text Secondary
             '#4B5563', // 6: Text Primary Soft
             '#374151', // 7: Text Primary
             '#1F2937', // 8: Headers
-            '#11181C', // 9: Absolute Black
+            '#11181C', // 9: Absolute Black (nunca #000)
         ],
-        // Semânticos neutralizados para manter monochromaticidade total
+        // Semânticos neutralizados para monocromaticidade total
         error: ['#F9FAFB', '#F3F4F6', '#E5E7EB', '#D1D5DB', '#9CA3AF', '#6B7280', '#4B5563', '#374151', '#1F2937', '#11181C'],
         success: ['#F9FAFB', '#F3F4F6', '#E5E7EB', '#D1D5DB', '#9CA3AF', '#6B7280', '#4B5563', '#374151', '#1F2937', '#11181C'],
     },
 
     primaryColor: 'dark', // Escala dark mapeada para cinzas
     autoContrast: true,
 
-    defaultRadius: 'md', // 6px
+    defaultRadius: 'md', // 6px — suave, nunca "pill"
 
     components: {
         // --- LAYOUT & CONTAINERS ---
         Paper: {
             defaultProps: {
-                withBorder: true,
+                withBorder: true, // Borda > Sombra (Zen §2: Layer 1)
                 shadow: 'none',
                 radius: 'lg', // 8px para containers
             },
@@ -48,7 +60,7 @@ export const theme = createTheme({
         // --- DATA DISPLAY ---
         Table: {
             defaultProps: {
-                verticalSpacing: 'xs', // 8px density
+                verticalSpacing: 'xs', // 8px — Zen Dense density
                 horizontalSpacing: 'md',
                 withRowBorders: true,
                 highlightOnHover: true,
@@ -58,22 +70,22 @@ export const theme = createTheme({
             defaultProps: {
                 size: 'sm',
                 radius: 'sm',
-                variant: 'light',
+                variant: 'light', // Sutil — nunca chamativo
                 fw: 500,
             },
         },
 
         // --- INPUTS & ACTIONS ---
         Button: {
             defaultProps: {
-                size: 'sm', // 32px
+                size: 'sm', // 32px — compacto
                 fw: 500,
                 radius: 'md',
             },
         },
         TextInput: {
             defaultProps: {
-                size: 'sm', // 32px height
+                size: 'sm', // 32px height — Zen Dense
                 radius: 'md',
             },
             styles: theme => ({
@@ -93,7 +105,7 @@ export const theme = createTheme({
         },
         ActionIcon: {
             defaultProps: {
-                size: 'sm', // 26px context triggers
+                size: 'sm', // 26px — context triggers
                 variant: 'subtle',
                 color: 'gray',
                 radius: 'md',
@@ -107,14 +119,16 @@ export const theme = createTheme({
                 color: 'gray',
             },
         },
+
+        // --- TYPOGRAPHY ---
         Title: {
             defaultProps: {
-                lh: 1.2,
+                lh: 1, // Zen: lh 1 para impacto massivo
             },
         },
         Text: {
             defaultProps: {
-                lh: 1.6,
+                lh: 1.6, // Corpo: respiro para legibilidade
             },
         },
     },

.agent/skills/riligar-design-system/references/anti-patterns.md

@@ -1,36 +1,85 @@
-# Anti-Patterns: O que NÃO é RiLiGar
+# Anti-Patterns: O que NÃO é Zen
 
-Para atingir a excelência, devemos eliminar vícios de design comum que deixam a interface com cara de "genérica".
+Para atingir a excelência, devemos eliminar vícios que destroem a alma Zen da interface.
 
-| Erro Comum                  | Por que é ruim?                                         | A Solução RiLiGar                                   |
+## Anti-Patterns Universais
+
+| Erro Comum                  | Por que é ruim?                                         | A Solução Zen                                       |
 | :-------------------------- | :------------------------------------------------------ | :-------------------------------------------------- |
-| **Sombras Drop (Pesadas)**  | Adiciona ruído visual e amadorismo.                     | `border: 1px solid #E5E7EB`.                        |
-| **Azul "Bootstrap"**        | Cor saturada demais para a estética minimalista.        | Use `#000000` (Preto) ou um azul marinho `#11181C`. |
+| **Sombras Drop (Pesadas)**  | Adiciona ruído visual e amadorismo.                     | `border: 1px solid gray.2`.                         |
+| **Azul "Bootstrap"**        | Cor saturada demais para a estética Zen.                | Use `#000000` (Preto) ou um azul marinho `#11181C`. |
 | **Pillings (Radius total)** | Lembra apps mobile infantis ou Google Material antigos. | `border-radius: 6px`. Retangular com quinas suaves. |
 | **Inputs Gigantes**         | Quebram a densidade de informação útil.                 | `height: 32px`. Compacto e focado.                  |
 | **Gradientes Lineares**     | Introduzem profundidade desnecessária.                  | Cores puras e sólidas (Flat).                       |
-| **Divisores Escuros**       | Chamam mais atenção que o próprio conteúdo.             | Use `#F3F4F6` para divisores internos.              |
+| **Divisores Escuros**       | Chamam mais atenção que o próprio conteúdo.             | Use `gray.1` para divisores internos.               |
+| **CSS Inline**              | Quebra a centralização do design system.                | Tudo via Props do Mantine ou `theme.components`.    |
+| **Tags HTML nativas**       | `div`, `button`, `input` fora do Mantine.               | Use `Box`, `Button`, `TextInput` do Mantine.        |
+
+## Anti-Patterns do Zen Stage
+
+| Erro                                     | Por que é ruim?                                 | A Solução Zen                                    |
+| :--------------------------------------- | :---------------------------------------------- | :----------------------------------------------- |
+| **Títulos com peso ≤ 700**               | Falta impacto teatral. Parece genérico.         | Use fw 900 com ls -0.04em.                       |
+| **Inputs com bordas completas no Stage** | Decoração excessiva. Compete com o conteúdo.    | Variant `unstyled` com apenas `border-bottom`.   |
+| **Métricas em tamanho normal (14-20px)** | Desperdiça a oportunidade de declaração visual. | Big Type: 64px+ para dados principais.           |
+| **Container sem padding vertical**       | Quebra o conceito de "Palco". Conteúdo colado.  | `py={80}` no Container principal.                |
+| **Labels sem Small Caps**                | Perde a hierarquia sutil que distingue o Zen.   | Uppercase, fw 800, fz 10-12px, lts 1.5px.        |
+| **Muitos elementos competindo**          | O palco fica poluído. A "performance" se perde. | Reduza. O Zen é sobre o que você decide NÃO pôr. |
 
-## Exemplo de Refatoração (Cérebro do Agente)
+## Exemplo de Refatoração
 
 **❌ Antes (Design Comum):**
 
-```html
-<div style="box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 20px; padding: 20px; background: blue;">
-    <h1 style="color: white; font-weight: 800;">User Info</h1>
-    <button style="border-radius: 50px; padding: 10px 20px;">Click Me</button>
+```jsx
+<div style={{ boxShadow: '0 4px 6px rgba(0,0,0,0.1)', borderRadius: 20, padding: 20 }}>
+    <h1 style={{ fontSize: 24, fontWeight: 600 }}>Revenue</h1>
+    <p style={{ fontSize: 18 }}>$42,500</p>
+    <input style={{ border: '1px solid #ccc', borderRadius: 8, padding: 12 }} />
 </div>
 ```
 
-**✅ Depois (RiLiGar Excellence):**
+**✅ Depois (Zen Excellence):**
 
-```html
-<div style="border: 1px solid #E5E7EB; border-radius: 8px; padding: 16px; background: #FFF;">
-    <h3 style="color: #11181C; font-weight: 600; font-size: 14px; margin-bottom: 8px;">User Info</h3>
-    <button style="border-radius: 6px; height: 32px; padding: 0 12px; background: #000; color: #FFF; font-size: 12px;">Action</button>
-</div>
+```jsx
+<Container
+    size="xl"
+    py={80}
+>
+    <Stack gap={4}>
+        <Text
+            fz={11}
+            fw={800}
+            c="gray.4"
+            tt="uppercase"
+            lts="1.5px"
+        >
+            Revenue
+        </Text>
+        <Title
+            order={2}
+            fz={80}
+            fw={900}
+            lh={1}
+            lts="-0.04em"
+        >
+            $42,500
+        </Title>
+    </Stack>
+
+    <TextInput
+        variant="unstyled"
+        placeholder="Search..."
+        styles={{
+            input: {
+                borderBottom: '1px solid var(--mantine-color-gray-2)',
+                borderRadius: 0,
+                paddingBottom: 8,
+            },
+        }}
+    />
+</Container>
 ```
 
 ---
 
-_Lembre-se: O design RiLiGar é sobre **restrição**. Se você pode remover uma borda ou uma cor e o app ainda funciona, remova._
+_Lembre-se: O design Zen é sobre **restrição**. Se você pode remover um elemento e a interface ainda funciona, remova._