83.3K+Descargar
Comercio minorista y comercio electrónico · Nuevo recurso

Sistema de diseño Sainsbury's.

Aplica las pautas públicas de diseño de Sainsbury’s a un flujo completo de selección de franja de recogida: paleta y referencias de tamaño reales, opciones de radio accesibles, resumen actualizado y comentarios locales claros.

Descargar OpenDesign Descargar DESIGN.md
Guía de OpenDesign7 capítulos38 entradas de referenciaGuía de aplicación original
01

Vista previa de la interfaz de sistema de diseño Sainsbury's

Cambia el día y la hora, consulta la tarifa de ejemplo y revisa la selección local.

Elige una franja para recoger el pedidoAbrir ejemplo completo
Interpretación original de HTML a partir de las pautas públicas de Sainsbury’s. · Referencia de implementación
02

Referencia de diseño de sistema de diseño Sainsbury's

Pautas públicas de Sainsbury’s sobre colores, tokens de tamaño, tipografía y componentes. Las tablas de puntos de interrupción publicadas que no coinciden se señalan, en lugar de combinarse.

Roles de la paleta de Sainsbury’s

Fuente
Nombre / ReglaValor / ConfiguraciónUso
Primary brand base#F06C00 Acento de marca y relleno de botones con texto oscuro en este estudio.
Primary hover#E55000 Relleno al pasar el cursor; no es un color adecuado para texto pequeño sobre blanco.
Primary pressed#C15100 Estado presionado.
Primary light#FEF5F0 Fondo de selección y resumen.
Secondary base#7F0442 Acento decorativo de uso moderado.
Monochrome darker#262626 Contenido principal.
Monochrome dark#404040 Contenido complementario.
Monochrome light#D8D8D8 Límites.
Monochrome lighter#F2F2F2 Superficie de opción no disponible.
Success lighter#E6F4ED Superficie de comentarios de revisión local.
Success darker#246127 Texto de comentarios.
Info darker#135CA3 Contorno de foco de la aplicación.

Tokens de tamaño publicados

Fuente
Nombre / ReglaValor / ConfiguraciónUso
xs2pxValor de espaciado de la tabla pública de tokens de tamaño.
sm4pxValor de espaciado de la tabla pública de tokens de tamaño.
md8pxValor de espaciado de la tabla pública de tokens de tamaño.
lg16pxValor de espaciado de la tabla pública de tokens de tamaño.
xl24pxValor de espaciado de la tabla pública de tokens de tamaño.
2xl32pxValor de espaciado de la tabla pública de tokens de tamaño.
3xl40pxValor de espaciado de la tabla pública de tokens de tamaño.
4xl48pxValor de espaciado de la tabla pública de tokens de tamaño.
width-sm1pxToken de borde; distingue los nombres de ancho y radio.
width-base2pxToken de borde; distingue los nombres de ancho y radio.
radius-base2pxToken de borde; distingue los nombres de ancho y radio.
radius-xl12pxToken de borde; distingue los nombres de ancho y radio.
min-width-sm576pxPunto de quiebre del token; distinto del de la página de diseño editorial.
min-width-md768pxPunto de quiebre del token; distinto del de la página de diseño editorial.
min-width-lg992pxPunto de quiebre del token; distinto del de la página de diseño editorial.
min-width-xl1200pxPunto de quiebre del token; distinto del de la página de diseño editorial.

Escala tipográfica de Sainsbury’s

Fuente
Nombre / ReglaValor / ConfiguraciónUso
Body 11rem / 1.5 / Arial RegularTexto principal.
Caption0.875rem / 1.571 / Arial RegularNotas complementarias.
Label 11rem / 1.5 / Arial BoldEtiquetas de controles.
Display 11.25rem / 1.3Tipografía de marca para titulares según las directrices oficiales; aquí se usa una alternativa.
Display 21.5rem / 1.333La alternativa adaptable es Display 3.
Display 31.875rem / 1.333La alternativa adaptable es Display 4.
Display 42.375rem / 1.316La alternativa adaptable es Display 5.
Display 53rem / 1.292La alternativa adaptable es Display 6.
Display 63.75rem / 1.267Tamaño de titular más grande documentado.
Responsive type thresholdlarger than 720pxIndependiente del punto de quiebre de 768px de los tokens de tamaño.
03

