@damenor/agent-docs 0.1.1 → 0.4.0

package/templates/modules/agents/.agents/skills/doc-design/references/design-system-format.md

@@ -1,46 +1,46 @@
 ---
-created: "2024-01-15"
+created: '2024-01-15'
 status: active
 type: reference
-tags: [design-system, tokens, formato, yaml]
+tags: [design-system, tokens, format, yaml]
 ---
 
-# Design System Format — Referencia Completa
+# Design System Format — Complete Reference
 
-## Esquema YAML Completo
+## Complete YAML Schema
 
-### Sección: colors
+### Section: colors
 
 ```yaml
 colors:
   brand:
-    primary: "#3B82F6"       # Color principal de la marca
-    secondary: "#8B5CF6"     # Color secundario
-    accent: "#EC4899"        # Color de acento
+    primary: '#3B82F6' # Main brand color
+    secondary: '#8B5CF6' # Secondary color
+    accent: '#EC4899' # Accent color
   surface:
-    background: "#FFFFFF"    # Fondo principal
-    card: "#F9FAFB"          # Fondo de cards
-    elevated: "#FFFFFF"      # Fondo de elementos elevados
-    overlay: "rgba(0,0,0,0.5)" # Fondo de overlays
+    background: '#FFFFFF' # Main background
+    card: '#F9FAFB' # Card background
+    elevated: '#FFFFFF' # Elevated elements background
+    overlay: 'rgba(0,0,0,0.5)' # Overlay background
   text:
-    primary: "#111827"       # Texto principal
-    secondary: "#6B7280"     # Texto secundario
-    tertiary: "#9CA3AF"      # Texto terciario
-    disabled: "#D1D5DB"      # Texto deshabilitado
-    inverse: "#FFFFFF"       # Texto sobre fondo oscuro
+    primary: '#111827' # Texto principal
+    secondary: '#6B7280' # Texto secundario
+    tertiary: '#9CA3AF' # Texto terciario
+    disabled: '#D1D5DB' # Texto deshabilitado
+    inverse: '#FFFFFF' # Texto sobre fondo oscuro
   semantic:
-    success: "#10B981"       # Éxito
-    success-light: "#D1FAE5" # Éxito (fondo)
-    warning: "#F59E0B"       # Advertencia
-    warning-light: "#FEF3C7" # Advertencia (fondo)
-    error: "#EF4444"         # Error
-    error-light: "#FEE2E2"   # Error (fondo)
-    info: "#3B82F6"          # Información
-    info-light: "#DBEAFE"    # Información (fondo)
+    success: '#10B981' # Éxito
+    success-light: '#D1FAE5' # Éxito (fondo)
+    warning: '#F59E0B' # Advertencia
+    warning-light: '#FEF3C7' # Advertencia (fondo)
+    error: '#EF4444' # Error
+    error-light: '#FEE2E2' # Error (fondo)
+    info: '#3B82F6' # Información
+    info-light: '#DBEAFE' # Información (fondo)
   dark:
-    background: "#1F2937"    # Fondo en modo oscuro
-    card: "#374151"          # Card en modo oscuro
-    text: "#F9FAFB"          # Texto en modo oscuro
+    background: '#1F2937' # Fondo en modo oscuro
+    card: '#374151' # Card en modo oscuro
+    text: '#F9FAFB' # Texto en modo oscuro
 ```
 
 #### Ejemplo mínimo de colores
@@ -48,181 +48,168 @@ colors:
 ```yaml
 colors:
   brand:
-    primary: "#3B82F6"
-    secondary: "#8B5CF6"
+    primary: '#3B82F6'
+    secondary: '#8B5CF6'
   surface:
-    background: "#FFFFFF"
-    card: "#F9FAFB"
+    background: '#FFFFFF'
+    card: '#F9FAFB'
   text:
-    primary: "#111827"
-    secondary: "#6B7280"
+    primary: '#111827'
+    secondary: '#6B7280'
   semantic:
-    success: "#10B981"
-    warning: "#F59E0B"
-    error: "#EF4444"
-    info: "#3B82F6"
+    success: '#10B981'
+    warning: '#F59E0B'
+    error: '#EF4444'
+    info: '#3B82F6'
 ```
 
 ---
 
