Cosmovisión aplicada al diseño
La cosmovisión 01234 fusiona lógica, arte y tecnología para tejer experiencias digitales coherentes; cada elemento encaja en una geometría fractal que guía la lectura y potencia la intención de diseño.
sistema de diseño atómico
Filosofía de diseño que prioriza la consonancia sistémica, las proporciones áureas y la estructura nuclear.
Consonancia Sistémica
Armonía matemática perfecta entre tipografía, espaciado y layout. Cada elemento resuena con el conjunto total.
Principio: Como una sinfonía, todos los elementos deben vibrar en la misma frecuencia.
Estructura Nuclear
Centro atómico inmutable desde el cual se propaga todo. Una sola fuente de verdad para cada concepto.
Principio: Todo emana del núcleo, nada se duplica.
Paleta Sagrada
Solo 5 colores puros + 5 grises exactos. NUNCA inventar colores fuera de esta paleta inmutable.
Principio: La paleta es la biblia visual. Si no está aquí, no existe.
Espaciado Matemáticamente Perfecto
Fibonacci y proporciones áureas en tipografía y espaciado. Sistema Utopia como núcleo fluido.
Principio: Cada píxel debe estar justificado matemáticamente.
Fibonacci Tipográfico
Escalas Utopia con progresiones naturales. Clamp() fluido garantiza proporciones áureas perfectas.
Principio: La naturaleza ya resolvió las proporciones. Solo hay que aplicarlas.
Respiración Horizontal
Grids JAMÁS pegados a bordes. Margin universal en regla base, no media queries específicos.
Principio: El contenido necesita aire para existir dignamente.
Baseline Grid 24px
Ritmo vertical sagrado line-height 1.5. Todo alineado a múltiplos del baseline para respiración perfecta.
Principio: El ritmo vertical es la columna vertebral del diseño.
Monocromático Elegante
95% grises + 5% color-1. Sofisticación through constraint. Único acento naranja 01234 permitido.
Principio: La verdadera elegancia reside en la restricción inteligente.
Último Elemento Inteligente
Como último elemento del grid, automáticamente me expando a toda la fila disponible. El grid container controla este comportamiento con :last-child.
Principio: CSS Grid permite comportamientos inteligentes sin clases adicionales, solo desde el contenedor.
Elementos HTML Básicos
Estilos para elementos HTML comunes.
Lista no ordenada
- Primer elemento de la lista
- Segundo elemento de la lista
- Tercer elemento de la lista
Lista ordenada
- Primer elemento ordenado
- Segundo elemento ordenado
- Tercer elemento ordenado
Párrafos y Enlaces
Este es un párrafo de ejemplo con un enlace de texto. Los enlaces deben ser claros y distinguibles.
Texto en negrita y texto en cursiva para énfasis.
Citas
La tipografía es la arquitectura del contenido. Un buen sistema tipográfico permite que la información fluya naturalmente, respetando las proporciones matemáticas que hacen que la lectura sea cómoda y efectiva.
Tipografía
Título H1
Título H2
Título H3
Título H4
Título H5
Título H6
Paleta de Colores
Paleta de colores definida en el sistema de diseño. Colores puros y escala monocromática para máxima coherencia visual.
Colores Puros
Escala Monocromática
Colores Semánticos
Sistema de Grid
Grid CSS responsive con proporción áurea φ = 1.618rem para consonancia matemática perfecta.
Grid Container (Magenta)
Header Element (Negro) - Ocupa 2 columnas automáticamente
Grid Item 1
Elemento estándar (Cyan) - Se adapta automáticamente
Grid Item 2
Auto-fit minmax(250px, 1fr) - Responsive inteligente
Grid Item 3
Gap φ = 1.618rem - Consonancia matemática
Grid Item 4
Mobile → Tablet → Desktop - Breakpoints fluidos
Componentes
Elementos reutilizables que heredan del sistema base. Construcción modular sin duplicación de código.
Botones
Formulario
Feature Cards
Secciones de características y ventajas.
Característica 1
Descripción de la característica uno.
Característica 2
Descripción de la característica dos.
Característica 3
Descripción de la característica tres.
Título de Tarjeta
Breve descripción del contenido de la tarjeta.
Simple Tarjeta
Contenido relevante para la segunda tarjeta.
Color Card
Tarjeta con fondo de color puro y alto contraste visual.
Circular
Diseño circular centrado y equilibrado.
Clickable Card
Toda la tarjeta es interactiva con efectos visuales al hover.
Two Columns
Layout de dos columnas con imagen a la izquierda y contenido a la derecha. Se adapta responsivamente apilándose en móvil para mantener la legibilidad perfecta.
El grid CSS permite un control preciso del layout manteniendo las proporciones áureas del sistema de diseño.
Two Columns Reverse
Variación inversa con contenido a la izquierda e imagen a la derecha. Perfecta para crear ritmo visual alternado en layouts complejos.
Esta alternancia crea una lectura en zigzag que mejora la experiencia del usuario y añade dinamismo visual al conjunto.
