Tipografía

La tipografía del sistema se apoya en tokens de tamaño (--gn-text-h*, --gn-text-p-*) definidos en tokens.css, y en dos variables de interlineado definidas en main.css:

• --gn-line-height-ui: 1.2 para interfaz compacta (encabezados, botones, etiquetas)
• --gn-line-height-text: 1.4 para contenido corrido (párrafos, listas, prose)

Escala de encabezados (HTML real)

H0 no tiene etiqueta HTML nativa. Cuando se necesite como specimen visual o hero puntual, se aplica manualmente con token:

H0

Escala de párrafo

Referencia de valores

Los tokens de encabezado tienen dos valores: escritorio (≥ 1280 px) y mobile (< 1280 px). Los tokens de párrafo no cambian con el punto de ruptura.

Responsivo

Los tokens de encabezado se reducen automáticamente en pantallas menores de 1280px desde tokens.css. No hace falta añadir media queries por componente para estos tamaños.

Uso manual de tokens (casos específicos)

Fuera de contenido editorial (por ejemplo, componentes de interfaz), usa tokens manualmente en clases de componente.

/* Ejemplo: texto de componente */
.mi-componente__titulo {
  font-size: var(--gn-text-h3);
  font-weight: 700;
  line-height: var(--gn-line-height-ui);
}

.mi-componente__descripcion {
  font-size: var(--gn-text-p-sm);
  line-height: var(--gn-line-height-text);
}

Enlaces externos (con icono)

Contenido editorial con .prose

Aplica .prose al contenedor de páginas de texto corrido (artículos, páginas legales, documentación, contenido de CMS o Markdown). La clase aplica estilos tipográficos scopeados a los elementos HTML semánticos descendientes sin contaminar el resto del proyecto.

Elementos cubiertos

| Elemento | Notas | |---|---| | h1–h5 | Escala tipográfica con tokens --gn-text-h* | | h6 | Sin token propio; usa tamaño de h5 con color secundario | | p | Párrafo base con --gn-text-p-base y --gn-line-height-text | | a | Enlace con color, subrayado y foco accesible | | strong, b | Negrita (peso 700) | | em, i | Cursiva | | small | Texto auxiliar en --gn-text-p-xs con color secundario | | sup, sub | Sin romper el interlineado (line-height: 0) | | abbr[title] | Subrayado punteado accesible con cursor: help | | mark | Resaltado editorial claro (no alerta) | | ul, ol, li | Listas con sangría y espaciado coherentes | | hr | Separador con --gn-color-border-neutral-light | | blockquote:not([class]) | Borde lateral izquierdo, color secundario | | code:not([class]) | Código inline con fondo y borde sutil | | pre:not([class]) | Bloque de código con overflow horizontal | | img | Responsive (max-width: 100%; height: auto) | | figure:not([class]) | Margen vertical coherente | | figcaption | Tamaño y color de texto secundario | | table:not([class]) | Ancho completo, border-collapse, sin comportamiento JS | | dl:not([class]), dt, dd | Lista de definiciones editorial básica |

Patrón :not([class])

Para elementos que pueden tener una versión componente del sistema (table, dl, blockquote, figure, code, pre), .prose aplica estilos solo cuando no tienen clase propia. Así, si se usa el componente .gn-table dentro de .prose, sus estilos prevalecen sin conflicto.

/* Solo se estila si no tiene clase */
.prose table:not([class]) { ... }
.prose dl:not([class]) { ... }
.prose code:not([class]) { ... }

Uso básico

article.prose { color: var(--gn-color-text-default); }

Convivencia con componentes del sistema

Si dentro de .prose se necesita una tabla con variantes, ordenación o comportamiento interactivo, usa el componente .gn-table en lugar del HTML nativo. Los estilos de .prose no afectan a elementos con clase propia del sistema.