Sistema de diseño

Documentación viva de los componentes, tokens y patrones usados en los flujos de alta de cliente. Cada componente incluye anatomía, estados, specs en pixeles y nombres de token listos para llevar a Figma o producción.

Principios

Claridad sobre densidad. Etiquetas siempre arriba del campo, asterisco rojo opcional para requeridos, validación visible al lado del input.

Rojo de marca como acento. El primario se reserva para acciones, headers de sección y enlaces. Nunca como fondo de bloques largos.

Confirmación verde inmediata. Cada vez que un valor se valida, aparece el check verde a la derecha del campo. No hay duda de qué sigue.

Color #color

Tres familias: marca, neutros e indicadores semánticos. Los nombres siguen familia/escala y son directamente compatibles con Figma Variables.

Brand · Primary

Neutrals · Ink

Semantic

Retail · Contextual

Colores exclusivos para el contexto de e-commerce: MSI, descuentos, liquidación y exclusivos de marca.

Tipografía #typography

Figtree para todo el producto · Manrope para tokens, código y specs. Cargar pesos 400, 500, 600 y 700.

Escala tipográfica

Espaciado #spacing

Grid base 4 px. Usa sp/2–sp/4 dentro de componentes; sp/6+ entre secciones de página.

Radios #radius

Cinco escalones. radius/md es el default para inputs y botones; radius/lg para botones grandes y cards.

Elevación #elevation

Cinco niveles, de pop sutil a modal. Las sombras usan negro RGBA con dos capas para un degradado natural.

Iconografía #iconography

24×24 px, stroke 2 px, terminaciones round. Heredan color con currentColor.

Button #button

Cuatro variantes (primary, secondary, ghost, destructive) en tres tamaños (SM 32 · MD 40 · LG 48). El primary es la única acción de continuar — máximo uno por vista.

// Variantes
<button class="btn btn-primary">Siguiente</button>
<button class="btn btn-secondary">Cancelar</button>
<button class="btn btn-ghost">Saltar</button>
<button class="btn btn-destructive">Eliminar</button>

Variantes sobre fondo oscuro

Usadas en componentes con fondo oscuro como la Sears Card CTA. btn-white es el CTA principal; btn-dark es el CTA principal sobre fondo claro cuando la marca no aplica.

// Sobre fondo oscuro
<button class="btn btn-white">Solicitar ahora</button>

// Dark solid
<button class="btn btn-dark">Agregar al carrito</button>

Estados White · Dark

Estados · Primary / Secondary / Ghost / Destructive

Tamaños

<button class="btn btn-primary btn-sm">Botón SM</button>
<button class="btn btn-primary">Botón MD</button>
<button class="btn btn-primary btn-lg">Botón LG</button>

Specs

Input #input

Campo base. El asterisco rojo indica requerido; el check verde a la derecha aparece cuando el valor pasa validación.

<label class="field-label">
  <span class="req">*</span>Apellido Paterno
</label>
<input class="input" value="CORONEL"/>
<span class="valid-icon">✓</span>

Estados

Specs

Select #select

Mismo chasis que Input. Caret a la derecha; cuando hay valor mostramos opcionalmente clear (×) y separador (|).

Date picker #datepicker

Tres campos numéricos separados por /. Auto-avance al completar cada par, validación al perder foco.

Estado abierto · Calendario

Checkbox #checkbox

Selección múltiple. Caja 18×18 px, radio 4 px. El estado activo usa el rojo de marca.

Radio #radio

Selección única en un grupo. Mismo tamaño que checkbox; punto interior 8 px.

Toggle / Sí–No #toggle

El switch para preferencias persistentes; el grupo Sí/No para decisiones binarias dentro de un formulario.

Badge & Tag #badge

Badges para estado (no interactivos), tags para filtros (removibles).

Alert #alert

Mensaje inline persistente. Borde izquierdo 4 px en el tono semántico, fondo en versión 100, texto en 800.

Toast #toast

Confirmación temporal en esquina inferior derecha. Auto-dismiss 4 s para success/info, manual para errores.

Modal #modal

Bloqueante con overlay 40% negro. Centra título en rojo + cuerpo + botones (secundario izquierda, primario derecha).

Tabs #tabs