Guía completa de sistema de diseño Sainsbury's

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

DESIGN-sainsburys.md

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

Descargar la guía

Sistema de diseño Sainsbury's sistema de diseño Sainsbury's Sistema multimarca y acceso

Elige un tema de marca

Fable admite Sainsbury’s, Argos, Nectar, Tu y Habitat mediante estructuras de componentes compartidas y valores específicos de cada marca. Esta guía utiliza únicamente la paleta de Sainsbury’s. Mezclar el morado de Nectar en una interacción de Sainsbury’s o dar por hecho que todas las marcas usan la misma fuente borraría un límite explícito del sistema. Asocia el tema seleccionado al punto de entrada de la aplicación.

De esta guía de OpenDesign

Distingue las directrices públicas de los paquetes privados

La guía pública para colaboradores describe los componentes de React, Fable Styles y el paquete de tokens de diseño, pero para acceder al código fuente se necesitan credenciales que se solicitan a través de un contacto de Sainsbury’s. Este ejemplo no requiere ninguna: es una implementación original completa de HTML basada en las directrices publicadas. No pretende ejecutar Fable ni inventa comandos de instalación para un registro inaccesible.

Sistema de diseño Sainsbury's sistema de diseño Sainsbury's Paleta y contraste

Usa el naranja con un color de texto adecuado

La documentación indica que el naranja base y el naranja oscuro no alcanzan el contraste requerido para el texto corriente sobre blanco. El ejemplo usa el naranja como relleno con texto negro en los botones, en lugar de texto naranja pequeño sobre blanco o texto blanco pequeño sobre naranja. Una excepción de marca documentada no debe presentarse sin más como garantía de que todas las combinaciones son accesibles.

Mantén la semántica de los comentarios

El resultado de la revisión usa una superficie verde de éxito y texto verde oscuro. Los horarios no disponibles usan una superficie neutra y una etiqueta textual, mientras que los horarios seleccionados muestran tanto un botón de opción marcado como un contorno naranja. El color es una señal complementaria; nunca sustituye el texto sobre el horario, la disponibilidad o la selección.

Sistema de diseño Sainsbury's sistema de diseño Sainsbury's Espaciado, esquinas y límites de puntos de quiebre

Sigue la escala de tamaños publicada

El ejemplo usa 8px entre opciones, 16px dentro de cada horario y 24–32px entre grupos principales. Los controles tienen esquinas de 2px, mientras que el resumen usa el radio documentado de 12px. Estas diferencias expresan la agrupación en lugar de aplicar el mismo estilo de tarjeta redondeada en todas partes.

Deja constancia de la discrepancia en la documentación

La guía de diseño enumera umbrales para dispositivos de 600px y 900px, mientras que la tabla de tokens de tamaño indica 576px, 768px y 992px. La guía tipográfica cambia por separado los tamaños de titulares por encima de 720px. No son nombres intercambiables de una misma escala. Esta implementación elige el umbral de 768px de los tokens de tamaño para las columnas y lo indica explícitamente.

Sistema de diseño Sainsbury's sistema de diseño Sainsbury's Tipografía y contenido útil

Respeta los límites de las fuentes de marca

Los estilos oficiales de titulares de Sainsbury’s usan Mary Ann Extra Bold, mientras que el texto corriente usa Arial. El ejemplo público usa Arial en todo momento porque no incluye archivos de fuentes de marca. Mantiene la escala y la relación entre alturas de línea sin afirmar que la fuente alternativa sea visualmente idéntica. Los niveles semánticos de los encabezados son independientes de los tamaños de titulares.

Haz que la decisión de recogida sea clara

