Sistema de Diseño · Paper Edition

Raíces Editorial

Guía de diseño visual — v1.0 · Junio 2026 · WCAG 2.2 AA

Branding Design Tokens Componentes Accesibilidad CSS Custom Properties

Índice de contenidos

Contexto y objetivos del sistema
Tokens de color
Escala tipográfica
Espaciado y ritmo
Componentes: Botones
Componentes: Tarjetas de libro
Componentes: Navegación
Componentes: Formularios
Componentes: Badges
Accesibilidad y criterios WCAG
Estándares de contenido y tono
Antipatrones prohibidos
Checklist de QA

01 — Contexto y objetivos

Un sistema que huele a papel

Raíces Editorial publica libros artesanales de tirada limitada sobre gastronomía, botánica y cultura rural. Este design system codifica la estética papel-impresión en tokens digitales reutilizables, garantizando coherencia entre la web de catálogo, las fichas PDF y los newsletters HTML.

"Los píxeles deben evocar el tacto del papel de offset. Si un componente parece demasiado digital, probablemente está mal."
— Principio rector del sistema

Plataformas objetivo

Web (Next.js / Tailwind)
PDF descargable (fichas de libro)
Newsletter HTML email

Principios de diseño

Legibilidad sobre decoración
Jerarquía tipográfica serif-first
Paleta restringida y con sentido
Accesibilidad no negociable

02 — Tokens de color

Paleta papel · tinta · tierra

Tinta --color-primary #2C1810

Barro --color-secondary #7C5C3E

Musgo --color-accent #4A6741

Ámbar --color-warning #C8820A

Ladrillo --color-danger #9B3522

Bosque --color-success #3B6B45

Papel crema --color-surface #F5F0E8

Papel blanco --color-surface-ink #FAF8F3

Papel oscuro --color-surface-alt #EDE8DC

Texto --color-text #1E120A

Texto secundario --color-text-muted #6B5B4E

Borde --color-border #C8BCA8

CSS Custom Properties (extracto)

:root {
  --color-primary:      #2C1810;  /* tinta oscura */
  --color-secondary:    #7C5C3E;  /* barro medio */
  --color-accent:       #4A6741;  /* musgo */
  --color-surface:      #F5F0E8;  /* papel crema */
  --color-surface-ink:  #FAF8F3;  /* papel blanco cálido */
  --color-text:         #1E120A;  /* tinta principal */
  --color-text-muted:   #6B5B4E;  /* texto secundario */
  --color-border:       #C8BCA8;  /* marfil oscuro */
}

03 — Escala tipográfica

Serif primero, sans para UI

--text-3xl · 52px Raíces

--text-2xl · 40px La huerta en invierno

--text-xl · 32px Recetas de temporada

--text-lg · 24px Botánica silvestre del interior

--text-md · 18px El texto corrido de los libros de Raíces se compone en Palatino a 18 px con interlineado 1.8.

--text-base · 16px Cuerpo estándar para descripciones, metadatos y copy de interfaz.

--text-sm · 14px (UI) Helvetica Neue · Etiquetas, captions, botones, navegación

--text-xs · 12px (mono) ISBN 978-84-XXXX-XXX-X · Courier New · Metadatos técnicos

Fuentes del sistema

Rol	Fuente	Peso
Display / Titular	Georgia	400
Cuerpo	Palatino	400
UI / Etiquetas	Helvetica Neue	400–700
Mono / Código	Courier New	400

Reglas tipográficas

Interlineado cuerpo: 1.6–1.8
Títulos: 1.1–1.3
Medida óptima de línea: 60–75 caracteres
No usar fuentes decorativas fuera de portada
Cursiva solo en títulos de obras y citas
Evitar mayúsculas largas sin letter-spacing

04 — Espaciado y ritmo

Escala de 4 puntos

--sp-1 · 4px

--sp-2 · 8px

--sp-3 · 12px

--sp-4 · 16px

--sp-6 · 24px

--sp-8 · 32px

--sp-10 · 40px

--sp-12 · 48px

--sp-16 · 64px

--sp-20 · 80px

05 — Componente: Botones

Acciones claras, sin ambigüedad

El botón primario siempre usa --color-primary y sombra de elevación. El focus ring usa --color-accent con 3px offset para visibilidad máxima.

Variantes

Comprar libro Ver catálogo Novedad Leer más →

Estados

Default Hover Focus Active Deshabilitado

Reglas obligatorias

Altura mínima 44px (touch target)
Focus visible siempre explícito
Texto legible en todos los estados
Icon + label: gap --sp-2
No usar hover como único indicador

Anatomía

padding: 10px 24px
font: UI / 14px / 600
letter-spacing: 0.04em
border-radius: --radius-md (4px)
border: 2px solid
min-height: 44px

06 — Componente: Tarjetas de libro

El libro como objeto

I Gastronomía

Ana Roca · 2025

La cocina del secano

Recetas ancestrales de la meseta castellana, recogidas durante tres años de viaje.

28 €

En stock Comprar

II Botánica

Lucía Martín · 2024

Plantas del camino

