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

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

Включайте увеличенный текст, повышенную контрастность и уменьшенную анимацию в предварительном просмотре; восстанавливайте настройки по умолчанию.

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

Изучены реализация CSS и React4.4.0; проверена граница между фирменными токенами и ресурсами. Все значения темы в предварительном просмотре созданы специально для этого примера.

### Контракт компонента с открытым исходным кодом

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| CSS package | @amsterdam/design-system-css 4.4.0 | Таблица стилей нативного переключателя используется без изменений. |
| Class anatomy | ams-switch; ams-switch__input; ams-switch__label | Поле ввода расположено непосредственно перед связанной с ним подписью. |
| Input semantics | type=checkbox; role=switch | Нативное состояние checked обозначает включённое или выключенное положение. |
| Native behavior | Immediate binary setting | В исходном коде React указано, что отправка формы не требуется. |
| React props | InputHTMLAttributes<HTMLInputElement> | Свойства checked, defaultChecked, onChange, disabled и ARIA передаются полю ввода. |
| Focus | Input focus styles the following label | Не скрывайте настоящее поле ввода с помощью display:none. |
### Полная исходная нейтральная тема переключателя

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --ams-switch-inline-size | 50px | Исходная ширина дорожки переключателя. |
| --ams-switch-thumb-inline-size / block-size | 22px / 22px | Исходная геометрия круглого бегунка. |
| --ams-switch-label-border-width | 3px | Внутренний отступ дорожки; смещение во включённом состоянии рассчитывается с учётом этого значения. |
| --ams-switch-background-color | #666 | Исходный цвет дорожки в выключенном состоянии. |
| --ams-switch-checked-background-color | #286044 | Исходный цвет дорожки во включённом состоянии; это не фирменный токен Amsterdam. |
| --ams-switch-thumb-background-color | #fff | Исходный цвет бегунка. |
| --ams-switch-disabled-background-color | #aaa | Внешний вид в отключённом состоянии; поведение обеспечивает нативное свойство disabled. |
| --ams-switch-outline-offset | 4px | Отступ рамки фокуса. |
| --ams-switch-cursor / disabled-cursor | pointer / not-allowed | Явная настройка взаимодействия. |
| --ams-switch-thumb-hover-box-shadow | 0 0 0 2px #fff | Исходное оформление при наведении. |
### Типографика и компоновка приложения

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Font / body | Arial / 18px with 1.5 leading | Исходная нейтральная конфигурация; ресурс Amsterdam Sans не используется. |
| Heading | 36px; 30px below700px | Решение приложения, а не официальная шкала Amsterdam. |
| Layout | 900px maximum; two columns with32px gap | Решение приложения; при ширине менее 700px используется одна колонка. |
| Larger reading mode | 22px article text | Локальная настройка, а не глобальная замена масштаба страницы в браузере. |
| Reduced motion | OS preference plus local preview setting | Компонент CSS уже учитывает prefers-reduced-motion при анимации переходов. |
### Повторное использование и ограничения по использованию ресурсов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Component code | EUPL-1.2 or later | Сохраняйте лицензию и применимые уведомления. |
| Documentation | CC0-1.0 | Используйте отдельно от фирменных ресурсов. |
| Token package4.3.0 | Proprietary assets | Для него предусмотрена собственная лицензия LICENSE; он не подпадает под лицензию открытого исходного кода. |
| Amsterdam Sans / icons / logo | Restricted institutional assets | Не включён в этот независимый пример. |
## Полное руководство по дизайн-системе Amsterdam

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

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

## Дизайн-система Amsterdam: компонент и тема оформления отдельно

### Корректно используйте слой с открытым исходным кодом

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

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

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

## Дизайн-система Amsterdam: полная нейтральная конфигурация

### Укажите все свойства, необходимые компоненту

В справочной таблице перечислены все переменные, используемые в выбранной таблице стилей переключателя. Для ширины, размеров бегунка, ширины границы, цветов, смещения контура, курсора и оформления при наведении заданы явные значения. Это исходные значения для данного примера, а не скопированные токены дизайн-системы Amsterdam. Благодаря этому пример можно воспроизвести, не подбирая недостающие параметры темы наугад.

