83.3K+Скачать
Розничная электронная коммерция · Новый ресурс

Дизайн-система Sainsbury's.

Примените общедоступные рекомендации Sainsbury’s по дизайну к полному сценарию выбора времени для получения заказа: реальные ссылки на палитру и размеры, доступные варианты с переключателями, обновляемая сводка и достоверная обратная связь о локальных действиях.

Скачать OpenDesign Скачать DESIGN.md
Руководство OpenDesign7 глав38 справочных записейАвторское руководство по приложению
01

Предварительный просмотр интерфейса дизайн-система Sainsbury's

Измените день и время, посмотрите примерную стоимость, затем проверьте выбранный вариант.

Выберите время получения заказаОткрыть полный пример
Оригинальная интерпретация рекомендаций Sainsbury’s для общественных сервисов от HTML. · Справочник по реализации
02

Справочник по дизайну дизайн-система Sainsbury's

Общедоступные рекомендации Sainsbury’s по цветам, токенам размеров, типографике и компонентам. Противоречащие друг другу опубликованные таблицы контрольных точек указаны отдельно, а не объединены.

Назначение цветов палитры Sainsbury’s

Источник
Название / правилоЗначение / конфигурацияПрименение
Primary brand base#F06C00 Фирменный акцент и цвет заливки кнопки; в этом примере используется чёрный текст.
Primary hover#E55000 Заливка при наведении; не подходит для мелкого текста на белом фоне.
Primary pressed#C15100 Состояние при нажатии.
Primary light#FEF5F0 Фон выделения и сводки.
Secondary base#7F0442 Сдержанный декоративный акцент.
Monochrome darker#262626 Основной текст.
Monochrome dark#404040 Вспомогательный текст.
Monochrome light#D8D8D8 Границы.
Monochrome lighter#F2F2F2 Фон недоступного варианта.
Success lighter#E6F4ED Фон локального отзыва.
Success darker#246127 Текст отзыва.
Info darker#135CA3 Контур фокуса приложения.

Опубликованные токены размеров

Источник
Название / правилоЗначение / конфигурацияПрименение
xs2pxЗначение отступа из общедоступной таблицы токенов размеров.
sm4pxЗначение отступа из общедоступной таблицы токенов размеров.
md8pxЗначение отступа из общедоступной таблицы токенов размеров.
lg16pxЗначение отступа из общедоступной таблицы токенов размеров.
xl24pxЗначение отступа из общедоступной таблицы токенов размеров.
2xl32pxЗначение отступа из общедоступной таблицы токенов размеров.
3xl40pxЗначение отступа из общедоступной таблицы токенов размеров.
4xl48pxЗначение отступа из общедоступной таблицы токенов размеров.
width-sm1pxТокен границы; названия толщины и радиуса следует различать.
width-base2pxТокен границы; названия толщины и радиуса следует различать.
radius-base2pxТокен границы; названия толщины и радиуса следует различать.
radius-xl12pxТокен границы; названия толщины и радиуса следует различать.
min-width-sm576pxКонтрольная точка из токенов; отличается от значения на странице с рекомендациями по макету.
min-width-md768pxКонтрольная точка из токенов; отличается от значения на странице с рекомендациями по макету.
min-width-lg992pxКонтрольная точка из токенов; отличается от значения на странице с рекомендациями по макету.
min-width-xl1200pxКонтрольная точка из токенов; отличается от значения на странице с рекомендациями по макету.

Типографическая шкала Sainsbury’s

Источник
Название / правилоЗначение / конфигурацияПрименение
Body 11rem / 1.5 / Arial RegularОсновной текст.
Caption0.875rem / 1.571 / Arial RegularВспомогательные примечания.
Label 11rem / 1.5 / Arial BoldПодписи элементов управления.
Display 11.25rem / 1.3Фирменный шрифт для крупных надписей согласно официальным рекомендациям; здесь используется запасной шрифт.
Display 21.5rem / 1.333Адаптивная альтернатива — Display 3.
Display 31.875rem / 1.333Адаптивная альтернатива — Display 4.
Display 42.375rem / 1.316Адаптивная альтернатива — Display 5.
Display 53rem / 1.292Адаптивная альтернатива — Display 6.
Display 63.75rem / 1.267Наибольший задокументированный размер текста для крупных надписей.
Responsive type thresholdlarger than 720pxНе связан с контрольной точкой токена размера 768px.
03

