@riligar/agents-kit 1.20.0 → 1.21.0

package/.agent/skills/riligar-design-system/references/design-system.md

@@ -1,106 +1,170 @@
-# Diretrizes de Design & Sistema Visual
+# Diretrizes de Design & Sistema Visual Zen
 
-> Baseado na análise de UI Minimalista/SaaS Premium (Notion)
+> Baseado na filosofia Zen: Content over Chrome, The Stage, Hierarquia Massiva.
 
-## 1. Filosofia Visual: "Content-First"
+## 1. Filosofia Visual: Zen
 
-A interface deve recuar para deixar o conteúdo brilhar. A estética é utilitária, limpa e focada na densidade de informação sem sacrificar a legibilidade.
+A interface é **invisível**. Ela recua para deixar o conteúdo brilhar. A estética é utilitária, limpa e focada — cada pixel serve ao dado.
 
-- **Minimalismo:** Remover ornamentos desnecessários (sombras pesadas, gradientes complexos).
-- **Estrutura:** O design depende de alinhamento preciso e espaço em branco (whitespace), não de caixas coloridas.
+- **Content over Chrome:** Se um elemento não ajuda na leitura do dado, ele é removido.
+- **Estrutura:** O design depende de alinhamento preciso e espaço em branco, não de caixas coloridas.
+- **Restrição:** O Zen não é sobre o que você coloca, é sobre o que você decide não colocar.
 
-## 2. Tipografia
+---
 
-A tipografia é a principal ferramenta de estrutura da interface.
+## 2. Contextos: Stage vs Dense
+
+### 🎭 Zen Stage
+
+Para **landing pages, dashboards de métricas, onboarding, apresentações**.
+
+Números e títulos são declarações de impacto. Inputs são discretos. O layout respira.
+
+### 📊 Zen Dense
+
+Para **admin panels, tabelas CRUD, formulários, configurações**.
+
+Alta densidade de dados. Compactação. Eficiência na escaneabilidade.
+
+Ambos compartilham a mesma alma — monocromia, zero ornamentos, Content over Chrome. A diferença está no **ritmo** e na **escala**.
+
+---
+
+## 3. Tipografia
+
+A tipografia é a **arma principal** do Zen.
 **Família:** Montserrat (Geométrica e Moderna).
 
-| Função                 | Peso            | Cor                    | Tracking  |
-| :--------------------- | :-------------- | :--------------------- | :-------- |
-| **Corpo / Dados**      | Regular (400)   | `#11181C` (Primário)   | Normal    |
-| **Cabeçalhos Tabela**  | Medium (500)    | `#687076` (Secundário) | Normal    |
-| **Botões / Ações**     | Medium (500)    | Variável               | `-0.01em` |
-| **Títulos (H1, H2)**   | Semi-Bold (600) | `#11181C` (Primário)   | `-0.02em` |
-| **Labels / Metadados** | Regular (400)   | `#737373` (Terciário)  | Normal    |
+### Stage
+
+| Função                 | Peso | Tamanho  | Tracking  | Cor                  |
+| :--------------------- | :--- | :------- | :-------- | :------------------- |
+| **Títulos (H1/H2)**    | 900  | 48-72px  | `-0.04em` | Primária (`gray.9`)  |
+| **Labels**             | 800  | 10-12px  | `1.5px`   | `gray.4` (uppercase) |
+| **Big Type Metrics**   | 900  | 64-120px | `-0.04em` | Primária (`gray.9`)  |
+| **Sufixos de Métrica** | 700  | 28-36px  | Normal    | `dimmed`             |
 
