Дизайн-система Decanter.

Дизайн-система Decanter: пресет Tailwind, а не SDK

Закрепите документированный способ подключения

Проверенная версия пакета Decanter — 7.5.3; пакет указывает Tailwind CSS ^3.4.17. Общедоступная точка входа — пресет конфигурации Tailwind. Добавьте require("decanter") в presets, укажите content с реальными исходными файлами и скомпилируйте таблицу стилей с утилитами. Провайдера React для Decanter, которого можно было бы импортировать, нет.

В документации описаны предстоящие удаления в v8, хотя способ установки по-прежнему помечен как v7. В этом справочнике зафиксирована версия v7.5.3; устаревшие утилиты foggy, slab и более ранние утилиты модульной типографики не используются. Отдельный предпросмотр — явно обозначенная интерпретация правил компоновки, а не заявленная компиляция Tailwind.

Прочитать вспомогательную спецификацию

Дизайн-система Decanter: адаптивная модульная типографика

Шкала зависит от базового размера

Основные семейства шрифтов без засечек и с засечками — Source Sans 3 и Source Serif 4; резервные — Helvetica/Arial и Georgia/Times. Утилиты type-* задают пропорциональные роли, а не заголовки фиксированного размера в пикселях. Множитель шкалы составляет 1.15 на мобильных устройствах, 1.2 на планшетах и 1.25 на настольных компьютерах.

В примере используется документированная конфигурация basefont-23: 18px для XS–SM, 21px для MD–XL и 23px для 2XL. Для заголовка выбрана величина type-3, чтобы типографика оставалась пропорциональной в компактном встроенном примере. Если в проекте выбрана другая базовая величина, итоговые размеры нужно пересчитать, а не копировать значения в пикселях из этого предпросмотра.

Прочитать вспомогательную спецификацию

Дизайн-система Decanter: гибкий контейнер и сетка

Отступ от края экрана — часть компоновки

Контейнер cc использует подобранные вручную отступы от краёв: 20px для XS, 30px для SM, 50px для MD, 80px для LG и 100px для XL. Контейнер растёт, пока при ширине окна 1700px ширина содержимого не достигнет максимума 1500px. Это гибкая система с явными правилами отступов от краёв, а не просто фиксированный контейнер шириной 1200px.

В примере соблюдены эти отступы; ниже MD две редакционные карточки перестраиваются в одну колонку. Содержимое карточек следует обычному порядку элементов документа, поэтому при перестроении компоновки клавиатурная навигация сохраняет ту же последовательность чтения.

Прочитать вспомогательную спецификацию

Дизайн-система Decanter: адаптивные отступы

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

Decanter предоставляет семейства rs-m-* и rs-p-* для адаптивных внешних и внутренних отступов. Выбранный шаг изменяется в документированных диапазонах; это не аналог утилиты фиксированного отступа Tailwind. В примере кода для карточки используется rs-p-1, а для её действия — обычный фиксированный внутренний отступ.

Чтобы отдельная интерпретация оставалась воспроизводимой, в справочнике каждое изменение CSS обозначено как код приложения. При сборке со встроенным пресетом используйте созданную им утилиту, а не задавайте второе конкурирующее правило с тем же именем. Не используйте динамические фрагменты вроде "rs-p-" + size, если сканер сборки не может определить полное имя класса.

Прочитать вспомогательную спецификацию

Дизайн-система Decanter: фирменные и интерактивные цвета

Cardinal и Digital Red выполняют разные роли

Основной фирменный цвет Stanford — Cardinal red #8c1515. Digital red #b1040e — интерактивный/акцентный цвет, который не заменяет Cardinal в айдентике университета. Digital blue #006cb8 используется для ссылок, а #00548f — для более тёмного состояния взаимодействия.

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

Прочитать вспомогательную спецификацию

Дизайн-система Decanter: редакционные карточки с действиями

Составляйте содержимое, а не предполагайте наличие компонента API

В официальных примерах карточки представлены семантическим HTML с утилитами для отступов, типографики, поверхностей и действий. В нашей композиции категория мероприятия отделена от заголовка, дата и место проведения указаны текстом, а для раскрытия аннотации на месте используется настоящая кнопка. Мы не придумываем свойство компонента Card Decanter API.

Ссылка в заголовке уместна, когда результатом должен быть переход. Здесь содержимое раскрывается на месте, поэтому поведение передаёт кнопка с aria-expanded и aria-controls. В предпросмотре используются оригинальные названия мероприятий и аннотации, а не материалы новостного сайта университета.

• Используйте заголовок карточки как заголовок мероприятия.
• Показывайте время и место до раскрытия подробностей.
• Для раскрытия используйте кнопку, а ссылку — только для реального перехода.

Прочитать вспомогательную спецификацию

Дизайн-система Decanter: фильтры и раскрывающиеся элементы

Обеспечьте доступность содержимого при любой компоновке

Фильтр по темам отбирает две оригинальные карточки научных мероприятий и обновляет видимый счётчик результатов. Вариант «Нет совпадений» намеренно показывает пустое состояние и способ сбросить фильтр. Фильтр не меняет иерархию заголовков и не превращает карточки в варианты выбора формы.

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

Прочитать вспомогательную спецификацию

Дизайн-система Decanter: сборка и проверка результата

Для генерации классов нужно сканировать исходные файлы

Предоставленная конфигурация рассчитана на Tailwind 3 и проверенный пресет Decanter 7.5.3. В неё входят директивы для входного файла, маска поиска контента, команда сборки и оригинальная композиция карточек. Подключите полученную таблицу стилей в head документа. Одобренные файлы шрифтов подключите отдельно или намеренно оставьте описанные резервные шрифты.

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

