Rebeca Pal — Design System (tokens)

Contexto: sitio de la autora Rebeca Pal (rebecapal.kinsta.cloud). Tokens extraídos por muestreo de píxeles de los mockups oficiales (REBECA PAL/Desktop·Mobile·LIBROS.pdf). Paso 1 = prototipo HTML en ~/Documents/rebeca-pal/01-html/. Paso 2 = child theme de Hello Elementor en ~/Documents/rebeca-pal/02-tema/rebeca-pal/ (zip instalable junto a él). Nota: el “negro” del diseño es en realidad ciruela oscuro; el header y la onda del hero comparten el mismo oro.

:root{
  /* color */
  --rp-oro:        #B9AE5E;  /* header, acentos, onda del hero */
  --rp-oro-nota:   #B3A766;  /* notas adhesivas */
  --rp-vino:       #551A1C;  /* botones (Comprar / Enviar) */
  --rp-borgona:    #600912;  /* labios, reglas, acento profundo */
  --rp-ciruela:    #3C192D;  /* footer + "tinta" de titulares */
  --rp-hueso:      #F4EFE9;  /* botón claro / superficies suaves */
  --rp-fondo:      #F8F8F6;
  --rp-blanco:     #FFFFFF;
  --rp-texto:      #463E42;  /* cuerpo */
  --rp-meta:       #8B7F85;  /* metadatos */
  --rp-input:      #EAE5E8;
 
  /* tipografía */
  --rp-font-sans:   "Jost", sans-serif;             /* titulares, nav, botones */
  --rp-font-serif:  "Cormorant Garamond", serif;    /* cuerpo, citas */
  --rp-font-script: "Ms Madi", cursive;             /* firma (producción: logo SVG) */
 
  /* escala */
  --rp-fs-h2:      clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);  /* títulos de sección */
  --rp-fs-meta:    .8125rem;                                 /* "Ficción · 2022" */
  --rp-fs-cuerpo:  1.1875rem;                                /* 19px */
  --rp-fs-btn:     .9375rem;
 
  /* tracking */
  --rp-ls-h2:   .22em;
  --rp-ls-nav:  .20em;
 
  /* forma y espacio */
  --rp-ancho:  1140px;   /* Content Width del kit de Elementor */
  --rp-seccion: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --rp-radio-btn: 7px;
  --rp-sombra-card: 0 22px 45px -12px rgb(60 25 45 / .18);
  --rp-sombra-portada: 0 30px 60px -18px rgb(60 25 45 / .35);
}

Kit de Elementor (Site Settings):

Global Colors:  Primary #B9AE5E · Secondary #3C192D · Text #463E42 · Accent #600912
                Custom: Vino #551A1C · Hueso #F4EFE9 · Fondo #F8F8F6
Typography:     Primary Jost 500 (titulares, uppercase, tracking .14–.22em)
                Secondary Jost 400–500
                Text Cormorant Garamond 500 · 19px / 1.7
                Accent Jost 500 · 15px (botones)
Layout:         Content Width 1140px

Assets reales (extraídos de los PDF con pdfimages -all): hero con onda dorada y labios integrados, foto YO SOY, silueta de cabeza con texto (PNG con alpha), 3 portadas, notas adhesivas oro/vino con clip (PNG con alpha) → 01-html/assets/.

Pendiente de producción: logo “Rebeca Pal” como SVG/imagen (el prototipo usa Ms Madi), menú hamburguesa en móvil (Elementor Nav Menu), formulario de contacto real (widget Forms), sliders con dots (Elementor Image Carousel o similar).