Paleta de Colores Base

Primario

var(--c-primary)

#bea10d

Secundario

var(--c-secondary)

#e6361f

Acento

var(--c-accent)

#f68398

Alerta

var(--c-alert)

#bea10d

Texto Cuerpo

var(--c-text-body)

#dee2e6

Texto Títulos

var(--c-text-headings)

#333333

Fondo Claro

var(--c-bg-light)

#dee2e6

Tipografía

Encabezado H1

Encabezado H2

Encabezado H3

Encabezado H4

Encabezado H5

Encabezado H6

Este es un párrafo de texto (<p>) que demuestra el color del cuerpo. Contiene texto en negrita y texto en cursiva. Aquí tenemos un enlace de ejemplo para ver su estado normal y hover.

Esto es una cita en bloque (<blockquote>). Suele tener un estilo distintivo para destacar del resto del contenido.

Esto es código en línea para mostrar cómo se ven los elementos de código, y esto es un elemento span.

Componentes Interactivos

Botones

Botón de Ejemplo

Fondo: var(--button-bg)

Texto: var(--button-text)

Fondo Hover: var(--button-bg-hover)

Texto Hover: var(--button-text-hover)

Enlaces

Pasa el ratón sobre este enlace de ejemplo.

Color: var(--link-color)

Hover: var(--link-hover-color)

Guía de estilos CSS