-### Sección: typography
+### Section: typography
 
 ```yaml
 typography:
-  font-family:
-    sans: "Inter, system-ui, -apple-system, sans-serif"
-    mono: "JetBrains Mono, Fira Code, monospace"
-    display: "Cal Sans, Inter, sans-serif"
   heading-xl:
-    font-size: "2.5rem"
-    font-weight: "800"
-    line-height: "1.1"
-    letter-spacing: "-0.02em"
+    fontFamily: '"Inter", system-ui, sans-serif'
+    fontSize: '2rem' # 32px
+    fontWeight: '700'
+    lineHeight: '1.2'
   heading-lg:
-    font-size: "2rem"
-    font-weight: "700"
-    line-height: "1.2"
-    letter-spacing: "-0.01em"
-  heading-md:
-    font-size: "1.5rem"
-    font-weight: "600"
-    line-height: "1.3"
-  heading-sm:
-    font-size: "1.25rem"
-    font-weight: "600"
-    line-height: "1.4"
+    fontFamily: '"Inter", system-ui, sans-serif'
+    fontSize: '1.5rem' # 24px
+    fontWeight: '600'
+    lineHeight: '1.3'
   body-lg:
-    font-size: "1.125rem"
-    font-weight: "400"
-    line-height: "1.75"
+    fontFamily: '"Inter", system-ui, sans-serif'
+    fontSize: '1.125rem' # 18px
+    fontWeight: '400'
+    lineHeight: '1.6'
   body-md:
-    font-size: "1rem"
-    font-weight: "400"
-    line-height: "1.6"
+    fontFamily: '"Inter", system-ui, sans-serif'
+    fontSize: '1rem' # 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
   body-sm:
-    font-size: "0.875rem"
-    font-weight: "400"
-    line-height: "1.5"
+    fontFamily: '"Inter", system-ui, sans-serif'
+    fontSize: '0.875rem' # 14px
+    fontWeight: '400'
+    lineHeight: '1.5'
   caption:
-    font-size: "0.75rem"
-    font-weight: "500"
-    line-height: "1.4"
-    letter-spacing: "0.02em"
-    text-transform: "uppercase"
-  overline:
-    font-size: "0.625rem"
-    font-weight: "700"
-    line-height: "1.4"
-    letter-spacing: "0.08em"
-    text-transform: "uppercase"
+    fontFamily: '"Inter", system-ui, sans-serif'
+    fontSize: '0.75rem' # 12px
+    fontWeight: '400'
+    lineHeight: '1.4'
+  code:
+    fontFamily: '"JetBrains Mono", "Fira Code", monospace'
+    fontSize: '0.875rem' # 14px
+    fontWeight: '400'
+    lineHeight: '1.5'
 ```
 
-#### Ejemplo mínimo de tipografía
+#### Minimal typography example
 
 ```yaml
 typography:
-  font-family:
-    sans: "Inter, system-ui, sans-serif"
-    mono: "JetBrains Mono, monospace"
-  heading-xl: { font-size: "2rem", font-weight: "700", line-height: "1.2" }
-  heading-lg: { font-size: "1.5rem", font-weight: "600", line-height: "1.3" }
-  body-md: { font-size: "1rem", font-weight: "400", line-height: "1.6" }
-  body-sm: { font-size: "0.875rem", font-weight: "400", line-height: "1.5" }
-  caption: { font-size: "0.75rem", font-weight: "400", line-height: "1.4" }
+  heading-lg:
+    fontFamily: 'Inter, sans-serif'
+    fontSize: '1.5rem'
+    fontWeight: '600'
+  body-md:
+    fontFamily: 'Inter, sans-serif'
+    fontSize: '1rem'
+    fontWeight: '400'
 ```
 
