Design system

Guía de diseño

Referencia viva de los tokens y componentes reales del tema. Cada muestra en esta página se renderiza con el CSS y las funciones PHP de producción — si el tema cambia, esta guía cambia con él.

Paleta

Los 10 colores aprobados del sistema, definidos en css/tokens.css.

Ink --dp-ink #14243b Azul marino identidad

Ink deep --dp-ink-deep #0e1a33 Marino profundo (gradientes, headers)

Paper --dp-paper #fbfaf6 Fondo de página off-white

Surface --dp-surface #ffffff Superficie de tarjeta

Border --dp-border #dcdbd7 Hairline / bordes claros

Ink gray --dp-ink-gray #5a6b7b Texto atenuado

Accent --dp-accent #e4372b Rojo acción / CTA

Global --dp-global #2e6e8e Teal / enlaces globales

Gold --dp-gold #b9820a Dorado / badges TOP

Ok --dp-ok #12a150 Verde éxito / fresco

Tipografía

Tres familias tipográficas: display, cuerpo y mono. No existe una escala de tamaños en tokens — cada componente define su propio font-size.

Display — --dp-font-display

Bricolage Grotesque

Cuerpo — --dp-font-body

Inter

Mono — --dp-font-mono

Space Mono

H1 — Titular de portada

H2 — Titular de sección

H3 — Titular de tarjeta

Párrafo de cuerpo en Inter. Este es el texto editorial estándar usado en artículos, descripciones y contenido de fichas de periódicos dentro del sitio.

Eyebrow mono · Diario · País

Botones

Primitiva .dp-btn y sus modificadores, definidos en css/components/buttons.css.

.dp-btn--primary

.dp-btn--secondary

.dp-btn--ghost

.dp-btn--icon

.dp-btn--primary + icono

Badges

Variantes de .digiprensa-badge, definidas en css/components/cards.css.

Top 10k .digiprensa-badge-primary

Activo .digiprensa-badge-success

Info .digiprensa-badge-info

Aviso .digiprensa-badge-warning

Secundario .digiprensa-badge-secondary

Iconos

Todos los SVG en svg/icons/ (estilo Feather, 24×24), leídos en vivo con glob() — esta lista se actualiza sola cuando se añaden o quitan iconos.

copy

external-link

eye

facebook

globe

home

instagram

linkedin

rss

search

share

twitter

youtube

Tarjetas de periódico

Componente real template-parts/components/newspaper-card.php, con posts publicados reales que tienen favicon y claim.

Variante `featured`

marina360

Blanes

marina360 es el portal de contenidos digitales de Ràdio Marina, con noticias de Blanes, Lloret de Mar, Tossa de Mar y la comarca de la Selva, Girona.

Pànxing

Cataluña

Noticias y agenda de la Cerdanya, el Berguedà, el Maresme, el Bages, el Solsonès y los Pirineos, en catalán.

Écija 7 Días

Écija

Diario digital de Écija y su Comarca

Variante `dense`

marina360 Blanes marina360 es el portal de contenidos digitales de Ràdio Marina, con noticias de Blanes, Lloret de Mar, Tossa de Mar y la comarca de la Selva, Girona.
Pànxing Cataluña Noticias y agenda de la Cerdanya, el Berguedà, el Maresme, el Bages, el Solsonès y los Pirineos, en catalán.
Écija 7 Días Écija Diario digital de Écija y su Comarca

Ficha (elementos)

Piezas reales de template-parts/single/hero.php y template-parts/single/news-feed.php: nameplate/eyebrow, metastrip y fila de feed "En portada ahora".

Nameplate / eyebrow

El nameplate y el metastrip viven, en producción, sobre la banda navy del hero (.dp-single__hero). Se muestran aquí sobre el mismo fondo para conservar el contraste real del texto.

Diario · España

El Diario de Muestra

Información veraz y contrastada, publicada cada día desde 1990.

Metastrip

Ciudad Madrid

Fundado 1990 · 36 años

Fila de "En portada ahora"

El feed vive sobre superficie clara (.dp-single__section), a diferencia del nameplate.

1
Titular de ejemplo para la guía de diseño
Extracto breve de la noticia mostrada en el feed en vivo de la ficha.

hace 2 horas