Design System Atómico
Sistema de diseño unificado para proyectos CEREBRO-DIGITAL.
Enfoque minimalista, tipografía como arquitectura y color con propósito.
Tipografía
Escalas, pesos y estilos de texto.
H1 - Título Principal
Texto extra grande.
H2 - Título de Sección
Texto grande.
H3 - Subtítulo
Texto base para párrafos.
H4 - Encabezado Menor
Texto pequeño.
H5 - Encabezado de Componente
Texto extra pequeño.
H6 - Etiqueta
Un párrafo de texto normal para demostrar el `line-height` y `letter-spacing` definidos en los design tokens. La legibilidad es clave.
Este párrafo tiene un `line-height` más relajado para mayor comodidad de lectura.
`Este texto usa la fuente monoespaciada.`
Alineación de Texto
Este texto está alineado a la izquierda.
Este texto está centrado.
Este texto está alineado a la derecha.
Este texto está justificado. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Elementos HTML Básicos
Estilos para elementos HTML comunes.
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.
Listas
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
Citas
La tipografía es la arquitectura del contenido.
Tablas
| Encabezado 1 | Encabezado 2 | Encabezado 3 |
|---|---|---|
| Dato 1 | Dato 2 | Dato 3 |
| Dato 4 | Dato 5 | Dato 6 |
Paleta de Colores
Colores definidos en los design tokens.
Colores de Acento
Colores de Texto
Colores de Superficie
Colores Grises
Sistema de Grid
Ejemplos de grid responsivo con Grid CSS.
Grid de 4 Columnas
Columna 1
Columna 2
Columna 3
Columna 4
Grid Responsivo (2 columnas en móvil, 3 en tablet, 4 en desktop)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Column Spanning
Columna 1 (span 4)
Columna 2 (span 8)
Columna 3 (span 6, md: span 3)
Columna 4 (span 6, md: span 9)
Layout Container
Contenedor principal con márgenes horizontales para el contenido.
Este es un ejemplo de contenido dentro del contenedor principal.
Observa cómo el contenido no toca los bordes de la ventana del navegador, gracias a los márgenes y padding definidos en la clase .container.
Espaciado Semántico
Ejemplos de clases de espaciado vertical para secciones y contenido.
Espaciado de Sección (padding vertical)
.section--spacing-sm (padding vertical pequeño)
.section--spacing-md (padding vertical medio)
.section--spacing-lg (padding vertical grande)
Espaciado de Contenido (margin vertical)
.content--spacing-sm (margin vertical pequeño)
.content--spacing-md (margin vertical medio)
.content--spacing-lg (margin vertical grande)
Componentes Básicos
Ejemplos de componentes esenciales del sistema.
Botones
Tarjetas
Título de Tarjeta
Este es el contenido de la tarjeta.
Formulario de Contacto
Ejemplo de un formulario básico.
Features Sections
Secciones de características y ventajas.
Features Grid
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.
Features Cards
Título de Tarjeta
Breve descripción del contenido de la tarjeta.
Otra Tarjeta
Contenido relevante para la segunda tarjeta.
Features Highlight
Título Destacado
Descripción principal de la sección destacada. Aquí puedes poner un texto más largo para explicar los beneficios o características clave.
-
Punto Clave 1
Detalle del primer punto clave.
-
Punto Clave 2
Detalle del segundo punto clave.