# Sistema de diseño Sainsbury's

## 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.

## 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

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| 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

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| xs | 2px | Valor de espaciado de la tabla pública de tokens de tamaño. |
| sm | 4px | Valor de espaciado de la tabla pública de tokens de tamaño. |
| md | 8px | Valor de espaciado de la tabla pública de tokens de tamaño. |
| lg | 16px | Valor de espaciado de la tabla pública de tokens de tamaño. |
| xl | 24px | Valor de espaciado de la tabla pública de tokens de tamaño. |
| 2xl | 32px | Valor de espaciado de la tabla pública de tokens de tamaño. |
| 3xl | 40px | Valor de espaciado de la tabla pública de tokens de tamaño. |
| 4xl | 48px | Valor de espaciado de la tabla pública de tokens de tamaño. |
| width-sm | 1px | Token de borde; distingue los nombres de ancho y radio. |
| width-base | 2px | Token de borde; distingue los nombres de ancho y radio. |
| radius-base | 2px | Token de borde; distingue los nombres de ancho y radio. |
| radius-xl | 12px | Token de borde; distingue los nombres de ancho y radio. |
| min-width-sm | 576px | Punto de quiebre del token; distinto del de la página de diseño editorial. |
| min-width-md | 768px | Punto de quiebre del token; distinto del de la página de diseño editorial. |
| min-width-lg | 992px | Punto de quiebre del token; distinto del de la página de diseño editorial. |
| min-width-xl | 1200px | Punto de quiebre del token; distinto del de la página de diseño editorial. |
### Escala tipográfica de Sainsbury’s

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Body 1 | 1rem / 1.5 / Arial Regular | Texto principal. |
| Caption | 0.875rem / 1.571 / Arial Regular | Notas complementarias. |
| Label 1 | 1rem / 1.5 / Arial Bold | Etiquetas de controles. |
| Display 1 | 1.25rem / 1.3 | Tipografía de marca para titulares según las directrices oficiales; aquí se usa una alternativa. |
| Display 2 | 1.5rem / 1.333 | La alternativa adaptable es Display 3. |
| Display 3 | 1.875rem / 1.333 | La alternativa adaptable es Display 4. |
| Display 4 | 2.375rem / 1.316 | La alternativa adaptable es Display 5. |
| Display 5 | 3rem / 1.292 | La alternativa adaptable es Display 6. |
| Display 6 | 3.75rem / 1.267 | Tamaño de titular más grande documentado. |
| Responsive type threshold | larger than 720px | Independiente del punto de quiebre de 768px de los tokens de tamaño. |
## 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.

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

## 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.

### 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

Cada horario incluye un intervalo y una tarifa o una etiqueta de no disponibilidad. El resumen repite el día y la hora seleccionados, así como la ubicación de ejemplo. La acción principal indica «Revisar recogida», que describe el siguiente paso local. No se inventan temporizadores, totales del pedido ni confirmaciones de reserva para que el ejemplo parezca más comercial.

## 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.

```
<!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.

## 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.

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

### Una instrucción para tu proyecto

```
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.
```

## 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.

- Colores de Sainsbury’s Valores de la paleta y limitación documentada del contraste del naranja.

- Tokens de tamaño Valores de bordes, espaciado y puntos de ruptura.

- Tipografía Tipografías de marca, escala y comportamiento adaptable.

- Botón de selección Selección, etiquetas y agrupación.

- Button Jerarquía de acciones, etiquetas y áreas interactivas.

- Acceso de socios Acceso al código base privado y rutas de implementación.

- Diseño Cuadrícula de diseño editorial; sus puntos de ruptura difieren de los tokens de tamaño.

## Recursos relacionados de sistema de diseño Sainsbury's

### Salesforce Lightning

Una guía de Lightning para gestionar registros densos: espaciado, tipografía y colores semánticos reales; un espacio de trabajo editable para casos; validación de campos y un historial de actividad que refleja los cambios locales.

### Samsung One UI

Descubre la estructura de visualización e interacción de One UI, las pautas de márgenes de 24dp y el requisito de escalado de texto al 200% mediante una vista previa original y completa de las preferencias de lectura, con apariencia oscura y una opción explícita para restaurar la configuración.

### SAP Fiori

Usa el tema Horizon de SAP Fiori mediante UI5 Web Components: parámetros de tema reales, densidad de contenido explícita, estados de valor semánticos y una composición de solicitud de compra con validación local.


- [Referencia de implementación](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Fuente](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Fuente](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Fuente](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Referencia de código](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Colores de Sainsbury’s Valores de la paleta y limitación documentada del contraste del naranja.](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Tokens de tamaño Valores de bordes, espaciado y puntos de ruptura.](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Tipografía Tipografías de marca, escala y comportamiento adaptable.](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Botón de selección Selección, etiquetas y agrupación.](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Button Jerarquía de acciones, etiquetas y áreas interactivas.](https://design-systems.sainsburys.co.uk/components/button/)
- [Acceso de socios Acceso al código base privado y rutas de implementación.](https://design-systems.sainsburys.co.uk/getting-started/for-third-party-partners/)
- [Diseño Cuadrícula de diseño editorial; sus puntos de ruptura difieren de los tokens de tamaño.](https://design-systems.sainsburys.co.uk/foundations/layout/)