Tipografía

Familias

Encabezados → familia predeterminada de H1–H6.

Textos → familia predeterminada del cuerpo.

Encabezado H1

H1 → --kitlu-font-size-h1 → 600 → line-height 1.1

Encabezado H2

H2 → --kitlu-font-size-h2 → 600 → line-height 1.2

Encabezado H3

H3 → --kitlu-font-size-h3 → 600 → line-height 1.2

Encabezado H4

H4 → --kitlu-font-size-h4 → 600 → line-height 1.3

Encabezado H5

H5 → --kitlu-font-size-h5 → 600 → line-height 1.3

Encabezado H6

H6 → --kitlu-font-size-h6 → 600 → line-height 1.3

Body

--kitlu-font-size-body · 16 → 18 px · peso 400 · line-height 1.6

Párrafo normal. Esta muestra utiliza los estilos globales definidos en el Theme Style kitlu.

Texto en negrita

Texto en cursiva

Enlace de ejemplo

Elemento de lista ordenada 1
Elemento de lista ordenada 2
Elemento de lista ordenada 3

Elemento de lista no ordenada 1
Elemento de lista no ordenada 2
Elemento de lista no ordenada 3

Lead

--kitlu-font-size-lead · ≈ 18.4 → 22 px · peso 300 · line-height 1.55

Lead de muestra para introducciones, aperturas editoriales y párrafos destacados.

Small

--kitlu-font-size-small · 15 → 16 px · peso 400 · line-height 1.5

Small de muestra para información secundaria y texto auxiliar.

Caption

--kitlu-font-size-caption · 14 px · peso 400 · line-height 1.4

Caption de muestra para pies, etiquetas descriptivas y anotaciones breves.

Escala tipográfica fluida

Viewport fluido: 320 → 1400 px
Base: 16 → 18 px
Ratio: 1.15 → 1.22
REM: 1rem = 10px

--kitlu-type-base
--kitlu-type-1
--kitlu-type-2
--kitlu-type-3
--kitlu-type-4
--kitlu-type-5
--kitlu-type-6

Pesos

Light 300 · --kitlu-font-weight-light

Regular 400 · --kitlu-font-weight-regular

Semibold 600 · --kitlu-font-weight-semibold

Bold 700 · disponible en Textos, no token fundacional de kitlu

Strong / b

Texto regular 400 y texto destacado mediante strong 600.

Regular → --kitlu-font-weight-regular → 400
Strong → --kitlu-font-weight-strong → --kitlu-font-weight-semibold → 600

El peso 700 está disponible físicamente en la familia Textos, pero no es el comportamiento fundacional actual de <strong>/<b>.

Line-height

--kitlu-line-height-tight 1.1
--kitlu-line-height-snug 1.2
--kitlu-line-height-heading 1.3
--kitlu-line-height-compact 1.4
--kitlu-line-height-small 1.5
--kitlu-line-height-lead 1.55
--kitlu-line-height-body 1.6

Laboratorio de headings compactos

H3 estándar

Cómo diseñar una experiencia editorial coherente para contenidos extensos

H3 + kitlu-heading--small

Cómo diseñar una experiencia editorial coherente para contenidos extensos

H3 + kitlu-heading--mini

Cómo diseñar una experiencia editorial coherente para contenidos extensos

H3 + kitlu-heading--micro

Cómo diseñar una experiencia editorial coherente para contenidos extensos

H3 + kitlu-heading--mini + kitlu-heading--regular

Cómo diseñar una experiencia editorial coherente para contenidos extensos

Laboratorio de colores de texto

kitlu-text--primary · Texto principal

kitlu-text--secondary · Texto secundario

kitlu-text--accent · Texto de acento

kitlu-text--inverse · Texto inverso

Paleta de colores

████████████████

--kitlu-primitive-violet-1

#333159

████████████████

--kitlu-primitive-violet-2

#91859D

████████████████

--kitlu-primitive-violet-3

#C6BFCC

████████████████

--kitlu-primitive-neutral-1

#F5F4F6

████████████████

--kitlu-primitive-white

#FFFFFF

████████████████

--kitlu-primitive-warm-1

#843B4D

████████████████

--kitlu-primitive-warm-2

#CE463A

████████████████

--kitlu-primitive-warm-3

#E74B30

████████████████

--kitlu-primitive-warm-4

#F5AB8D

████████████████

--kitlu-primitive-warm-5

#FCE0D2

Variables semánticas

████████████████

--kitlu-color-text-primary

Referencia: var(--kitlu-primitive-violet-1)

Función: texto de cuerpo principal.

Accesibilidad: contraste excelente sobre blanco y fondo general; apto para texto normal.

████████████████

--kitlu-color-text-secondary

Referencia: var(--kitlu-primitive-violet-1)

Función: texto secundario, metadata y descripciones.

Accesibilidad: usa el mismo primitivo que el texto principal; la jerarquía debe resolverse por tipografía y composición, no reduciendo contraste.

████████████████

--kitlu-color-heading

Referencia: var(--kitlu-primitive-violet-1)

Función: encabezados y títulos.

Accesibilidad: contraste alto sobre las superficies claras previstas.

████████████████

--kitlu-color-background

Referencia: var(--kitlu-primitive-neutral-1)

Función: fondo general del sitio.

Accesibilidad: debe combinarse con texto oscuro; no usar blanco como texto sobre este fondo.

████████████████

--kitlu-color-surface

Referencia: var(--kitlu-primitive-white)

Función: superficies, paneles, tarjetas y formularios.