-**Hierarquia de Cores de Texto:**
+### Dense
+
+| Função                 | Peso | Cor                    | Tracking  |
+| :--------------------- | :--- | :--------------------- | :-------- |
+| **Corpo / Dados**      | 400  | `#11181C` (Primário)   | Normal    |
+| **Cabeçalhos Tabela**  | 500  | `#687076` (Secundário) | Normal    |
+| **Botões / Ações**     | 500  | Variável               | `-0.01em` |
+| **Títulos (H3, H4)**   | 600  | `#11181C` (Primário)   | `-0.02em` |
+| **Labels / Metadados** | 400  | `#737373` (Terciário)  | Normal    |
+
+### Hierarquia de Cores de Texto
 
 1.  **Primária:** `#11181C` ou `#171717` (Quase preto, nunca `#000000`).
 2.  **Secundária:** `#687076` (Cinza neutro para suporte).
 3.  **Terciária:** `#B0B0B0` (Desabilitado ou placeholder).
 
-## 3. Paleta de Cores & Superfícies
+---
+
+## 4. Paleta de Cores & Superfícies
 
-Uso estrito de monocromia com cores semânticas apenas quando necessário.
+Uso estrito de monocromia. Cores semânticas apenas quando necessário para feedback.
 
-- **Fundos (Backgrounds):**
-  - _App Base:_ `#FFFFFF` (Branco Puro).
-  - _Sidebars / Headers:_ `#FAFAFA` ou `#F9FAFB` (Cinza ultra-sútil).
+- **Fundos:**
+    - _App Base:_ `#FFFFFF` (Branco Puro) ou `#F9FAFB` (`gray.0`).
+    - _Sidebars / Headers:_ `#FAFAFA` ou `#F9FAFB`.
 - **Bordas:**
-  - _Padrão:_ `#E5E7EB` ou `#E2E8F0` (Sutil, 1px).
-- **Acentos (Action Colors):**
-  - _Brand/Primary:_ `#000000` (Preto Sólido) ou Azul Índigo Profundo.
-  - _Feedback:_ Cores pastéis no fundo, texto saturado.
-    - _Erro:_ Bg `#FEF2F2` / Text `#991B1B`.
-    - _Sucesso:_ Bg `#F0FDF4` / Text `#166534`.
+    - _Padrão:_ `gray.2` (`#E5E7EB`). Sutil, 1px.
+- **Acentos:**
+    - _Brand/Primary:_ `#000000` (Preto Sólido).
+    - _Feedback:_ Cores pastéis no fundo, texto saturado.
+        - _Erro:_ Bg `#FEF2F2` / Text `#991B1B`.
+        - _Sucesso:_ Bg `#F0FDF4` / Text `#166534`.
 
-## 4. Componentes (UI Kit)
+---
+
+## 5. Componentes (UI Kit)
 
 ### Botões
 
 - **Altura:** `32px` (Small/Dense) ou `36px` (Regular).
-- **Border-Radius:** `6px` a `8px` (Suave, mas não "pill").
-- **Estilos:**
-  - _Primary:_ Fundo Preto, Texto Branco. Hover suave.
-  - _Secondary/Ghost:_ Fundo Transparente, Texto Cinza. Hover com bg `#F3F4F6`.
+- **Border-Radius:** `6px` (md). Suave, mas não "pill".
+- **Primary:** Fundo Preto, Texto Branco. Hover suave.
+- **Secondary/Ghost:** Fundo Transparente. Hover com bg `gray.1`.
+
+### Inputs — Dense
+
+- **Borda:** `1px solid gray.2`.
+- **Foco:** Borda escurecida (`dark.8`). Nunca glow neon forte.
+- **Altura:** 32px. Compacto.
+
+### Inputs — Stage (Zen)
+
+- **Variant:** `unstyled`.
+- **Estilo:** Apenas `border-bottom: 1px solid gray.2`.
+- **Radius:** 0.
+- **Foco:** Borda inferior escurecida.
 
 ### Tabelas & Listas
 
 - **Estilo:** "Clean Rows".
 - **Bordas:** Apenas linhas horizontais (`border-bottom`). Sem linhas verticais.
-- **Hover:** Linhas destacam com cinza pálido (`#F9FAFB`) ao passar o mouse.
-- **Padding:** Compacto (`py-2`, `px-4`) para alta densidade de dados.
+- **Hover:** Cinza pálido (`gray.0`) ao passar o mouse.
+- **Padding:** Compacto (`py="xs"`, `px="md"`) para alta densidade.
 