----
-
-### Sección: spacing
+### Section: spacing
 
 ```yaml
 spacing:
-  scale: [0, "0.125rem", "0.25rem", "0.5rem", "0.75rem", "1rem", "1.5rem", "2rem", "3rem", "4rem", "6rem", "8rem"]
+  scale: [0, '0.125rem', '0.25rem', '0.5rem', '0.75rem', '1rem', '1.5rem', '2rem', '3rem', '4rem', '6rem', '8rem']
   tokens:
-    "0": "0"
-    "0.5": "0.125rem"
-    "1": "0.25rem"
-    "1.5": "0.375rem"
-    "2": "0.5rem"
-    "3": "0.75rem"
-    "4": "1rem"
-    "5": "1.25rem"
-    "6": "1.5rem"
-    "8": "2rem"
-    "10": "2.5rem"
-    "12": "3rem"
-    "16": "4rem"
-    "20": "5rem"
-    "24": "6rem"
-    "32": "8rem"
+    '0': '0'
+    '0.5': '0.125rem'
+    '1': '0.25rem'
+    '1.5': '0.375rem'
+    '2': '0.5rem'
+    '3': '0.75rem'
+    '4': '1rem'
+    '5': '1.25rem'
+    '6': '1.5rem'
+    '8': '2rem'
+    '10': '2.5rem'
+    '12': '3rem'
+    '16': '4rem'
+    '20': '5rem'
+    '24': '6rem'
+    '32': '8rem'
 ```
 
 #### Ejemplo mínimo de spacing
 
 ```yaml
 spacing:
-  tokens: { xs: "0.25rem", sm: "0.5rem", md: "1rem", lg: "1.5rem", xl: "2rem", "2xl": "3rem", "3xl": "4rem" }
+  tokens: { xs: '0.25rem', sm: '0.5rem', md: '1rem', lg: '1.5rem', xl: '2rem', '2xl': '3rem', '3xl': '4rem' }
 ```
 
 ---
 
-### Sección: rounded
+### Section: rounded
 
 ```yaml
 rounded:
-  scale: [0, "0.125rem", "0.25rem", "0.375rem", "0.5rem", "0.75rem", "1rem", "1.5rem", "2rem", "9999px"]
+  scale: [0, '0.125rem', '0.25rem', '0.375rem', '0.5rem', '0.75rem', '1rem', '1.5rem', '2rem', '9999px']
   tokens:
-    none: "0"
-    sm: "0.25rem"
-    md: "0.5rem"
-    lg: "0.75rem"
-    xl: "1rem"
-    "2xl": "1.5rem"
-    "3xl": "2rem"
-    full: "9999px"
+    none: '0'
+    sm: '0.25rem'
+    md: '0.5rem'
+    lg: '0.75rem'
+    xl: '1rem'
+    '2xl': '1.5rem'
+    '3xl': '2rem'
+    full: '9999px'
 ```
 
 ---
 
-### Sección: elevation
+### Section: elevation
 
 ```yaml
 elevation:
   tiers:
-    none: "none"
-    xs: "0 1px 2px rgba(0, 0, 0, 0.05)"
-    sm: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)"
-    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
-    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
-    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
-    "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
-    inner: "inset 0 2px 4px rgba(0, 0, 0, 0.06)"
+    none: 'none'
+    xs: '0 1px 2px rgba(0, 0, 0, 0.05)'
+    sm: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)'
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'
+    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+    inner: 'inset 0 2px 4px rgba(0, 0, 0, 0.06)'
 ```
 
 ---
 
-### Sección: components
+### Section: components
 
 #### Formato de componente
 
 ```yaml
 components:
   [component-name]:
-    description: "Descripción breve del componente"
+    description: 'Descripción breve del componente'
     variants: [variant1, variant2, variant3]
     sizes: [sm, md, lg]
     states: [default, hover, active, focus, disabled]
-    base: "Propiedades base del componente usando tokens"
+    base: 'Propiedades base del componente usando tokens'
     [variant-name]:
-      bg: "{colors.xxx}"
-      text: "{colors.xxx}"
-      border: "valor"
-      shadow: "{elevation.xxx}"
+      bg: '{colors.xxx}'
+      text: '{colors.xxx}'
+      border: 'valor'
+      shadow: '{elevation.xxx}'
     tokens:
-      radius: "{rounded.md}"
-      padding-sm: "{spacing.sm} {spacing.md}"
-      padding-md: "{spacing.md} {spacing.lg}"
-      padding-lg: "{spacing.lg} {spacing.xl}"
+      radius: '{rounded.md}'
+      padding-sm: '{spacing.sm} {spacing.md}'
+      padding-md: '{spacing.md} {spacing.lg}'
+      padding-lg: '{spacing.lg} {spacing.xl}'
 ```
 
 #### Ejemplo: Button
