Internal reference · 2026

Style Guide
UI Kit / Design System

Единый визуальный язык сервисного сайта Siemens: foundations, контентные правила и живые образцы утверждённых production-компонентов.

Версия 1.1 Обновлено 13.09.2026 UTF-8 без BOM
01 · Foundations

Цвет и геометрия

Основу составляют тёмный сине-зелёный текст, белое пространство и редкие Siemens-акценты. Бирюзовый не должен становиться цветом каждого элемента.

Основная палитра

Рабочие роли из canonical content system и принятых компонентов.

Siemens accent#00999F
Action dark#007F82
Heading#173C42
Body#2D3748
Secondary#607B80
Soft surface#F2F7F7
Divider / border#CFE0E3
Safety accent#D51119
Rating#E9A323
02 · Typography

Типографическая шкала

Gilroy остаётся основным шрифтом. Иерархия строится размером, ритмом и весом — без лишних цветных плашек.

H1 / Page title44 / 48 · 600

Ремонт техники Siemens

H2 / Section30 / 36 · 600

Что случилось с техникой?

H3 / Feature21 / 29 · 600

Диагностика и ремонт

Lead19 / 30 · 400

Поможем определить причину неисправности и заранее согласуем стоимость.

Body17 / 28 · 400

Основной текст рассчитан на спокойное последовательное чтение. Рекомендуемая длина строки — около 64 символов.

Caption14 / 20 · 400

Дополнительная информация, дата, пояснение или подпись.

03 · Markup

HTML-теги и текстовые роли

Тег выбирается по смыслу, а класс — по визуальной роли. Размер текста никогда не должен определять семантику документа.

Базовая семантика

Предпочтительная разметка для production-контента.

<h1>…<h6>
Иерархия документа. На странице один h1.page-title; основные разделы — h2, вложенные темы — h3. Уровни не пропускаются ради нужного размера.
<p>
Самостоятельный абзац. Вводный абзац получает .content-lead; длинный редакционный текст живёт внутри .prose.
<strong> / <em>
Смысловое усиление. strong — важность, em — интонационное ударение. Не использовать их только ради bold/italic.
<a>
Переход или навигация. В тексте — .content-link; самостоятельное действие получает компонентный класс __btn / __cta / __action.
<ul> / <ol>
Перечисление. Нейтральные факты — .content-list--bulleted, неисправности и преимущества — --checklist, шаги — --numbered.
<figure>
Самостоятельное медиа. Изображение и относящаяся к нему подпись объединяются через figure + figcaption.

Служебные и редкие теги

Использовать только при реальном семантическом основании.

<blockquote>
Только дословная цитата. Для предупреждения или пояснения применяется .content-note, а не цитата.
<table>
Только табличные данные с заголовками. Не использовать таблицу для построения сетки или двух колонок.
<hr>
Тематический разделитель. Его вертикальный ритм задаёт canonical spacing-owner, а не соседние inline-стили.
<br>
Допустим только для смыслового переноса внутри адреса, стиха или короткой подписи. Не создаёт отступы и пустые зоны.
<small>
Юридическое примечание или вторичная подпись. Не применяется как универсальный способ уменьшить текст.
<abbr> / <sup> / <sub>
Сокращение с расшифровкой, степень или индекс. Это смысловые знаки, не инструменты декоративного позиционирования.

Рекомендуемый каркас контентного раздела

Короткая, предсказуемая DOM-композиция без пустых обёрток и тегов для отступа.

<section class="content-section">
  <h2>Почему техника не включается?</h2>
  <p class="content-lead">Короткое введение в раздел.</p>
  <p>Основной поясняющий текст с <strong>важным акцентом</strong>.</p>
  <ul class="content-list content-list--checklist">
    <li>первый признак неисправности;</li>
    <li>второй признак неисправности.</li>
  </ul>
</section>

Не использовать: пустые div, цепочки br, &nbsp;, inline margin и заголовки неверного уровня для имитации визуального расстояния.

04 · Layout

Spacing и радиусы

Все интервалы собираются из одной шкалы. Случайные локальные отступы и пустые HTML-обёртки не используются.

Spacing scale

8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 px

8micro
12compact
16base
24group
32block
48section
64large
80page

Corner roles

Один radius не применяется ко всем сущностям.

6 px
controls
10 px
cards
14 px
hero
05 · UI elements

Действия и формы

Основное действие заметно, но не oversized. Стрелки — тонкие линейные; круглая подложка используется только как осмысленный icon-control.

Buttons

Primary / secondary / quiet / disabled

Оставить заявку Подробнее Все модели Недоступно

Labels / badges

Компактные служебные роли, не самостоятельные карточки.

Частые неисправности Высокий спрос от 900 ₽ Важно

Form controls

Минимальная высота интерактивного контрола — 44 px; focus всегда видим.

06 · Interaction

Ссылки и состояния

Интерактивность должна быть понятна без яркой плашки: цвет, подчёркивание, border и видимый focus показывают состояние элемента.

Текстовая ссылка

Canonical роль: .content-link. Посещённая ссылка сохраняет Siemens-цвет и не становится браузерно-фиолетовой.

DefaultУсловия гарантии

#007F82 · underline 42% · offset 3 px

HoverУсловия гарантии

#006F72 · подчёркивание currentColor

Focus visibleУсловия гарантии

Контрастный focus-ring, не скрывать outline без замены

ActiveУсловия гарантии

#005F63 · состояние нажатия

VisitedУсловия гарантии

#007F82 · визуальная система не ломается

DisabledУсловия гарантии

#94A7AB · если переход недоступен, это не активный anchor