Ширина дорожки — 50px, размер бегунка — 22px, ширина границы — 3px. Смещение бегунка во включённом состоянии рассчитывается на основе его ширины и ширины границы. Если изменить только ширину дорожки, бегунок может сместиться неправильно; изменяйте связанные размеры вместе и проверяйте оба состояния.

```
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}
```

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

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

## Дизайн-система Amsterdam: структура нативного переключателя

### Подпись должна идти сразу после поля ввода

Реализация React создаёт обёртку, поле ввода и пустую связанную подпись. В таблице стилей CSS используются селекторы соседних элементов, чтобы оформлять подпись в зависимости от состояний фокуса, checked и disabled поля ввода. Сохраняйте такой порядок в обычной реализации на HTML: если вставить описание между полем ввода и подписью, эти селекторы перестанут работать.

Настоящее поле ввода — это флажок с role="switch". Оно сохраняет нативное свойство checked и поведение при работе с клавиатурой. Поскольку видимая подпись не содержит текста, укажите доступное имя с помощью aria-label или aria-labelledby. В этом примере используется видимый заголовок настройки, а её пояснение связывается с помощью aria-describedby.

```
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>
```

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

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

## Дизайн-система Amsterdam: настройки применяются сразу

### Переключатель меняет текущее представление

В исходном коде компонента Switch задано поведение двоичной настройки с немедленным применением. Предварительный просмотр ему соответствует: увеличение текста меняет размер шрифта в статье, усиление контраста меняет цвет текста и обводку, а уменьшение анимации убирает короткий эффект появления метки. Здесь нет кнопки «Сохранить», которая создавала бы ложное впечатление, будто эти локальные настройки отправляются в сервис учётной записи.

Кнопка «Восстановить настройки по умолчанию» сбрасывает все три встроенных состояния checked и возвращает статье исходные классы. В сообщении о состоянии перечислены включённые настройки. После перехода на другую страницу или перезагрузки ничего не сохраняется. В производственном сервисе настроек можно реализовать сохранение, но нужно указать, на что влияет настройка: на эту страницу, устройство или учётную запись.

1. Включите «Увеличить текст» и проверьте размер абзаца в статье рядом.

2. Перейдите к пункту «Усилить контраст» и нажмите пробел, чтобы переключить его с клавиатуры.

3. Восстановите настройки по умолчанию и убедитесь, что все три переключателя и статья вернулись к исходному состоянию.

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

## Дизайн-система Amsterdam: клавиатура, фокус и анимация

### Сохраните доступ к встроенному полю ввода

Стили уменьшают визуальную ширину поля, но сохраняют сам элемент управления. Селектор фокуса задаёт обводку следующей метке. Если заменить поле декоративным div, будут утрачены встроенная семантика формы и доступность с клавиатуры, а поддержку клавиатуры придётся реализовать отдельно. Не применяйте к полю ввода display:none.

Встроенная таблица стилей ограничивает переходы условием prefers-reduced-motion:no-preference. Эффект в статье также учитывает настройку операционной системы независимо от локального переключателя. Пользователю, запросившему уменьшение анимации на системном уровне, не должно требоваться сначала искать дополнительный переключатель, чтобы интерфейс стал спокойнее.

- Считайте свойство checked единственным достоверным источником состояния и не придумывайте не связанную с ним визуальную индикацию включения.

- Задайте каждой настройке устойчивое имя и свяжите пояснение с полем ввода.

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

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

## Дизайн-система Amsterdam: компоновка предварительного просмотра настроек чтения

### Покажите эффект рядом с элементом управления

В примере используется компоновка в два столбца: эффект каждой настройки виден в статье. При ширине менее 700px, заданной для этого приложения, элементы управления располагаются над предварительным просмотром. Максимальная ширина 900px и промежуток 32px — решения для этой компоновки, а не подтверждение наличия общегородского токена сетки.

Для нейтрального шрифта используется Arial. Основной текст набран размером 18px с межстрочным интервалом 1.5; режим увеличенного текста меняет только размер шрифта в статье — на 22px. Это пример настройки приложения, а не замена масштабированию браузера и не утверждение, что именно такие размеры предписаны системой Amsterdam. Длинные подписи переносятся, не уменьшая ширину встроенного переключателя.

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

## Дизайн-система Amsterdam: интеграция с CSS или React

### Выберите уровень реализации

