83.3K+Download
Einzelhandel · Neue Ressource

Sainsbury's Designsystem.

Setzen Sie Sainsburys öffentliche Designrichtlinien für einen vollständigen Ablauf zur Auswahl eines Lieferzeitfensters um: mit echten Farb- und Größenreferenzen, barrierefreien Radio-Optionen, einer aktualisierten Zusammenfassung und einer transparenten lokalen Rückmeldung.

OpenDesign herunterladen DESIGN.md herunterladen
OpenDesign-Leitfaden7 Kapitel38 ReferenzeinträgeOriginaler Anwendungsleitfaden
01

Sainsbury's Designsystem-Oberflächenvorschau

Ändern Sie einen Tag und eine Uhrzeit, sehen Sie sich die Beispielgebühr an und prüfen Sie anschließend die lokale Auswahl.

Abholzeit auswählenVollständiges Beispiel öffnen
Originale Interpretation der öffentlichen Sainsbury’s-Richtlinien von HTML. · Implementierungsreferenz
02

Sainsbury's Designsystem-Designreferenz

Öffentliche Richtlinien von Sainsbury’s zu Farben, Größentokens, Typografie und Komponenten. Widersprüchliche veröffentlichte Breakpoint-Tabellen werden kenntlich gemacht, statt zusammengeführt zu werden.

Farbrollen von Sainsbury’s

Quelle
Name / RegelWert / KonfigurationVerwendung
Primary brand base#F06C00 Markenakzent und Schaltflächenfläche, in dieser Studie mit dunkler Schrift.
Primary hover#E55000 Hover-Fläche; auf Weiß nicht für kleinen Text geeignet.
Primary pressed#C15100 Gedrückter Zustand.
Primary light#FEF5F0 Hintergrund für Auswahl und Zusammenfassung.
Secondary base#7F0442 Sparsamer dekorativer Akzent.
Monochrome darker#262626 Primärinhalt.
Monochrome dark#404040 Ergänzende Inhalte.
Monochrome light#D8D8D8 Begrenzungen.
Monochrome lighter#F2F2F2 Fläche für nicht verfügbare Optionen.
Success lighter#E6F4ED Fläche für lokales Feedback zur Überprüfung.
Success darker#246127 Feedbacktext.
Info darker#135CA3 Fokusumrandung der Anwendung.

Veröffentlichte Größentokens

Quelle
Name / RegelWert / KonfigurationVerwendung
xs2pxAbstandswert aus der öffentlichen Tabelle der Größentokens.
sm4pxAbstandswert aus der öffentlichen Tabelle der Größentokens.
md8pxAbstandswert aus der öffentlichen Tabelle der Größentokens.
lg16pxAbstandswert aus der öffentlichen Tabelle der Größentokens.
xl24pxAbstandswert aus der öffentlichen Tabelle der Größentokens.
2xl32pxAbstandswert aus der öffentlichen Tabelle der Größentokens.
3xl40pxAbstandswert aus der öffentlichen Tabelle der Größentokens.
4xl48pxAbstandswert aus der öffentlichen Tabelle der Größentokens.
width-sm1pxRahmentoken; Namen für Breite und Radius getrennt halten.
width-base2pxRahmentoken; Namen für Breite und Radius getrennt halten.
radius-base2pxRahmentoken; Namen für Breite und Radius getrennt halten.
radius-xl12pxRahmentoken; Namen für Breite und Radius getrennt halten.
min-width-sm576pxBreakpoint des Tokens; weicht von der redaktionellen Layoutseite ab.
min-width-md768pxBreakpoint des Tokens; weicht von der redaktionellen Layoutseite ab.
min-width-lg992pxBreakpoint des Tokens; weicht von der redaktionellen Layoutseite ab.
min-width-xl1200pxBreakpoint des Tokens; weicht von der redaktionellen Layoutseite ab.

Typografische Skala von Sainsbury’s

Quelle
Name / RegelWert / KonfigurationVerwendung
Body 11rem / 1.5 / Arial RegularHaupttext.
Caption0.875rem / 1.571 / Arial RegularErgänzende Hinweise.
Label 11rem / 1.5 / Arial BoldBeschriftungen von Steuerelementen.
Display 11.25rem / 1.3Markenschrift für Display-Texte laut offiziellen Richtlinien; hier mit Ersatzschrift.
Display 21.5rem / 1.333Responsive Alternative ist Display 3.
Display 31.875rem / 1.333Responsive Alternative ist Display 4.
Display 42.375rem / 1.316Responsive Alternative ist Display 5.
Display 53rem / 1.292Responsive Alternative ist Display 6.
Display 63.75rem / 1.267Größte dokumentierte Display-Größe.
Responsive type thresholdlarger than 720pxUnabhängig vom Größentoken-Breakpoint bei 768px.
03

Sainsbury's Designsystem – Vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

DESIGN-sainsburys.md

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

Leitfaden herunterladen

Sainsbury's Designsystem Sainsbury's Designsystem Mehrmarkensystem und Zugriff

Markenthema auswählen

