# Sainsbury's Designsystem

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

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

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| 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

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| xs | 2px | Abstandswert aus der öffentlichen Tabelle der Größentokens. |
| sm | 4px | Abstandswert aus der öffentlichen Tabelle der Größentokens. |
| md | 8px | Abstandswert aus der öffentlichen Tabelle der Größentokens. |
| lg | 16px | Abstandswert aus der öffentlichen Tabelle der Größentokens. |
| xl | 24px | Abstandswert aus der öffentlichen Tabelle der Größentokens. |
| 2xl | 32px | Abstandswert aus der öffentlichen Tabelle der Größentokens. |
| 3xl | 40px | Abstandswert aus der öffentlichen Tabelle der Größentokens. |
| 4xl | 48px | Abstandswert aus der öffentlichen Tabelle der Größentokens. |
| width-sm | 1px | Rahmentoken; Namen für Breite und Radius getrennt halten. |
| width-base | 2px | Rahmentoken; Namen für Breite und Radius getrennt halten. |
| radius-base | 2px | Rahmentoken; Namen für Breite und Radius getrennt halten. |
| radius-xl | 12px | Rahmentoken; Namen für Breite und Radius getrennt halten. |
| min-width-sm | 576px | Breakpoint des Tokens; weicht von der redaktionellen Layoutseite ab. |
| min-width-md | 768px | Breakpoint des Tokens; weicht von der redaktionellen Layoutseite ab. |
| min-width-lg | 992px | Breakpoint des Tokens; weicht von der redaktionellen Layoutseite ab. |
| min-width-xl | 1200px | Breakpoint des Tokens; weicht von der redaktionellen Layoutseite ab. |
### Typografische Skala von Sainsbury’s

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Body 1 | 1rem / 1.5 / Arial Regular | Haupttext. |
| Caption | 0.875rem / 1.571 / Arial Regular | Ergänzende Hinweise. |
| Label 1 | 1rem / 1.5 / Arial Bold | Beschriftungen von Steuerelementen. |
| Display 1 | 1.25rem / 1.3 | Markenschrift für Display-Texte laut offiziellen Richtlinien; hier mit Ersatzschrift. |
| Display 2 | 1.5rem / 1.333 | Responsive Alternative ist Display 3. |
| Display 3 | 1.875rem / 1.333 | Responsive Alternative ist Display 4. |
| Display 4 | 2.375rem / 1.316 | Responsive Alternative ist Display 5. |
| Display 5 | 3rem / 1.292 | Responsive Alternative ist Display 6. |
| Display 6 | 3.75rem / 1.267 | Größte dokumentierte Display-Größe. |
| Responsive type threshold | larger than 720px | Unabhängig vom Größentoken-Breakpoint bei 768px. |
## Sainsbury's Designsystem – Vollständiger Leitfaden

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

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

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

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

Für jedes Zeitfenster werden ein Zeitraum und entweder eine Gebühr oder ein Hinweis auf die Nichtverfügbarkeit angezeigt. In der Zusammenfassung stehen der ausgewählte Tag, die Uhrzeit und ein Beispielstandort erneut. Die Hauptaktion heißt „Abholung überprüfen“ und beschreibt den nächsten lokalen Schritt. Es werden weder ein Timer noch ein Gesamtbestellwert oder eine erfolgreiche Reservierung vorgetäuscht, nur um das Beispiel kommerzieller wirken zu lassen.

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

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

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

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

### Ein Prompt für dein Projekt

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

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

- Farben von Sainsbury’s Farbwerte und dokumentierte Einschränkung beim Kontrast von Orange.

- Größen-Tokens Werte für Rahmen, Abstände und Breakpoints.

- Typografie Markenschriften, Skalierung und responsives Verhalten.

- Optionsfeld Auswahl, Beschriftungen und Gruppierung.

- Button Aktionshierarchie, Beschriftungen und Zielbereiche.

- Partnerzugriff Zugriff auf die private Codebasis und Implementierungspfade.

- Layout Redaktionelles Layoutraster; unterscheidet sich von den Breakpoints der Größen-Tokens.

## Sainsbury's Designsystem Verwandte Ressourcen

### Salesforce Lightning

Ein Lightning-Blueprint-Leitfaden für die Bearbeitung umfangreicher Datensätze: realistische Abstände, Typografie und semantische Farben, ein bearbeitbarer Fallarbeitsbereich, Feldvalidierung und ein Aktivitätsverlauf, der lokale Änderungen widerspiegelt.

### Samsung One UI

Untersuche One UIs Ansichts- und Interaktionsstruktur, die Empfehlungen zu 24-dp-Rändern und die Anforderung zur Textskalierung auf 200 % anhand einer vollständigen, eigenständigen Vorschau der Leseeinstellungen mit dunkler Darstellung und expliziter Möglichkeit zum Zurücksetzen.

### SAP Fiori

Verwende das Horizon-Theme von SAP Fiori über UI5 Web Components: echte Theme-Parameter, explizite Inhaltsdichte, semantische Wertzustände und eine Anordnung für eine Kaufanfrage mit lokaler Validierung.


- [Implementierungsreferenz](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Quelle](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Quelle](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Quelle](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Code-Referenz](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Farben von Sainsbury’s Farbwerte und dokumentierte Einschränkung beim Kontrast von Orange.](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Größen-Tokens Werte für Rahmen, Abstände und Breakpoints.](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Typografie Markenschriften, Skalierung und responsives Verhalten.](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Optionsfeld Auswahl, Beschriftungen und Gruppierung.](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Button Aktionshierarchie, Beschriftungen und Zielbereiche.](https://design-systems.sainsburys.co.uk/components/button/)
- [Partnerzugriff Zugriff auf die private Codebasis und Implementierungspfade.](https://design-systems.sainsburys.co.uk/getting-started/for-third-party-partners/)
- [Layout Redaktionelles Layoutraster; unterscheidet sich von den Breakpoints der Größen-Tokens.](https://design-systems.sainsburys.co.uk/foundations/layout/)