Изучите реальные цветовые роли Ripple, шкалу отступов из 14 шагов и ссылки на адаптивную типографику на примере полноценного расписания семинара с последовательным раскрытием информации, индикатором выполнения и переходом к следующему шагу с клавиатуры.
Полная авторская реализация HTML/CSS/JavaScript с задокументированными значениями Ripple; запасной шрифт Arial, без нативной среды выполнения Ripple. · Справочник по реализации
02
Справочник по дизайну системы дизайн-система Ripple
Для этого примера проверена опубликованная документация по дизайну Ripple: стандартные роли цветов, интервалы, сочетания размера и высоты строки шрифта, а также цвета фокуса. Это справочные материалы по дизайну, а не утверждение о наличии встроенного выпуска Ripple.
Сочетания размера и высоты строки из опубликованных ролей шрифтов. В автономном примере используется документированный запасной шрифт Arial, а не шрифт VIC.
rpl-type-h1
32/36px small · 56/60px large · 700
Сочетания размера и высоты строки из опубликованных ролей шрифтов. В автономном примере используется документированный запасной шрифт Arial, а не шрифт VIC.
rpl-type-h2
24/32px small · 32/40px large · 700
Сочетания размера и высоты строки из опубликованных ролей шрифтов. В автономном примере используется документированный запасной шрифт Arial, а не шрифт VIC.
rpl-type-h3
20/28px small · 24/32px large · 700
Сочетания размера и высоты строки из опубликованных ролей шрифтов. В автономном примере используется документированный запасной шрифт Arial, а не шрифт VIC.
rpl-type-p
16/24px
Сочетания размера и высоты строки из опубликованных ролей шрифтов. В автономном примере используется документированный запасной шрифт Arial, а не шрифт VIC.
rpl-type-p-small
14/20px
Сочетания размера и высоты строки из опубликованных ролей шрифтов. В автономном примере используется документированный запасной шрифт Arial, а не шрифт VIC.
Основы дизайн-системы Ripple и область применения во время выполнения
Отделяйте справочник по дизайну от среды выполнения компонентов
Справочник описывает опубликованную дизайн-систему Ripple. Интерактивный прототип таймлайна для мастерской — это самостоятельная оригинальная интерпретация выбранных значений для HTML, CSS и JavaScript. Он не запускает компоненты Vue из Ripple, не использует недокументированное зеркало пакета и не выдается за сервис правительства штата Виктория. Это ограничение явно обозначено в предварительном просмотре и сохраняется в загружаемом исходном коде.
Осознанно выбирайте способ встроить систему
Ripple предлагает пакет для Vue и вариант только со стилями через основной пакет. Для официальной установки необходим доступ к GitHub Packages. Даже при использовании только стилей разметка и поведение остаются на стороне приложения. При интеграции этого дистрибутива воспользуйтесь ссылками на официальные инструкции по доступу и зафиксируйте выбранную версию. Для самостоятельного примера ниже не нужны ни аутентификация, ни установка пакета.
Цветовые роли и клавиатурный фокус дизайн-системы Ripple
Разделяйте цвет бренда и цвет контента
В заголовке таймлайна используется более тёмный основной цвет, на его границе — акцентный, а для текста — нейтральная текстовая роль. В предоставленном исходном коде это отдельные переменные CSS. В исходной панели статуса используется светлая акцентная подложка. В справочнике указаны и названия ролей, и их значения: так будущая смена темы позволит изменить нужные взаимосвязи, а не набор несвязанных шестнадцатеричных значений.
Обеспечьте заметное отличие клавиатурного фокуса
Для фокуса используется оранжевый цвет с тёмным содержимым, а не ещё один оттенок синего по умолчанию. В исходном правиле для кнопок и сводки меняется подложка и добавляется тёмная обводка. Для фокуса на флажке остаётся только обводка. Это реализация опубликованного подхода к цвету фокуса, а не утверждение, что пример импортирует встроенные утилиты фокуса Ripple или обеспечивает доступность для любой возможной темы.
Интервалы и адаптивная типографика дизайн-системы Ripple
Используйте фактическую шкалу интервалов
В исходном коде для ритма текста используются именованные интервалы 8, 16, 24, 32 и 48px. В полном справочнике указаны и более крупные значения; последовательность перестаёт быть простым кратным индекса, поэтому rpl-sp-9 равен 40px, а не 36px. Ширина промежутка в сетке и внутренние отступы секций намеренно используют значения одной шкалы, но выполняют разные функции в макете.
Чётко обозначьте границы использования шрифта
В документации Ripple для VIC указаны запасные шрифты Arial и Helvetica. В этом примере нет файла шрифта VIC, поэтому явно используется Arial. На контрольной точке примера 992px размер заголовка меняется с 32/36px на 56/60px, а размер основного текста остаётся 16/24px. Эти значения размера шрифта и межстрочного интервала взяты из документации; композиция таймлайна оригинальная, поэтому её не следует описывать как пиксельную копию встроенного компонента.
Контент таймлайна и постепенное раскрытие в дизайн-системе Ripple
Отведите каждому этапу свою роль
Первый этап определяет решение, второй помогает подготовиться к участию, а третий фиксирует действие. Относительные указания времени задают последовательность, не создавая вымышленных государственных сроков или обещаний по оказанию услуг. Для каждого этапа есть краткая постоянно видимая сводка и дополнительные заметки в стандартном элементе details. Этапы остаются упорядоченным списком, хотя для них используются собственные визуальные маркеры.
Относительное время обозначает последовательность этапов мастерской.
Видимые сводки объясняют цель каждого этапа.
В раскрываемых заметках содержатся дополнительные сведения.
Готовность отмечается отдельным флажком.
Не смешивайте чтение с готовностью
Прогресс дизайн-системы Ripple, следующий шаг и сброс
Определяйте следующий шаг по текущему состоянию
Кнопка «Перейти к следующему незавершённому шагу» находит первый неотмеченный этап, раскрывает заметки и переводит фокус на его флажок. Этап не пропускается, даже если пользователь уже открывал его заметки. Когда отмечены все три флажка, кнопка следующего шага отключается, а статус сообщает, что подготовка ко всем этапам завершена. Если снять отметку, кнопка снова становится доступной.
Сбрасывайте все связанные состояния одновременно
Сброс снимает отметки с трёх флажков, закрывает заметки, обновляет элемент прогресса и возвращает фокус к первому флажку. При этом не остаётся баннера о завершении и не создаётся впечатление, будто удалена удалённая запись. В этом локальном примере состояние хранится только в памяти; пояснение на экране сообщает, что оно не сохраняется и не отправляется.
Полный исходный код и проверка дизайн-системы Ripple
Запустите автономный пример
Сохраните предоставленный полный документ как index.html и запустите сервер из его каталога. В документе есть собственные токены, разметка, пример читабельного контента и код взаимодействия, поэтому запросы к внешней среде выполнения и шрифтам не выполняются. Прежде чем создавать настоящий сервис, сверьтесь со ссылками на справочные материалы: там можно проверить встроенные API Ripple, выбрать версию и найти разрешённые фирменные материалы.
Сохраните полный пример HTML как index.html.
Локально запустите сервер в этом каталоге.
С помощью клавиатуры проверьте переход к следующему шагу, завершение и сброс.
Для отдельной интеграции с Ripple используйте официальный доступ к пакетам и зафиксированные версии.
Проверьте весь переход между состояниями
Отметьте готовность первого пункта, воспользуйтесь кнопкой перехода к следующему шагу и убедитесь, что фокус переместился на второй флажок, а заметки к нему раскрылись. Отметьте все пункты, убедитесь, что кнопка перехода к следующему шагу отключилась, затем снимите одну отметку и проверьте, что кнопка снова доступна. Выполните сброс и проверьте прогресс и раскрытие заметок. На экране телефона панель статуса перемещается под таймлайн, все элементы управления остаются доступными.
Примеры компонентов дизайн-системы Ripple
index.html — полный таймлайн мастерской
Все значения токенов, адаптивные стили, контент, прогресс и поведение фокуса собраны в одном готовом к запуску документе.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop planning timeline</title><style>
:root{--rpl-clr-primary:#0052c2;--rpl-clr-primary-alt:#003174;--rpl-clr-accent:#0095ec;--rpl-clr-accent-alt:#e6f5fd;--rpl-clr-type-default:#1a1a1a;--rpl-clr-neutral-0:#fff;--rpl-clr-neutral-100:#f5f5f5;--rpl-clr-neutral-200:#e6e6e6;--rpl-clr-focus:#ff9e1b;--rpl-clr-focus-contrast:#1a1a1a;--rpl-sp-2:8px;--rpl-sp-4:16px;--rpl-sp-6:24px;--rpl-sp-8:32px;--rpl-sp-10:48px;--rpl-type-font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--rpl-clr-neutral-0);color:var(--rpl-clr-type-default);font:16px/1.5 var(--rpl-type-font-family)}main{max-width:1160px;margin:auto;padding:var(--rpl-sp-8)}header{background:var(--rpl-clr-primary-alt);color:white;padding:var(--rpl-sp-8);border-bottom:8px solid var(--rpl-clr-accent)}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}h1{font-size:32px;line-height:36px;margin:16px 0;max-width:20ch}header p:last-child{max-width:65ch;margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:var(--rpl-sp-10);margin-top:var(--rpl-sp-8)}h2{font-size:24px;line-height:32px;margin:0 0 16px}h3{font-size:20px;line-height:28px;margin:0}.timeline{list-style:none;margin:0;padding:0 0 0 24px;border-left:2px solid var(--rpl-clr-primary);}.timeline>li{position:relative;padding:0 0 32px 8px}.timeline>li:before{content:'';position:absolute;width:14px;height:14px;background:var(--rpl-clr-primary);border:3px solid white;outline:2px solid var(--rpl-clr-primary);border-radius:50%;left:-32px;top:6px}.when{font-size:14px;font-weight:700;color:var(--rpl-clr-primary);margin:0 0 8px}.timeline p{margin:8px 0 16px}.timeline label{display:flex;align-items:flex-start;gap:8px;font-weight:700}.timeline input{width:20px;height:20px;flex-shrink:0;margin:2px 0;accent-color:var(--rpl-clr-primary)}details{background:var(--rpl-clr-neutral-100);margin:16px 0;padding:16px}summary{font-weight:700;cursor:pointer}details ul{padding-left:24px}.progress{background:var(--rpl-clr-accent-alt);padding:24px;align-self:start;border-top:4px solid var(--rpl-clr-primary)}progress{width:100%;height:16px;accent-color:var(--rpl-clr-primary)}button{font:700 16px/24px var(--rpl-type-font-family);padding:12px 16px;cursor:pointer;border:2px solid var(--rpl-clr-primary);background:var(--rpl-clr-primary);color:white;text-align:left;max-width:100%}button:hover{background:var(--rpl-clr-primary-alt)}.secondary{color:var(--rpl-clr-primary);background:white;margin-top:16px}button:disabled{cursor:default;opacity:.6}.progress button{width:100%;margin-top:16px}button:focus-visible,summary:focus-visible{outline:3px solid var(--rpl-clr-focus-contrast);outline-offset:2px;background:var(--rpl-clr-focus);color:var(--rpl-clr-focus-contrast);border-radius:0}input:focus-visible{outline:3px solid var(--rpl-clr-focus);outline-offset:3px}.note{font-size:14px;border-top:1px solid var(--rpl-clr-neutral-200);padding-top:24px;margin-top:8px;max-width:80ch}[hidden]{display:none!important}@media(min-width:992px){h1{font-size:56px;line-height:60px}h2{font-size:32px;line-height:40px}}@media(max-width:760px){main{padding:20px}header{padding:24px}.layout{grid-template-columns:1fr;gap:24px}.eyebrow{overflow-wrap:anywhere}}
</style></head><body><main><header><p class="eyebrow">OpenDesign · Workshop practice</p><h1>Make room for a useful conversation</h1><p>A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.</p></header><div class="layout"><section aria-labelledby="plan-heading"><h2 id="plan-heading">Your preparation timeline</h2><ol class="timeline">
<li><p class="when">One week before</p><h3>Define the decision</h3><p>Agree on the question the workshop should answer and the people who need to take part.</p><details><summary>Preparation notes</summary><ul><li>Write a one-sentence outcome.</li><li>Invite people with different perspectives on the decision.</li><li>Explain what is already decided and what is still open.</li></ul></details><label><input type="checkbox" data-step="0">The purpose and invitations are ready</label></li>
<li><p class="when">Two days before</p><h3>Prepare for participation</h3><p>Share a short agenda and offer a way to contribute before the session.</p><details><summary>Preparation notes</summary><ul><li>Send readable material in advance.</li><li>Check access needs and remote participation.</li><li>Choose someone to capture decisions.</li></ul></details><label><input type="checkbox" data-step="1">The agenda and access arrangements are ready</label></li>
<li><p class="when">On the day</p><h3>Leave with a next step</h3><p>Close with a clear decision, an owner and a date to review what happens next.</p><details><summary>Preparation notes</summary><ul><li>Leave time to compare different views.</li><li>Record unanswered questions separately.</li><li>Read back the agreed action before closing.</li></ul></details><label><input type="checkbox" data-step="2">The action and follow-up are recorded</label></li>
</ol></section><aside class="progress" aria-labelledby="progress-heading"><h2 id="progress-heading">Preparation status</h2><p id="count" role="status">0 of 3 steps ready</p><progress max="3" value="0" aria-label="Preparation progress"></progress><p id="next-note">Next: Define the decision</p><button id="next" type="button">Go to next unfinished step</button><button class="secondary" id="reset" type="button">Reset checklist</button></aside></div><p class="note">An original OpenDesign HTML/CSS study using published Ripple color, spacing and type values. It uses Arial, Ripple’s documented fallback, and does not run the Ripple Vue components or supply the VIC font. The checklist stays in this page and is not saved or sent.</p></main><script>
const checks=[...document.querySelectorAll('[data-step]')],names=['Define the decision','Prepare for participation','Leave with a next step'];const next=document.querySelector('#next');
function update(){let count=checks.filter(c=>c.checked).length,first=checks.findIndex(c=>!c.checked);document.querySelector('#count').textContent=`${count} of 3 steps ready`;document.querySelector('progress').value=count;document.querySelector('#next-note').textContent=first<0?'All three preparation steps are ready.':'Next: '+names[first];next.disabled=first<0;}
checks.forEach(c=>c.addEventListener('change',update));next.addEventListener('click',()=>{let check=checks.find(c=>!c.checked);if(check){check.closest('li').querySelector('details').open=true;check.focus();}});document.querySelector('#reset').addEventListener('click',()=>{checks.forEach(c=>c.checked=false);document.querySelectorAll('details').forEach(d=>d.open=false);update();checks[0].focus();});update();
</script></body></html>
Это оригинальный код приложения, а не исходный код компонента Vue из Ripple.
Не нужны внешняя среда выполнения, запрос шрифта, учётная запись или отправка данных.
04
Настройка агента дизайн-системы Ripple
Отправная точка для реализации
Эта команда запускает автономную интерпретацию. Чтобы использовать встроенные средства Ripple, следуйте официальным инструкциям по доступу к GitHub Packages и настройке Vue или варианта только со стилями, указанным в разделе «Источники».
sh
# Save the complete example as index.html in an empty directory.
python3 -m http.server 8000
# Open http://localhost:8000/
Запрос для вашего проекта
Промпт для AI-агента
Создайте полный оригинальный таймлайн мастерской на основе предоставленного документа. Сохраните документированные значения ролей и интервалы Ripple, явно укажите Arial как запасной шрифт, разделите состояния чтения и готовности, обеспечьте перевод фокуса на следующий незавершённый этап, завершение и полный сброс. Обозначьте результат как интерпретацию HTML/CSS, а не как встроенную реализацию Vue для Ripple.
05
Источники и область применения дизайн-системы Ripple
Интерпретация OpenDesign на HTML/CSS с использованием опубликованных значений дизайн-системы Ripple и документированного запасного шрифта Arial. В этом предварительном просмотре не запускаются компоненты Ripple Vue и не используются файлы шрифтов VIC.