Guía ilustrada de flora silvestre ibérica con 240 láminas en papel offset 120 g.

42 €

Últimas unidades Comprar

III Cultura Rural

Raíces Ed. · 2026

El oficio del pan

Retrato de los últimos panaderos artesanos de España en blanco y negro.

35 €

Preventa Reservar

Estados de la tarjeta

Default — sombra --shadow-sm
Hover — --shadow-md + translateY(-2px)
Focus — ring 3px --color-accent
Sin stock — overlay semitransparente + badge danger

Anatomía de la tarjeta

Imagen / portada: 160px de alto
Autor: xs / ui / uppercase / faint
Título: display / 24px / primary
Descripción: body / sm / muted
Footer: precio + badge + CTA

07 — Componente: Navegación

Orientación sin distracciones

Reglas

Altura fija 56px
Fondo siempre --color-primary
Link activo: borde inferior 2px blanco
No más de 6 ítems en nav principal
Hamburger en móvil (<768px)

Accesibilidad

role="navigation" o <nav>
aria-current="page" en activo
Skip-link antes del nav
Focus ring visible (no suprimido)

08 — Componente: Formularios

Campos que invitan a escribir

Reserva anticipada

Nombre

Apellidos

Correo electrónico Solo para notificarle cuando el libro esté disponible.

Correo (estado error) Introduce un correo electrónico válido.

Dedicatoria (opcional) Máximo 120 caracteres.

Campo deshabilitado

Reservar ahora Cancelar

09 — Componente: Badges y etiquetas

Estado de un vistazo

En stock Últimas unidades Agotado Preventa Novedad Edición limitada

Los badges deben ser informativos, no decorativos. Máximo 2 palabras. No usar para acciones (usar botón). Contraste mínimo 4.5:1 sobre fondo.

10 — Accesibilidad

WCAG 2.2 AA — criterios testables

Criterios de aceptación

Contraste texto normal ≥ 4.5:1 (AA)
Contraste texto grande ≥ 3:1
Focus ring visible en todos los interactivos
No usar color como único indicador
Landmarks semánticos (<nav>, <main>)
Alt text en todas las portadas
Tabindex natural, sin saltos

Herramientas de verificación

axe-core (CI automático)
Lighthouse accessibility score ≥ 95
VoiceOver (macOS) + NVDA (Windows)
Teclado-only (Tab, Enter, Space, Esc)
Zoom 200% sin scroll horizontal

11 — Estándares de contenido y tono

Palabras que duran

Voz de marca

Culta sin ser pedante
Cálida sin ser empalagosa
Directa sin ser seca
Apasionada por los procesos artesanales

Ejemplos

✗ "¡Compra ahora y no te lo pierdas!"

✓ "Reserve su ejemplar antes del 30 de julio."

✗ "Un librazo impresionante de locura"

✓ "240 páginas de botánica documentada con rigor."

12 — Antipatrones prohibidos

Lo que este sistema no es

✗ No hacer

Usar colores neón o gradientes digitales sobre fondos de papel.

✓ Hacer

Usar únicamente los tokens de la paleta tierra-tinta-musgo.

✗ No hacer

Texto blanco puro (#FFFFFF) sobre fondo crema: pierde el efecto papel.

✓ Hacer

Usar --color-surface-ink (#FAF8F3) como blanco cálido.

✗ No hacer

Títulos en fuentes sans-serif genéricas (Arial, sistema) para headers principales.

✓ Hacer

Reservar Georgia o Palatino para titulares. Sans solo en UI (botones, labels).

✗ No hacer

Suprimir el focus ring con outline:none en elementos interactivos.

✓ Hacer

Mantener siempre el focus ring visible; rediseñarlo si no encaja estéticamente.

✗ No hacer

Espaciados arbitrarios (17px, 23px) fuera de la escala de 4 puntos.

✓ Hacer

Usar solo los valores de la escala: 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80.

✗ No hacer

Badges con verbos de acción ("Añadir", "Guardar") — ese rol le corresponde al botón.

✓ Hacer

Badges solo para estados informativos: "En stock", "Preventa", "Novedad".

13 — Checklist de QA

Antes de marcar como "listo"

Ejecutar en cada pull request que afecte a componentes visuales.

Contraste de todos los textos ≥ 4.5:1 verificado con axe-core
Focus ring visible en todos los elementos interactivos
Touch targets ≥ 44×44px en todos los botones y links
Todos los tokens usan variables CSS, no valores hardcoded
Fuentes tipográficas correctas por rol (serif/sans/mono)
Espaciados dentro de la escala de 4 puntos
Estados hover, focus, active y disabled presentes en cada componente
Alt text en todas las imágenes de portada
Landmarks semánticos presentes (nav, main, footer)
Zoom al 200%: sin scroll horizontal ni clipping de texto
Paleta restringida: solo tokens del sistema, sin colores ad hoc
Dark mode respeta los tokens (si implementado)
Newsletter HTML funciona sin hojas de estilo externas
PDF generado con tipografía embebida y contraste verificado
Lighthouse Performance ≥ 90, Accessibility ≥ 95
Ningún antipatrón listado en la sección 12 presente