Sistema de diseño

Referencia viva del lenguaje del tema PVI Rojo: tipografía, color, layout y patrones, renderizados desde los tokens vigentes.

Tipografía

Dos familias y una escala anclada en 16 px: Space Grotesk en interfaz y encabezados, Libre Baskerville en cuerpos de artículo, declaraciones y citas.

Familias

Space Grotesk

--pvi-font-sans · Sans-serif · Interfaz, encabezados, navegación, etiquetas, botones

Light 300 La lucha por la emancipación de los pueblos no conoce fronteras ni patrias exclusivas.

Regular 400 La lucha por la emancipación de los pueblos no conoce fronteras ni patrias exclusivas.

Medium 500 La lucha por la emancipación de los pueblos no conoce fronteras ni patrias exclusivas.

Semi 600 La lucha por la emancipación de los pueblos no conoce fronteras ni patrias exclusivas.

Bold 700 La lucha por la emancipación de los pueblos no conoce fronteras ni patrias exclusivas.

Extra 800 La lucha por la emancipación de los pueblos no conoce fronteras ni patrias exclusivas.

Libre Baskerville

--pvi-font-serif · Serif · Texto de artículos, sección de declaraciones, citas

Regular 400 La historia de todas las sociedades hasta nuestros días es la historia de la lucha de clases.

Italic 400 La historia de todas las sociedades hasta nuestros días es la historia de la lucha de clases.

Bold 700 La historia de todas las sociedades hasta nuestros días es la historia de la lucha de clases.

Escala de tamaños

4xl · 32–48px · 3rem · fluid

Punto de Vista Internacional

3xl · 28–38px · 2.375rem · fluid

Actualidad Internacional

xl · 28px · 1.75rem

Declaraciones del Buró

lg · 21px · 1.3125rem

Las contradicciones del capitalismo global abren nuevas perspectivas para la clase trabajadora en todos los continentes.

base · 16px · 1rem

El texto de cuerpo de artículos utiliza Libre Baskerville a 16 píxeles con una altura de línea generosa de 1.8 para garantizar la legibilidad en textos largos de análisis político y teórico. También el tamaño base de la interfaz: extractos de tarjeta, navegación, líneas de autor.

xs · 12px · 0.75rem

Etiquetas de categoría · Fechas · Pies de imagen · Texto menor del pie de página

Jerarquía de encabezados

h1 · titular principal

La crisis del orden imperialista

h2 · sección

Actualidad Internacional

h3 · subtítulo

Análisis y perspectivas

h4 · apartado

Apuntes desde Medio Oriente

h5 · subapartado

Resoluciones aprobadas

h6 · etiqueta

Nota del traductor

Texto de cuerpo

Párrafo de artículo — Baskerville 16px/1.8

La crisis económica mundial ha puesto de manifiesto las profundas contradicciones del sistema capitalista. Los gobiernos de las principales potencias imperialistas han respondido con medidas de austeridad que recaen sobre los hombros de la clase trabajadora, mientras que los grandes capitales reciben rescates millonarios. Esta situación ha provocado un auge de las movilizaciones populares en todos los continentes.

Extracto principal — Baskerville 21px/1.6 itálica

Un análisis sobre la situación en Medio Oriente, las perspectivas para los movimientos de liberación nacional y el papel de la Cuarta Internacional en la construcción de una alternativa revolucionaria.

Listas

  • La cuestión nacional y el derecho de autodeterminación de los pueblos
  • El programa de transición y las demandas democráticas
  • La construcción del partido revolucionario en las condiciones actuales
  1. Resolución sobre la situación política internacional
  2. Informe sobre la lucha de clases en América Latina
  3. Balance y perspectivas del movimiento obrero europeo

Componentes de interfaz

Etiqueta / Botón / CTA — xs / 700 / uppercase / 2px

Actualidad Internacional

Ver todos los artículos →

Enlace de navegación — base / 700 / uppercase / 1.4px

Actualidad · Teoría · Combate · La Cuarta

Extracto de tarjeta — base / 500 / 1.6

La situación en Ucrania revela las profundas tensiones interimperialistas y la necesidad de una política independiente de la clase trabajadora.

Fecha — base / 400 / itálica (Baskerville)

15 de enero de 2026

Citas y contextos especiales

Estilo Declaraciones — Baskerville sobre fondo papel

Declaración del Buró

Resolución sobre la situación en Medio Oriente y la lucha por la paz

El Buró de la Cuarta Internacional, reunido en sesión extraordinaria, analiza la escalada militar en la región y llama a la movilización internacional de los trabajadores contra la guerra imperialista.

8 de marzo de 2026

Cita destacada (pullquote)

«Los filósofos no han hecho más que interpretar de diversos modos el mundo, pero de lo que se trata es de transformarlo.»

— Karl Marx, Tesis sobre Feuerbach

