Paleta de Colores Base
Primario
var(--c-primary)
#9a568c
Secundario
var(--c-secondary)
#f68398
Acento
var(--c-accent)
#a7698e
Alerta
var(--c-alert)
#ea605d
Texto Cuerpo
var(--c-text-body)
#a25984
Texto Títulos
var(--c-text-headings)
#333333
Fondo Claro
var(--c-bg-light)
#f0f1f3
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
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)