Design System en Astro: componentes rápidos y a11y

Un design system no necesita ser gigante para aportar valor. En Astro, priorizá semántica, accesibilidad y bajo JS para obtener velocidad y coherencia.

Tokens y theming

• Define escala de color con contraste AA por defecto.
• Tipografía fluida y espaciado en rem.
• Variables CSS para temas claro/oscuro.

Componentes base

• Botón: estados, tamaño objetivo táctil, aria-pressed para toggles.
• Input y Label: asociación por for/id, ayuda con aria-describedby.
• Alertas: roles status/alert según criticidad.

Patrones complejos

• Modal: focus trap, cierre con Escape, retorno de foco.
• Tabs/Accordion: navegación con flechas y roles ARIA.
• Menú: cierre al perder foco, click fuera y Escape.

Documentación y pruebas

• Storybook/DocsPage minimal con ejemplos.
• Tests de contraste y tab order en componentes críticos.
• Lint de a11y en CI.

Internos para profundizar

• Accesibilidad aplicada: Checklist a11y 2025.
• Persuasión y claridad: Landing pages que convierten.

Lecturas relacionadas

• Astro + React: hidratación a demanda (guía práctica)
• Core Web Vitals 2025: guía práctica y checklist
• Animaciones Nativas y Fluidas con Astro View Transitions