Cita en bloque (blockquote)

La tradición de todas las generaciones muertas oprime como una pesadilla el cerebro de los vivos. Y cuando estos aparentan dedicarse precisamente a transformarse y a transformar las cosas, a crear algo nunca visto, en estas épocas de crisis revolucionaria es precisamente cuando conjuran temerosos en su auxilio los espíritus del pasado.

Karl Marx, El 18 Brumario de Luis Bonaparte

Pie de imagen (caption)

Manifestación en París, 1 de mayo de 2025. Foto: Agencia France-Presse.

Referencia de tokens

Todas las variables CSS están definidas en :root en style.css. Los tamaños de fuente también están registrados en theme.json como presets de WordPress.

Tamaños de fuente

Variable CSSPreset WPValorpx equiv.
--pvi-fs-xsxs0.75rem12px
--pvi-fs-basebase1rem16px
--pvi-fs-lglg1.3125rem21px
--pvi-fs-xlxl1.75rem28px
--pvi-fs-3xl3xlclamp(1.75rem, …, 2.375rem)~28–38px
--pvi-fs-4xl4xlclamp(2rem, …, 3rem)~32–48px

Pesos

VariableValorUso
--pvi-fw-regular400Texto de cuerpo, fechas
--pvi-fw-medium500Extractos, descripciones
--pvi-fw-semi600Enlaces de traductor
--pvi-fw-bold700Encabezados, nav, etiquetas
--pvi-fw-extra800Título de artículo

Alturas de línea

VariableValorUso
--pvi-lh-none1Display compacto
--pvi-lh-tight1.15Titulares grandes
--pvi-lh-snug1.25Encabezados de sección
--pvi-lh-normal1.4UI, extractos
--pvi-lh-relaxed1.6Texto de lectura corto
--pvi-lh-loose1.8Párrafos de artículo

Espaciado de letras

VariableValorUso
--pvi-ls-tighter-0.5pxTitulares display
--pvi-ls-tight-0.01emEncabezados
--pvi-ls-normal0Texto de cuerpo
--pvi-ls-wide1pxCitas destacadas
--pvi-ls-widest2pxEtiquetas, botones, navegación
--pvi-ls-ultra3pxCategoría destacada

Familias

VariableValorUso
--pvi-font-sans‘Space Grotesk’, sans-serifInterfaz, encabezados, nav
--pvi-font-serif‘Libre Baskerville’, Baskerville, Georgia, serifArtículos, declaraciones, citas

Color

Tres colores de marca y un puñado de tokens semánticos que cambian entre claro y oscuro. Las muestras se renderizan en vivo desde las variables CSS.

Marca

--pvi-brand-red #F20D0D Acento principal · CTAs · pullquotes
--pvi-brand-pink #FFE3E3 Texto sobre fondos oscuros / rojos
--pvi-brand-dark-red #260000 Fondos de cover · texto sobre rosa

Semánticos (varían según el modo)

--pvi-bg-body varía Fondo del documento
--pvi-text-body varía Color de texto principal
--pvi-bg-surface varía Fondos de tarjetas y bloques de código
--pvi-text-muted varía Metadatos · pies · texto secundario
--pvi-border-subtle varía Líneas divisorias · bordes de tabla
--pvi-text-on-dark Aa Texto sobre superficies oscuras o rojas

Tipografía sobre color