-### Inputs
+### Badges
 
-- **Borda:** `1px solid #E5E5E5`.
-- **Foco:** Ring duplo sutil (ex: `ring-2 ring-gray-200`) ou borda escurecida. Nunca glow neon forte.
+- **Variant:** `light` com cores cinzas para sutileza.
+- **Size:** `sm`. **Radius:** `sm`.
+- **Alternativa Zen:** `variant="dot"` para minimizar ornamento.
 
-## 5. Layout & Espaçamento
+### Drawers (Zen)
 
-- **Respiro:** Margens generosas ao redor do container principal, mas densidade alta dentro dos componentes de dados.
-- **Navegação:** Sidebar fixa para contexto global; Topbar simples para contexto local.
+- **Posição:** Right Drawer para funcionalidades complexas (históricos, configurações).
+- **Propósito:** Manter o centro da tela (o palco) vazio e limpo.
 
-## 6. Micro-interações
+---
 
-- **Animações:** Rápidas e invisíveis (150ms - 200ms ease-out).
-- **Sombras:** Usadas apenas para elevação (Modais, Dropdowns).
-  - _Drop Shadow:_ Suave e difusa (`0 4px 20px rgba(0,0,0,0.05)`).
+## 6. Layout & Espaçamento
+
+### Stage
 
-## 7. Diretrizes para Geração via LLM (Prompting Helper)
+- **Container:** `size="xl"` centralizado.
+- **Padding vertical:** `py={80}` — o palco precisa respirar.
+- **Header:** Label (Small Caps) + Título (fw 900). Gap 4px entre eles.
 
-> Use estas instruções para garantir que a IA gere resultados fiéis ao design system.
+### Dense
 
-### Keywords Essenciais (Contexto)
+- **Respiro:** Margens generosas ao redor do container, densidade alta dentro dos componentes.
+- **Navegação:** Sidebar fixa para contexto global, Topbar para contexto local.
 
-Sempre inclua estas palavras-chave no prompt de geração de UI:
-`"Linear-style interface"`, `"Notion-like aesthetic"`, `"High density data"`, `"Clean minimalist SaaS"`, `"Monochrome color palette with subtle borders"`, `"Inter/Montserrat typography"`, `"1px border separation"`.
+---
 
-### Regras de Ouro (Constraints)
+## 7. Micro-interações
 
-1.  **NUNCA** use sombras coloridas ou "glow" efeitos.
-2.  **NUNCA** use fundos saturados para containers (apenas branco ou cinza muito claro).
-3.  **EVITE** cartões (cards) com sombras pesadas para agrupar conteúdo. Use **linhas e bordas sutis** para separar seções.
-4.  **Botões:** Evite botões grandes e chamativos. O botão primário deve ser discreto (preto/branco), e os secundários devem ser quase invisíveis até o hover.
+- **Animações:** Rápidas e invisíveis (150ms - 200ms ease-out).
+- **Sombras:** Apenas para elevação (Modais, Dropdowns).
+    - _Drop Shadow:_ Suave e difusa (`0 4px 20px rgba(0,0,0,0.05)`).
 
-### Estrutura de Prompt Recomendada
+---
 
-Ao pedir código ou design para uma IA, use este formato:
+## 8. Diretrizes para Geração via LLM
 
-> "Crie uma interface [Tela/Componente] seguindo uma estética estritamente minimalista (estilo Notion). Use a fonte Montserrat. O layout deve ser denso, focado em dados, sem sobras desnecessárias. Use bordas de 1px (#E5E5E5) para separação em vez de cards flutuantes. Cores: Preto (#11181C) para texto principal, Cinza (#687076) para secundário. Fundo branco puro."
+### Master Prompt (Zen)
 