В существующем приложении на React проверенный компонент Switch принимает стандартные атрибуты поля ввода и передаёт ref этому полю. Для контролируемого использования задайте checked и onChange; для неконтролируемого можно задать defaultChecked. Компонент не предоставляет хранилище данных приложения или API настроек учётной записи.

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

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

## Дизайн-система Amsterdam: внедрение и ограничения

### Не путайте визуальное сходство с принадлежностью к системе

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

Подтверждённая область применения — один встроенный компонент с полной пользовательской темой и содержательным локальным поведением. Это не полная переработка городской темы. Если реальный продукт использует более широкий пакет CSS, необходимо определить и протестировать все переменные, нужные дополнительным компонентам, а не распространять конфигурацию темы Switch на не связанные с ним элементы управления.

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

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

### Полная нейтральная тема Switch

Определены все переменные, необходимые встроенной таблице стилей; все значения оригинальные.

```
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}
```

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

### Доступная встроенная структура

Настоящее поле checkbox, роль switch и расположенная рядом визуальная метка.

```
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>
```

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

### Полноценные настройки чтения с немедленным применением

Встроенный Switch CSS, пользовательская тема и видимые локальные эффекты.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences</title><link rel="stylesheet" href="vendor/amsterdam-switch-4.4.0/switch.css"><style>:root{--ams-switch-label-border-width:3px;--ams-switch-background-color:#666;--ams-switch-thumb-background-color:#fff;--ams-switch-thumb-inline-size:22px;--ams-switch-thumb-block-size:22px;--ams-switch-inline-size:50px;--ams-switch-checked-background-color:#286044;--ams-switch-disabled-background-color:#aaa;--ams-switch-disabled-cursor:not-allowed;--ams-switch-cursor:pointer;--ams-switch-outline-offset:4px;--ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;}*{box-sizing:border-box}body{margin:0;padding:32px 24px;font:18px/1.5 Arial,sans-serif;color:#242b28;background:#fafbf9}main{max-width:900px;margin:auto}h1{font-size:36px;line-height:1.2;margin:8px 0 16px}h2{font-size:24px;line-height:1.3}.layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.setting{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d5ddd7;padding:20px 0}.setting p{margin:4px 0;font-size:16px}.ams-switch{flex-shrink:0}.sample{background:white;border:1px solid #d5ddd7;padding:24px}.sample.large{font-size:22px}.sample.high{color:#000;border:3px solid #000}.sample .meta{font-size:.85em;color:inherit}.badge{display:inline-block;background:#e7eee8;padding:4px 8px}.sample:not(.quiet) .badge{animation:appear .3s ease}@keyframes appear{from{opacity:.2}to{opacity:1}}button{font:inherit;border:1px solid #286044;background:#fff;color:#286044;padding:10px 16px;cursor:pointer}button:focus-visible{outline:3px solid #286044;outline-offset:3px}footer{font-size:14px;margin-top:32px;border-top:1px solid #d5ddd7;padding-top:20px}#status{min-height:1.5em}@media(max-width:700px){body{padding:24px 16px}.layout{grid-template-columns:1fr}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){.sample .badge{animation:none!important}}</style><main><small>PERSONAL READING VIEW</small><h1>Make this page easier to read</h1><p>Settings apply immediately to the preview. They are not saved after you leave.</p><div class="layout"><section aria-label="Reading preferences"><div class="setting"><div><strong id="large-label">Larger text</strong><p id="large-hint">Increase the article text size.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="large" aria-labelledby="large-label" aria-describedby="large-hint"><label class="ams-switch__label" for="large"></label></div></div><div class="setting"><div><strong id="high-label">Stronger contrast</strong><p id="high-hint">Use black text and a stronger outline.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="high" aria-labelledby="high-label" aria-describedby="high-hint"><label class="ams-switch__label" for="high"></label></div></div><div class="setting"><div><strong id="quiet-label">Reduce preview motion</strong><p id="quiet-hint">Remove the short badge appearance effect.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="quiet" aria-labelledby="quiet-label" aria-describedby="quiet-hint"><label class="ams-switch__label" for="quiet"></label></div></div><button id="reset">Restore defaults</button><p id="status" role="status">Default reading settings.</p></section><article class="sample" id="sample"><span class="badge">Reading preview</span><h2>A quieter place to read</h2><p>A community reading room offers shared tables, individual seats and a small collection of reference books.</p><p>Before visiting, check opening hours and ask about any facilities you need.</p><p class="meta">Original example content · no external service</p></article></div><footer>Native Amsterdam Switch CSS 4.4.0 with an original neutral token configuration. No proprietary Amsterdam fonts, icons, logos or theme tokens. Original local preference behavior.</footer></main><script>const ids=['large','high','quiet'];function apply(){const enabled=[];ids.forEach(id=>{const on=document.getElementById(id).checked;document.querySelector('#sample').classList.toggle(id,on);if(on)enabled.push(document.querySelector('#'+id+'-label').textContent)});document.querySelector('#status').textContent=enabled.length?enabled.join(', ')+'.':'Default reading settings.'}ids.forEach(id=>document.getElementById(id).onchange=apply);document.querySelector('#reset').onclick=()=>{ids.forEach(id=>document.getElementById(id).checked=false);apply()};</script></html>
```

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

## Дизайн-система Amsterdam: настройка ИИ-агента

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

Только CSS с открытым исходным кодом; далее приведены полная оригинальная тема и рабочий пример на HTML. Проприетарные токены и пакеты ресурсов не входят в поставку. В источниках также доступен ZIP-архив полного рабочего примера с точными зависимостями предварительного просмотра и полным документом. Распакуйте архив, выполните команду python3 -m http.server 8080 в этой папке и откройте http://localhost:8080/amsterdam.html. Примеры с модулями нельзя открывать через file://.

```
npm install @amsterdam/design-system-css@4.4.0
# Copy dist/switch/switch.css into your public assets.
# Load it before the complete original theme configuration below.
# Do not import the proprietary assets or tokens for this neutral example.
```

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

```
Используйте Switch из библиотеки CSS с открытым исходным кодом и полной оригинальной темой для Amsterdam. Сохраните структуру wrapper/input/соседняя метка, роль role=switch и доступное имя. Сразу применяйте двоичные настройки и используйте checked как источник состояния. Учитывайте настройку уменьшения анимации и отличайте локальные настройки от сохранённых настроек учётной записи. Не импортируйте проприетарные токены, шрифты, логотипы или иконки без соответствующих прав.
```

## Дизайн-система Amsterdam: источники и область применения

Самостоятельный образец на OpenDesign. Фирменные токены Amsterdam, шрифт Amsterdam Sans, официальные иконки и логотип не включены.

- Репозиторий и лицензии Пакеты с открытым исходным кодом и отдельные проприетарные материалы.

- Спецификация CSS Архитектура классов, использование CSS и зависимость от темы.

- Документация Switch Семантика двоичной настройки с немедленным применением.

- Уведомление о ресурсах Ограничения на использование шрифтов, иконок, фирменной символики и логотипа.

- Область действия пакета токенов Отдельный слой проприетарных токенов.

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

## Дизайн-система Amsterdam: связанные ресурсы

### B.C. дизайн-система

Создайте форму настройки напоминаний в стиле B.C. с реальными семантическими токенами, встроенными элементами управления Aria от React, условными полями контактных данных и полной валидацией.

### Canada.ca дизайн-система

Изучите типографику GC Design System, семантические токены и встроенные веб-компоненты на примере полного руководства по подготовке с поиском, раскрываемыми блоками и состоянием без результатов.

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

Реализуйте редакционную сетку CFPB, актуальную типографику и встроенные компоненты Expandables, добавив рабочую форму для заметок, проверенные API пакетов и чёткие границы идентификации.


- [Справочник по реализации](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Источник](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Источник](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [Прочитать вспомогательную спецификацию](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [Справочник по коду](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Прочитать вспомогательную спецификацию](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Справочник по коду](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Прочитать вспомогательную спецификацию](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Репозиторий и лицензии Пакеты с открытым исходным кодом и отдельные проприетарные материалы.](https://github.com/Amsterdam/design-system)
- [Спецификация CSS Архитектура классов, использование CSS и зависимость от темы.](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Документация Switch Семантика двоичной настройки с немедленным применением.](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Уведомление о ресурсах Ограничения на использование шрифтов, иконок, фирменной символики и логотипа.](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [Область действия пакета токенов Отдельный слой проприетарных токенов.](https://github.com/Amsterdam/design-system/tree/develop/packages-proprietary/tokens)