@xetwa/design-system 1.0.2

package/src/MovimentoBreakpoints.mdx

@@ -0,0 +1,379 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Brand Guidelines/Movimento & Breakpoints" />
+
+# Movimento, Animação & Breakpoints
+
+Estas diretrizes regem como a interface do **Xetlingo** ganha vida através de transições e micro-animações (tom brincalhão, mas nunca distrator) e como ela se adapta a diferentes tamanhos de tela (breakpoints).
+
+---
+
+## 🎬 Movimento & Animação
+
+As micro-animações servem para dar feedback ao utilizador e guiar a sua atenção de forma orgânica e fluida, sem excessos decorativos.
+
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '1.5rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  marginBottom: '2.5rem',
+  marginTop: '1.5rem'
+}}>
+  <h3 style={{
+    fontFamily: 'var(--font-title)',
+    fontSize: '1.25rem',
+    fontWeight: '700',
+    color: 'var(--text-primary)',
+    marginTop: 0,
+    marginBottom: '1.25rem',
+  }}>Curvas e Durações de Transição</h3>
+  
+  <table style={{
+    width: '100%',
+    borderCollapse: 'collapse',
+    textAlign: 'left'
+  }}>
+    <thead>
+      <tr style={{
+        borderBottom: '2px solid var(--border-color)',
+      }}>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Token / Nome</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Valor</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Usado em</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--ease-bounce</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>cubic-bezier(.34,1.56,.64,1)</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Pop de botão ao acertar, entrada de modal, mascote pop
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--ease-smooth</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>cubic-bezier(.4,0,.2,1)</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Transições de ecrã, hover states
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--ease-out</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>cubic-bezier(0,0,.2,1)</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Slides de entrada de bottom sheet, cards
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--duration-fast</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>120ms</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Hover, press de botão, toggle
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--duration-base</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>200ms</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Transição de estado de input, chips
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--duration-medium</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>300ms</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Modal/sheet enter/exit, progress fill
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-primary)', backgroundColor: 'var(--bg-app)', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--duration-slow</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>500ms</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Transição de ecrã, celebração de conclusão
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+### Demonstrador Interativo de Animações (Keyframes)
+
+Veja abaixo as animações e loops oficiais do design system renderizados em tempo real:
+
+<div style={{
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+  gap: '1.5rem',
+  marginBottom: '2.5rem',
+  marginTop: '1.5rem'
+}}>
+  {/* Bobbing Mascot */}
+  <div style={{
+    backgroundColor: 'var(--bg-surface)',
+    border: '1px solid var(--border-color)',
+    borderRadius: '12px',
+    padding: '1.5rem',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '180px',
+  }}>
+    <div className="animate-bob" style={{
+      width: '50px',
+      height: '50px',
+      backgroundColor: '#f2974b',
+      borderRadius: '12px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontWeight: 'bold',
+      color: '#ffffff',
+      fontSize: '0.85rem',
+      boxShadow: 'var(--shadow-sm)',
+    }}>Vava</div>
+    <div className="animate-contact-shadow" style={{
+      width: '36px',
+      height: '6px',
+      backgroundColor: '#51332d',
+      borderRadius: '50%',
+      marginTop: '20px',
+      filter: 'blur(2px)',
+    }} />
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', marginTop: '16px' }}>xtBob (Mascote Vava)</span>
+  </div>
+
+  {/* Popping Tooltip */}
+  <div style={{
+    backgroundColor: 'var(--bg-surface)',
+    border: '1px solid var(--border-color)',
+    borderRadius: '12px',
+    padding: '1.5rem',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '180px',
+  }}>
+    <div className="animate-pop" style={{
+      backgroundColor: 'var(--bg-app)',
+      border: '1px solid var(--border-color)',
+      padding: '8px 12px',
+      borderRadius: '8px',
+      fontSize: '0.75rem',
+      fontWeight: '700',
+      color: 'var(--text-primary)',
+      boxShadow: 'var(--shadow-xs)',
+      position: 'relative',
+    }}>
+      Tooltip Ativo
+      <div style={{
+        position: 'absolute',
+        bottom: '-6px',
+        left: '50%',
+        marginLeft: '-6px',
+        width: '0',
+        height: '0',
+        borderLeft: '6px solid transparent',
+        borderRight: '6px solid transparent',
+        borderTop: '6px solid var(--border-color)',
+      }} />
+    </div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', marginTop: '36px' }}>xtPop (Tooltip do nó)</span>
+  </div>
+
+  {/* Streak Flame */}
+  <div style={{
+    backgroundColor: 'var(--bg-surface)',
+    border: '1px solid var(--border-color)',
+    borderRadius: '12px',
+    padding: '1.5rem',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '180px',
+  }}>
+    <div className="animate-flame" style={{
+      fontSize: '2rem',
+    }}>🔥</div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', marginTop: '24px' }}>xtFlame (Ícone Streak)</span>
+  </div>
+
+  {/* Pulsing Map Ring */}
+  <div style={{
+    backgroundColor: 'var(--bg-surface)',
+    border: '1px solid var(--border-color)',
+    borderRadius: '12px',
+    padding: '1.5rem',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '180px',
+  }}>
+    <div style={{ position: 'relative', width: '20px', height: '20px' }}>
+      <div className="animate-ring" style={{
+        position: 'absolute',
+        width: '20px',
+        height: '20px',
+        borderRadius: '50%',
+      }} />
+      <div style={{
+        position: 'absolute',
+        width: '20px',
+        height: '20px',
+        borderRadius: '50%',
+        backgroundColor: '#f2974b',
+        boxShadow: 'var(--shadow-xs)',
+      }} />
+    </div>
+    <span style={{ fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', marginTop: '36px' }}>xtRing (Pulse do nó)</span>
+  </div>
+</div>
+
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '1.5rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  marginBottom: '2.5rem'
+}}>
+  <h4 style={{
+    fontFamily: 'var(--font-title)',
+    fontSize: '1rem',
+    fontWeight: '700',
+    color: 'var(--text-primary)',
+    marginTop: 0,
+    marginBottom: '1rem',
+  }}>Regras Gerais de Animação</h4>
+  
+  <ol style={{ fontSize: '0.9rem', color: 'var(--text-primary)', paddingLeft: '1.2rem', lineHeight: '1.6' }}>
+    <li><strong>Preferir opacity + transform</strong> a layout shifts. Evite animar width/height diretamente para não forçar reflows de layout.</li>
+    <li><strong>Respeitar prefers-reduced-motion</strong>. Todas as animações web devem ser envolvidas em media queries condicionais (no-preference) para respeitar acessibilidade.</li>
+    <li><strong>Mascotes em loop suave</strong>. A flutuação da mascote e os pulsares de nós correm infinitamente de forma relaxante. Feedbacks de acerto/erro usam bursts rápidos (300-500ms) e param.</li>
+    <li><strong>Sombra de contacto inversa</strong>. A sombra da mascote deve contrair-se e reduzir a sua opacidade à medida que a mascote sobe no loop (e expandir-se/escurecer ao descer).</li>
+  </ol>
+</div>
+
+---
+
+## 📏 Breakpoints (Responsividade)
+
+Adotamos a abordagem **Mobile-first**. Todos os estilos base e paddings são desenhados inicialmente para telas `xs` (375px) e escalados para cima utilizando media queries.
+
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '1.5rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  marginBottom: '2.5rem'
+}}>
+  <h3 style={{
+    fontFamily: 'var(--font-title)',
+    fontSize: '1.25rem',
+    fontWeight: '700',
+    color: 'var(--text-primary)',
+    marginTop: 0,
+    marginBottom: '1.25rem',
+  }}>Tabela de Breakpoints</h3>
+  
+  <table style={{
+    width: '100%',
+    borderCollapse: 'collapse',
+    textAlign: 'left'
+  }}>
+    <thead>
+      <tr style={{
+        borderBottom: '2px solid var(--border-color)',
+      }}>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em', width: '80px' }}>Nome</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Min-Width</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Contexto</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Grelha / Layout</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>xs</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>0px (base)</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Telemóvel pequeno (iPhone SE, Android compact)</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>4 colunas · Gutter 16px</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>sm</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>375px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Telemóvel padrão (iPhone 14, Pixel 7)</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>4 colunas · Gutter 20px</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>md</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>430px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Telemóvel grande (iPhone 14 Plus, Pro Max)</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>4 colunas · Gutter 22px</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>lg</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>768px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Tablet (iPad portrait, Surface)</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>8 colunas · Gutter 24px · Margem 32px</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>xl</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1024px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Desktop pequeno / laptop</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12 colunas · Gutter 24px · Margem 48px</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>2xl</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1280px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Desktop padrão</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12 colunas · Gutter 28px · Margem 64px · Max-width 1200px</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>3xl</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>1440px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>Desktop largo</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12 colunas · Conteúdo max-width 1200px centrado</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/src/Spacing.mdx