-### Tratamento de Casos Especiais
+> "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)."
+
+### Keywords Essenciais
+
+`"Zen-Modern interface"`, `"Content over Chrome"`, `"Big Type Metrics"`, `"High-impact minimalism"`, `"Stage layout"`, `"Monochrome color palette"`, `"Montserrat typography"`, `"1px border separation"`.
 
-- **Empty States:** Devem ser minimalistas. Um ícone de linha fina (stroke 1.5px) em cinza claro, um título em H3 e um botão de ação. Nada de ilustrações 3D coloridas.
-- **Modais:** Devem ter um backdrop com blur (`backdrop-blur-sm`) e fundo branco sólido. Sem cabeçalhos coloridos.
-- **Dashboards:** Devem privilegiar números grandes (Big Numbers) em monocromia, com rótulos pequenos abaixo. Gráficos devem ser limpos, sem grid lines pesadas.
+### Regras de Ouro
+
+1.  **NUNCA** use sombras coloridas ou efeitos "glow".
+2.  **NUNCA** use fundos saturados para containers.
+3.  **EVITE** cards com sombras pesadas. Use **bordas sutis** para separar.
+4.  **Botões:** Discretos. Primário preto/branco, secundários quase invisíveis até hover.
+5.  **Títulos Stage:** SEMPRE fw 900, ls -0.04em. Nunca abaixo de 800.
+6.  **Métricas:** Se é o dado principal, use Big Type (64px+).
+
+### Tratamento de Casos Especiais
 
+- **Empty States:** Ícone de linha fina (stroke 1.5px) cinza claro, título H3, botão de ação. Zero ilustrações 3D.
+- **Modais:** Backdrop com blur, fundo branco sólido. Sem cabeçalhos coloridos.
+- **Dashboards:** Big Numbers em monocromia com rótulos Small Caps. Gráficos limpos sem grid lines pesadas.

package/.agent/skills/riligar-design-system/references/master-patterns.md

@@ -1,8 +1,181 @@
 # Master Patterns: Mantine Clean Code
 
 O código deve ser limpo. A customização visual vive no **Tema**, não no componente.
+Padrões organizados por contexto: **Stage** (impacto) e **Dense** (admin).
 
