# ТРОПЫ КРЫМА — инструкция по дизайн-системе
Гостевой визуальный язык «Троп Крыма» (мультизонный каталог парков). Из него собираются публичный сайт, PWA и приложения для посетителей. Админ-панель Trails в эту систему **не входит**.
Живой каталог: [index.html](index.html).
Демо-каталог парков: [../landing/index.html](../landing/index.html).
Соседние системы: [../../kavkaz/design-system/INSTRUCTION.md](../../kavkaz/design-system/INSTRUCTION.md), [../../Saki/design-system/INSTRUCTION.md](../../Saki/design-system/INSTRUCTION.md).
---
## 0. Какую систему брать
| Бренд (`VITE_BRAND`) | Папка | Префикс | Характер |
|---|---|---|---|
| `crimea` | `examples/crimea/design-system` | `crm-` / `--crm-*` | Море, песок, кипарис, изобаты |
| `kavkaz` | `examples/kavkaz/design-system` | `kvk-` / `--kvk-*` | Холодный туман, сланец, высота |
| `saki` | `examples/Saki/design-system` | `spk-` / `--spk-*` | Тёплая бумага, шалфей, жёлтый нажим |
`user-web` — **мультитенантный**. Тема по бренду (`crimeaTheme` / `kavkazTheme` / `sakiTheme`). Админку не перекрашивать.
---
## 1. Что это и зачем
«Тропы Крыма» — **мультизонный каталог** (`zonesList: true`, `parkLanding: false`). Домашняя страница — список парков → страница зоны с картой и маршрутами. Не копировать однопарковый лендинг Кавказа как единственную поверхность.
Система «Море, известняк и кипарис» развивает [`user-web/src/theme/crimeaTheme.ts`](../../../user-web/src/theme/crimeaTheme.ts), но с **другой шрифтовой парой** (Onest + Playfair Display), чтобы Крым не читался как Кавказ (там Manrope + Source Serif 4).
Правило: **сначала каталог и эта инструкция, потом код**. Не смешивать `crm-` с `kvk-` / `spk-`.
Префикс CSS: `crm-`. Токены: `--crm-*`.
---
## 2. Состав папки
| Файл | Роль |
|---|---|
| [INSTRUCTION.md](INSTRUCTION.md) | Эта инструкция |
| [index.html](index.html) | Живой каталог |
| [tokens.css](tokens.css) | CSS-переменные |
| [tokens.json](tokens.json) | Токены для JS / натива |
| [components.css](components.css) | Кит классов `crm-*` |
| [crimeaTheme.ts](crimeaTheme.ts) | Тема MUI для React |
Рядом: `examples/crimea/landing` — каталог + `zone.html` на данных из `crimea.sql`.
---
## 3. Как смотреть
```bash
python -m http.server 8765
```
- Каталог DS: http://127.0.0.1:8765/examples/crimea/design-system/
- Каталог парков: http://127.0.0.1:8765/examples/crimea/landing/
- Зона (пример): http://127.0.0.1:8765/examples/crimea/landing/zone.html?id=3
---
## 4. Принципы (не нарушать)
1. **Канва у моря, не mist и не cream.** Фон `#f4f8fb` + изобаты. Карточка белая. Песочная бумага `#f8f1e4` — только акцент (профиль, чипы).
2. **Море действует на CTA.** Primary = sea `#1b4f72`, текст **белый**. Нажим `0 3px 0 #143a54`. Ссылки-кнопки: `.crm-page a:not(.crm-btn)`.
3. **Кипарис — вторичное.** Secondary / secondary-кнопка `#2d5a3d`.
4. **Антиква только для имён.** Onest — UI. Playfair Display — названия парков, маршрутов, POI.
5. **Холодно-синяя тень.** `rgba(27, 79, 114, …)`.
6. **Терракота = высота. Соль = Акташ.** Terracotta `#b5573f` — профиль и набор. Salt `#d98fa0` — соляные озёра. Sand — мягкий акцент.
7. **Сложность = backend enum.** EASY кипарис / MEDIUM песок-глубокий / HARD терракота / PRO море.
8. **Профиль с уровнем моря.** Пунктир на 0 м — сигнатура Крыма (пляж ↔ Ай-Петри).
9. **Мультизона.** Каталог парков с мини-треком на карточке; не один hero-парк как у Кавказа.
10. **Нет тёмной темы у гостя.** Есть `prefers-reduced-motion`.
---
## 5. Чем отличается от Кавказа и Саки
| Ось | Крым | Кавказ | Саки |
|---|---|---|---|
| Температура | прохладное море | холодный mist | тёплый cream |
| Primary | sea, белый текст | fir/slate | sage, тёмный текст |
| Нажим | морской шаг | fir/slate шаг | жёлтая ступенька |
| Шрифты | Onest + Playfair | Manrope + Source Serif 4 | Golos Text + Lora |
| Радиусы | 12 / 16 / 24 | 10 / 14 / 20 | 14 / 18 / 26 |
| Текстура | изобаты | горизонтали | зерно |
| Продукт | каталог зон | один парк | один парк |
| Префикс | `crm-` | `kvk-` | `spk-` |
---
## 6. Шрифты
```html
```
- **Onest** — всё UI.
- **Playfair Display** — только именованные места (`.crm-named`, заголовки карточек парков).
---
## 7. Цвета и роли
### Поверхности
`--crm-canvas`, `--crm-canvas-2`, `--crm-sand-paper`, `--crm-card`, `--crm-ghost`
### Бренд
`--crm-sea` / `--crm-sea-2` — primary CTA
`--crm-cypress` — secondary
`--crm-sand` / `--crm-sand-deep` — мягкий акцент
`--crm-terracotta` — высота
`--crm-salt` — соляные озёра
### Сложность
`--crm-diff-easy` … `--crm-diff-pro`
---
## 8. Форма, тень, шаг
Радиусы: 12 / 16 / 24 / 999.
Тени: `--crm-shadow-sm/md/lg`.
Нажим кнопки: `--crm-press` = `0 3px 0 var(--crm-sea-2)`.
---
## 9. Компоненты (классы)
### Кнопки
```html
Каталог
```
### Чипы и теги
`.crm-chip`, `.crm-chip.is-on`, `.crm-tag-sea`, `.crm-tag-cypress`, `.crm-tag-terracotta`, `.crm-tag-salt`
### Карточки
`.crm-card`, `.crm-stat`, `.crm-note`, `.crm-elev` (профиль + `.sea-level`)
### Сигнатуры
1. Карточка парка с мини-SVG трека (каталог).
2. Профиль высот с пунктиром уровня моря.
---
## 10. Как внедрять в HTML-сайт
```html
…
```
---
## 11. Как внедрять в React / MUI (user-web)
Импортировать `crimeaTheme` из этой папки или держать в синхроне с `user-web/src/theme/crimeaTheme.ts`.
`containedPrimary` = море + белый текст + press shadow.
Шрифты: `crimeaFontsHref` (Onest + Playfair).
---
## 12. Другие платформы
Токены в `tokens.json`. Префикс цветовых ресурсов: `Crm*`. Не смешивать с Kavkaz/Saki.
---
## 13. Данные лендинга
Скрипт: `_migrate_check/_extract_crimea_landing_data.py`
Источник: `_migrate_check/trails_migrate_*/sql/crimea.sql` + `media/crimea/artifacts.tgz`
Выход: `window.CRIMEA_DATA` в `landing/data.js` — `brand`, `stats`, `cities`, `zones[]` (у каждой `routes`, `pois`, `miniTrack`, агрегаты).
Страницы: `landing/index.html` (каталог), `landing/zone.html?id=N` (карта Voyager + высоты).
---
## 14. Да / нет
**Да:** canvas + изобаты; sea-кнопка с белым текстом; Playfair только в именах; каталог зон; профиль с 0 м; тени моря; нижние вкладки.
**Нет:** mist Кавказа; cream/sage/жёлтый Саки; Manrope как «фирменный» Крым; тёмная кнопка с тёмным текстом; смешение `crm-`/`kvk-`/`spk-`; перекраска админки.
---
## 15. Как расширять
Новый цвет — в `tokens.css` + `tokens.json` + swatch в каталоге.
Новый компонент — класс `crm-*` в `components.css` + пример в `index.html`.
---
## 16. Для агента / разработчика
1. Прочитать эту инструкцию и [index.html](index.html).
2. Бренд = `crimea` → только `crm-` / `--crm-*`.
3. Не трогать admin-panel без явной просьбы.
4. Данные — из extract-скрипта, не выдумывать парки.
5. CTA: море + `#ffffff`, без `color: inherit` на `.crm-btn`.