Gomilovers
Design System

Personalidad de marca: cercana, confiable y seria — bienestar para adultos, nunca infantil. Gomitas nutracéuticas que hacen fácil el autocuidado y transmiten salud y confianza. Eso se traduce en: el beneficio como protagonista de cada pieza, radios generosos y botones píldora, gradientes monocromáticos sutiles dentro de una misma línea de color, contraste tipográfico con Poppins ExtraBold, frutas reales solo como acento secundario de salud y frescura, y el corazón reservado al logo (jamás como motivo decorativo recurrente).

Paleta extraída del manual (pp. 20–21). El rojo #E84755 es el color primario y debe dominar CTAs y acentos. El blanco puro transmite claridad y confianza. Los 8 secundarios aportan versatilidad sin alejarse del estilo central — aquí cada uno recibe además un rol de categoría de producto.

Primitivos · Marca

Primitivos · Secundarios (manual p.21)

Tokens semánticos (lo que usan los componentes)

Regla 60 / 30 / 10

≈60% neutrales (blanco, fondos suaves) · ≈30% Rojo Gomilovers (CTAs, acentos, marca) · ≈10% secundarios (categorías, badges, estados). El rojo manda; los secundarios condimentan.

Tabla de contraste (WCAG AA, verificada)

El manual (p. 25) define los elementos gráficos que este sistema tokeniza: gradientes monocromáticos — siempre tonos de una misma línea de color del book, tomados con cuentagotas de la escala de Colores secundarios, con transición sutil —, vectores geométricos limpios y contraste tipográfico con ExtraBold sobredimensionada de fondo. Las categorías se definen por beneficio, nunca por una fruta o un color.

Tokens de gradiente (monocromáticos — 3 tonos de una sola línea)

Paneles por beneficio

Composición canónica: gradiente monocromático + el beneficio como protagonista (titular Poppins ExtraBold) + palabra de fondo rotada al 14% de opacidad. La taxonomía es la de gomilovers.com: Activa tu metabolismo · Descanso y relajación · Energía y líbido. El color de cada panel es un acento de apoyo — lo que identifica a la categoría es el beneficio. Energía y líbido distingue sus dos productos: Para Ella (rojo principal) y Para Él (azul oscuro).

Poppins es la única familia tipográfica de la web (embebida en base64, cero sustitución): titulares y fondos en ExtraBold, cuerpo en Regular, etiquetas y tags en Medium/SemiBold. Las manuscritas del book — DK Lemon Yellow Sun y Please write me a song — son de apoyo gráfico para social media y piezas publicitarias exclusivamente: NUNCA en la web (la marca debe verse seria y confiable, no infantil). Montserrat fue retirada del sistema: no figura en el book.

Escala

/* Carga de fuentes — estrategia de este sistema:
   · Poppins (licencia OFL): embebida en base64 dentro del archivo → cero sustitución, offline.
   · Manuscritas del book (DK Lemon Yellow Sun, Please write me a song): NO se cargan en la web.
     Son exclusivas de social media y piezas publicitarias. */

Base de 4px. Los radios son el dial de personalidad: Gomilovers es juguetona → radios generosos y botones píldora.

Radius

Tres niveles neutros + una sombra teñida de marca para el hover del CTA (refuerza identidad — solo en acciones primarias).

Mobile-first: estilos base para móvil, media queries min-width hacia arriba. El tráfico ecommerce es mayoritariamente móvil.

Cada componente se entrega con todos sus estados: rest, hover, focus-visible, active, disabled, loading y error donde aplique. Touch targets ≥44px siempre.

Botones — variantes

Botones — tamaños y estados

<button class="btn btn-primary">Agregar al carrito</button>
<button class="btn btn-primary" disabled aria-disabled="true">Deshabilitado</button>
<button class="btn btn-primary" aria-busy="true"><span class="spinner"></span>Agregando…</button>

Badges

Formularios — estados

Stepper de cantidad