-## 1. Sidebar (Clean)
+---
+
+## Zen Stage Patterns
+
+### 1. Zen Stage Layout (O Palco)
+
+```jsx
+import { Container, Stack, Text, Title } from '@mantine/core'
+
+/**
+ * Zen Stage Layout — O Palco Unificado.
+ * Header = "Anúncio" (Label leve + Título pesado).
+ * Children = "Performance" (centro limpo).
+ */
+function ZenLayout({ label, title, children }) {
+    return (
+        <Container
+            size="xl"
+            py={80}
+        >
+            <Stack gap="xl">
+                {/* O Anúncio: Label + Título */}
+                <Stack gap={4}>
+                    {/* Label em Small Caps — fw 800, uppercase, ls 1.5px */}
+                    <Text
+                        fz={11}
+                        fw={800}
+                        c="gray.4"
+                        tt="uppercase"
+                        lts="1.5px"
+                    >
+                        {label}
+                    </Text>
+                    {/* Título Massivo — fw 900, ls -0.04em */}
+                    <Title
+                        order={1}
+                        fz={56}
+                        fw={900}
+                        lts="-0.04em"
+                        lh={1}
+                    >
+                        {title}
+                    </Title>
+                </Stack>
+
+                {/* A Performance: Conteúdo limpo */}
+                {children}
+            </Stack>
+        </Container>
+    )
+}
+```
+
+### 2. Big Type Metric
+
+```jsx
+import { Stack, Text, Title } from '@mantine/core'
+
+/**
+ * Big Type Metric — Números como declarações de design.
+ * O valor é a estrela. O label é sutil.
+ */
+function BigMetric({ label, value, suffix }) {
+    return (
+        <Stack gap={0}>
+            {/* Label discreto */}
+            <Text
+                fz={10}
+                fw={800}
+                c="gray.4"
+                tt="uppercase"
+                lts="1.5px"
+            >
+                {label}
+            </Text>
+            {/* Valor massivo — 64-120px, fw 900, lh 1 */}
+            <Title
+                order={2}
+                fz={80}
+                fw={900}
+                lh={1}
+                lts="-0.04em"
+            >
+                {value}
+                {suffix && (
+                    <Text
+                        component="span"
+                        fz={32}
+                        fw={700}
+                        c="dimmed"
+                    >
+                        {suffix}
+                    </Text>
+                )}
+            </Title>
+        </Stack>
+    )
+}
+```
+
+### 3. Zen Input (Border-Bottom Only)
+
+```jsx
+import { TextInput } from '@mantine/core'
+
+/**
+ * Zen Input — Minimalismo absoluto.
+ * Apenas uma borda inferior. Sem decoração.
+ * Use no contexto Stage (landing pages, onboarding).
+ */
+function ZenInput(props) {
+    return (
+        <TextInput
+            variant="unstyled"
+            styles={{
+                input: {
+                    borderBottom: '1px solid var(--mantine-color-gray-2)',
+                    borderRadius: 0,
+                    paddingBottom: 8,
+                },
+            }}
+            {...props}
+        />
+    )
+}
+```
+
+### 4. Zen Page Header (O Anúncio)
+
+```jsx
+import { Stack, Text, Title, Group, Button } from '@mantine/core'
+
+/**
+ * Zen Page Header — O cabeçalho como anúncio.
+ * Usado no topo das views, dentro do ZenLayout.
+ */
+function ZenHeader({ label, title, action }) {
+    return (
+        <Group
+            justify="space-between"
+            align="flex-end"
+        >
+            <Stack gap={4}>
+                <Text
+                    fz={11}
+                    fw={800}
+                    c="gray.4"
+                    tt="uppercase"
+                    lts="1.5px"
+                >
+                    {label}
+                </Text>
+                <Title
+                    order={2}
+                    fz={48}
+                    fw={900}
+                    lts="-0.04em"
+                    lh={1}
+                >
+                    {title}
+                </Title>
+            </Stack>
+            {action}
+        </Group>
+    )
+}
+```
+
+---
+
+## Zen Dense Patterns
+
+### 5. Sidebar (Clean)
 
 ```jsx
 import { Stack, Box, Text, UnstyledButton, Group } from '@mantine/core'
@@ -10,9 +183,8 @@ import { IconHome, IconSettings } from '@tabler/icons-react'
 
 function Sidebar() {
     return (
-        // bg="gray.0" -> Layer 0 (Canvas) [Visual-Code Dictionary §2]
-        // bd="solid gray.2" -> Layer 1 Separation [Visual-Code Dictionary §2]
-        // p="sm" -> Layout Rhythm (Section) [Visual-Code Dictionary §1]
+        // bg="gray.0" -> Layer 0 (Canvas)
+        // bd="solid gray.2" -> Layer 1 Separation
         <Box
             w={260}
             h="100vh"
@@ -40,14 +212,13 @@ function NavItem({ icon: Icon, label, active }) {
         <UnstyledButton
             data-active={active || undefined}
             w="100%"
-            p="xs" // Component Rhythm (8px) [Visual-Code Dictionary §1]
-            // Radius md (6px) -> Defined in theme, enforced here for clarity
+            p="xs"
             style={{ borderRadius: 'var(--mantine-radius-md)' }}
             bg={active ? 'white' : 'transparent'}
             c={active ? 'text' : 'dimmed'}
         >
             <Group gap="xs">
-                {/* Excellence Nuance #1: Stroke 1.5 [Visual-Code Dictionary §4] */}
+                {/* stroke 1.5 — padrão Zen */}
                 <Icon
                     size={16}
                     stroke={1.5}
@@ -64,14 +235,12 @@ function NavItem({ icon: Icon, label, active }) {
 }
 ```
 
