# Дизайн-система gov.cz ## Дизайн-система gov.cz Предварительный просмотр интерфейса Просмотрите шесть оригинальных ресурсов на двух страницах, откройте материал для чтения и вернитесь к действию. ## Дизайн-система gov.cz Справочник по дизайну Фактические примитивы цветов и семантические псевдонимы из tokens.css пакета @gov-design-system-ce/styles 4.7.1. В предварительном просмотре используются опубликованные стили и пакет Roboto. ### Основные и нейтральные примитивы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --color-primary-50 | rgb(242, 246, 252) | Опубликованные значения примитивов версии 4.7.1. Обычно приложению следует использовать соответствующую семантическую роль. | | --color-primary-100 | rgb(226, 238, 248) | Опубликованные значения примитивов версии 4.7.1. Обычно приложению следует использовать соответствующую семантическую роль. | | --color-primary-600 | rgb(0, 70, 155) | Опубликованные значения примитивов версии 4.7.1. Обычно приложению следует использовать соответствующую семантическую роль. | | --color-primary-700 | rgb(14, 53, 120) | Опубликованные значения примитивов версии 4.7.1. Обычно приложению следует использовать соответствующую семантическую роль. | | --color-primary-800 | rgb(16, 38, 87) | Опубликованные значения примитивов версии 4.7.1. Обычно приложению следует использовать соответствующую семантическую роль. | | --color-secondary-600 | rgb(250, 180, 19) | Опубликованные значения примитивов версии 4.7.1. Обычно приложению следует использовать соответствующую семантическую роль. | | --color-neutral-0 | rgb(255, 255, 255) | Опубликованные значения примитивов версии 4.7.1. Обычно приложению следует использовать соответствующую семантическую роль. | | --color-neutral-50 | rgb(246, 246, 246) | Опубликованные значения примитивов версии 4.7.1. Обычно приложению следует использовать соответствующую семантическую роль. | | --color-neutral-950 | rgb(38, 38, 38) | Опубликованные значения примитивов версии 4.7.1. Обычно приложению следует использовать соответствующую семантическую роль. | ### Роли для чтения и обратной связи | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --text-primary | var(--color-neutral-950) | Семантические псевдонимы сохранены, чтобы их роль оставалась видимой; не заменяйте каждый псевдоним несвязанным локальным HEX-значением. | | --text-secondary | var(--color-neutral-700) | Семантические псевдонимы сохранены, чтобы их роль оставалась видимой; не заменяйте каждый псевдоним несвязанным локальным HEX-значением. | | --text-primary-color | var(--color-primary-600) | Семантические псевдонимы сохранены, чтобы их роль оставалась видимой; не заменяйте каждый псевдоним несвязанным локальным HEX-значением. | | --text-white | var(--color-neutral-0) | Семантические псевдонимы сохранены, чтобы их роль оставалась видимой; не заменяйте каждый псевдоним несвязанным локальным HEX-значением. | | --text-status-error | var(--color-error-700) | Семантические псевдонимы сохранены, чтобы их роль оставалась видимой; не заменяйте каждый псевдоним несвязанным локальным HEX-значением. | | --text-status-success | var(--color-success-700) | Семантические псевдонимы сохранены, чтобы их роль оставалась видимой; не заменяйте каждый псевдоним несвязанным локальным HEX-значением. | | --status-focus | var(--color-focus-600) | Семантические псевдонимы сохранены, чтобы их роль оставалась видимой; не заменяйте каждый псевдоним несвязанным локальным HEX-значением. | | --status-warning | var(--color-warning-400) | Семантические псевдонимы сохранены, чтобы их роль оставалась видимой; не заменяйте каждый псевдоним несвязанным локальным HEX-значением. | | --status-error | var(--color-error-600) | Семантические псевдонимы сохранены, чтобы их роль оставалась видимой; не заменяйте каждый псевдоним несвязанным локальным HEX-значением. | ### Состояния основной кнопки | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --button-solid-primary | var(--color-primary-600) | Фактические токены состояний, используемые в опубликованных стилях кнопки. Различайте отключённое, наведённое и активное состояния. | | --button-solid-primary-hover | var(--color-primary-700) | Фактические токены состояний, используемые в опубликованных стилях кнопки. Различайте отключённое, наведённое и активное состояния. | | --button-solid-primary-active | var(--color-primary-800) | Фактические токены состояний, используемые в опубликованных стилях кнопки. Различайте отключённое, наведённое и активное состояния. | | --button-solid-disabled | var(--color-neutral-200) | Фактические токены состояний, используемые в опубликованных стилях кнопки. Различайте отключённое, наведённое и активное состояния. | | --button-outlined-primary | var(--color-primary-50) | Фактические токены состояний, используемые в опубликованных стилях кнопки. Различайте отключённое, наведённое и активное состояния. | | --button-outlined-primary-hover | var(--color-primary-100) | Фактические токены состояний, используемые в опубликованных стилях кнопки. Различайте отключённое, наведённое и активное состояния. | | --button-outlined-primary-active | var(--color-primary-200) | Фактические токены состояний, используемые в опубликованных стилях кнопки. Различайте отключённое, наведённое и активное состояния. | ## Дизайн-система gov.cz Полное руководство Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система gov.cz Основы Gov CE и порядок подключения ресурсов ### Используйте согласованные версии пакетов > В этом примере компоненты, стили, значки и шрифты зафиксированы на версии 4.7.1. Пять таблиц стилей для основ подключаются в опубликованном порядке. У каждой из них своя задача: одних переменных недостаточно, чтобы оформить карточку, а одной регистрации пользовательского элемента — чтобы подключить глобальный компонент CSS. Полный файл точки входа подключает все пять таблиц перед небольшим оригинальным слоем композиции. ### Инициализируйте конфигурацию до регистрации компонентов Путь к значкам настраивается до запуска динамически импортируемых модулей точки входа компонентов. Порядок важен: компонент пагинации загружает значки стрелок в составе собственных зависимостей. Скопируйте всю папку со значками в настроенный общедоступный каталог, сохранив вложенные папки. Успешный импорт JavaScript не подтверждает успешную загрузку отдельных значков. ## Дизайн-система gov.cz Ссылки на семантические цвета и состояния ### Связывайте цвет с ролью В справочнике голубой основной примитив отделён от псевдонимов текста, фокуса и состояния кнопки. Использование одного и того же визуально голубого цвета повсюду нарушило бы эти соглашения. В наборе используются официальные сплошные основные кнопки, а их активный, наведённый и отключённый вид задаётся таблицей стилей компонента. Только компоновка окружающей коллекции — оригинальная работа CSS. ### Показывайте типографику и контекст содержимого Roboto загружается из соответствующего пакета шрифтов. У карточек есть короткие заголовки с указанием действия, строка метаданных и краткое описание перед действием чтения. Тексты шести ресурсов — оригинальный учебный материал OpenDesign, а не перевод официальных инструкций правительства Чехии. Они предназначены для демонстрации иерархии и полного локального взаимодействия без имитации государственной службы. ## Дизайн-система gov.cz Слоты карточки и действия чтения ### Размещайте заголовок в поддерживаемом слоте Для каждой gov-card заголовок передаётся в слот headline. Метаданные, описание и кнопка составляют содержимое. У действия задан aria-label с названием ресурса, чтобы вспомогательные технологии различали одинаковые кнопки «Читать ресурс». Компонент передаёт атрибуты ARIA своему внутреннему интерактивному элементу; выдуманный атрибут accessible-label этого не обеспечит. ### Оставляйте компоновку за пределами контракта компонента Сетка CSS из трёх колонок на узком экране становится одноколоночной. Сетка и её контрольная точка адаптивности созданы для этого примера и не являются дополнительными официальными свойствами карточки. В предварительном просмотре также снимается глобальное ограничение минимальной ширины body в 320px внутри очень узкого встроенного контейнера. Эта небольшая корректировка композиции сохраняет стилизацию компонента и предотвращает переполнение родительской страницы. ## Дизайн-система gov.cz Нативная пагинация и состояние приложения ### Читайте данные нативного события Для gov-pagination заданы total=6 и page-size=3. Событие gov-page передаёт detail.pagination.currentPage, по которому выбираются соответствующие три записи. Компонент пагинации отвечает за элементы управления текущей страницей, а приложение — за набор данных и отображаемую его часть. Все стандартные чешские подписи навигации явно заменены английскими для этого примера на английском языке. - total — это число записей, а не число страниц. - page-size задаёт количество элементов на странице. - gov-page предоставляет detail.pagination.currentPage. - Подписи навигации должны соответствовать языку интерфейса. ### Не допускайте отображения устаревших подробностей после смены страницы При переходе на другую страницу открытая запись закрывается, поэтому её описание не выглядит частью другого набора карточек. Счётчик показывает «Ресурсы 1–3 или 4–6 из 6». Это локальная пагинация для небольшого известного набора данных, поэтому здесь нет искусственного индикатора загрузки и утверждений о запросе к серверу. Для реализации с серверной загрузкой потребуется отдельный контракт состояний ожидания, ошибки и результата. ## Дизайн-система gov.cz Перемещение фокуса при чтении и возврате ### Переместить фокус на открытую запись Действие «Читать» заполняет локальную область с подробностями и переводит фокус на её заголовок. Так пользователи клавиатуры получают понятную точку назначения после действия, добавляющего содержимое под коллекцией. Для заголовка, на который можно переместить фокус, используется tabindex=-1: приложение может установить на него фокус, но он не становится дополнительной остановкой при обычном переходе клавишей Tab. Открытое содержимое остаётся обычным текстом для чтения. ### Вернуться к действию, которое открыло запись Кнопка «Назад к ресурсам» скрывает подробности и возвращает фокус на исходную внутреннюю кнопку. Это не модальное окно: фокус не блокируется внутри него, семантика диалога не добавляется, а страница не затемняется. Исходная коллекция остаётся доступной. Повторное открытие и закрытие записей, а также переход между страницами позволяют проверить, согласованно ли меняются состояние приложения и фокус при выборе разных ресурсов. ## Дизайн-система gov.cz Полная локальная интеграция ### Используйте предоставленные файлы вместе В записи приведён полный код приложения: все шесть элементов, создание карточек, обработка пагинации и перемещение фокуса на подробности. Таблица стилей содержит только исходную композицию. Установите четыре пакета с зафиксированными версиями, скопируйте значки и сохраните оба файла в проекте на vanilla Vite. Предварительный просмотр в браузере включает ровно эти компоненты и локальные файлы шрифтов. 1. Установите все четыре пакета Gov CE версии 4.7.1. 2. Скопируйте значки в public/assets/gov-cz-icons, сохранив структуру подкаталогов. 3. Сохраните полный JavaScript и композицию CSS в src. 4. Запустите приложение и проверьте пагинацию, возврат фокуса и запросы значков. ### Проверьте взаимодействие и загрузку ресурсов Откройте первую запись, верните фокус на её кнопку, перейдите на вторую страницу и прочитайте другую запись. Убедитесь, что в начале отключены кнопки первой и предыдущей страниц, а в конце — следующей и последней. Проверьте этот сценарий на экранах настольных компьютеров и телефонов, в том числе при меньшей ширине встроенного блока. Помимо ошибок JavaScript проверьте в панели сети, не отсутствуют ли значки. ## Дизайн-система gov.cz Примеры компонентов дизайн-системы ### main.js — полный пример с пагинацией Полный набор данных, регистрация нативных компонентов, разбиение по страницам и фокус при чтении. ``` import '@gov-design-system-ce/styles/tokens.css'; import '@gov-design-system-ce/styles/styles.css'; import '@gov-design-system-ce/styles/layout.css'; import '@gov-design-system-ce/styles/components.css'; import '@gov-design-system-ce/styles/animations.css'; import '@gov-design-system-ce/fonts/lib/roboto.css'; import './gov-cz.css'; window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'}; const resources=[ {title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'}, {title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'}, {title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'}, {title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'}, {title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'}, {title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'} ]; document.querySelector('#root').innerHTML=`