Primary action

Один главный CTA на смысловую зону. Hover и focus усиливают действие, но не меняют геометрию блока.

DefaultОставить заявку

#009CA1 · белый текст

HoverОставить заявку

#00878C · мягкое усиление тени

Focus visibleОставить заявку

3 px rgba(0,153,153,.18)

ActiveОставить заявку

#00777B · без прыжка layout

DisabledНедоступно

#EDF2F3 / #94A7AB · нет pointer events

Поле формы

Состояние передаётся не одним цветом: border, ring и понятное текстовое сообщение работают вместе.

Default
Ваше имя
Hover
Ваше имя
Focus
Алексей
Error
Проверьте номер
Disabled
Недоступно
hover — только для устройств с указателем:focus-visible — обязателен для клавиатуры:active — краткий отклик на нажатиеdisabled — недоступность отражается и в DOM

Переходы: 180–250 ms для цвета, border, background и тени. Не использовать transition: all и не прятать важное действие только за hover — на touch-экране hover отсутствует.

07 · Content

Контентные паттерны

Семантика определяет оформление: неисправности и риски используют checklist, нейтральные факты — обычные bullets, последовательность — numbered list.

Checklist · неисправности

  • машина не набирает воду;
  • барабан не вращается;
  • на дисплее появился код ошибки.

Bullets · нейтральный список

  • выезд сервисного инженера;
  • диагностика техники;
  • консультация специалиста.

Content note

Стоимость согласуем заранее. После диагностики мастер объяснит причину неисправности и назовёт итоговую цену.

Safety note

Отключите технику от сети. Не продолжайте эксплуатацию при запахе гари, протечке или срабатывании автомата.

Текст → divider → список

Перед началом ремонта проверьте простые причины, которые не требуют разборки техники.

  • 20 px до разделителя;
  • 16 px до первого пункта;
  • без раздувания списка.

Длина строки

Основной measure — 64ch, component copy — до 70ch. Заголовок страницы ограничивается примерно 23ch, если контекст компонента не требует большего.

09 · Components

Отзывы

Утверждённый baseline: цельный summary, спокойная выразительная карточка и вторичная метаинформация. Показанные значения — демонстрационный snapshot без подключения счётчика.

Reviews summary.reviews-summary

Оценка клиентов

4,9 из 5

Отзывы просмотрели 32 797 раз

5 звёзд924
4 звезды39
3 звезды6
2 звезды2
1 звезда2

Уже обращались к нам? Расскажите, как прошёл ремонт.

Добавить отзыв
Review card.review-card

Матвей

г. Москва. Встраиваемый духовой шкаф Siemens CM 678G4S1.

5,0
Просмотров: 426

УслугаЗамена термостата духовки

Причина вызова
Не работает нагрев.
Мастер
Гуляев, В.С.
Плюсы
Качественный ремонт, гарантия и заранее согласованная цена.
Минусы
Нет.

Мастер провёл диагностику, быстро нашёл неисправный термостат и заменил деталь. После ремонта проверили нагрев — всё работает исправно. Ремонтом и стоимостью полностью доволен.

Пример фотографии ремонта духовки Пример фотографии детали Пример фотографии диагностики Пример фотографии техники после ремонта
10 · Components

Каталоги и прайс

Самостоятельные data-rich компоненты сохраняют свои CSS-owners. Их структура не собирается заново клиентским JavaScript.

Error catalog · information.error-catalog
Самые распространённые ошибки
F01
дверца стиральной машины не закрыта.
F03
вода не сливается из бака.
F23
сработала система защиты от протечки.
Canonical price listcss/price-list.css

Прайс-лист

Сколько может стоить ремонт?

Период актуальности указывается на production-странице

На онлайн-заявки действует текущая скидка
Условия гарантиизависят от работы и детали
Диагностика при ремонтебесплатно
Замена сливной помпыВысокий спросот 700 ₽20–40 минутЗаказать
Замена блокировки дверкиот 550 ₽30–60 минутЗаказать
Ремонт модуля управленияот 1 200 ₽60–90 минутЗаказать
11 · Governance

Компонентные контракты

Перед изменениями сначала определяется существующий owner. Новый локальный override создаётся только при отдельной продуктовой роли.

ОбластьRoot / selector familyВладелецСтатус
Content systembody.content-pagecss/main.min.cssCanonical
Типографика.page-title · .prose · .content-sectioncss/main.min.cssCanonical
Списки.content-list--*css/main.min.cssCanonical
Контактный баннер.section-banner--home-premiumcss/main.min.cssApproved
Отзывы.reviews-summary · .review-cardotzyvi.html + css/main.min.cssApproved / locked
Счётчики отзывовdata-review-viewsjs/review-views.js + inc/review-views.phpPersistent
Оценка услуги.rating-experienceincludes/rating-widget.php + rating-system-guide.htmlApproved / persistent
Каталог ошибок.error-catalogcss/main.min.css + js/main.jsCanonical
Прайс-лист.price-listcss/price-list.css + js/price-list.jsIsolated canonical
Процесс ремонта.section-work--timelinecss/main.min.css + js/main.jsApproved
ДелатьОпирайтесь на типографику, whitespace, сетку и тонкие разделители. Проверяйте desktop и mobile отдельно.
Не делатьНе плодите одинаковые rounded cards, page-specific spacing-костыли, inline-override и лишнюю бирюзу.
EncodingВсе HTML, CSS, JS, PHP, JSON, SVG и MD сохраняются только как физический UTF-8 без BOM.
LegacyНе возвращайте скрытые или удалённые варианты и не используйте старый DOM как источник для нового компонента.