Fundamentos globales
Aquí viven reset, variables base, breakpoints, tipografía y helpers de texto. Es la capa que define el lenguaje inicial del framework.
Architecture
La arquitectura del framework organiza fundamentos, layout, ritmo, utilidades, animación y reglas del sistema en una estructura clara y escalable.
Qué define esta arquitectura
La arquitectura del framework existe para separar responsabilidades de forma clara. No todos los estilos pertenecen al mismo nivel: unos definen fundamentos, otros resuelven estructura, otros controlan ritmo y otros actúan como utilidades.
Esta separación permite mantener el sistema consistente, más fácil de documentar y más seguro de escalar sin mezclar lógica estructural con ajustes visuales o estilos específicos de un proyecto.
Capas del sistema
Estructura
Reúne containers, grid y proporciones para construir la arquitectura visual horizontal de páginas y secciones.
Ritmo
Define el espacio macro entre secciones y el flujo vertical interno entre bloques.
Utilidades
Reúne spacing, align, width, height, radius, visibility y lists para resolver ajustes estructurales concretos.
Movimiento
Define un sistema mínimo y controlado de animación con enfoque accesible.
Proyecto
La última capa del sistema. Aquí viven los estilos específicos del sitio, sin contaminar el núcleo del framework.
Cómo se relacionan las capas
- Base define el lenguaje inicial del sistema.
- Layout organiza estructura horizontal y jerarquía espacial.
- Rhythm regula separación macro e interna.
- Helpers ajustan comportamiento puntual sin romper la lógica general.
- Animations agrega movimiento de forma controlada y reusable.
- Overrides adapta el framework a un proyecto concreto sin alterar el núcleo.
Por qué esta estructura importa
Escalabilidad
Permite agregar nuevos módulos y helpers sin desordenar el sistema ni duplicar lógica.
Mantenibilidad
Hace más fácil identificar dónde debe vivir cada regla, helper o ajuste estructural.
Consistencia
Mantiene una relación estable entre tipografía, layout, ritmo y utilidades.
Documentación clara
Facilita explicar el sistema página por página sin mezclar conceptos ni responsabilidades.
Páginas que representan el framework
Index
Portada del framework y acceso general al sistema.
Docs
Índice maestro con el recorrido completo de la documentación.
Architecture
Visión estructural del sistema y su organización general.
Framework Core
Orden de capas, imports y lógica del archivo principal.
File Responsibilities
Qué le corresponde a cada archivo y qué no debe contener.
Base, Layout, Helpers, Motion
Las páginas modulares explican cada responsabilidad por separado.
Siguiente paso
Continúa con framework core para ver el orden de importación y las capas reales del sistema.