-## 2. Tabela (Zero Props)
+### 6. Tabela (Zero Props)
 
 ```jsx
 import { Table, Text, Badge } from '@mantine/core'
 
-// Note a ausência de props de estilo.
-// O <Table> já vem com spacing e borders configurados no tema.
-// [Visual-Code Dictionary §3: Table Row Anatomy]
+// O <Table> já vem com spacing e borders do tema.
 function DenseTable({ data }) {
     return (
         <Table>
@@ -98,7 +267,7 @@ function DenseTable({ data }) {
 }
 ```
 
-## 3. Cards (Clean)
+### 7. Cards (Clean)
 
 ```jsx
 import { Paper, Text, Group, Button, Stack, Box } from '@mantine/core'
@@ -106,7 +275,6 @@ import { Paper, Text, Group, Button, Stack, Box } from '@mantine/core'
 function ContentCard() {
     return (
         // <Paper> já vem com border e radius corretos do tema
-        // [Visual-Code Dictionary §2: Layer 1 Card]
         <Paper overflow="hidden">
             <Box
                 p="md"

package/.agent/skills/riligar-design-system/references/visual-references.md

@@ -1,71 +1,131 @@
-# Dicionário Visual (Visual-Code Dictionary)
+# Dicionário Visual Zen (Visual-Code Dictionary)
 
 Este documento traduz "Sensação Visual" em "Regras de Código". Use-o para eliminar a subjetividade.
 
-## 1. Ritmo & Espaçamento (Layout Rhythms)
+---
+
+## 1. Tipografia Zen (A Arma Principal)
+
+A tipografia é o instrumento primário de impacto. Dois registros:
+
+### Registro Stage (Impacto Teatral)
+
+| Função                  | Peso | Tamanho  | Tracking  | Extras                  |
+| :---------------------- | :--- | :------- | :-------- | :---------------------- |
+| **Títulos (H1/H2)**     | 900  | 48-72px  | `-0.04em` | lh 1                    |
+| **Labels / Subtítulos** | 800  | 10-12px  | `1.5px`   | uppercase, cor `gray.4` |
+| **Big Type Metrics**    | 900  | 64-120px | `-0.04em` | lh 1                    |
+| **Sufixos de Métrica**  | 700  | 28-36px  | Normal    | cor `dimmed`            |
+
+### Registro Dense (Admin/Dashboard)
+
+| Função                 | Peso            | Tamanho | Tracking  | Extras         |
+| :--------------------- | :-------------- | :------ | :-------- | :------------- |
+| **Corpo / Dados**      | Regular (400)   | 14px    | Normal    | cor primária   |
+| **Cabeçalhos Tabela**  | Medium (500)    | 12-13px | Normal    | cor secundária |
+| **Botões / Ações**     | Medium (500)    | 13px    | `-0.01em` | —              |
+| **Títulos (H3/H4)**    | Semi-Bold (600) | 16-20px | `-0.02em` | cor primária   |
+| **Labels / Metadados** | Regular (400)   | 12px    | Normal    | cor terciária  |
+
+---
+
+## 2. Ritmo & Espaçamento (Layout Rhythms)
 
 A densidade do RiLiGar é definida matematicamente. Não adivinhe, use estas medidas.
 
-| Nível         | Medida  | Token Mantine        | Onde Usar                                                           |
-| :------------ | :------ | :------------------- | :------------------------------------------------------------------ |
-| **Micro**     | `4px`   | `gap="xs"` (half)    | Espaço entre Ícone e Texto.                                         |
-| **Component** | `8px`   | `p="xs"`, `gap="xs"` | Padding interno de Botões, Inputs, Table Cells.                     |
-| **Flow**      | `12px`  | `gap={12}`           | Espaço entre elementos de um formulário ou lista vertical de cards. |
-| **Section**   | `16px`  | `p="md"`, `gap="md"` | Padding padrão de Cards, Modais e Sidebars.                         |
-| **Layout**    | `24px+` | `p="lg"`, `gap="lg"` | Margens da página, separação de grandes blocos.                     |
+### Zen Dense (Componentes Admin)
+
+| Nível         | Medida  | Token Mantine        | Onde Usar                                               |
+| :------------ | :------ | :------------------- | :------------------------------------------------------ |
+| **Micro**     | `4px`   | `gap="xs"` (half)    | Espaço entre Ícone e Texto.                             |
+| **Component** | `8px`   | `p="xs"`, `gap="xs"` | Padding interno de Botões, Inputs, Table Cells.         |
+| **Flow**      | `12px`  | `gap={12}`           | Espaço entre elementos de formulário ou lista de cards. |
+| **Section**   | `16px`  | `p="md"`, `gap="md"` | Padding padrão de Cards, Modais e Sidebars.             |
+| **Layout**    | `24px+` | `p="lg"`, `gap="lg"` | Margens da página, separação de grandes blocos.         |
 
-## 2. Regra das 3 Camadas (Depth Stacking)
+### Zen Stage (Palco)
 
-Para evitar o visual "chapado", use esta hierarquia estrita de cores e bordas.
+| Nível           | Medida | Token Mantine | Onde Usar                                        |
+| :-------------- | :----- | :------------ | :----------------------------------------------- |
+| **Label-Title** | `4px`  | `gap={4}`     | Entre Label (Small Caps) e Título pesado.        |
+| **Section**     | `xl`   | `gap="xl"`    | Entre header e conteúdo do palco.                |
+| **Stage**       | `80px` | `py={80}`     | Padding vertical do palco (Container principal). |
+| **Container**   | `xl`   | `size="xl"`   | Largura do palco central.                        |
+
+---
+
+## 3. Regra das 3 Camadas (Depth Stacking)
+
+Para evitar o visual "chapado", use esta hierarquia estrita.
 
 ### Layer 0: O Canvas (Fundo)
 
--   **Cor:** `bg="gray.0"` (`#F9FAFB` Light / Dark Auto-adapt).
--   **Uso:** O fundo de toda a aplicação. Nunca use branco puro (`#FFF`) no fundo da página.
+- **Cor:** `bg="gray.0"` (`#F9FAFB` Light / Dark Auto-adapt).
+- **Uso:** O fundo de toda a aplicação. Nunca use branco puro (`#FFF`) no fundo da página.
 
 ### Layer 1: O Conteúdo (Cards/Surface)
 
