1. Fundamentos
Comienza con base, breakpoints, typography y text para entender los tokens, la escala y el comportamiento general del sistema.
Documentación
Esta documentación organiza el framework por responsabilidades claras: fundamentos, layout, ritmo, helpers, movimiento, patrones y reglas del sistema.
Cómo está organizada esta documentación
El framework está dividido en módulos independientes para mantener una lógica clara y escalable. Cada página documenta una responsabilidad específica del sistema, evitando mezclar estructura, tipografía, ritmo o utilidades dentro del mismo bloque conceptual.
El recorrido recomendado comienza por fundamentos y arquitectura, continúa con layout y helpers, y después avanza hacia patterns, lineamientos de uso y mantenimiento del sistema.
Mapa general del sistema
Recorrido recomendado
2. Estructura
Continúa con layout, containers, grid, proportions, sections y stack para comprender cómo se construye la composición general.
3. Utilidades
Después revisa spacing, align, width, height, radius, visibility, lists y animations para entender cómo el sistema resuelve ajustes finos.
4. Sistema vivo
Finaliza con framework core, file responsibilities, guidelines, naming conventions, changelog y patterns para comprender cómo mantener y extender el sistema.
Utilidades
Align
Dirección, alineación, wrap y gap.
Width
Anchos estructurales y lectura editorial.
Height
Alturas estructurales y viewport helpers.
Radius
Radios del sistema y bordes redondeados.
Visibility
Visibilidad responsive y atajos semánticos.
Lists
Listas inline, stack y editoriales.
Animations
Sistema de animación y reduced motion.
Sistema y metodología
Framework Core
Capas, imports y orden del sistema.
File Responsibilities
Qué resuelve cada archivo y qué no debe contener.
Guidelines
Reglas para mantener el sistema claro y consistente.
Naming Conventions
Lógica de nombres y escalabilidad del sistema.
Changelog
Historial y evolución documentada del framework.
Patterns
Patterns
Índice general de patrones aplicados del sistema.
Hero
Aperturas, mensaje principal y CTAs.
Navigation
Headers, menús y navegación principal.
Cards
Bloques modulares repetibles en grid.
Article
Pieza editorial con ritmo y ancho de lectura.
Buttons
Acciones, grupos de CTAs y jerarquía visual.
Dashboard
Paneles, bloques informativos y jerarquías modulares.
Siguiente paso
Comienza por arquitectura para entender la lógica completa del framework y su orden interno de construcción.