83.3K+Télécharger
Commerce de détail · Nouvelle ressource

Système de design Sainsbury's.

Appliquez les recommandations publiques de Sainsbury’s en matière de design à un parcours complet de réservation d’un créneau de collecte : références réelles de palette et de tailles, choix par boutons radio accessibles, récapitulatif actualisé et retour local fidèle à la réalité.

Télécharger OpenDesign Télécharger DESIGN.md
Guide OpenDesign7 chapitres38 entrées de référenceGuide de l’application d’origine
01

Aperçu de l’interface système de design Sainsbury's

Modifiez le jour et l’heure, consultez les frais indicatifs, puis vérifiez la sélection locale.

Choisissez un créneau de retraitOuvrir l’exemple complet
Interprétation originale des recommandations publiques de Sainsbury’s par HTML. · Référence de mise en œuvre
02

Référence de conception système de design Sainsbury's

Recommandations publiques de Sainsbury’s sur les couleurs, les jetons de taille, la typographie et les composants. Les tableaux de seuils de rupture publiés qui se contredisent sont signalés plutôt que fusionnés.

Rôles de la palette Sainsbury’s

Source
Nom / règleValeur / configurationUtilisation
Primary brand base#F06C00 Couleur d’accent de la marque et fond du bouton, avec du texte sombre dans cette étude.
Primary hover#E55000 Fond au survol ; ne convient pas au texte de petite taille sur fond blanc.
Primary pressed#C15100 État actif.
Primary light#FEF5F0 Fond de sélection et de récapitulatif.
Secondary base#7F0442 Accent décoratif à utiliser avec parcimonie.
Monochrome darker#262626 Contenu principal.
Monochrome dark#404040 Contenu complémentaire.
Monochrome light#D8D8D8 Contours.
Monochrome lighter#F2F2F2 Surface d’une option indisponible.
Success lighter#E6F4ED Surface de retour pour la révision locale.
Success darker#246127 Texte de retour.
Info darker#135CA3 Contour de focus de l’application.

Jetons de taille publiés

Source
Nom / règleValeur / configurationUtilisation
xs2pxValeur d’espacement issue du tableau public des jetons de taille.
sm4pxValeur d’espacement issue du tableau public des jetons de taille.
md8pxValeur d’espacement issue du tableau public des jetons de taille.
lg16pxValeur d’espacement issue du tableau public des jetons de taille.
xl24pxValeur d’espacement issue du tableau public des jetons de taille.
2xl32pxValeur d’espacement issue du tableau public des jetons de taille.
3xl40pxValeur d’espacement issue du tableau public des jetons de taille.
4xl48pxValeur d’espacement issue du tableau public des jetons de taille.
width-sm1pxJeton de bordure ; distinguez les noms de largeur et de rayon.
width-base2pxJeton de bordure ; distinguez les noms de largeur et de rayon.
radius-base2pxJeton de bordure ; distinguez les noms de largeur et de rayon.
radius-xl12pxJeton de bordure ; distinguez les noms de largeur et de rayon.
min-width-sm576pxSeuil de rupture défini par un jeton ; différent de celui de la page consacrée à la mise en page éditoriale.
min-width-md768pxSeuil de rupture défini par un jeton ; différent de celui de la page consacrée à la mise en page éditoriale.
min-width-lg992pxSeuil de rupture défini par un jeton ; différent de celui de la page consacrée à la mise en page éditoriale.
min-width-xl1200pxSeuil de rupture défini par un jeton ; différent de celui de la page consacrée à la mise en page éditoriale.

Échelle typographique de Sainsbury’s

Source
Nom / règleValeur / configurationUtilisation
Body 11rem / 1.5 / Arial RegularTexte principal.
Caption0.875rem / 1.571 / Arial RegularNotes complémentaires.
Label 11rem / 1.5 / Arial BoldLibellés des commandes.
Display 11.25rem / 1.3Police de marque pour les titres, selon les recommandations officielles ; police de remplacement utilisée ici.
Display 21.5rem / 1.333L’alternative adaptative est Display 3.
Display 31.875rem / 1.333L’alternative adaptative est Display 4.
Display 42.375rem / 1.316L’alternative adaptative est Display 5.
Display 53rem / 1.292L’alternative adaptative est Display 6.
Display 63.75rem / 1.267Taille de titre maximale documentée.
Responsive type thresholdlarger than 720pxIndépendante du seuil de 768px défini par les jetons de taille.
03

