Sistema de Diseño · Versión 1.0

Raíces Editorial
Design System Terracotta

Identidad editorial para plataformas de contenido long-form: tierra, calidez, lectura.

DM Serif Display Tipografía principal
JetBrains Mono Etiquetas y código
WCAG 2.2 AA Accesibilidad
Web + Figma Plataformas
01 — Componente: Cabecera de Artículo
Raíces Editorial › Territorio › Vino

La vendimia del Priorat: apuntes de un otoño distinto

Tres semanas entre viticultores, piedras pizarrosas y un clima que este año lo cambió todo.

M
Marta Solà
Periodismo gastronómico
12 minLectura
14 Oct 2025Publicado
4.280Palabras
02 — Paleta de Color
Primary
--color-primary
#C56A3C
Secondary
--color-secondary
#F3E9D8
Ink Dark
--color-ink-dark
#2C1810
Text
--color-text
#111827
Success
--color-success
#16A34A
Warning
--color-warning
#D97706
Danger
--color-danger
#DC2626
Muted
--color-text-muted
#6B7280
03 — Tipografía
H1 · DM Serif Display · 40px · Regular
La tierra no miente: crónica de una cosecha extraordinaria
H2 · DM Serif Display · 32px · Regular
Territorio, memoria y aceite de piedra gris
H3 · DM Serif Display · 24px · Regular
Gastronomía de proximidad: el regreso al origen
Body · DM Serif Display · 18px · Regular · line-height 1.75
El aceite que Ramón extrae cada noviembre en las laderas de la Sierra del Segura no llega a las grandes superficies. Sólo existe en botellas numeradas, en mesas de amigos y en las manos de quienes aún recuerdan que la buena cocina empieza antes del fuego.
Label · JetBrains Mono · 14px · Bold Caps
Territorio / Vino / Tradición
Caption · JetBrains Mono · 11px
Publicado el 14 de octubre de 2025 · 12 min de lectura
04 — Botones y Badges
Botones
Leer artículo completo Suscribirse a Raíces
Ver todos los artículos Agotado
Todos los botones tienen min-height: 44px (WCAG touch target) y focus-visible ring 3px primary.
Badges / Etiquetas
Nuevo Temporada Exclusivo Archivo
Vino Territorio Gastronomía Km 0
05 — Tarjetas de Artículo
Fotografía · Territorio
Vino
14 Oct 2025

La vendimia del Priorat: apuntes de un otoño distinto

Entre lluvias tardías y suelos de pizarra, este año la cosecha llegó tres semanas después de lo esperado...

M
Marta Solà
12 min
Fotografía · Aceite
Aceite
02 Nov 2025

Sierra del Segura: el aceite que no quiere ser famoso

Ramón Jiménez elabora 800 litros al año. Nunca ha exportado. Y así quiere seguir para siempre...

J
Jordi Pla
8 min
Fotografía · Huerta
Huerta
18 Nov 2025

La última tomate de la temporada: un adiós que sabe a promesa

En el Maresme, cuando llegan los fríos, los hortelanos recogen los últimos frutos con una nostalgia particular...

A
Alba Ferrer
6 min
06 — Cita Destacada y Newsletter

La tierra no entiende de mercados. Ella responde al sol, al agua y a las manos que la cuidan. Todo lo demás es consecuencia.

— Ramón Jiménez, viticultor del Priorat
07 — Formularios e Inputs
Aparecerá en tu perfil de autor
Estado: focus activo
⚠ Mínimo 8 caracteres requeridos
08 — Token Reference
Token CSS Valor Uso Nivel WCAG
--color-primary #C56A3C CTAs, bordes activos, acentos AA en blanco
--color-ink-dark #2C1810 Titulares en superficies claras AAA
--color-secondary #F3E9D8 Fondos, banners, citados Superficies
--color-text #111827 Cuerpo de texto principal AAA
--color-text-muted #6B7280 Metadatos, captions, hints AA sólo >18px
--space-4 16px Espaciado base entre elementos —
--space-6 24px Padding de tarjetas y banners —
--radius-sm 4px Botones, inputs —
--radius-md 8px Tarjetas, paneles —
09 — Do / Don't: Anti-patrones
Correcto
✓ Usar --color-primary para CTAs; nunca valores hex en línea.
✓ Titulares en --color-ink-dark sobre superficies --color-secondary.
✓ Etiquetas de categoría en JetBrains Mono uppercase con letter-spacing.
✓ Focus-visible ring de 3px en --color-primary en todos los interactivos.
✓ Touch targets mínimo 44×44px en mobile.
Prohibido
✗ Texto gris (#6B7280) sobre fondo crema — contraste insuficiente bajo 18px.
✗ Usar fuente serif para etiquetas de categoría; eso rompe el ritmo mono.
✗ Spacing ad-hoc fuera del scale (4/8/12/16/24/32).
✗ Botones sin estado disabled explícito en formularios de suscripción.
✗ Imágenes hero sin alt-text descriptivo o aria-label.
10 — QA Checklist para Code Review
Raíces Editorial × Terracotta DS
Sistema generado por CULTIVA IA — Branding-Diseño
Skill: sistema-diseno-terracotta v1.0.0