@@ -230,42 +217,42 @@ components:
 ```yaml
 components:
   button:
-    description: "Botón interactivo para acciones primarias y secundarias"
+    description: 'Botón interactivo para acciones primarias y secundarias'
     variants: [primary, secondary, outline, ghost, danger]
     sizes: [sm, md, lg]
     states: [default, hover, active, focus, disabled]
-    base: "font-weight: 600, border-radius: {rounded.md}, transition: all 150ms"
+    base: 'font-weight: 600, border-radius: {rounded.md}, transition: all 150ms'
     primary:
-      bg: "{colors.brand.primary}"
-      text: "#FFFFFF"
-      hover-bg: "#2563EB"
-      active-bg: "#1D4ED8"
+      bg: '{colors.brand.primary}'
+      text: '#FFFFFF'
+      hover-bg: '#2563EB'
+      active-bg: '#1D4ED8'
     secondary:
-      bg: "{colors.brand.secondary}"
-      text: "#FFFFFF"
-      hover-bg: "#7C3AED"
+      bg: '{colors.brand.secondary}'
+      text: '#FFFFFF'
+      hover-bg: '#7C3AED'
     outline:
-      bg: "transparent"
-      text: "{colors.brand.primary}"
-      border: "2px solid {colors.brand.primary}"
-      hover-bg: "{colors.brand.primary}"
-      hover-text: "#FFFFFF"
+      bg: 'transparent'
+      text: '{colors.brand.primary}'
+      border: '2px solid {colors.brand.primary}'
+      hover-bg: '{colors.brand.primary}'
+      hover-text: '#FFFFFF'
     ghost:
-      bg: "transparent"
-      text: "{colors.text.secondary}"
-      hover-bg: "{colors.surface.card}"
+      bg: 'transparent'
+      text: '{colors.text.secondary}'
+      hover-bg: '{colors.surface.card}'
     danger:
-      bg: "{colors.semantic.error}"
-      text: "#FFFFFF"
-      hover-bg: "#DC2626"
+      bg: '{colors.semantic.error}'
+      text: '#FFFFFF'
+      hover-bg: '#DC2626'
     tokens:
-      radius: "{rounded.md}"
-      padding-sm: "{spacing.2} {spacing.3}"
-      padding-md: "{spacing.2} {spacing.4}"
-      padding-lg: "{spacing.3} {spacing.6}"
-      font-sm: "{typography.body-sm}"
-      font-md: "{typography.body-md}"
-      font-lg: "{typography.body-lg}"
+      radius: '{rounded.md}'
+      padding-sm: '{spacing.2} {spacing.3}'
+      padding-md: '{spacing.2} {spacing.4}'
+      padding-lg: '{spacing.3} {spacing.6}'
+      font-sm: '{typography.body-sm}'
+      font-md: '{typography.body-md}'
+      font-lg: '{typography.body-lg}'
 ```
 
 #### Ejemplo: Card
@@ -273,26 +260,26 @@ components:
 ```yaml
 components:
   card:
-    description: "Contenedor de contenido con opciones de elevación"
+    description: 'Contenedor de contenido con opciones de elevación'
     variants: [default, outlined, elevated, interactive]
-    base: "border-radius: {rounded.lg}, padding: {spacing.6}, background: {colors.surface.card}"
+    base: 'border-radius: {rounded.lg}, padding: {spacing.6}, background: {colors.surface.card}'
     default:
-      border: "1px solid #E5E7EB"
-      shadow: "{elevation.none}"
+      border: '1px solid #E5E7EB'
+      shadow: '{elevation.none}'
     outlined:
-      border: "1px solid #D1D5DB"
-      shadow: "{elevation.none}"
+      border: '1px solid #D1D5DB'
+      shadow: '{elevation.none}'
     elevated:
-      border: "none"
-      shadow: "{elevation.md}"
+      border: 'none'
+      shadow: '{elevation.md}'
     interactive:
-      border: "1px solid #E5E7EB"
-      shadow: "{elevation.sm}"
-      hover-shadow: "{elevation.md}"
-      cursor: "pointer"
+      border: '1px solid #E5E7EB'
+      shadow: '{elevation.sm}'
+      hover-shadow: '{elevation.md}'
+      cursor: 'pointer'
     tokens:
-      radius: "{rounded.lg}"
-      padding: "{spacing.6}"
+      radius: '{rounded.lg}'
+      padding: '{spacing.6}'
 ```
 
 #### Ejemplo: Input