1. Зафиксируйте версии Decanter и совместимой основной версии Tailwind.
2. Подключите пресет и укажите настоящую директорию с исходниками для сканирования.
3. Скомпилируйте три слоя директив Tailwind.
4. Проверьте выбранный основной шрифт, отступы по краям экрана и действия в карточках на указанных контрольных ширинах.

Прочитать вспомогательную спецификацию

Дизайн-система Decanter: примеры компонентов

<article class="bg-white border border-solid border-black-20 rs-p-1">
  <p class="font-semibold text-digital-red">Research conversation</p>
  <h2 class="type-2 font-serif leading-display">Reading the changing coast</h2>
  <p class="leading-normal">An original example event about field observations.</p>
  <button type="button" class="bg-digital-red text-white px-26 py-10
    hocus:bg-cardinal-red-dark focus:outline focus:outline-2">
    Show session details
  </button>
</article>

module.exports = {
  presets: [require('decanter')],
  content: ['./src/**/*.{html,js}']
};

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Decanter editorial composition</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5f2;color:#2e2d29;font:18px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}.cc{margin-inline:20px;max-width:1500px;padding-block:40px}h1{font-family:Georgia,serif;font-size:1.520875em;line-height:1.2;margin:24px 0}h2{font:700 1.3225em/1.25 Georgia,serif;margin:12px 0}p{margin:16px 0}.overline{letter-spacing:.12em;font-size:14px;font-weight:700}.filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-block:24px;border-block:1px solid #c0c0bf;margin-block:32px}select{font:inherit;background:white;border:1px solid #767674;padding:8px}.cards{display:grid;grid-template-columns:1fr;gap:20px}article{background:white;padding:24px;border-top:4px solid #8c1515}article time{font-size:16px;color:#53565a}.topic{font-size:14px;font-weight:600;letter-spacing:.04em}.abstract{border-top:1px solid #d5d5d4;padding-top:16px}.action{font:600 16px/1.3 Arial,sans-serif;background:#b1040e;color:white;border:0;padding:12px 20px;cursor:pointer}.action:hover{background:#820000;text-decoration:underline}.reset{font:inherit;color:#006cb8;background:none;border:0;text-decoration:underline;padding:8px 0;cursor:pointer}:focus-visible{outline:3px solid #00548f;outline-offset:4px}small{display:block;font-size:14px;color:#53565a;margin-top:32px}[hidden]{display:none!important}@media(min-width:576px){.cc{margin-inline:30px}}@media(min-width:768px){body{font-size:21px}.cc{margin-inline:50px}h1{font-size:1.728em}h2{font-size:1.44em}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:992px){.cc{margin-inline:80px}.cards{gap:36px}h1{font-size:1.953125em}h2{font-size:1.5625em}}@media(min-width:1200px){.cc{margin-inline:100px}.cards{gap:40px}}@media(min-width:1500px){body{font-size:23px}.cards{gap:48px}}@media(min-width:1700px){.cc{margin-inline:auto}}
</style><main class="cc"><p class="overline">RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES</p><h1>Ideas take shape in conversation.</h1><p>A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.</p><div class="filters"><label for="topic">Topic</label><select id="topic"><option value="all">All topics</option><option value="environment">Environment</option><option value="archives">Archives</option><option value="astronomy">Astronomy</option></select><span id="count" role="status">2 example events</span></div><div class="cards"><article data-topic="environment"><p class="topic">ENVIRONMENT</p><h2>Reading the changing coast</h2><time datetime="2026-10-12">12 October · Fictional seminar room</time><p>How field notes reveal changes that a single measurement cannot capture.</p><button class="action" type="button" aria-expanded="false" aria-controls="coast">Show session details</button><div class="abstract" id="coast" hidden><p>This original sample session compares written observations, sketches and repeat measurements. The conversation asks how researchers describe uncertainty when a landscape changes gradually.</p></div></article><article data-topic="archives"><p class="topic">ARCHIVES</p><h2>The stories between records</h2><time datetime="2026-10-19">19 October · Fictional reading room</time><p>Exploring how context connects objects in a community archive.</p><button class="action" type="button" aria-expanded="false" aria-controls="archive">Show session details</button><div class="abstract" id="archive" hidden><p>This original example considers correspondence, oral history and catalogue descriptions together. It examines how a collection can preserve disagreement without erasing individual perspectives.</p></div></article></div><div id="empty" hidden><h2>No events in this example topic</h2><p>Choose another topic or return to the full collection.</p><button type="button" class="reset" id="reset">Show all topics</button></div><small>Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.</small></main><script>const topic=document.querySelector('#topic'),cards=[...document.querySelectorAll('article')];function filter(){let count=0;cards.forEach(c=>{c.hidden=topic.value!=='all'&&topic.value!==c.dataset.topic;if(!c.hidden)count++;const b=c.querySelector('button');b.setAttribute('aria-expanded','false');b.textContent='Show session details';c.querySelector('.abstract').hidden=true});document.querySelector('#count').textContent=count+' example events';document.querySelector('#empty').hidden=count!==0}topic.onchange=filter;document.querySelector('#reset').onclick=()=>{topic.value='all';filter();topic.focus()};document.querySelectorAll('.action').forEach(b=>b.onclick=()=>{let open=b.getAttribute('aria-expanded')!=='true';b.setAttribute('aria-expanded',String(open));b.textContent=open?'Hide session details':'Show session details';document.getElementById(b.getAttribute('aria-controls')).hidden=!open});</script></html>