Fable unterstützt Sainsbury’s, Argos, Nectar, Tu und Habitat mit gemeinsamen Komponentenstrukturen und markenspezifischen Werten. Dieser Leitfaden verwendet ausschließlich die Farbpalette von Sainsbury’s. Nectar-Violett in eine Sainsbury’s-Interaktion zu mischen oder anzunehmen, dass alle Marken dieselbe Schrift verwenden, würde eine ausdrücklich festgelegte Systemgrenze verwischen. Verknüpfen Sie das ausgewählte Thema mit dem Einstiegspunkt der Anwendung.

Aus diesem OpenDesign-Leitfaden

Öffentliche Richtlinien von privaten Paketen unterscheiden

Der öffentliche Partnerleitfaden beschreibt React-Komponenten, Fable Styles und das Design-Token-Paket. Für den Zugriff auf die Codebasis sind jedoch Zugangsdaten erforderlich, die über eine Kontaktperson bei Sainsbury’s angefordert werden müssen. Dieses Beispiel benötigt keine Zugangsdaten: Es ist eine vollständige, eigenständige Ausarbeitung von HTML auf Grundlage veröffentlichter Richtlinien. Es gibt weder vor, Fable auszuführen, noch erfindet es Installationsbefehle für eine nicht zugängliche Registry.

Sainsbury's Designsystem Sainsbury's Designsystem Farbpalette und Kontrast

Orange mit einer passenden Textfarbe kombinieren

In der Quelle wird darauf hingewiesen, dass Orange und Dunkelorange auf Weiß nicht den Kontrastanforderungen für gewöhnlichen Fließtext entsprechen. Das Beispiel verwendet Orange als Fläche mit schwarzer Schaltflächenschrift, statt kleinen orangefarbenen Text auf Weiß oder kleinen weißen Text auf Orange zu setzen. Eine dokumentierte Markenausnahme darf nicht stillschweigend zur Behauptung werden, jede Farbkombination sei barrierefrei.

Feedback semantisch gestalten

Das Prüfergebnis verwendet die grüne Erfolgsfläche mit dunkelgrünem Text. Nicht verfügbare Zeitfenster haben eine neutrale Fläche und eine Beschriftung; ausgewählte Zeitfenster sind sowohl durch ein markiertes Optionsfeld als auch durch eine orangefarbene Umrandung gekennzeichnet. Farbe dient als ergänzender Hinweis und ersetzt niemals Angaben zu Uhrzeit, Verfügbarkeit oder Auswahl.

Sainsbury's Designsystem Sainsbury's Designsystem Abstände, Ecken und Breakpoint-Grenzen

Der veröffentlichten Größenskala folgen

Im Beispiel liegen zwischen den Auswahlmöglichkeiten 8px, innerhalb jedes Zeitfensters 16px und zwischen den Hauptgruppen 24–32px. Steuerelemente haben einen Eckenradius von 2px, während für die Zusammenfassung der dokumentierte Radius von 12px verwendet wird. Diese Unterschiede verdeutlichen die Gruppierung, statt überall dieselbe abgerundete Kartenform einzusetzen.

Abweichung in der Dokumentation festhalten

Der Layoutleitfaden nennt Geräteschwellen bei 600px und 900px, während die Größentoken-Tabelle 576px, 768px und 992px aufführt. Der Typografieleitfaden ändert Display-Größen unabhängig davon oberhalb von 720px. Diese Werte sind keine austauschbaren Bezeichnungen für dieselbe Skala. Diese Implementierung verwendet für Spalten den Größentoken-Schwellenwert von 768px und weist ausdrücklich darauf hin.

Sainsbury's Designsystem Sainsbury's Designsystem Typografie und hilfreiche Inhalte

Die Grenze bei Markenschriften wahren

Für Display-Stile von Sainsbury’s wird offiziell Mary Ann Extra Bold verwendet, für gewöhnlichen Fließtext hingegen Arial. Das öffentliche Beispiel nutzt durchgehend Arial, da keine Markenschriftdatei enthalten ist. Es übernimmt die typografische Skala und das Verhältnis der Zeilenhöhen, ohne zu behaupten, die Ersatzschrift sei visuell identisch. Semantische Überschriftenebenen bleiben unabhängig von Display-Größen.

Die Abholentscheidung verständlich machen

Sainsbury's Designsystem Sainsbury's Designsystem Auswahl per Optionsfeld und lokaler Status

Abhängige Auswahlmöglichkeiten innerhalb einer Gruppe verwenden

Über die Tagesauswahl ändern sich die verfügbaren Zeitfenster. Jede Uhrzeit ist ein natives Optionsfeld innerhalb einer benannten Gruppe. Wenn der Tag geändert wird, wird das erste verfügbare Zeitfenster ausgewählt und die Zusammenfassung aktualisiert. Nicht verfügbare Optionen bleiben sichtbar, können aber nicht ausgewählt werden. Native Optionsfelder bieten vertraute Tastaturbedienung, ohne diese mit anklickbaren Div-Elementen nachzubilden.

Veraltete Reservierungsangaben verhindern

