# Дизайн-система Rivet

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

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

## Справочник по дизайну дизайн-система Rivet

Опубликованные CSS Rivet версии 2.9.1 и официальная документация по токенам/утилитам. Пересчёт в rem предполагает корневой размер шрифта 16px; в локальном примере используются шрифты Arial/Georgia и собственная максимальная ширина внешнего контейнера 64rem.

### Типографика

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --rvt-font-sans | BentonSans, system sans-serif fallbacks | Институциональный шрифт; в предпросмотре явно используется Arial. |
| --rvt-font-serif | GeorgiaPro, Georgia, Times New Roman, Times, serif | Роль шрифта с засечками; при необходимости в предпросмотре используется Georgia. |
| rvt-ts-12 / 14 / 16 / 18 / 20 / 23 / 26 | 12 / 14 / 16 / 18 / 20 / 23 / 26px | Числовые утилиты при корневом размере 16px. |
| rvt-ts-29 / 32 / 36 / 41 / 46 / 52 | 29 / 32 / 36 / 41 / 46 / 52px | Более крупные шаги; применяйте к текстовым элементам. |
| rvt-lh-tight / base / loose | 1.2 / 1.5 / 1.65 | Варианты межстрочного интервала без единиц измерения. |
| --rvt-font-regular / medium / bold | 400 / 500 / 700 | Доступность начертания средней жирности зависит от шрифта. |
### Интервалы и формы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --rvt-spacing-xxs / xs / sm / md | 4 / 8 / 16 / 24px | Небольшие интервалы на уровне компонентов. |
| --rvt-spacing-lg / xl / xxl | 32 / 40 / 64px | Более крупные интервалы композиции. |
| --rvt-spacing-3-xl / 4-xl | 128 / 192px | Крупные интервалы для блоков с большим текстом, не для внутренних отступов панели. |
| --rvt-border-radius-sm / md / lg | .125 / .25 / .5rem | 2 / 4 / 8px при стандартном корневом размере. |
| --rvt-width-4-xl | 48rem (768px) | Токен ширины отличается от токена интервала с тем же суффиксом. |
### Палитра

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --rvt-color-black-500 | #243142 | Основной тёмный справочный цвет. |
| --rvt-color-black-000 / black-100 | #f8f9fa / #e2e7e9 | Светлая поверхность и справочные цвета разделителей. |
| --rvt-color-crimson-500 / crimson-600 | #990000 / #800000 | Цвета из малиновой гаммы. |
| --rvt-color-blue-500 / blue-600 | #006298 / #004f80 | Цвета из синей гаммы. |
| --rvt-color-green-500 | #056e41 | Зелёная гамма; сама по себе не обозначает успех. |
### Контрольные точки

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --rvt-breakpoint-sm | 30em / 480px | Утилиты -sm-up. |
| --rvt-breakpoint-md | 46.25em / 740px | Утилиты -md-up. |
| --rvt-breakpoint-lg | 67.5em / 1080px | Утилиты -lg-up. |
| --rvt-breakpoint-xl | 78.75em / 1260px | Утилиты -xl-up. |
| --rvt-breakpoint-xxl | 87.5em / 1400px | Утилиты -xxl-up. |
## Полное руководство по дизайн-системе Rivet

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

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

## Дизайн-система Rivet для задач университета

### Система компонентов с точкой входа HTML

> Rivet предоставляет CSS, JavaScript, утилитарные классы и макеты страниц для интерфейсов Университета Индианы. В рабочем примере напрямую используется браузерный пакет версии 2.9.1: для него не нужны ни React, ни компилятор компонентов. Это небольшая страница с описанием мастер-класса и дополнительной информацией о посещении, а не заявка на поступление, замаскированная под панель управления.

Айдентика учреждения и примерный контент разделены. Эта страница не воспроизводит официальный логотип IU, не регистрирует посетителей и не подтверждает существование реального объекта. Для университетского сервиса в рабочей среде используйте утверждённый фирменный стиль и соблюдайте установленный университетом порядок работы с контентом. Лицензия на код не превращает вымышленные сведения о мероприятии в официальную информацию.

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

## Типографическая шкала и роли шрифтов в дизайн-системе Rivet

### Задавайте точный размер текста с помощью утилитарных классов

Базовое семейство шрифтов без засечек в Rivet — BentonSans, семейство с засечками — GeorgiaPro. В локальном примере намеренно используются Arial и Georgia в качестве резервных шрифтов; удалённые шрифты не загружаются. Перед выпуском в рабочую среду необходимо проверить разрешения на использование институциональных шрифтов и способ их доставки, а не копировать файлы шрифтов из этого примера.