Barra de envío gratis

Product card — estados

Especificaciones de los patrones de conversión. La demo (demo.html) los implementa funcionando.

PDP — Página de producto

Carrito

Estados vacíos y de borde (obligatorios)

La capa semántica es la que se reapunta: los componentes no cambian. Activa el modo oscuro con data-theme="dark" en <html> (prueba el botón flotante de esta página). El rojo de acción se mantiene — su contraste etiqueta/relleno no depende del tema — pero links y foco usan variantes claras.

[data-theme="dark"]{
  --surface:#121214; --surface-raised:#1C1C20; --surface-sunken:#0D0D0F;
  --text:#F4F2F2; --text-muted:#C6C2C3; --text-subtle:#969096;
  --border:#2C2A2E;
  --color-accent-soft:#3B2026;   /* tinte rojo oscuro */
  --color-link:#FF9AA4;          /* 9.3:1 sobre #121214 */
  --focus-ring:#7FB4E8;          /* azul claro, 3:1 sobre oscuro */
}

Para la tienda real: Tailwind leyendo las variables CSS — una sola fuente de verdad, sin hex duplicados, y el dark mode sigue funcionando gratis. Los componentes HTML/CSS de la demo mapean 1:1 a estas clases.

// tailwind.config.js
module.exports = {
  darkMode: ['selector', '[data-theme="dark"]'],
  theme: { extend: {
    colors: {
      action: 'var(--color-action)',
      'action-hover': 'var(--color-action-hover)',
      'on-action': 'var(--color-on-action)',
      'accent-soft': 'var(--color-accent-soft)',
      link: 'var(--color-link)',
      surface: 'var(--surface)',
      'surface-raised': 'var(--surface-raised)',
      'surface-sunken': 'var(--surface-sunken)',
      ink: 'var(--text)',
      'ink-muted': 'var(--text-muted)',
      line: 'var(--border)',
      'cat-metabolismo': 'var(--color-cat-metabolismo)',
      'cat-descanso': 'var(--color-cat-descanso)',
      'cat-energia': 'var(--color-cat-energia)',
    },
    backgroundImage: {
      'g-brand': 'var(--g-brand)', 'g-amarillo': 'var(--g-amarillo)',
      'g-cian': 'var(--g-cian)', 'g-verde': 'var(--g-verde)', 'g-malva': 'var(--g-malva)',
    },
    borderRadius: { pill: 'var(--r-full)', card: 'var(--r-lg)' },
    boxShadow: { brand: 'var(--shadow-brand)', card: 'var(--shadow-lg)' },
    fontFamily: {
      display: ['Poppins','sans-serif'], body: ['Poppins','sans-serif'],
      tag: ['Poppins','sans-serif'],
    },
  }},
}

// Button.jsx — variantes, tamaños y estados
export function Button({ variant='primary', size='md', loading=false, disabled=false, children, ...props }) {
  const base = 'inline-flex items-center justify-center gap-2 font-bold rounded-pill min-h-[52px] transition-all ' +
               'focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 ' +
               'focus-visible:outline-[var(--focus-ring)] disabled:opacity-45 disabled:cursor-not-allowed';
  const variants = {
    primary:   'bg-action text-on-action text-[19px] hover:bg-action-hover hover:shadow-brand hover:-translate-y-px',
    secondary: 'bg-surface text-link border-2 border-action hover:bg-accent-soft',
    ghost:     'text-ink-muted hover:bg-accent-soft hover:text-link',
  };
  const sizes = { sm:'px-5 py-2 text-base min-h-[44px]', md:'px-8 py-3', lg:'px-10 py-4 text-[21px] min-h-[60px]' };
  return (
    <button className={`${base} ${variants[variant]} ${sizes[size]}`}
            disabled={disabled || loading} aria-busy={loading} {...props}>
      {loading && <span className="spinner" aria-hidden="true" />}
      {children}
    </button>
  );
}