Полное руководство дизайн-система Sainsbury's

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

DESIGN-sainsburys.md

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

Скачать руководство

Дизайн-система Sainsbury's Мультибрендовая система и доступ дизайн-система Sainsbury's

Выберите одну тему бренда

Fable поддерживает Sainsbury’s, Argos, Nectar, Tu и Habitat с помощью общих структур компонентов и значений для отдельных брендов. В этом руководстве используется только палитра Sainsbury’s. Если добавить фиолетовый цвет Nectar в элемент взаимодействия Sainsbury’s или предположить, что во всех брендах используется один шрифт, чёткая граница между системами исчезнет. Закрепите выбранную тему за точкой входа приложения.

Из этого руководства OpenDesign

Различайте общедоступные рекомендации и закрытые пакеты

В общедоступном руководстве для партнёров описаны компоненты React, Fable Styles и пакет дизайн-токенов, однако для доступа к кодовой базе нужны учётные данные, которые можно запросить у представителя Sainsbury’s. Для этого примера они не нужны: это завершённая оригинальная реализация HTML на основе опубликованных рекомендаций. Она не выдаёт себя за среду выполнения Fable и не содержит выдуманных команд установки для недоступного реестра.

Дизайн-система Sainsbury's Палитра и контраст дизайн-система Sainsbury's

Используйте оранжевый цвет с подходящей парой для текста

В источнике указано, что базовый и тёмный оттенки оранжевого не обеспечивают достаточный контраст для обычного текста на белом фоне. В примере оранжевый используется как цвет заливки с чёрным текстом на кнопке, а не для мелкого текста на белом фоне или мелкого белого текста на оранжевом фоне. Указанное в документации исключение для фирменных цветов не следует незаметно превращать в утверждение, будто любой цветовой паре соответствует требованиям доступности.

Сохраняйте смысловую однозначность отзывов

Для результата проверки используется зелёный фон успешного статуса и тёмно-зелёный текст. Недоступные временные интервалы отмечены нейтральным фоном и текстовой подписью, а у выбранного интервала есть и отмеченный радиопереключатель, и оранжевый контур. Цвет служит дополнительной подсказкой, но не заменяет текст с указанием времени, доступности или выбора.

Дизайн-система Sainsbury's Отступы, углы и контрольные точки дизайн-система Sainsbury's

Следуйте опубликованной шкале размеров

В примере интервалы между вариантами составляют 8px, внутренние отступы в каждом временном интервале — 16px, а расстояния между основными группами — 24–32px. У элементов управления радиус угла равен 2px, а у сводки используется документированное значение 12px. Эти различия помогают обозначить группировку, а не сводят всё оформление к одинаковым скруглённым карточкам.

Укажите расхождение в документации

В руководстве по макету указаны пороговые значения для устройств 600px и 900px, а в таблице токенов размеров — 576px, 768px и 992px. В руководстве по типографике отдельно указано изменение размеров крупных надписей при ширине свыше 720px. Это не взаимозаменяемые обозначения одной шкалы. В этой реализации для колонок выбрана контрольная точка 768px из таблицы токенов размеров, и этот выбор явно указан.

Дизайн-система Sainsbury's Типографика и полезная информация дизайн-система Sainsbury's

Соблюдайте границы использования фирменных шрифтов

В официальных стилях Sainsbury’s для крупных надписей используется Mary Ann Extra Bold, а для обычного текста — Arial. В общедоступном примере везде используется Arial, поскольку фирменные файлы шрифта не включены. Сохраняются соотношения размеров и высоты строки, но запасной шрифт не выдаётся за визуально идентичный оригиналу. Уровни семантических заголовков не зависят от размеров крупных надписей.

Ясно опишите выбор интервала получения заказа

Дизайн-система Sainsbury's Радиоварианты и локальное состояние дизайн-система Sainsbury's

Используйте зависимые варианты в группе

Элементы выбора дня меняют список доступных временных интервалов, а каждый интервал представлен нативным радиопереключателем в одной именованной группе. При смене дня выбирается первый доступный интервал и обновляется сводка. Недоступный вариант остаётся видимым, но выбрать его нельзя. Нативные радиопереключатели обеспечивают привычную работу с клавиатуры без необходимости воссоздавать её с помощью кликабельных div.