Sistema de diseño Sainsbury's sistema de diseño Sainsbury's Opciones de radio y estado local

Usa opciones dependientes dentro de un grupo

Los controles de día cambian las opciones de horario disponibles y cada horario es un botón de opción nativo dentro de un grupo con nombre. Al cambiar el día, se selecciona el primer horario disponible y se actualiza el resumen. Las opciones no disponibles siguen visibles, pero no se pueden seleccionar. Los botones de opción nativos ofrecen un comportamiento de teclado familiar sin tener que recrearlo con elementos div clicables.

Evita afirmaciones de reserva obsoletas

Al revisar, se muestra una confirmación local que indica que no se ha reservado ningún horario. Si se cambia el día o la hora, el resultado desaparece. Un flujo de producción necesitaría comprobar de nuevo la disponibilidad y recibir una respuesta del servidor antes de confirmar una reserva. El ejemplo aísla el contrato de interacción para que no se confunda la falta de trabajo de backend con una reserva completada.

Sistema de diseño Sainsbury's sistema de diseño Sainsbury's Objetivos táctiles, foco y comportamiento adaptable

Deja espacio suficiente para las opciones

Las directrices públicas de botones recomiendan un objetivo táctil de 48px. Los botones de día y la acción de revisión tienen esa altura, y se puede hacer clic en todo el horario con su etiqueta. Un contorno azul de foco sigue siendo visible sobre superficies naranjas y pálidas. El símbolo decorativo de la cesta está oculto para las tecnologías de asistencia.

Permite que el contenido largo se ajuste

En pantallas estrechas, el resumen aparece después de la lista de opciones y desaparece el símbolo decorativo. Las etiquetas de los horarios y los precios se mantienen en el flujo normal del documento, con altura flexible. Los nombres de ubicación traducidos o más largos no deben quedar recortados dentro de una tarjeta de altura fija; este prototipo en inglés deja espacio para la etapa posterior de localización.

Sistema de diseño Sainsbury's sistema de diseño Sainsbury's Implementación y revisión de agentes

Ejecuta el ejemplo autocontenido

Guarda el ejemplo completo de HTML y sírvelo localmente. Sus tres días y tres horarios por día son datos de ejemplo definidos en el código, y todos los cambios se mantienen en memoria. El código fuente incluye CSS, la creación de botones de opción, la actualización del resumen y la eliminación de comentarios obsoletos, así que no falta ninguna capa de aplicación detrás de la vista previa.

  1. Guarda el archivo completo como index.html.
  2. Elige el martes y comprueba que no se pueda seleccionar el horario de mañana no disponible.
  3. Cambia la hora y revisa el resumen.
  4. Revisa la selección, cambia el día y confirma que se borre el resultado anterior.

Pasa a Fable solo si tienes acceso verificado

Para una integración interna autorizada, obtén acceso real al paquete e inspecciona el tema y las API de componentes actuales. Conserva el comportamiento del ejemplo al sustituir su marcado original por componentes compatibles. Comprueba que la escala de tokens instalada coincida con las referencias públicas antes de considerar una captura de pantalla como prueba de implementación.

  • Usa un único tema de marca de forma coherente.
  • Verifica el acceso al paquete y las API actuales.
  • Comprueba el contraste del texto por separado de la fidelidad a los colores de marca.

Ejemplos de componentes del sistema de diseño de sistema de diseño Sainsbury's

Flujo completo de selección de una franja de recogida

Ejemplo independiente de HTML/CSS/JavaScript con selección del día, franjas de selección única, disponibilidad desactivada y resumen dinámico.