OPENDESIGN · ORIGINAL SERVICE TOOLKIT

Small steps toward a clearer service

Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.

`; await import('@gov-design-system-ce/components/dist/components/gov-card.js'); await import('@gov-design-system-ce/components/dist/components/gov-pagination.js'); let page=1,opened=-1; const cards=document.querySelector('#cards'), detail=document.querySelector('#detail'); function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`

${r.title}

${r.kind} · ${r.time}

${r.summary}

Read resource`;cards.append(card)});document.querySelector('#range').textContent=`Resources ${(page-1)*3+1}–${page*3} of ${resources.length}`;detail.hidden=true;opened=-1;} cards.addEventListener('gov-click',e=>{let b=e.target.closest('[data-resource]');if(!b)return;opened=Number(b.dataset.resource);let r=resources[opened];document.querySelector('#detail-meta').textContent=r.kind+' · '+r.time;document.querySelector('#detail-title').textContent=r.title;document.querySelector('#detail-body').textContent=r.body;detail.hidden=false;document.querySelector('#detail-title').focus();}); document.querySelector('gov-pagination').addEventListener('gov-page',e=>{page=e.detail.pagination.currentPage;render();}); document.querySelector('#close').addEventListener('gov-click',()=>{detail.hidden=true;const button=cards.querySelector(`[data-resource="${opened}"] button`);button?.focus();opened=-1;});render(); ``` Справочник по коду - Настройки выполняются до импорта точек входа компонентов. Для имён ARIA используется aria-label. ### gov-cz.css — композиция исходной коллекции Адаптивная сетка и удобная для чтения локальная область с подробностями; стили нативных компонентов сохранены. ``` body{margin:0;color:var(--text-primary);font-family:Roboto,Arial,sans-serif}main{max-width:1160px;margin:auto;padding:32px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--color-primary-600)}h1{max-width:22ch;font-size:40px;line-height:1.15;margin:16px 0}.lead{max-width:66ch;font-size:18px;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}.cards gov-card{height:100%}.cards h2{font-size:22px;line-height:1.3}.cards p{margin-bottom:20px;line-height:1.6}.meta{font-size:14px;color:#555}.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}#range{font-size:14px}#detail{padding:24px;border-left:4px solid var(--color-primary-600);background:var(--color-primary-50);margin-top:32px}#detail-body{max-width:66ch;line-height:1.7}aside{margin-top:32px;padding-top:24px;border-top:1px solid #ddd;font-size:14px;line-height:1.6}aside p{max-width:80ch}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.cards{grid-template-columns:1fr}h1{font-size:32px}.pagination-row{display:block}gov-pagination{max-width:100%;overflow:auto}} html,body{min-width:0}.eyebrow{overflow-wrap:anywhere} ``` Справочник по коду - Макет сетки и переопределение минимальной ширины встроенного блока — исходные CSS приложения. ## Дизайн-система gov.cz Настройка агента ### Отправная точка для реализации Сохраняйте структуру подкаталогов значков. В этом примере напрямую импортируются модули точек входа компонентов; копировать среду выполнения для отложенной загрузки не требуется. ``` npm create vite@latest gov-toolkit -- --template vanilla cd gov-toolkit npm install npm install @gov-design-system-ce/components@4.7.1 @gov-design-system-ce/styles@4.7.1 @gov-design-system-ce/icons@4.7.1 @gov-design-system-ce/fonts@4.7.1 mkdir -p public/assets/gov-cz-icons cp -R node_modules/@gov-design-system-ce/icons/lib/. public/assets/gov-cz-icons/ # Save the supplied files as src/main.js and src/gov-cz.css. # The root index.html must contain
and load /src/main.js. npm run dev ``` ### Запрос для вашего проекта ``` Соберите предоставленный набор компонентов Gov CE 4.7.1, используя нативные карточки, кнопки и пагинацию. Сохраните фактический порядок таблиц стилей и настройки путей к значкам. Используйте gov-page detail.pagination.currentPage, понятные подписи ARIA на английском языке, закрывайте устаревшие подробности при смене страницы и возвращайте фокус после чтения. Сохраните указание авторства исходных примеров содержимого. ``` ## Дизайн-система gov.cz Источники и область применения Оригинальное исследование набора инструментов для сервисов OpenDesign на компонентах, стилях, значках и шрифтах Gov Design System CE 4.7.1. Текст примеров и поведение коллекции созданы для этого примера; это не официальный государственный сервис. - Интеграция HTML Порядок ресурсов, регистрация и композиция компонентов. - Пагинация Управление страницами и семантика навигации. - Card Содержимое карточки и слот заголовка. - Цветовые токены Роли базовых и семантических цветов. - Типографика Шрифт и иерархия текста. ## Дизайн-система gov.cz Связанные ресурсы ### GOV.UK дизайн-система Создайте путь в стиле GOV.UK: ответьте на вопросы и проверьте ответы. Используйте актуальную типографическую шкалу v6, адаптивные отступы, функциональные цвета, связанную валидацию и конкретный пример интеграции Frontend. ### HarvardSites дизайн-система Изучите HarvardSites как редакционную платформу: сравните стили сайтов, выберите документированные сочетания шрифтов и соберите университетские страницы из специализированных компонентов контента. ### Helsinki Создайте группы выбора HDS с нативным поведением, семантические цвета обратной связи и связанные сводки ошибок на примере полноценного локального процесса проверки и исправления. - [Справочник по реализации](https://designsystem.gov.cz/komponenty/pagination) - [Источник](https://designsystem.gov.cz/principy/barevne-tokeny) - [Справочник по коду](https://designsystem.gov.cz/zaciname/developers/html) - [Справочник по коду](https://designsystem.gov.cz/komponenty/card) - [Интеграция HTML Порядок ресурсов, регистрация и композиция компонентов.](https://designsystem.gov.cz/zaciname/developers/html) - [Пагинация Управление страницами и семантика навигации.](https://designsystem.gov.cz/komponenty/pagination) - [Card Содержимое карточки и слот заголовка.](https://designsystem.gov.cz/komponenty/card) - [Цветовые токены Роли базовых и семантических цветов.](https://designsystem.gov.cz/principy/barevne-tokeny) - [Типографика Шрифт и иерархия текста.](https://designsystem.gov.cz/principy/typografie)