# Système de design Sainsbury's

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

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

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| 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

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| xs | 2px | Valeur d’espacement issue du tableau public des jetons de taille. |
| sm | 4px | Valeur d’espacement issue du tableau public des jetons de taille. |
| md | 8px | Valeur d’espacement issue du tableau public des jetons de taille. |
| lg | 16px | Valeur d’espacement issue du tableau public des jetons de taille. |
| xl | 24px | Valeur d’espacement issue du tableau public des jetons de taille. |
| 2xl | 32px | Valeur d’espacement issue du tableau public des jetons de taille. |
| 3xl | 40px | Valeur d’espacement issue du tableau public des jetons de taille. |
| 4xl | 48px | Valeur d’espacement issue du tableau public des jetons de taille. |
| width-sm | 1px | Jeton de bordure ; distinguez les noms de largeur et de rayon. |
| width-base | 2px | Jeton de bordure ; distinguez les noms de largeur et de rayon. |
| radius-base | 2px | Jeton de bordure ; distinguez les noms de largeur et de rayon. |
| radius-xl | 12px | Jeton de bordure ; distinguez les noms de largeur et de rayon. |
| min-width-sm | 576px | Seuil de rupture défini par un jeton ; différent de celui de la page consacrée à la mise en page éditoriale. |
| min-width-md | 768px | Seuil de rupture défini par un jeton ; différent de celui de la page consacrée à la mise en page éditoriale. |
| min-width-lg | 992px | Seuil de rupture défini par un jeton ; différent de celui de la page consacrée à la mise en page éditoriale. |
| min-width-xl | 1200px | Seuil 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

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Body 1 | 1rem / 1.5 / Arial Regular | Texte principal. |
| Caption | 0.875rem / 1.571 / Arial Regular | Notes complémentaires. |
| Label 1 | 1rem / 1.5 / Arial Bold | Libellés des commandes. |
| Display 1 | 1.25rem / 1.3 | Police de marque pour les titres, selon les recommandations officielles ; police de remplacement utilisée ici. |
| Display 2 | 1.5rem / 1.333 | L’alternative adaptative est Display 3. |
| Display 3 | 1.875rem / 1.333 | L’alternative adaptative est Display 4. |
| Display 4 | 2.375rem / 1.316 | L’alternative adaptative est Display 5. |
| Display 5 | 3rem / 1.292 | L’alternative adaptative est Display 6. |
| Display 6 | 3.75rem / 1.267 | Taille de titre maximale documentée. |
| Responsive type threshold | larger than 720px | Indépendante du seuil de 768px défini par les jetons de taille. |
## 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.

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

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

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

Chaque créneau indique une plage horaire et des frais, ou précise qu’il est indisponible. Le récapitulatif reprend le jour, l’heure et le lieu indicatif sélectionnés. Le bouton principal indique « Vérifier le retrait », ce qui décrit l’étape locale suivante. Aucun compte à rebours, montant total de commande ni confirmation de réservation n’est inventé pour donner à l’exemple un aspect plus commercial.

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

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

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

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

### Un prompt pour votre projet

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

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

- Couleurs de Sainsbury’s Valeurs de la palette et limite de contraste documentée pour l’orange.

- Jetons de taille Valeurs des bordures, de l’espacement et des seuils de rupture.

- Typographie Polices de la marque, échelle et comportement adaptatif.

- Bouton radio Sélection, libellés et regroupement.

- Button Hiérarchie des actions, libellés et cibles tactiles.

- Accès partenaire Accès privé à la base de code et voies d’implémentation.

- Mise en page Grille éditoriale de mise en page ; ses seuils diffèrent de ceux des jetons de taille.

## Système de design Sainsbury's Ressources associées

### Salesforce Lightning

Un guide Lightning pour les tâches exigeant une forte densité d’informations : valeurs réelles d’espacement, de typographie et de couleurs sémantiques, espace de travail modifiable pour les dossiers, validation des champs et historique des activités reflétant les changements locaux.

### Samsung One UI

Découvrez la structure de consultation et d’interaction de One UI, les recommandations de marge de 24dp et l’exigence de mise à l’échelle du texte à 200 % grâce à un aperçu complet et original des préférences de lecture, avec apparence sombre et rétablissement explicite après réinitialisation.

### SAP Fiori

Utilisez le thème Horizon de SAP Fiori avec UI5 Web Components : véritables paramètres de thème, densité du contenu définie explicitement, états de valeur sémantiques et composition d’une demande d’achat avec validation locale.


- [Référence de mise en œuvre](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Source](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Source](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Source](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Référence du code](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Couleurs de Sainsbury’s Valeurs de la palette et limite de contraste documentée pour l’orange.](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Jetons de taille Valeurs des bordures, de l’espacement et des seuils de rupture.](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Typographie Polices de la marque, échelle et comportement adaptatif.](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Bouton radio Sélection, libellés et regroupement.](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Button Hiérarchie des actions, libellés et cibles tactiles.](https://design-systems.sainsburys.co.uk/components/button/)
- [Accès partenaire Accès privé à la base de code et voies d’implémentation.](https://design-systems.sainsburys.co.uk/getting-started/for-third-party-partners/)
- [Mise en page Grille éditoriale de mise en page ; ses seuils diffèrent de ceux des jetons de taille.](https://design-systems.sainsburys.co.uk/foundations/layout/)