Para alternar vistas hermanas dentro de la misma pantalla. Indicador inferior 2 px en el tono primario.

Stepper #stepper

Para procesos lineales obligatorios. Pasos completados con check, paso actual con número en marca, futuros en gris.

Progress #progress

Barra horizontal lineal. 6 px de alto, radio completo. Para indeterminada usar gradiente animado.

Header / Nav #header

Barra superior fija con logo, navegación primaria, acciones e ícono de carrito/sesión.

Default

InicioProductosCréditoServiciosSucursales

Iniciar sesión

Card #card

Contenedor genérico. Border 1 px, radius 10 px, padding sp/5 default; sombra shadow/sm opcional.

Table #table

Headers en mayúsculas + mono, filas con divisor sutil. Estado en columna dedicada con badge.

Product Card #product-card

Tarjeta de producto con imagen, badges contextuales, calificación, sistema de precios y acciones. Ancho mínimo 200 px, hover con elevación sutil.

// Product Card
<div class="product-card">
  <div class="product-card-img">
    <img src="..." alt="Producto"/>
    <div class="product-card-badges">
      <span class="product-badge product-badge-discount">-30%</span>
      <span class="product-badge product-badge-msi">MSI</span>
    </div>
  </div>
  <div class="product-card-body">
    <div class="product-card-brand">Samsung</div>
    <div class="product-card-name">Televisor QLED 55"</div>
    <div class="product-card-pricing">
      <span class="price-current">$14,999</span>
      <span class="price-original">$21,499</span>
      <div class="price-msi">12 MSI $1,249/mes</div>
    </div>
    <div class="product-card-actions">
      <button class="btn btn-primary">Agregar</button>
    </div>
  </div>
</div>

Badge Reference

Pricing System #pricing

Jerarquía de precios para PDP: precio vigente con énfasis 700 bold, precio original tachado en gris, ahorro en rojo, bloque MSI con fondo verde y número de meses en bold.

// Pricing Block
<div class="pricing-block">
  <div class="pricing-row">
    <span class="pricing-current">
      <span class="pricing-sup">$</span>14,999
    </span>
    <span class="pricing-was">$21,499</span>
    <span class="pricing-save-pct">-30%</span>
  </div>
  <div class="pricing-msi-block">
    <div class="pricing-msi-text">
      <div class="amount">12 MSI de $1,249</div>
      <div class="label">Tarjeta Sears · Sin intereses</div>
    </div>
  </div>
</div>

Sears Card CTA #sears-card

Bloque de conversión para promocionar la Tarjeta Sears. Gradiente oscuro de marca, destaque del beneficio principal (% de ahorro o meses sin intereses), y CTA primario blanco.

// Sears Card CTA
<div class="sears-card-cta">
  <div class="scc-header">
    <div class="scc-logo">Sears<span>Card</span></div>
    <div class="scc-chip">Exclusivo</div>
  </div>
  <div class="scc-benefit">
    <div class="amount">18 MSI</div>
    <div class="label">Sin intereses en todo Sears</div>
  </div>
  <div class="scc-perks">...</div>
  <div class="scc-actions">
    <button class="btn">Solicitar ahora</button>
  </div>
</div>

Motion #motion

Tokens de duración y curvas de aceleración. Usa duration/fast para micro-interacciones de UI; duration/normal para transiciones de pantalla.

Duraciones

Curvas (Easing)

Accesibilidad #accessibility

El sistema cumple WCAG 2.1 AA. Cada interactivo tiene un anillo de foco visible, área de toque mínima de 44 × 44 px y etiqueta aria cuando el texto no es suficiente.

Focus ring

Contrastes mínimos (WCAG AA)

Áreas de toque mínimas

Formulario de alta · Datos personales #pat-form

Composición de Input + Select + Date + botón primario. Grid de 2 columnas en desktop, 1 en móvil.

Aviso de privacidad #pat-aviso

Layout centrado: título en rojo, cuerpo justificado, dos checkboxes alineados a la izquierda dentro de un bloque centrado, CTA primario.

Términos & código SMS #pat-terms

Combinación de toggle Sí/No + campo telefónico + código SMS con botón "Solicitar código" alineado al input.

Validación de identidad por QR #pat-id

Bloque QR + lista de instrucciones, separador con dot, fallback de SMS, CTA primario.