@@ -300,31 +287,31 @@ components:
 ```yaml
 components:
   input:
-    description: "Campo de entrada de texto"
+    description: 'Campo de entrada de texto'
     variants: [default, error, success, disabled]
     sizes: [sm, md, lg]
-    base: "border: 1px solid #D1D5DB, border-radius: {rounded.md}, background: #FFFFFF, transition: border-color 150ms"
+    base: 'border: 1px solid #D1D5DB, border-radius: {rounded.md}, background: #FFFFFF, transition: border-color 150ms'
     default:
-      border: "1px solid #D1D5DB"
-      focus-border: "{colors.brand.primary}"
-      focus-ring: "0 0 0 3px rgba(59,130,246,0.1)"
+      border: '1px solid #D1D5DB'
+      focus-border: '{colors.brand.primary}'
+      focus-ring: '0 0 0 3px rgba(59,130,246,0.1)'
     error:
-      border: "1px solid {colors.semantic.error}"
-      focus-ring: "0 0 0 3px rgba(239,68,68,0.1)"
+      border: '1px solid {colors.semantic.error}'
+      focus-ring: '0 0 0 3px rgba(239,68,68,0.1)'
     success:
-      border: "1px solid {colors.semantic.success}"
+      border: '1px solid {colors.semantic.success}'
     disabled:
-      bg: "#F3F4F6"
-      text: "{colors.text.disabled}"
-      cursor: "not-allowed"
+      bg: '#F3F4F6'
+      text: '{colors.text.disabled}'
+      cursor: 'not-allowed'
     tokens:
-      radius: "{rounded.md}"
-      padding-sm: "{spacing.1} {spacing.2}"
-      padding-md: "{spacing.2} {spacing.3}"
-      padding-lg: "{spacing.3} {spacing.4}"
-      font-sm: "{typography.body-sm}"
-      font-md: "{typography.body-md}"
-      font-lg: "{typography.body-lg}"
+      radius: '{rounded.md}'
+      padding-sm: '{spacing.1} {spacing.2}'
+      padding-md: '{spacing.2} {spacing.3}'
+      padding-lg: '{spacing.3} {spacing.4}'
+      font-sm: '{typography.body-sm}'
+      font-md: '{typography.body-md}'
+      font-lg: '{typography.body-lg}'
 ```
 
 #### Ejemplo: Navigation
@@ -332,72 +319,73 @@ components:
 ```yaml
 components:
   nav:
-    description: "Barra de navegación principal"
+    description: 'Barra de navegación principal'
     variants: [default, fixed, transparent]
-    base: "padding: {spacing.4} {spacing.6}, display: flex, align-items: center"
+    base: 'padding: {spacing.4} {spacing.6}, display: flex, align-items: center'
     default:
-      bg: "#FFFFFF"
-      border-bottom: "1px solid #E5E7EB"
-      shadow: "{elevation.none}"
+      bg: '#FFFFFF'
+      border-bottom: '1px solid #E5E7EB'
+      shadow: '{elevation.none}'
     fixed:
-      position: "fixed"
-      z-index: "50"
-      shadow: "{elevation.sm}"
+      position: 'fixed'
+      z-index: '50'
+      shadow: '{elevation.sm}'
     transparent:
-      bg: "transparent"
-      border: "none"
+      bg: 'transparent'
+      border: 'none'
     tokens:
-      height: "4rem"
-      padding: "{spacing.4} {spacing.6}"
-      logo-height: "2rem"
+      height: '4rem'
+      padding: '{spacing.4} {spacing.6}'
+      logo-height: '2rem'
 ```
 
 ---
 
