Sistema de Diseño
Las preferencias de UI del proyecto, aplicadas mientras se construye, no después. Escribir UI sin consultar reference.md rompe la regla de tratamiento plano antes de que se ejecute cualquier paso; las reglas son el contexto en reference.md, cargado primero.
Pasos
- Leer las reglas, luego la UI existente. Tomar las reglas de estilo en reference.md, luego encontrar lo que el código base ya usa — su fuente, paleta, paquete de iconos y redondeo ya elegido. Hecho cuando: las reglas están nombradas en el plan de implementación; cada regla ya presente en el código base coincide, no se refresca.
- Espaciado antes que bordes. Separar los elementos con espacios en blanco; se añade un borde solo cuando se queda sin espacio para espaciar. Hecho cuando: cada límite entre elementos se representa solo mediante espacio; los bordes existen solo donde el plan nombra por qué el espaciado fue insuficiente.
- Color en tres bandas. Asignar neutro → 80%, secundario → 20%, acento → 10% por superficie antes de escribir estilos; un píldora o insignia es donde el acento ocupa su lugar. Hecho cuando: los controles y el texto se renderizan en solo uno o dos tonos neutros; el acento aparece en como máximo un lugar por vista.
- Verificar responsive y legible. Ejecutar la vista en un ancho móvil antes de declararla estilizada; el texto cercano al negro puro o al blanco puro se aleja de los extremos. Hecho cuando: el diseño móvil se mantiene sin desplazamiento horizontal; cada color de texto es un tono fuera del extremo.
- Adaptar los iconos. Detectar la librería de iconos del proyecto y reutilizar una unidad de ella en todos los lugares donde aparezca. Hecho cuando: se eligió un icono siguiendo el libro y no se introdujo ningún nuevo conjunto de iconos.
Referencia
- reference.md — las once reglas de estilo, la división de color y la regla de un conjunto completo de iconos. Apuntar el conocimiento aquí; este archivo nunca debe adaptarse.