Accesibilidad: el contraste con el fondo general es sutil; no usar esa diferencia como única frontera de controles.

████████████████

--kitlu-color-border

Referencia: var(--kitlu-primitive-violet-2)

Función: bordes funcionales de inputs, controles y separaciones relevantes.

Accesibilidad: adecuado para el mínimo 3:1 de contraste no textual sobre blanco y fondo general.

████████████████

--kitlu-color-primary

Referencia: var(--kitlu-primitive-violet-1)

Función: color principal de marca y controles primarios.

Accesibilidad: admite texto inverso blanco con contraste muy alto.

████████████████

--kitlu-color-accent

Referencia: var(--kitlu-primitive-warm-1)

Función: acento fuerte, destacados y controles secundarios.

Accesibilidad: admite texto inverso blanco con contraste AA holgado.

████████████████

--kitlu-color-link

Referencia: var(--kitlu-primitive-warm-1)

Función: enlaces.

Accesibilidad: mantener subrayado u otra señal no cromática; no identificar enlaces solo mediante color.

--kitlu-color-text-inverse

Referencia: var(--kitlu-primitive-white)

Función: texto e iconos sobre fondos primary y accent.

Accesibilidad: usar sobre fondos oscuros aprobados; no sobre superficies claras.

Espaciado

Baseline REM de kitlu: html { font-size: 62.5% }. Los tokens de spacing están calculados para una interpolación fluida entre 320 y 1400 px.

--kitlu-space-3xs

Mínimo: 0.4rem (4px)

Máximo: 0.6rem (6px)

clamp(0.4rem, calc(0.340741rem + 0.185185vw), 0.6rem)

--kitlu-space-2xs

Mínimo: 0.8rem (8px)

Máximo: 1.2rem (12px)

clamp(0.8rem, calc(0.681481rem + 0.370370vw), 1.2rem)

--kitlu-space-xs

Mínimo: 1.2rem (12px)

Máximo: 1.8rem (18px)

clamp(1.2rem, calc(1.022222rem + 0.555556vw), 1.8rem)

--kitlu-space-s

Mínimo: 1.6rem (16px)

Máximo: 2.4rem (24px)

clamp(1.6rem, calc(1.362963rem + 0.740741vw), 2.4rem)

--kitlu-space-m

Mínimo: 2.4rem (24px)

Máximo: 3.6rem (36px)

clamp(2.4rem, calc(2.044444rem + 1.111111vw), 3.6rem)

--kitlu-space-l

Mínimo: 3.2rem (32px)

Máximo: 4.8rem (48px)

clamp(3.2rem, calc(2.725926rem + 1.481481vw), 4.8rem)

--kitlu-space-xl

Mínimo: 4.8rem (48px)

Máximo: 7.2rem (72px)

clamp(4.8rem, calc(4.088889rem + 2.222222vw), 7.2rem)

--kitlu-space-2xl

Mínimo: 6.4rem (64px)

Máximo: 9.6rem (96px)

clamp(6.4rem, calc(5.451852rem + 2.962963vw), 9.6rem)

--kitlu-space-3xl

Mínimo: 9.6rem (96px)

Máximo: 14.4rem (144px)

clamp(9.6rem, calc(8.177778rem + 4.444444vw), 14.4rem)

Containers

Arquitectura de layout: la Section es edge-to-edge y no aporta gutter horizontal.

kitlu-container–content: aporta el gutter horizontal mediante --kitlu-gutter-inline.

Narrow / Default / Wide / Full: definen únicamente la anchura.

Full sin Content: capa full-width real. Full + Content: ancho completo con contenido protegido por gutter interior.

Narrow

Token: –kitlu-container-narrow

Valor: 80rem · referencia aproximada: 800px

Uso orientativo: artículos, formularios, bloques editoriales y contenido de lectura concentrada.

Default

Token: –kitlu-container-default

Valor: 128rem · referencia aproximada: 1280px

Uso: anchura general del sitio, layouts habituales y composiciones estándar.

Wide

Token: –kitlu-container-wide

Valor: 144rem · referencia aproximada: 1440px

Uso orientativo: grids amplios, directorios, layouts con muchas columnas y composiciones que necesiten mayor superficie horizontal.

Full

Token: –kitlu-container-full

Valor: 100%

Clase: kitlu-container–full

Contrato: Full sin kitlu-container--content es una capa full-width real. Full + Content mantiene el box al 100% y protege el contenido con el gutter interior.

Breakpoints

Sistema definitivo de breakpoints de kitlu. Arquitectura mobile first.

Token	Umbral	Comportamiento
XS	referencia 320 px	Base, sin media query
S	480 px	`min-width`
M	768 px	`min-width`
L	992 px	`min-width`
XL	1200 px	`min-width`
XXL	1400 px	`min-width`

IDs internos:
XS → mobile_portrait
S → mobile_landscape
M → tablet_portrait
L → desktop
XL → xl
XXL → xxl

Principio responsive: Los valores fluidos resuelven la escala; los breakpoints resuelven la estructura.

El spacing continúa funcionando fluidamente entre 320 y 1400 px mediante sus clamp(). Los breakpoints se reservan principalmente para cambios estructurales: número de columnas, stack → row, reorganización de layouts, orden de elementos, navegación, visibilidad estructural y cambios de grid.

Los nombres XS–XXL representan umbrales estructurales, no categorías rígidas de dispositivos.

Los 320 px son el viewport mínimo de diseño de referencia de kitlu; los estilos base se aplican también por debajo de esa anchura, sin media query propia para XS.