-### Sección: responsive
+### Section: responsive
 
 ```yaml
 responsive:
   breakpoints:
-    xs: "475px"     # Mobile landscape
-    sm: "640px"     # Tablet portrait
-    md: "768px"     # Tablet landscape
-    lg: "1024px"    # Desktop
-    xl: "1280px"    # Desktop large
-    "2xl": "1536px" # Desktop extra large
+    xs: '475px' # Mobile landscape
+    sm: '640px' # Tablet portrait
+    md: '768px' # Tablet landscape
+    lg: '1024px' # Desktop
+    xl: '1280px' # Desktop large
+    '2xl': '1536px' # Desktop extra large
   containers:
-    sm: "640px"
-    md: "768px"
-    lg: "1024px"
-    xl: "1280px"
-  strategy: "mobile-first"
+    sm: '640px'
+    md: '768px'
+    lg: '1024px'
+    xl: '1280px'
+  strategy: 'mobile-first'
   media-queries:
-    mobile: "@media (max-width: 639px)"
-    tablet: "@media (min-width: 640px) and (max-width: 1023px)"
-    desktop: "@media (min-width: 1024px)"
+    mobile: '@media (max-width: 639px)'
+    tablet: '@media (min-width: 640px) and (max-width: 1023px)'
+    desktop: '@media (min-width: 1024px)'
 ```
 
 ---
 
-## Sincronización con Código
+## Synchronization with Code
 
 ### CSS Variables → DESIGN.md
 
 ```css
 :root {
-  --color-primary: #3B82F6;
+  --color-primary: #3b82f6;
   --spacing-md: 1rem;
 }
 ```
 
 → Mapear a:
+
 ```yaml
 colors:
   brand:
-    primary: "#3B82F6"
+    primary: '#3B82F6'
 spacing:
   tokens:
-    md: "1rem"
+    md: '1rem'
 ```
 
 ### Tailwind Config → DESIGN.md
@@ -410,10 +398,10 @@ module.exports = {
         primary: '#3B82F6',
       },
       spacing: {
-        '128': '32rem',
-      }
-    }
-  }
+        128: '32rem',
+      },
+    },
+  },
 }
 ```
 
@@ -424,13 +412,14 @@ module.exports = {
 ```yaml
 colors:
   brand:
-    primary: "#3B82F6"
+    primary: '#3B82F6'
 ```
 
 → Generar:
+
 ```css
 :root {
-  --color-brand-primary: #3B82F6;
+  --color-brand-primary: #3b82f6;
 }
 ```
 
@@ -439,10 +428,11 @@ colors:
 ```yaml
 colors:
   brand:
-    primary: "#3B82F6"
+    primary: '#3B82F6'
 ```
 
 → Generar:
+
 ```javascript
 module.exports = {
   theme: {
@@ -450,10 +440,10 @@ module.exports = {
       colors: {
         brand: {
           primary: '#3B82F6',
-        }
-      }
-    }
-  }
+        },
+      },
+    },
+  },
 }
 ```
 
@@ -461,7 +451,7 @@ module.exports = {
 
 ## Ejemplo Completo de DESIGN.md
 
-```yaml
+````yaml
 ---
 created: "2024-03-15"
 status: active
@@ -517,14 +507,14 @@ responsive:
   breakpoints: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px" }
 ---
 
-## Visión General
+## Overview
 
 Sistema de diseño basado en tokens con jerarquía de tres niveles:
 1. **Tokens base**: Valores crudos (colores hex, tamaños rem)
 2. **Tokens semánticos**: Valores con propósito (success, error)
 3. **Tokens de componente**: Valores por defecto de cada componente
 
-## Paleta de Colores
+## Color Palette
 
 La paleta se organiza en 4 categorías:
 - **Brand**: Identidad visual de la marca
@@ -532,7 +522,7 @@ La paleta se organiza en 4 categorías:
 - **Text**: Jerarquía de texto
 - **Semantic**: Estados y feedback
 
-## Uso de Tokens
+## Token Usage
 
 En CSS:
 ```css
@@ -541,10 +531,14 @@ En CSS:
   border-radius: var(--rounded-md);
   padding: var(--spacing-sm) var(--spacing-md);
 }
-```
+````
 
 En Tailwind:
+
 ```html
-<button class="bg-primary rounded-md px-4 py-2">
+<button class="bg-primary rounded-md px-4 py-2"></button>
+```
+
 ```
+
 ```