---
name: quicklycss-color-system
description: "Aplica y audita el sistema de color de QuicklyCSS V2. Úsalo para colores semánticos, escalas tonales, fondos, texto, bordes, estados y revisión de contraste."
---

# Sistema de color QuicklyCSS V2

1. Lee `https://quicklycss.cl/docs/colors.md` y consulta los tokens y clases en `https://quicklycss.cl/quicklycss-api.json`.
2. Prioriza colores semánticos para acciones y estados: primary, secondary, success, warning, danger, info y muted.
3. Para escalas cromáticas usa solo tonos existentes entre 50 y 950 y confirma cada clase de fondo, texto o borde en el catálogo.
4. Mantén coherencia entre estado, contraste, borde, texto y foco.
5. No comuniques significado únicamente mediante color.

## Comprobación

- Evalúa contraste en texto normal, texto grande, controles y estados de foco.
- Verifica hover, active, disabled y focus-visible.
- Documenta cualquier color propio y evita presentarlo como token oficial.