imvmeste.ru

# Дизайн-система сайта imvmeste.ru — данные для нейросети

Файл собран сервисом «Вместе SEO». Значения получены разбором CSS этого сайта — это измерение, а не оценка на глаз. Отправьте файл целиком в Claude, ChatGPT, DeepSeek или GigaChat вместе со своей задачей.

## Задача

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

Ниже, после данных, я напишу, что именно нужно сделать. Если я этого не написал — спроси, какой блок нужен, и не начинай верстать наугад.

**Формат ответа.** Отвечай чистым HTML и CSS без сборщиков, фреймворков и внешних библиотек. CSS-переменные объявляй в `:root`. Разметка семантическая, мобайл-ферст: базовые правила для телефона, расширения через `min-width`.

## Палитра

Цвета отсортированы по заметности: чем выше, тем больше площади занимает.

### Фон и поверхности

| Цвет | Заметность | Где встречается |
| --- | --- | --- |
| `#ffffff` | 324 | .sb-2097-gl01rq .ab__tag, .sb-2097-gl01rq .ab__card, .sb-2098-n8hlrt .sa-col |
| `#f5f5f5` | 254 | .style-module-scss-module__NvTtwa__empt…, .react-loading-skeleton:after, .pf-phoneWrapper |
| `#ffffff1a` | 223 | .style-module-scss-module__5W5tNW__soci…, .footer-module-scss-module__p2IoJa__for…, .style-module-scss-module__ZxA4vG__inli… |
| `#000000` | 157 | .sb-2097-gl01rq .ab__tag-dot, .sb-2097-gl01rq .ab__heading em::after, .sb-2097-gl01rq .ab__cta |
| `#00000080` | 105 | .bsp-backdrop, .Viewport-module-scss-module__f-J9uG__f…, .Card-module-scss-module__SBG9AG__date |
| `#f0efed` | 84 | .UniversalFAQ-module-scss-module__j6WuT…, .QuestionsAccordion-module-scss-module_…, .react-loading-skeleton |

### Основной текст

