Дизайн-система Fixcom
Эталон для всех новых страниц fixcom.kz. Собран по последним опубликованным страницам: Решения (Проверка контрагента по КГД, Интеграции МойСклад), Услуги (Поддержка МойСклад, amoCRM HR). Легаси-страницы при переделке приводим к этим токенам и блокам.
Цвета
Тёмная тема, один акцентный зелёный и градиент только для наведения. Нажмите на образец, чтобы скопировать HEX.
Фоны и поверхности
Акцент и текст
Типографика
Шрифт проекта — Inter Tight (в Tilda: var(--t-text-font)). Рабочие начертания: 500 для текста, 600 для заголовков и кнопок. Тонкие начертания 300 и капс не используем.
моб. 28–32
моб. 32
над H2, отступ 20
моб. 16–18
моб. 16
Кнопки
Форма — «пилюля». Высота 54 (основные) и 40 (в карточках). На наведении у всех кнопок фон меняется на градиент, скорость 0.2 с. На экране — одна зелёная кнопка; остальные тёмные.
| Вариант | Фон | Размер | Когда |
|---|---|---|---|
| Основная | #43a047, текст #fff 16/600 | h 54, радиус 30, иконка справа 20 | Главное целевое действие: установить, обсудить проект, купить |
| Вторичная | #17212b / #18232e | h 54–57, радиус 45, отступ 16×32 | Демо, видео, второстепенное действие рядом с основной |
| Контурная | прозрачная, рамка 2px #90a4ae | h 54, радиус 30 | Третьего уровня; редко |
| Малая | #18232e, 14/600 | размер X-Small, радиус 32 | Кнопки внутри карточек (T650, T959) |
| Ховер | bgcolorhover: linear-gradient(0.133turn,rgba(104,160,251,1) 0%,rgba(204,144,249,1) 100%), speedhover 0.2 | ||
Карточки и контейнеры
Карточки — плоские, без теней и рамок, фон #2c3c4a на секции #17212b или #0e1621.
Карточка преимущества
T959 / T650: фон #2c3c4a, радиус 10, заголовок 20–24/600, текст 16/500 #90a4ae.
Подробнее →Карточка на светлой секции
Если секция #2c3c4a — карточки #0e1621, чтобы сохранить контраст.
Подложка под медиа
#4e5f6d с фоновым изображением — левая половина hero, логотипы интеграций.
Две панели по 600px, радиус 24
Левая — медиа (#4e5f6d + обложка, логотипы 128×128 по кругу). Правая — #2c3c4a, padding 50 (моб. 30): H1, лид, кнопки «Основная + Вторичная» в ряд, на мобильных — в столбик на всю ширину.
Аккордеон (FAQ)
Сколько стоит подключение?
Можно ли попробовать бесплатно?
Отступы, сетка, радиусы
Сетка Tilda 12 колонок, контейнер 1200. Вертикальный ритм кратен 15.
Отступы секций
Мобильные: 90 → 30, 60 → 30 (или 60 для первой карточной секции), 30 → 15.
Радиусы
Ширина контента
Заголовки секций — 8 колонок со смещением 2 (центр). Карточные блоки — 12 колонок, 2–4 карточки в ряд. Аккордеон — 8 колонок со смещением 2.
Рецепты блоков Tilda
Собирайте новые страницы из этих блоков. Самый быстрый путь — скопировать готовый блок из страницы-образца или из библиотеки блоков проекта.
| Секция | Блок | Ключевые настройки | Образец |
|---|---|---|---|
| Хлебные крошки | T758 · ME605 | Библиотека → «Хлебные крошки». Первый блок. | /solutions/ms-kgd |
| Hero | Zero-блок | Две панели 600×640, радиус 24; H1 — тег h1; кнопки основная + вторичная | /solutions/ms-kgd |
| Заголовок секции | T050 · TL01 | 8 кол. + смещ. 2; надзаголовок 16/600 #43a047; заголовок 48/1.3 (моб. 32); фон #17212b; отступы 60/30 | /services/ms-support |
| Плитки без картинок | T959 | Карточки #2c3c4a, радиус 10, 2–3 в ряд, стрелка скрыта; заголовок 24/600, текст 16/500 #90a4ae; теги H2/H3. В библиотеке: «2-3-4 плитки без изображений» | /services/ms-support |
| Карточки с кнопкой | T650 | 4 в ряд, #2c3c4a, радиус 10; кнопка X-Small #18232e, радиус 32, ховер — градиент | /services/ms-support |
| Этапы | T1106 | Библиотека → «Этапы с кружками и линиями» | /services/ms-support |
| Преимущества | T1115 | Как на странице решения | /solutions/ms-kgd |
| FAQ | T668 | 8 кол. + смещ. 2; фон #0e1621; пункт #2c3c4a, радиус 8; иконка #43a047/#7fde83; первый раскрыт; тег H3 | /services/ms-support |
| Форма / CTA | Zero-блок или T1118 | Один зелёный CTA, остальное тёмное | /solutions/ms-kgd |
| Шапка и подвал | Глобальные | Страницы NEW_header и NEW-footer — не дублировать блоки меню вручную | — |
Делаем
- Одна H1 на страницу — в hero
- Чередуем фоны #17212b и #0e1621 между секциями
- Одна зелёная кнопка в поле зрения
- Alt у всех изображений
Не делаем
- Светлые секции, белый фон, сторонние акцентные цвета
- Шрифт 300, капс, тени у карточек
- Свои меню на странице вместо глобальной шапки
- Градиент в статике — только на наведении
CSS-токены
Для HTML-блоков (T123) и кастомного CSS. Скопируйте и используйте переменные вместо «сырых» цветов.
:root{
--fx-bg:#17212b; /* фон страницы */
--fx-bg-deep:#0e1621; /* чередующиеся секции */
--fx-surface:#2c3c4a; /* карточки */
--fx-surface-2:#4e5f6d; /* подложка медиа */
--fx-btn-dark:#18232e; /* тёмная кнопка */
--fx-accent:#43a047; /* основная кнопка, надзаголовки */
--fx-accent-2:#4ab84e; /* ховер ссылок */
--fx-accent-3:#7fde83; /* ховер иконок */
--fx-text:#ffffff;
--fx-muted:#90a4ae;
--fx-line:#4c565a;
--fx-grad:linear-gradient(0.133turn,#68a0fb 0%,#cc90f9 100%);
--fx-font:var(--t-text-font,'Inter Tight',Arial,sans-serif);
--fx-r-sm:8px; --fx-r-md:10px; --fx-r-lg:24px; --fx-r-pill:30px;
--fx-s1:15px; --fx-s2:30px; --fx-s3:60px; --fx-s4:90px;
}Чек-лист перед публикацией
- Первый блок — хлебные крошки, ссылки абсолютные на https://fixcom.kz/…
- Адрес страницы — человекочитаемый, внутри раздела: /services/…, /solutions/…, /faq/…
- Title до 60 символов без дублей «Fixcom» и мусора; description 140–160 символов
- Ровно одна H1, далее H2 → H3 по порядку
- Картинка для соцсетей 1200×630 и alt у всех изображений
- Каждая кнопка ведёт на рабочую ссылку или попап; формы протестированы
- Мобильная версия проверена на 360 и 410 px
- Служебные и черновые страницы — без публикации или с noindex