Guide complet de système de design Sainsbury's

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

DESIGN-sainsburys.md

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

Télécharger le guide

Système de design Sainsbury's Système multimarque de système de design Sainsbury's

Choisissez un thème de marque

Fable prend en charge Sainsbury’s, Argos, Nectar, Tu et Habitat au moyen de structures de composants partagées et de valeurs propres à chaque marque. Ce guide utilise uniquement la palette Sainsbury’s. Mélanger le violet de Nectar à une interaction Sainsbury’s ou supposer que toutes les marques utilisent la même police effacerait une distinction explicite du système. Associez le thème sélectionné au point d’entrée de l’application.

Extrait de ce guide OpenDesign

Distinguez les recommandations publiques des packages privés

Le guide public destiné aux partenaires décrit les composants React, Fable Styles et le package de jetons de design, mais l’accès à la base de code nécessite des identifiants à demander auprès d’un contact de Sainsbury’s. Cet exemple n’en a pas besoin : il s’agit d’une réalisation originale complète en HTML, fondée sur les recommandations publiées. Elle ne prétend pas exécuter Fable et n’invente pas de commandes d’installation pour un registre inaccessible.

Palette et contraste de système de design Sainsbury's

Associez l’orange à une couleur de texte adaptée

La documentation précise que l’orange de base et l’orange foncé n’offrent pas un contraste suffisant pour le texte courant sur fond blanc. Dans cet exemple, l’orange sert de fond avec du texte noir sur le bouton, plutôt que de couleur pour du petit texte sur blanc ou du petit texte blanc sur orange. Une exception de marque mentionnée dans la documentation ne doit pas laisser entendre que toutes les associations de couleurs sont accessibles.

Conservez la sémantique des retours

Le résultat de la révision utilise une surface de réussite verte et du texte vert foncé. Les créneaux indisponibles ont une surface neutre et un libellé explicite, tandis que les créneaux sélectionnés sont signalés à la fois par un bouton radio coché et un contour orange. La couleur est un repère complémentaire ; elle ne remplace jamais les informations sur l’horaire, la disponibilité ou la sélection.

Espacement, arrondis et seuils de rupture de système de design Sainsbury's

Respectez l’échelle de tailles publiée

L’exemple prévoit 8px entre les options, 16px à l’intérieur de chaque créneau et 24–32px entre les groupes principaux. Les commandes ont un arrondi de 2px, tandis que le récapitulatif utilise le rayon documenté de 12px. Ces différences marquent la structure des groupes au lieu d’appliquer partout le même style de carte arrondie.

Signalez l’écart entre les documents

Le guide de mise en page indique des seuils d’affichage de 600px et 900px, tandis que le tableau des jetons de taille en indique de 576px, 768px et 992px. Le guide typographique modifie séparément les tailles de titre au-delà de 720px. Ces valeurs ne sont pas des noms interchangeables pour une même échelle. Cette implémentation choisit le seuil de 768px des jetons de taille pour les colonnes et précise explicitement ce choix.

Typographie et contenu utile de système de design Sainsbury's

Respectez les limites d’utilisation des polices de marque

Les styles de titre officiels de Sainsbury’s utilisent Mary Ann Extra Bold, tandis que le texte courant utilise Arial. L’exemple public utilise Arial partout, car il ne comprend aucun fichier de police de marque. Il conserve l’échelle et les rapports de hauteur de ligne sans prétendre que la police de remplacement est visuellement identique. Les niveaux de titre sémantiques restent indépendants des tailles d’affichage.

Présentez clairement le choix du créneau de retrait

Options radio et état local de système de design Sainsbury's

Utilisez des choix dépendants au sein d’un groupe

Les commandes de jour déterminent les créneaux disponibles ; chaque créneau est un bouton radio natif appartenant à un même groupe nommé. Changer de jour sélectionne le premier créneau disponible et met à jour le récapitulatif. Une option indisponible reste visible, mais ne peut pas être sélectionnée. Les boutons radio natifs offrent un comportement clavier familier, sans qu’il soit nécessaire de le recréer avec des div cliquables.

Éviter les confirmations de réservation obsolètes