| Цвет | Заметность | Где встречается |
| --- | --- | --- |
| `#ffffff` | 456 | .sb-2097-gl01rq .ab__pill--dark, .sb-2097-gl01rq .ab__cta, .sb-2098-n8hlrt .sa-tag--main |
| `#000000` | 187 | .sb-2097-gl01rq .ab__heading, .sb-2097-gl01rq .ab__heading em, .sb-2097-gl01rq .ab__stat-num |
| `#ffffff99` | 126 | .style-module-scss-module__JHvdna__sub …, .style-module-scss-module__5W5tNW__item…, .footer-module-scss-module__p2IoJa__for… |
| `#0a0a0a` | 110 | .Thumbnails-module-scss-module__kMAGSW_…, .UniversalFAQ-module-scss-module__j6WuT…, :is(.swiper-button-next |
| `#666666` | 74 | .Breadcrumbs-module-scss-module__N1cvSa…, .style-module-scss-module__NvTtwa__empt…, .styles-module-scss-module__zGAT7q__aut… |
| `#64748b` | 60 | .sb-2059-18f9ez4 .vmt-hub__tag, .OurWorks-module-scss-module__PDqmSa__s…, .ContactsList-module-scss-module__x-msi… |

### Приглушённый текст

| Цвет | Заметность | Где встречается |
| --- | --- | --- |
| `#9ca3af` | 36 | .pf-input::-webkit-input-placeholder, .pf-input::placeholder, .pf-input:-ms-placeholder-shown |
| `#00000059` | 14 | .styles-module-scss-module__0MLQyq__sea… |
| `#6b7886` | 4 | .taf-counter |

### Акценты, кнопки, ссылки

| Цвет | Заметность | Где встречается |
| --- | --- | --- |
| `#6366f1` | 9 | .style-module-scss-module__rGOleW__wrap… |
| `#8b5cf6` | 5 | .style-module-scss-module__rGOleW__wrap… |
| `#0004ff` | 5 | .style-module-scss-module__OrAk7W__card… |
| `#ff6377` | 4 | .sb-2059-18f9ez4 .vmt-quiz__radio |
| `#ffffffe0` | 38 | .footer-module-scss-module__p2IoJa__for…, :is(.swiper-button-next |
| `#0a0a0a` | 29 | .UniversalFAQ-module-scss-module__j6WuT…, .QuestionsAccordion-module-scss-module_… |

### Границы и разделители

| Цвет | Заметность | Где встречается |
| --- | --- | --- |
| `#ffffff0f` | 96 | .style-module-scss-module__JHvdna__sub …, .style-module-scss-module__ZxA4vG__item, .style-module-scss-module__ZxA4vG__inli… |
| `#e2e8f0` | 62 | .sb-2059-18f9ez4 .vmt-hub__tag, .sb-2059-18f9ez4 .vmt-quiz__option, .SocialLinks-module-scss-module__lPuy2W… |
| `#ffffff` | 57 | .footer-module-scss-module__p2IoJa__for…, .style-module-scss-module__INJUXa__soci…, .style-module-scss-module__INJUXa__cont… |
| `#e0e0e0` | 48 | .pf-phoneWrapper, .ef-input, .tf-input |
| `#ffffff4d` | 42 | .footer-module-scss-module__p2IoJa__for…, .Card-module-scss-module__SBG9AG__date, .Card-module-scss-module__SBG9AG__slide… |
| `#00000014` | 38 | .sb-2098-n8hlrt .sa-tag, .sb-2098-n8hlrt .sa-note, .styles-module-scss-module__r23Q2G__orb… |

### Иконки

| Цвет | Заметность | Где встречается |
| --- | --- | --- |
| `#000000` | 8 | .style-module-scss-module__x7A20G__clos…, .Slider-module-scss-module__KOUkQG__nex…, .styles-module-scss-module__4Mx_fG__nex… |
| `#ffffff` | 4 | .Slider-module-scss-module__KOUkQG__nex…, .SliderButtons-module-scss-module__CcUi… |
| `#00adb5` | 2 | .style-module-scss-module__dJDGmW__butt… |

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

**Шрифты** (в порядке значимости):

- `ptcsans`  
  Полный стек: `ptcsans, ptcsans Fallback`
- `robotoFlex`  
  Полный стек: `robotoFlex, robotoFlex Fallback`
- `JetBrains Mono`  
  Полный стек: `JetBrains Mono, Fira Code, monospace`
- `Unbounded`  
  Полный стек: `Unbounded, sans-serif`
- `Fira Code`  
  Полный стек: `Fira Code, monospace`
- `Monaco`  
  Полный стек: `Monaco, Menlo, monospace`

**Подключённые файлами** (это фирменные шрифты сайта):

- **ptcsans** — начертания: 400, 700, форматы: woff2
- **robotoFlex** — начертания: 900, форматы: woff2

**Шкала размеров текста** (в скобках — доля использования):

`16px` (13%) · `20px` (7%) · `18px` (7%) · `13px` (5%) · `14px` (5%) · `17.6px` (5%) · `19.2px` (5%) · `24px` (5%) · `12px` (3%) · `15px` (3%)

**Насыщенности:** `700`, `600`, `500`, `900`, `800`, `400`, `300`

**Межстрочные интервалы:** `1`, `1.5`, `1.6`, `1.4`, `1.25`, `1.2`, `1.3`, `1.56`, `1.65`, `1.1`

Типографика **адаптивная**: размеры заданы через `clamp()` и плавно меняются с шириной экрана. Повторяй этот подход.

## Пространство и форма

**Шкала отступов:**

`16px` · `32px` · `24px` · `20px` · `10px` · `12px` · `8px` · `4px` · `6px` · `14px`

Значения кратны **4px** — держись этой кратности, не придумывай промежуточных.

**Скругления:** `20px` · `16px` · `10px` · `32px` · `12px` · `8px`

**Тени:**

- `0 1px 5px #0003`
- `0 0 6px #818cf8b3`
- `0 2px 4px #0003`
- `0 4px 12px #0000001a`

## Сетка и адаптивность

**Ширина контейнера:** `1350px`, `600px`, `1200px`

**Основа раскладки:** Flexbox (grid — 39 правил, flex — 307).

**Брейкпоинты:** `420px` · `480px` · `640px` · `720px` · `768px` · `830px` · `1024px` · `1280px`

Сайт свёрстан **мобайл-ферст**: базовые правила для телефона, расширения через `min-width`. Верстай так же.

На сайте учтён `prefers-reduced-motion` — учитывай его и ты.

## Характер оформления

- Сильные скругления (20px) — мягкое, дружелюбное оформление.
- Тени используются активно: интерфейс многослойный, с выраженной глубиной.
- Плотность средняя: типичный отступ около 14px.
- Отступы подчинены шкале, кратной 4px — у сайта есть система, а не случайные значения.
- Используются фирменные шрифты (ptcsans, robotoFlex), подключённые файлами, — не системные.
- Размеры текста плавно меняются с шириной экрана через clamp().
- Основной акцентный цвет — #6366f1. Им выделены кнопки и ссылки.
- У сайта есть собственные CSS-переменные — оформление построено на дизайн-токенах.
- Сайт свёрстан мобайл-ферст: базовые правила для телефона, расширения через min-width.
- Раскладка построена преимущественно на Flexbox.

## Собственные переменные сайта

Сайт объявляет свои CSS-переменные — это его настоящая дизайн-система, с именами, которые придумал автор. Используй **эти имена**, а не выдумывай свои.

```css
:root {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --card-bg: #ffffff1f;
  --card-border: #ffffff40;
  --card-shadow: #00000033;
  --card-hover-border: #ffffff80;
  --card-hover-shadow: #0000004d;
  --swiper-theme-color: #007aff;
  --swiper-preloader-color: #ffffff;
}
```

Прочие переменные:

```css
  --font-ptsans: "ptcsans","ptcsans Fallback";
  --font-roboto-black: "robotoFlex","robotoFlex Fallback";
  --animation-duration: 1.5s;
  --swiper-navigation-size: 44px;
```

## Чего в этих данных нет

Читай это как ограничение задачи, а не как примечание. Всё, чего нет в данных выше, **выдумывать нельзя**.

- Мы читали исходный CSS, а не отрисованную страницу. Стили, которые сайт создаёт скриптами в браузере, сюда не попали.
- Мы не знаем, какой элемент какого размера на экране. «Заметность» цвета — это оценка по типу селектора, а не измеренная площадь.
- Размеры в `rem` пересчитаны из расчёта 16px за единицу. Если сайт менял корневой размер, числа сместятся.
- Картинки, иконки и содержимое страницы не разбирались — только оформление.
- Прочитаны не все таблицы стилей: 26 пропущено по ограничению сервиса.

## Правила работы

1. **Бери значения только отсюда.** Не подбирай «похожие» цвета и не округляй отступы на свой вкус.
2. **Не улучшай молча.** Если считаешь решение сайта неудачным (низкий контраст, слишком мелкий текст) — сделай как на сайте, а в конце отдельным абзацем скажи, что бы изменил и почему.
3. **Не добавляй того, чего нет.** Нет теней в данных — не добавляй тени. Нет градиентов — не добавляй градиенты.
4. **Соблюдай доступность:** alt у картинок, видимый фокус у интерактивных элементов, семантические теги.
5. Если данных для какой-то части не хватает — скажи об этом прямо, а не заполняй пробел правдоподобным.