--   **Cor:** `bg="white"` (Light) / `bg="gray.9"` (Dark).
--   **Borda:** `bd="1px solid gray.2"` (Essencial para recorte).
--   **Sombra:** `shadow="none"` (A borda faz o trabalho de separação).
--   **Radius:** `radius="lg"` (8px).
+- **Cor:** `bg="white"` (Light) / `bg="gray.9"` (Dark).
+- **Borda:** `bd="1px solid gray.2"` (Essencial para recorte).
+- **Sombra:** `shadow="none"` (A borda faz o trabalho de separação).
+- **Radius:** `radius="lg"` (8px).
 
 ### Layer 2: O Feedback (Hover/Overlay)
 
--   **Hover:** `bg="gray.0"` (Interação sutil).
--   **Active:** `bg="gray.1"` (Seleção).
--   **Overlay:** `shadow="lg"` + `bd="gray.2"` (Apenas para Popovers e Modais).
+- **Hover:** `bg="gray.0"` (Interação sutil).
+- **Active:** `bg="gray.1"` (Seleção).
+- **Overlay:** `shadow="lg"` + `bd="gray.2"` (Apenas para Popovers e Modais).
+
+---
+
+## 4. Anatomia Atômica (Component Specifications)
+
+### Sidebar Item (Linear Style) — Dense
+
+- **Altura:** `32px` ou `28px` (Ultra-denso).
+- **Padding:** `px="xs"` (8px horizontal).
+- **Radius:** `radius="md"` (6px).
+- **Fonte:** `size="sm"` (13px), `fw={500}`.
+- **Cor:** Default `c="dimmed"`, Active `c="text"`, Hover `bg="gray.1"`.
+
+### Table Row (Notion Style) — Dense
 
