@xetwa/design-system 1.0.2

package/src/Colors.mdx

@@ -0,0 +1,393 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Brand Guidelines/Cores" />
+
+# Paleta de Cores
+
+Toda a paleta de cores do **Xetlingo** está definida em tokens de CSS custom properties e mapeada no tema TypeScript para o aplicativo. 
+
+> [!IMPORTANT]
+> **Regra de Uso:** Nunca usar valores hexadecimais soltos no código do aplicativo ou nos componentes do design system. Utilize sempre as variáveis CSS ou o objeto do `theme` em TypeScript.
+
+---
+
+{/* Paleta Primária */}
+<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',
+  }}>Paleta primária</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: '80px' }}>Swatch</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Uso</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' }}>--color-primary</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#f2974b</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#f2974b', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          CTAs, botão primário, destaque, progresso
+        </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' }}>--color-primary-dark</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#cf7a30</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#cf7a30', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Sombra do botão primário, ícone selecionado, hover
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#cf7a30', backgroundColor: '#fef6ee', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-primary-light</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#fef6ee</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#fef6ee', border: '1px solid var(--border-color)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Fundo de item selecionado, chip ativo
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{/* Escala de Castanho (Neutros) */}
+<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',
+  }}>Escala de castanho (neutros)</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: '80px' }}>Swatch</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Uso</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-brown-900</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#15100d</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#15100d', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Cor máxima de contraste, textos ou superfícies em modo escuro
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-brown-800</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#51332d</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#51332d', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Texto principal, cabeçalhos e botões na variante invertida
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-brown-700</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#3f2620</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#3f2620', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Bordas internas e sombras profundas
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-brown-600</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#6e5a4f</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#6e5a4f', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Texto de apoio escuro, iconografia
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-brown-500</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#9a8478</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#9a8478', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Texto secundário, labels, placeholders
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-brown-400</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#b9a392</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#b9a392', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Ícones desativados, texto terciário
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-brown-300</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#c3b1a4</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#c3b1a4', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Ícones de navegação não selecionada
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-brown-100</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#efe2d6</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#efe2d6', border: '1px solid var(--border-color)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Bordas, separadores e sombra do botão secundário
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-brown-50</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#fdf3ea</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#fdf3ea', border: '1px solid var(--border-color)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Fundo de cards, chips neutros, áreas de destaque leve
+        </td>
+      </tr>
+      <tr style={{ borderBottom: '1px solid var(--border-color)' }}>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-cream</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#fbf6f0</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#fbf6f0', border: '1px solid var(--border-color)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Fundo de ecrãs secundários
+        </td>
+      </tr>
+      <tr>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: '#51332d', backgroundColor: '#efe2d6', padding: '4px 8px', borderRadius: '6px', fontWeight: '600' }}>--color-canvas</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#e7e5df</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#e7e5df', border: '1px solid var(--border-color)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-secondary)', fontStyle: 'italic' }}>
+          Fundo do arquivo de design no Figma (não usado na app)
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+{/* Semânticas & Base */}
+<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',
+  }}>Semânticas & Base</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: '80px' }}>Swatch</th>
+        <th style={{ padding: '10px 16px', fontSize: '0.75rem', fontWeight: '700', color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Uso</th>
+      </tr>
+    </thead>
+    <tbody>
+      <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' }}>--color-success</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#16915a</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#16915a', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Sucesso, acertos, módulos concluídos
+        </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' }}>--color-error</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#cf5b48</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#cf5b48', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Erro, campo inválido
+        </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' }}>--color-info</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#2a6fc2</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#2a6fc2', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Informação, link
+        </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' }}>--color-black</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#000000</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#000000', border: '1px solid rgba(0, 0, 0, 0.1)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Preto Xetwa
+        </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' }}>--color-white</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <code style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>#ffffff</code>
+        </td>
+        <td style={{ padding: '12px 16px' }}>
+          <div style={{ width: '36px', height: '20px', borderRadius: '4px', backgroundColor: '#ffffff', border: '1px solid var(--border-color)' }} />
+        </td>
+        <td style={{ padding: '12px 16px', fontSize: '0.9rem', color: 'var(--text-primary)' }}>
+          Fundo principal de ecrãs, cards
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>