HTML
<!doctype html>
<html lang="en">
  <meta charset="utf-8" /><meta
    name="viewport"
    content="width=device-width,initial-scale=1"
  /><title>Collection slot study</title
  ><style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      background: #fff;
      color: #262626;
      font:
        16px/1.5 Arial,
        sans-serif;
      padding: 32px;
    }
    header {
      border-top: 8px solid #f06c00;
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      gap: 24px;
    }
    h1 {
      font-size: 38px;
      line-height: 1.316;
      margin: 8px 0 16px;
    }
    h2 {
      font-size: 24px;
      line-height: 1.333;
      margin: 0 0 16px;
    }
    .eyebrow,
    small {
      font-size: 14px;
      color: #404040;
    }
    p {
      margin: 8px 0 24px;
    }
    .basket {
      font-size: 48px;
      line-height: 1;
      background: #fef5f0;
      border-radius: 50%;
      width: 96px;
      height: 96px;
      display: grid;
      place-items: center;
      color: #7f0442;
    }
    main {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 32px;
      margin-top: 24px;
    }
    fieldset {
      border: 0;
      padding: 0;
      margin: 0 0 24px;
    }
    legend {
      font-weight: bold;
      margin-bottom: 16px;
    }
    .dates {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    button,
    select {
      font: inherit;
      min-height: 48px;
      padding: 12px 16px;
      border: 1px solid #737373;
      border-radius: 2px;
      background: white;
      color: #262626;
      cursor: pointer;
    }
    .dates button[aria-pressed="true"] {
      border: 2px solid #f06c00;
      background: #fef5f0;
      padding: 11px 15px;
    }
    .slots {
      display: grid;
      gap: 8px;
    }
    .slot {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 16px;
      border: 1px solid #d8d8d8;
      border-radius: 2px;
      cursor: pointer;
    }
    .slot:has(input:checked) {
      border: 2px solid #f06c00;
      padding: 15px;
      background: #fef5f0;
    }
    .slot:has(input:disabled) {
      background: #f2f2f2;
      cursor: default;
    }
    .slot input {
      accent-color: #c15100;
      width: 20px;
      height: 20px;
    }
    .slot strong {
      margin-left: auto;
    }
    .unavailable {
      color: #404040;
    }
    .primary {
      background: #f06c00;
      border: 2px solid #f06c00;
      font-weight: bold;
      color: #000;
    }
    .primary:hover {
      background: #e55000;
      border-color: #e55000;
    }
    .primary:active {
      background: #c15100;
      border-color: #c15100;
    }
    .summary {
      background: #fef5f0;
      border-radius: 12px;
      padding: 24px;
      align-self: start;
    }
    .summary dl {
      margin: 0;
    }
    .summary dt {
      font-size: 14px;
      margin-top: 16px;
    }
    .summary dd {
      margin: 4px 0;
      font-weight: bold;
    }
    #result {
      padding: 16px;
      background: #e6f4ed;
      color: #246127;
      margin-top: 24px;
    }
    button:focus-visible,
    input:focus-visible {
      outline: 3px solid #135ca3;
      outline-offset: 3px;
    }
    footer {
      border-top: 1px solid #d8d8d8;
      margin-top: 32px;
      padding-top: 16px;
      font-size: 14px;
      color: #404040;
    }
    [hidden] {
      display: none !important;
    }
    @media (max-width: 767px) {
      body {
        padding: 16px;
      }
      main {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      h1 {
        font-size: 30px;
      }
      .basket {
        display: none;
      }
      .dates button {
        flex: 1;
      }
      .summary {
        padding: 16px;
      }
    }
  </style>
  <body>
    <header>
      <div>
        <span class="eyebrow">GROCERIES / ORIGINAL COLLECTION STUDY</span>
        <h1>Choose a collection slot</h1>
        <p>
          Select a sample day and time. No order or real availability is
          connected.
        </p>
      </div>
      <div class="basket" aria-hidden="true">▥</div>
    </header>
    <main>
      <section>
        <fieldset>
          <legend>Collection day</legend>
          <div class="dates" id="dates"></div>
        </fieldset>
        <fieldset>
          <legend id="slotLabel">Available times</legend>
          <div id="slots" class="slots"></div>
        </fieldset>
      </section>
      <aside class="summary">
        <h2>Collection details</h2>
        <dl>
          <dt>Sample location</dt>
          <dd>Riverside collection point</dd>
          <dt>Day and time</dt>
          <dd id="selection"></dd>
          <dt>Sample fee</dt>
          <dd id="fee"></dd>
        </dl>
        <p><small>All fees and slots are illustrative.</small></p>
        <button class="primary" id="review">Review collection</button>
        <div id="result" role="status" hidden></div>
      </aside>
    </main>
    <footer>
      Independent HTML interpretation of Sainsbury’s public guidance. Arial
      fallback; no private Fable runtime or brand font assets.
    </footer>
    <script>
      const days = [
        {
          label: "Monday",
          slots: [
            ["09:00–10:00", 1, true],
            ["12:00–13:00", 0, true],
            ["17:00–18:00", 2, false],
          ],
        },
        {
          label: "Tuesday",
          slots: [
            ["09:00–10:00", 0, false],
            ["12:00–13:00", 1, true],
            ["17:00–18:00", 1, true],
          ],
        },
        {
          label: "Wednesday",
          slots: [
            ["09:00–10:00", 0, true],
            ["12:00–13:00", 0, true],
            ["17:00–18:00", 2, true],
          ],
        },
      ];
      let day = 0,
        slot = 0;
      const $ = (id) => document.getElementById(id);
      function update() {
        const choice = days[day].slots[slot];
        $("selection").textContent = days[day].label + ", " + choice[0];
        $("fee").textContent =
          choice[1] === 0 ? "No collection fee" : "£" + choice[1].toFixed(2);
        $("result").hidden = true;
      }
      function render() {
        $("dates").replaceChildren(
          ...days.map((d, i) => {
            let b = document.createElement("button");
            b.textContent = d.label;
            b.setAttribute("aria-pressed", i === day);
            b.onclick = () => {
              day = i;
              slot = d.slots.findIndex((s) => s[2]);
              render();
            };
            return b;
          }),
        );
        $("slotLabel").textContent = days[day].label + " collection times";
        $("slots").replaceChildren(
          ...days[day].slots.map((s, i) => {
            let l = document.createElement("label");
            l.className = "slot";
            let input = document.createElement("input");
            input.type = "radio";
            input.name = "time";
            input.checked = i === slot;
            input.disabled = !s[2];
            input.onchange = () => {
              slot = i;
              update();
            };
            let text = document.createElement("span");
            text.textContent = s[0];
            let fee = document.createElement("strong");
            fee.textContent = s[2]
              ? s[1] === 0
                ? "No fee"
                : "£" + s[1].toFixed(2)
              : "Unavailable";
            l.append(input, text, fee);
            return l;
          }),
        );
        update();
      }
      $("review").onclick = () => {
        $("result").hidden = false;
        $("result").textContent =
          "Local selection ready: " +
          $("selection").textContent +
          ". No slot has been reserved.";
      };
      render();
    </script>
  </body>
</html>

Referencia de código

  • No se necesitan paquetes privados ni credenciales.
04

Configuración del agente de sistema de diseño Sainsbury's

Punto de partida para la implementación

El acceso al paquete de Fable es independiente de este estudio público y autónomo.

sh
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080

Una instrucción para tu proyecto

Instrucción para el agente
Crea un selector de franjas de recogida basado en las directrices de Sainsbury’s a partir de este ejemplo completo de HTML. Mantén una sola paleta de marca, texto negro sobre la acción naranja, botones de selección nativos con etiquetas, un área interactiva de 48 px y la opción de diseño explícita de 768 px. Borra los mensajes de revisión cada vez que cambie la selección. Usa disponibilidad ficticia y no afirmes que se ha utilizado el entorno de ejecución de Fable ni que se ha realizado una reserva.
05

Fuentes y alcance de sistema de diseño Sainsbury's

Estudio de una aplicación de OpenDesign basado en las directrices públicas de Sainsbury’s. Este es un HTML original, no el entorno de ejecución privado de Fable. Usa Arial en lugar de recursos de Mary Ann redistribuidos, y franjas de recogida y tarifas ficticias.