Не допускайте устаревших утверждений о бронировании

При нажатии «Проверить» показывается локальное подтверждение и сообщается, что интервал не забронирован. При смене дня или времени результат скрывается. Для подтверждения бронирования в рабочем процессе потребовались бы новая проверка доступности и ответ сервера. В примере изолирован контракт взаимодействия, чтобы отсутствие серверной части нельзя было принять за завершённое бронирование.

Дизайн-система Sainsbury's Области нажатия, фокус и адаптивное поведение дизайн-система Sainsbury's

Оставьте достаточно места для выбора

В общедоступных рекомендациях для кнопок указана минимальная область нажатия 48px. Кнопки выбора дня и действия проверки имеют такую высоту, а нажатие на весь подписанный временной интервал выбирает его. Синий контур фокуса остаётся видимым на оранжевом и светлом фоне. Декоративный значок корзины скрыт от вспомогательных технологий.

Обеспечьте перенос длинного текста

При узкой ширине сводка располагается после списка вариантов, а декоративный значок исчезает. Подписи интервалов и цены остаются в обычном потоке документа, а высота элементов может меняться. Переведённое или более длинное название местоположения не должно обрезаться в карточке фиксированного размера; в этом англоязычном прототипе для будущей локализации оставлено достаточно места.

Дизайн-система Sainsbury's Реализация и проверка AI-агентом дизайн-система Sainsbury's

Запустите автономный пример

Сохраните пример HTML целиком и запустите его локально. Три дня и по три временных интервала на каждый день — это заданные в примере тестовые данные; все изменения хранятся в памяти. Исходный код содержит CSS, создание радиопереключателей, обновление сводки и очистку устаревших отзывов, поэтому за предварительным просмотром не скрывается недостающий слой приложения.

  1. Сохраните полный файл под именем index.html.
  2. Выберите вторник и убедитесь, что недоступный утренний интервал выбрать нельзя.
  3. Измените время и проверьте сводку.
  4. Нажмите «Проверить», затем смените день и убедитесь, что предыдущий результат исчез.

Переходите на Fable только при подтверждённом доступе

Для авторизованной внутренней интеграции получите реальный доступ к пакету и изучите текущую тему и API компонентов. Сохраняя поведение примера, замените исходную разметку поддерживаемыми компонентами. Прежде чем считать скриншот подтверждением реализации, убедитесь, что установленная шкала токенов соответствует общедоступным источникам.

  • Последовательно используйте одну тему бренда.
  • Проверьте доступ к пакету и актуальность API.
  • Проверяйте контраст текста отдельно от точности передачи фирменных цветов.

Дизайн-система Sainsbury's Примеры компонентов дизайн-системы дизайн-система Sainsbury's

Полный сценарий выбора интервала получения заказа

Самостоятельная реализация HTML/CSS/JavaScript с выбором дня, радиопереключателями для временных интервалов, недоступными вариантами и динамической сводкой.

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>

Справочник по коду

  • Закрытый пакет и учётные данные не требуются.
04

Настройка AI-агента дизайн-система Sainsbury's

Отправная точка для реализации

Доступ к пакету Fable предоставляется отдельно от этого общедоступного автономного примера.

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

Запрос для вашего проекта

Промпт для AI-агента
Создайте по этому завершённому примеру HTML селектор временных интервалов для получения заказа, опираясь на рекомендации Sainsbury’s. Используйте одну палитру бренда, чёрный текст на оранжевой кнопке действия, нативные подписанные радиопереключатели, область нажатия 48px и явно выбранную контрольную точку макета 768px. Очищайте отзыв после каждого изменения выбора. Используйте вымышленные данные о доступности и не заявляйте, что используется среда выполнения Fable или что бронирование успешно.
05

Дизайн-система Sainsbury's Источники и область применения

Учебный пример приложения OpenDesign на основе общедоступных рекомендаций Sainsbury’s. Это оригинальная реализация HTML, а не закрытая среда выполнения Fable. Используется Arial, а не распространяемые файлы шрифта Mary Ann; интервалы получения заказа и стоимость вымышлены.