La validation affiche une confirmation locale et précise qu’aucun créneau n’a été réservé. Modifier le jour ou l’heure masque ce résultat. Dans un parcours de production, il faudrait vérifier de nouveau les disponibilités et recevoir une réponse du serveur avant de confirmer une réservation. Cet exemple isole le fonctionnement de l’interaction afin que l’absence de traitement côté serveur ne puisse pas être confondue avec une réservation effectuée.

Système de design Sainsbury's système de design Sainsbury's Cibles tactiles, focus et comportement adaptatif

Prévoir suffisamment d’espace pour les choix

Les recommandations publiques sur les boutons préconisent une cible tactile de 48px. Les boutons de jour et l’action de validation ont cette hauteur, et toute la zone de chaque créneau libellé est cliquable. Un contour de focus bleu reste visible sur les surfaces orange et pâles. Le symbole décoratif du panier est masqué aux technologies d’assistance.

Laisser le contenu long revenir à la ligne

Sur les écrans étroits, le récapitulatif apparaît après la liste des choix et le symbole décoratif disparaît. Les libellés et les prix des créneaux restent dans le flux normal du document, avec une hauteur flexible. Le nom traduit ou plus long d’un lieu ne doit pas être tronqué dans une carte à hauteur fixe ; ce prototype en anglais réserve l’espace nécessaire à une étape ultérieure de localisation.

Système de design Sainsbury's système de design Sainsbury's Implémentation et examen par l’agent IA

Exécuter l’exemple autonome

Enregistrez l’exemple complet de HTML et servez-le en local. Ses trois jours et ses trois créneaux par jour sont des données d’exemple définies dans le code, et toutes les modifications restent en mémoire. Le code source comprend le CSS, la création des boutons radio, la mise à jour du récapitulatif et l’effacement des messages obsolètes : aucune couche applicative ne manque derrière l’aperçu.

  1. Enregistrez le fichier complet sous le nom index.html.
  2. Choisissez mardi et vérifiez qu’il est impossible de sélectionner le créneau du matin indisponible.
  3. Modifiez l’heure et examinez le récapitulatif.
  4. Validez, puis changez de jour et vérifiez que l’ancien résultat disparaît.

N’utiliser Fable qu’avec un accès vérifié

Pour une intégration interne autorisée, obtenez un accès réel au package et examinez le thème et les API des composants actuels. Conservez le comportement de cet exemple tout en remplaçant son balisage d’origine par des composants pris en charge. Vérifiez que l’échelle de jetons installée correspond aux références publiques avant de considérer une capture d’écran comme preuve de l’implémentation.

  • Utilisez un seul thème de marque de façon cohérente.
  • Vérifiez l’accès au package et les API actuelles.
  • Vérifiez le contraste du texte indépendamment de la fidélité aux couleurs de la marque.

Système de design Sainsbury's système de design Sainsbury's Exemples de composants du système de design

Parcours complet de sélection d’un créneau de retrait

HTML/CSS/JavaScript indépendant avec sélection du jour, créneaux sous forme de boutons radio, disponibilités désactivées et récapitulatif dynamique.

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>

Référence du code

  • Aucun package privé ni identifiant d’accès n’est nécessaire.
04

Système de design Sainsbury's Configuration de l’agent IA

Point de départ de l’implémentation

L’accès au package Fable est distinct de cette étude publique et autonome.

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

Un prompt pour votre projet

Prompt pour l’agent IA
Créez un sélecteur de créneaux de retrait inspiré des recommandations de Sainsbury’s à partir de cet exemple complet de HTML. Utilisez une seule palette de marque, du texte noir sur le bouton d’action orange, des boutons radio natifs avec libellés, une cible de 48px et le choix explicite d’une mise en page à 768px. Effacez le message de validation à chaque modification de la sélection. Utilisez des disponibilités fictives et ne prétendez pas utiliser le moteur Fable ni avoir effectué une réservation.
05

Système de design Sainsbury's Sources et périmètre

Étude d’application OpenDesign fondée sur les recommandations publiques de Sainsbury’s. Il s’agit d’un HTML original, et non du moteur Fable privé. Elle utilise Arial plutôt que des fichiers Mary Ann redistribués, ainsi que des créneaux et des frais de retrait fictifs.