Bei der Überprüfung wird eine lokale Bestätigung angezeigt, die darauf hinweist, dass kein Zeitfenster reserviert wurde. Wird der Tag oder die Uhrzeit geändert, wird diese Meldung ausgeblendet. Ein produktiver Ablauf müsste die Verfügbarkeit erneut prüfen und eine Serverantwort erhalten, bevor eine Reservierung bestätigt werden könnte. Das Beispiel grenzt den Interaktionsablauf klar ab, damit fehlende Backend-Arbeiten nicht mit einer abgeschlossenen Buchung verwechselt werden.

Sainsbury's Designsystem Sainsbury's Designsystem Zielelemente, Fokus und responsives Verhalten

Auswahlmöglichkeiten mit ausreichend Platz versehen

Die öffentlichen Richtlinien für Schaltflächen empfehlen ein Touch-Ziel von 48px. Tagesauswahl und Überprüfungsaktion erreichen diese Höhe; außerdem ist das gesamte beschriftete Zeitfenster anklickbar. Eine blaue Fokusumrandung bleibt auf orangefarbenen und hellen Flächen sichtbar. Das dekorative Korbsymbol ist für unterstützende Technologien ausgeblendet.

Lange Inhalte umbrechen lassen

Bei schmalen Ansichten folgt die Zusammenfassung auf die Auswahlliste, und das dekorative Zeichen wird ausgeblendet. Bezeichnungen der Zeitfenster und Preise bleiben im normalen Dokumentfluss und passen sich in der Höhe flexibel an. Ein übersetzter oder längerer Standortname sollte nicht in einer Karte mit fester Höhe abgeschnitten werden. Dieser englische Prototyp lässt dafür Platz, damit die Lokalisierung später erfolgen kann.

Sainsbury's Designsystem Sainsbury's Designsystem Implementierung und Agentenprüfung

Das eigenständige Beispiel ausführen

Speichere das vollständige HTML-Beispiel und stelle es lokal bereit. Die drei Tage und drei Zeitfenster pro Tag sind Beispieldaten; alle Änderungen bleiben im Arbeitsspeicher. Der Quelltext enthält das CSS, das Erstellen der Optionsfelder, die Aktualisierung der Zusammenfassung und das Löschen veralteter Rückmeldungen. Hinter der Vorschau fehlt also keine Anwendungsebene.

  1. Speichere die vollständige Datei als index.html.
  2. Wähle Dienstag aus und prüfe, ob das nicht verfügbare Zeitfenster am Morgen nicht ausgewählt werden kann.
  3. Ändere die Uhrzeit und überprüfe die Zusammenfassung.
  4. Prüfe die Angaben, ändere dann den Tag und vergewissere dich, dass das vorherige Ergebnis gelöscht wird.

Wechsle nur mit bestätigtem Zugriff zu Fable

Für eine autorisierte interne Integration benötigst du den tatsächlichen Paketzugriff und musst die aktuellen Theme- und Komponenten-APIs prüfen. Übernimm das Verhalten dieses Beispiels und ersetze das ursprüngliche Markup durch unterstützte Komponenten. Prüfe, ob die installierte Token-Skala den öffentlichen Referenzen entspricht, bevor du einen Screenshot als Implementierungsnachweis verwendest.

  • Verwende durchgehend dasselbe Markentheme.
  • Prüfe den Paketzugriff und die aktuellen APIs.
  • Prüfe den Textkontrast unabhängig von der Markentreue der Farben.

Sainsbury's Designsystem Sainsbury's Designsystem Beispiele für Designsystem-Komponenten

Vollständiger Ablauf zur Auswahl eines Abholzeitfensters

Unabhängige Implementierung mit HTML/CSS/JavaScript: Tagesauswahl, Zeitfenster als Optionsfelder, nicht verfügbare Zeitfenster und eine Live-Zusammenfassung.

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>

Code-Referenz

  • Dafür sind weder ein privates Paket noch Zugangsdaten erforderlich.
04

Sainsbury's Designsystem Einrichtung des Agenten

Ausgangspunkt für die Implementierung

Der Zugriff auf das Fable-Paket ist unabhängig von dieser öffentlichen, eigenständigen Studie.

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

Ein Prompt für dein Projekt

Agenten-Prompt
Erstelle anhand dieses vollständigen HTML-Beispiels einen von Sainsbury’s gestalteten Auswahlbereich für Abholzeitfenster. Verwende eine einheitliche Markenpalette, schwarzen Text auf der orangefarbenen Aktion, native Optionsfelder mit Beschriftungen, eine Zielgröße von 48px und die festgelegte Layoutentscheidung für 768px. Lösche Rückmeldungen zur Überprüfung, sobald sich die Auswahl ändert. Verwende fiktive Verfügbarkeiten und behaupte weder, dass die Fable-Runtime verwendet wurde, noch dass eine Reservierung erfolgreich war.
05

Sainsbury's Designsystem Quellen und Geltungsbereich

Eine OpenDesign-Anwendungsstudie zu den öffentlichen Richtlinien von Sainsbury’s. Dies ist eine eigenständige HTML, keine private Fable-Runtime. Statt weiterverwendeter Mary-Ann-Dateien kommt Arial zum Einsatz. Die Abholzeitfenster und Gebühren sind fiktiv.