-## 3. Anatomia Atômica (Component Specifications)
+- **Altura:** `36px` (Conteúdo + Padding).
+- **Borda:** `borderBottom: '1px solid gray.1'` (Nota: gray.1, mais sutil que a borda do card).
+- **Header:** `c="dimmed"`, `fw={600}`, `fz="xs"` (12px), `textTransform="uppercase"`.
+- **Cell:** `fz="sm"` (13px ou 14px).
 
-Se você for criar um destes componentes, ele **DEVE** seguir estas medidas exatas.
+### Page Header — Dense
 
-### Sidebar Item (Linear Style)
+- **Altura:** `48px` ou `56px`.
+- **Fundo:** `bg="gray.0"` (Transparente/Blur opcional).
+- **Borda:** `borderBottom: '1px solid gray.2'`.
+- **Conteúdo:** Título `h4` (`fw={600}`), Ações à direita.
 
--   **Altura:** `32px` ou `28px` (Ultra-denso).
--   **Padding:** `px="xs"` (8px horizontal).
--   **Radius:** `radius="md"` (6px).
--   **Fonte:** `size="sm"` (13px), `fw={500}`.
--   **Cor:** Default `c="dimmed"`, Active `c="text"`, Hover `bg="gray.1"`.
+### Zen Header — Stage
 
-### Table Row (Notion Style)
+- **Label:** fz 11px, fw 800, uppercase, lts "1.5px", c "gray.4".
+- **Título:** fz 48-72px, fw 900, lts "-0.04em", lh 1.
+- **Gap:** 4px entre label e título.
+- **Layout:** Group com ações alinhadas ao flex-end à direita.
 
--   **Altura:** `36px` (Conteúdo + Padding).
--   **Borda:** `borderBottom: '1px solid gray.1'` (Nota: gray.1, mais sutil que a borda do card).
--   **Header:** `c="dimmed"`, `fw={600}`, `fz="xs"` (12px), `textTransform="uppercase"`.
--   **Cell:** `fz="sm"` (13px ou 14px).
+### Zen Input — Stage
 
-### Page Header
+- **Variant:** `unstyled`.
+- **Estilo:** Apenas `border-bottom: 1px solid gray.2`.
+- **Radius:** 0.
+- **Padding:** `pb={8}`.
 
--   **Altura:** `48px` ou `56px`.
--   **Fundo:** `bg="gray.0"` (Transparente/Blur opcional).
--   **Borda:** `borderBottom: '1px solid gray.2'`.
--   **Conteúdo:** Título `h4` (`fw={600}`), Ações à direita.
+---
 
-## 4. Nuances de "Excellence"
+## 5. Nuances de "Excellence"
 
 1.  **Ícones:** Sempre use `stroke={1.5}`. Ícones mais grossos (2px) parecem "infantis" neste design system. Tamanho padrão `16px` ou `18px`.
-2.  **Tracking:**
-    -   Títulos (H1-H3): `letter-spacing: -0.02em` (Aperta o título, visual premium).
-    -   Botões/Labels: `letter-spacing: -0.005em` (Leve toque de densidade).
-3.  **Bordas:** Nunca use `#000` ou `#DDD`. Use sempre o token `gray.2` do tema, que é calibrado para ser visível mas não intrusivo.
+2.  **Tracking Stage:**
+    - Títulos: `letter-spacing: -0.04em` (Aperta o título, visual premium).
+    - Labels: `letter-spacing: 1.5px` (Small Caps com respiro).
+3.  **Tracking Dense:**
+    - Títulos (H3-H4): `letter-spacing: -0.02em`.
+    - Botões/Labels: `letter-spacing: -0.005em`.
+4.  **Bordas:** Nunca use `#000` ou `#DDD`. Use sempre o token `gray.2` do tema.
+5.  **Métricas:** Transforme números em Big Type. Se um número é o dado mais importante da tela, ele merece 64px+ de tamanho.