Sobre rojo (#F20D0D)

La lucha continúa

Texto de lectura sobre superficie roja. Usa el rosa claro (#FFE3E3) para máximo contraste y legibilidad.

Sobre rojo oscuro (#260000)

Declaración urgente

Texto de lectura sobre la superficie más oscura del tema. El rosa suave asegura legibilidad incluso en párrafos largos.

Sobre rosa (#FFE3E3)

Análisis semanal

Texto oscuro sobre la superficie rosa clara. El rojo oscuro de marca (#260000) ofrece excelente contraste y cohesión visual.

Modo claro / oscuro

El tema responde a dos señales: un toggle explícito (<html data-theme="dark"> o data-theme="light") y, como respaldo, @media (prefers-color-scheme: dark) cuando no se ha guardado preferencia. En modo oscuro, --pvi-brand-red pasa a #5E1511 (rojo apagado para evitar deslumbramiento) y los tokens semánticos se invierten.

Además, dos variables del editor de bloques se sobrescriben para que los estilos del tema padre respondan al cambio de modo: --wp--preset--color--base y --wp--preset--color--contrast.

Referencia de tokens de color

VariableModo claroModo oscuroPreset WP
--pvi-brand-red#F20D0D#5E1511brand-red
--pvi-brand-pink#FFE3E3#FFFFFFbrand-pink
--pvi-brand-dark-red#260000#260000brand-dark-red
--pvi-bg-body#FFFFFF#1A1A1Abase
--pvi-text-body#111111#FFFFFFcontrast
--pvi-bg-surface#F5F5F5#2A2A2A—
--pvi-text-muted#686868#FFFFFF—
--pvi-border-subtle#E0E0E0#3A3A3A—
--pvi-text-on-dark#FFE3E3#FFFFFF—

Layout

El sistema extiende las primitivas de WordPress (contentSize y wideSize en theme.json) con consultas de contenedor: cada componente decide su rejilla en función de su propio ancho, no del viewport.

Contenedores

TokenValorUso
contentSize645pxAncho de lectura por defecto (artículos, páginas)
wideSize1500pxAncho máximo del sitio (encabezado, grids, hero)
Gutter desktop32pxMargen lateral del contenedor en escritorio
Gutter móvil16pxMargen lateral en pantallas < 600px

Breakpoints

Cinco breakpoints en uso, todos definidos como max-width o min-width en style.css. No hay tokens; las consultas están en línea donde se necesitan.

AnchoTipoPropósito
600pxmóvil / tabletApilado de filas de tarjetas, gutter 16px
640pxmóvil / tabletCambios menores de tipografía y nav
768pxtabletCambios de hero y grid de portada
1024pxdesktopActiva grid de 3 columnas en card grid
1560pxdesktop anchoTope superior antes de centrar el contenedor

Cuadrícula de tarjetas

La clase .pvi-card-grid define un contenedor con container-type: inline-size; las columnas responden al ancho del propio grid, no al viewport. Esto permite reutilizar el mismo grid dentro de columnas o sidebars sin reescribir las reglas.

Ancho del contenedorColumnas
< 600px1 columna (apilada)
≥ 600px2 columnas
≥ 1024px3 columnas

El mismo bloque .pvi-card-grid, fijado aquí a tres anchos distintos para mostrar el cambio de columnas:

contenedor 580px · 1 columna

contenedor 900px · 2 columnas

contenedor 1100px · 3 columnas

Espaciado

Escala anclada en múltiplos de 4 y 8. El nombre del token coincide con su valor en píxeles.

VariableValorUso típico
--pvi-space-44pxGaps entre etiqueta y valor en metas, hairline
--pvi-space-88pxGap entre líneas adyacentes en una tarjeta
--pvi-space-1616pxGutter móvil, separación entre bloques pequeños
--pvi-space-2424pxPadding interno de tarjetas y bloques destacados
--pvi-space-3232pxGutter desktop, padding de bloques de color
--pvi-space-4040pxSeparación entre subsecciones cortas
--pvi-space-4848pxSeparación entre subsecciones, padding superior de sección
--pvi-space-6060pxPadding superior de hero, fin de sección de patrones
--pvi-space-8888pxReservas amplias del cover destacado en portada

Radio y sombras

Una sola sombra con identidad propia (la del pullquote) y un único radio para imágenes embebidas. No hay más radios ni más sombras en el sistema.

VariableValorUso
--pvi-radius-image4pxEsquinas de todas las imágenes embebidas (cover, tarjetas, figuras de contenido)
--pvi-shadow-pullquote-8px 8px 0 0 var(--pvi-brand-red)Bloque rojo desplazado bajo bloques rosa de pullquote y declaraciones; cambia de color con el modo

Convenciones

  • Separadores anchos: <hr is-style-wide> para dividir secciones largas.
  • Aspect ratio de imagen de tarjeta: 16/9.

Patrones

Bloques registrados en PHP bajo /patterns/ que el editor puede insertar como una unidad. Cada uno se muestra abajo en vivo, con los últimos artículos publicados.

Tarjeta vertical · pvi-rojo/post-card

Tarjeta con imagen 16:9 superior, categoría, título, extracto (25 palabras) y pie. Layout vertical, usada en listados de portada y archivos de autor.

Cómo insertar 
<!-- wp:query {"queryId":1,"query":{"perPage":8,"postType":"post"},"layout":{"type":"default"}} -->
<div class="wp-block-query">
    <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
        <!-- wp:pattern {"slug":"pvi-rojo/post-card"} /-->
    <!-- /wp:post-template -->
</div>
<!-- /wp:query -->

Tarjeta horizontal · pvi-rojo/post-card-horizontal

Imagen a la izquierda (fija), cuerpo a la derecha. Variante usada en plantillas de categoría y en el archivo Actualidad. Se apila verticalmente cuando el contenedor baja de 600 px.

Cómo insertar 
<!-- wp:query {"queryId":1,"query":{"perPage":12,"postType":"post"},"layout":{"type":"default"}} -->
<div class="wp-block-query">
    <!-- wp:post-template -->
        <!-- wp:pattern {"slug":"pvi-rojo/post-card-horizontal"} /-->
    <!-- /wp:post-template -->
</div>
<!-- /wp:query -->