Числовая шкала основана на округлённой прогрессии «большая секунда». Для заголовка примера задан rvt-ts-32, а для заголовка панели — rvt-ts-23; в скомпилированной версии их размеры составляют 2rem и 1.4375rem соответственно. Базовый размер текста — 1rem. Для межстрочного интервала 1.5 используйте rvt-lh-base, для 1.2 — rvt-lh-tight, для 1.65 — rvt-lh-loose. Применяйте эти классы к текстовым элементам, чтобы элементы управления внутри контейнера не наследовали нежелательный размер заголовка.

| Роль в этом примере | Класс | Значение при корневом размере 16px |
| --- | --- | --- |
| Заголовок | rvt-ts-32 | 32px |
| Заголовок панели | rvt-ts-23 | 23px |
| Основной текст | rvt-ts-16 | 16px |
| Метка мелким шрифтом | rvt-ts-14 | 14px |
Прочитать вспомогательную спецификацию

## Цвета и поверхности в дизайн-системе Rivet

### Малиновый — не единственный цвет

В палитре для справки малиновый-500 (#990000) отличается от синего-500 (#006298). В примере малиновый используется сдержанно — для верхней линии; для интерактивных элементов применяются штатные компоненты Rivet. Цвет текста — чёрный-500 (#243142), фон вспомогательной информации — чёрный-000 (#f8f9fa), разделители — чёрный-100 (#e2e7e9). Это реальные значения из палитры, а не цвета, подобранные по снимку экрана.

Название цвета не гарантирует достаточную контрастность любого сочетания. Сохраняйте штатное отображение фокуса вкладки и её выбранного состояния вместе с видимым содержимым и значением aria-selected. Не обозначайте активную панель только малиновым цветом метки. Уведомление о вымышленном мероприятии в примере остаётся обычным читаемым текстом над переключателем.

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

## Интервалы, ширина и скругления в дизайн-системе Rivet

### Именованная шкала с продуманными крупными шагами

Шкала интервалов Rivet — не последовательность шагов по четыре пикселя. При корневом размере 16px она включает xxs 4px, xs 8px, sm 16px, md 24px, lg 32px, xl 40px, xxl 64px, 3-xl 128px и 4-xl 192px. В примере sm задаёт отступ страницы на мобильном экране, md — ритм рядом с панелью, а lg — крупные вертикальные интервалы.

Максимальная ширина области чтения в примере — 64rem; это решение для приложения, а не заявленный токен контейнера Rivet. Внутри этой области токен ширины 4-xl равен 48rem/768px, а spacing-4-xl — 12rem/192px. Одинаковый суффикс не означает одинаковое значение размера. Радиусы составляют .125rem для Radius-sm, .25rem для md и .5rem для lg; не придавайте всем компонентам одинаковый вид крупных карточек со скруглёнными углами.

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

## Анатомия и состояния вкладок в дизайн-системе Rivet

### Сначала сопоставьте значения данных, затем выполните инициализацию

Набор вкладок состоит из одной обёртки rvt-tabs, списка rvt-tabs__tablist с содержательной меткой aria-label, кнопок-переключателей и соседних панелей rvt-tabs__panel. Значения data-rvt-tab и data-rvt-tab-panel в каждой паре должны совпадать. Атрибут начального выбора data-rvt-tab-init задаётся панели, а не её кнопке. Rivet может генерировать идентификаторы, но явные пары упрощают изучение этого примера.

Вызов Rivet.init() добавляет роли вкладок, состояние выбора, связи между панелями и поведение для клавиатуры. Не создавайте второй обработчик клика, который независимо переключает скрытое состояние: при двух конкурирующих источниках состояния выбранная вкладка и видимая панель могут перестать соответствовать друг другу. Полная разметка ниже содержит оригинальный краткий текст; её можно разместить между тегами таблицы стилей и скрипта в разделе настройки.

```
<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div>
```

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

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

## Что в дизайн-системе Rivet следует размещать вне вкладок

### Важную информацию о посещении оставьте на виду

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

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

- Используйте вкладки «Обзор», «Как добраться» и «Доступность» для отдельных пояснений, полезных сами по себе.

- Сроки, уведомления об отмене и основное действие оставьте видимыми вне панелей вкладок.

- Если читателю нужно одновременно сопоставить значения по нескольким категориям, используйте таблицу сравнения.

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

## Адаптивность и управление с клавиатуры в дизайн-системе Rivet

### Пять границ для мобильной вёрстки

Точки адаптивности Rivet — 30em, 46.25em, 67.5em, 78.75em и 87.5em. При стандартном начальном размере шрифта 16px это соответствует 480, 740, 1080, 1260 и 1400px. Средняя граница — 740px, а не заимствованное значение 768px. К имени адаптивного утилитарного класса добавляются точка адаптивности и суффикс -up, например rvt-ts-32-md-up.

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

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

## Установка и проверка примера в дизайн-системе Rivet

### Браузерный пакет инициализируется один раз

В инструкции по установке закреплена версия 2.9.1 и предусмотрено копирование опубликованного CSS и минифицированного браузерного JavaScript в статическую директорию сайта. Предоставьте эти файлы через сервер, прежде чем вызывать Rivet.init(). Если фреймворк добавляет HTML позже, используйте документированный жизненный цикл интеграции JavaScript, а не рассчитывайте, что при первоначальном сканировании страницы новые узлы уже присутствовали.

Автономный пример использует эти официальные файлы CSS и JavaScript локально. Резервные шрифты и ширина обёртки заданы как явные переопределения на уровне приложения. В примере нет запроса на бронирование по сети, сохранения данных, аналитики или автоматически сформированного подтверждения. Штатные вкладки — единственное демонстрируемое взаимодействие.

1. Подключите локальную таблицу стилей и перед инициализацией проверьте наличие всех трёх переключателей вкладок и соответствующих панелей.

2. Инициализируйте Rivet, переключите каждую вкладку указателем, затем повторите с помощью клавиш со стрелками и Enter или Space.

3. На широком экране и узком мобильном устройстве проверьте выбранный переключатель, видимую панель, индикатор фокуса и ширину документа.

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

## Примеры компонентов в дизайн-системе Rivet

### Переключатель информации о посещении с тремя панелями

Явно сопоставленные атрибуты данных и начальная панель; фокусом и видимостью управляют штатные компоненты Rivet.

```
<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div>
```

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

- Название мероприятия и важные сведения оставьте вне панелей.

- Подключите опубликованные CSS и JavaScript и один раз вызовите Rivet.init().

- Стрелки перемещают фокус; Enter или Space активирует вкладку в фокусе.

### Полный автономный пример

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

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop visit — Rivet specimen</title><link rel="stylesheet" href="vendor/rivet-2.9.1/rivet.min.css"><style>:root{--rvt-font-sans:Arial,sans-serif;--rvt-font-serif:Georgia,serif}body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{border-top:8px solid #990000;margin:0;background:#fff;color:#243142}.shell{max-width:64rem;margin:auto;padding:2rem 1rem 3rem}.eyebrow{font-size:.875rem;letter-spacing:.06em;color:#4c5a69}.intro{max-width:48rem}.facts{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1.5rem;margin:2rem 0;background:#f8f9fa;border:1px solid #e2e7e9}.facts p{margin:0}.facts strong{display:block;font-size:.875rem}.rvt-tabs__panel{min-height:13rem}footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #e2e7e9;font-size:.875rem;color:#4c5a69}h1{margin:.5rem 0 1rem}@media(min-width:46.25em){.shell{padding:3rem 2rem}.rvt-tabs__panel{min-height:12rem}}</style></head><body><main class="shell"><p class="eyebrow">LEARNING STUDIO · RIVET COMPONENT EXAMPLE</p><h1 class="rvt-ts-32 rvt-text-bold rvt-lh-tight">Reading the archive</h1><p class="intro rvt-ts-18">A hands-on introduction to working with historical sources. Explore the visit information below.</p><div class="facts"><p><strong>Session</strong>Saturday · 10:00–11:30</p><p><strong>Format</strong>Small-group workshop</p><p><strong>Location</strong>Learning studio · Room 204</p></div><p class="rvt-ts-14 rvt-m-bottom-lg">Fictional event for interface demonstration. No reservation is made.</p><div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div><footer>Native Rivet 2.9.1 tabs · Arial font fallback · Original example content<br>Keyboard: use Left and Right to move between tabs, then Enter or Space to activate.</footer></main><script src="vendor/rivet-2.9.1/rivet.min.js"></script><script>Rivet.init();</script></body></html>
```

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

- Скачайте полный пример из раздела «Источники». Точная команда локального запуска приведена в README.

- Оставьте пути к ресурсам поставщика относительными к этому документу; архив включает все ресурсы, используемые в предварительном просмотре.

## Настройка агента для дизайн-системы Rivet

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

Пути к браузерным файлам rivet-core 2.9.1 сверены с официальным руководством по началу работы. Настройте публичную директорию в соответствии со своим сервером; в примере используются локальные копии и резервный шрифт. ZIP-архив с полным рабочим примером в разделе «Источники» также содержит точные зависимости для предпросмотра и полный документ. Распакуйте его, запустите в этой директории python3 -m http.server 8080, затем откройте http://localhost:8080/indiana-rivet.html. Не открывайте примеры с модулями через file://.

```
npm install rivet-core@2.9.1
mkdir -p public/vendor/rivet
cp node_modules/rivet-core/css/rivet.min.css public/vendor/rivet/
cp node_modules/rivet-core/js/rivet.min.js public/vendor/rivet/

# Add these tags to the HTML served from public/:
# <link rel="stylesheet" href="/vendor/rivet/rivet.min.css">
# ...component markup...
# <script src="/vendor/rivet/rivet.min.js"></script>
# <script>Rivet.init();</script>
```

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

```
Создайте страницу с описанием университетского мастер-класса на Rivet версии 2.9.1, используя штатные вкладки HTML. Подключите rivet.min.css и rivet.min.js и вызовите Rivet.init(). Задайте совпадающие значения data-rvt-tab/data-rvt-tab-panel, содержательную метку списка вкладок и атрибут data-rvt-tab-init для первой панели. Название, дату и важные уведомления разместите вне вкладок. Используйте основной текст размером 16px, заголовки панелей размером 23px, заголовок страницы размером 32px и токены интервалов Rivet. Учитывайте точки адаптивности 480/740/1080/1260/1400px. Не перегружайте панели текстом; сохраните управление фокусом и выбором с клавиатуры, а все вымышленные сведения о мероприятии обозначьте как демонстрационный контент. Не используйте символику IU без разрешения.
```

## Источники и область применения дизайн-системы Rivet

Технический справочник Rivet и демонстрация вымышленного мастер-класса. Использование символики учреждения и шрифтов регулируется правилами Университета Индианы; реальных посещений или бронирования не предлагается.

- Обзор Rivet Официальное описание назначения и обзор ресурсов.

- Токены дизайн-системы Именованные значения для общих визуальных решений.

- Макеты Стартовые макеты для приложений и контентных страниц.

- Компоненты Документированные компоненты интерфейса.

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

## Связанные ресурсы дизайн-системы Rivet

### Digital Agency дизайн-система

Создавайте удобные для чтения интерфейсы японских госуслуг с текстовыми ролями DADS, семантическими токенами и нативной анатомией компонентов HTML. Попробуйте рабочую форму поиска квитанции с ошибками формата, результатом «совпадений нет» и доступной для проверки записью о статусе.

### KERN

Создайте нативный интерфейс KERN с проверенной типографикой, семантическими темами, раскрывающимися элементами и обратимым процессом подтверждения.

### Michigan Forty Two

Изучите поддерживаемый процесс WordPress, веб-палитру и шаблоны справочника сотрудников Forty-Two на примере рабочего фильтра по должностям и областям исследований.


- [Справочник по реализации](https://rivet.iu.edu/components/tabs/)
- [Источник](https://rivet.iu.edu/utilities/typography/)
- [Источник](https://rivet.iu.edu/design-tokens/)
- [Прочитать вспомогательную спецификацию](https://rivet.iu.edu/getting-started/)
- [Прочитать вспомогательную спецификацию](https://rivet.iu.edu/utilities/typography/)
- [Прочитать вспомогательную спецификацию](https://rivet.iu.edu/design-tokens/)
- [Справочник по коду](https://rivet.iu.edu/components/tabs/)
- [Прочитать вспомогательную спецификацию](https://rivet.iu.edu/components/tabs/)
- [Обзор Rivet Официальное описание назначения и обзор ресурсов.](https://rivet.iu.edu/)
- [Токены дизайн-системы Именованные значения для общих визуальных решений.](https://rivet.iu.edu/design-tokens/)
- [Макеты Стартовые макеты для приложений и контентных страниц.](https://rivet.iu.edu/layouts/)
- [Компоненты Документированные компоненты интерфейса.](https://rivet.iu.edu/components/)