@@ -0,0 +1,231 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Brand Guidelines/Espaçamento" />
+
+# Espaçamento
+
+O nosso sistema de espaçamento é construído sobre uma **base de 4px**. Todos os paddings, margens e gaps entre elementos devem ser múltiplos desta base para manter o ritmo vertical e consistência visual.
+
+---
+
+{/* Escala de Espaçamento */}
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '1.5rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  marginBottom: '2.5rem',
+  marginTop: '1.5rem'
+}}>
+  <h3 style={{
+    fontFamily: 'var(--font-title)',
+    fontSize: '1.25rem',
+    fontWeight: '700',
+    color: 'var(--text-primary)',
+    marginTop: 0,
+    marginBottom: '1.25rem',
+  }}>Escala de Espaçamento</h3>
+  
+  <table style={{
+    width: '100%',
+    borderCollapse: 'collapse',
+    textAlign: 'left'
+  }}>
+    <thead>
+      <tr style={{
+        borderBottom: '2px solid var(--border-color)',
+      }}>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Token</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Valor</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em', width: '120px' }}>Visual</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Uso Típico</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-1</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>4px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '4px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Micro-gaps, ícone + label
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-2</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>8px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '8px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Gap interno de chips, botões pequenos
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-3</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '12px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Padding horizontal de tags, gap de ícone em botão
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-4</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>16px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '16px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Padding base de cards, margens de lista
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-5</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>20px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '20px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Padding interno de modal, gap entre secções de card
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-6</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>24px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '24px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Padding horizontal de ecrã (mobile), gap de stack
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-8</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>32px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '32px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Padding de bottom sheet, gap de secções
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-10</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>40px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '40px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Padding de bottom safe area, margens de página
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-12</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>48px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '48px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Padding horizontal desktop, gap de seções grandes
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--space-16</code>
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>64px</td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '64px', height: '16px', backgroundColor: '#f2974b', borderRadius: '2px' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Margens de página desktop, separadores de bloco
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+---
+
+## Regras de Aplicação
+
+Essas regras detalham o espaçamento padrão e comportamento de layout em diferentes contextos:
+
+<div style={{
+  backgroundColor: 'var(--bg-surface)',
+  border: '1px solid var(--border-color)',
+  borderRadius: '16px',
+  padding: '1.5rem',
+  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+  marginBottom: '2.5rem'
+}}>
+  <table style={{
+    width: '100%',
+    borderCollapse: 'collapse',
+    textAlign: 'left'
+  }}>
+    <thead>
+      <tr style={{
+        borderBottom: '2px solid var(--border-color)',
+      }}>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Contexto</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Mobile</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Desktop</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', fontWeight: '600', color: 'var(--text-primary)' }}>Padding lateral da página</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>16-22px (<code style={{ fontSize: '0.8rem' }}>--space-4</code> / <code style={{ fontSize: '0.8rem' }}>--space-6</code>)</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>48px (<code style={{ fontSize: '0.8rem' }}>--space-12</code>)</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', fontWeight: '600', color: 'var(--text-primary)' }}>Padding interno de card</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>14-16px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>20-24px</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', fontWeight: '600', color: 'var(--text-primary)' }}>Gap entre cards numa lista</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>16px</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', fontWeight: '600', color: 'var(--text-primary)' }}>Gap entre elementos de formulário</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>12px</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>16px</td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', fontWeight: '600', color: 'var(--text-primary)' }}>Padding do botão primário (lg)</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>15px v · 22px h</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>16px v · 32px h</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', fontWeight: '600', color: 'var(--text-primary)' }}>Height mínimo de touch target</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)', fontWeight: 'bold' }}>44px (Mínimo a11y)</td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>36px</td>
+      </tr>
+    </tbody>
+  </table>
+</div>