Управляющая компания для отелей, гостевых домов, апарт-отелей и санаториев. Документ описывает общую основу (принципы, сетка, шкалы, компоненты, доступность) и три токен-сета — по одному на каждое дизайн-направление. Направление выбирается ДО сборки сайта; основа остаётся неизменной, меняется только токен-сет и характер вёрстки.
Дата: 07.09.2026 · Статус: макеты для выбора направления · Файлы не в проде.
Собственник отеля 20–300 номеров, передающий объект в управление, покупает не «красивый сайт». Он покупает снятие тревоги: что деньги считают честно, что операционка не рухнет, что его перестанут дёргать по мелочам. Дизайн обязан это отыграть визуально — до того, как он прочтёт первый абзац.
Отсюда три запрета на весь проект:
«Design is thinking made visual.» — Saul Bass
| Принцип | Следствие в макете |
|---|---|
| Честность вместо витрины | Там, где у конкурента цифра кейса — у нас имя метрики и подпись «что вы увидите в отчёте». Пустое поле честнее выдуманного. |
| Одна мысль на экран | Каждая секция отвечает ровно на один вопрос собственника. Две мысли в одном блоке = ни одной. |
| Иерархия строится масштабом, не цветом | Ratio ≥ 2,5 : 1 между H1 и body. Цветом выделяем только действие. |
| Знак ô — несущая конструкция, не украшение | Циркумфлекс = крыша / арка / навес = «объект под управлением». Мотив повторяется в разделителях, номерах шагов, масках фото. |
| Ритм задан сеткой, эмоция — исключением из неё | Müller-Brockmann: сетка есть всегда; один намеренный выход за неё на экран — и он читается как жест, а не как ошибка. |
| Анкета — главный продукт страницы | Всё ведёт к 30 вопросам. Форма не «внизу под футером», а полноценная секция с реальным первым шагом. |
Написание: AlKô (циркумфлекс над o). В шапке группы допустимо фирменное «Ôтелей» — приём осознанный, повторяет мотив.
Трактовка мотива по направлениям:
Kô. Крыша как линия горизонта, волосяная толщина.Правила:
- Минимальная высота знака 20 px (десктоп) / 18 px (мобайл) — ниже циркумфлекс сливается.
- Охранное поле = высота прописной A со всех сторон.
- Знак никогда не наклоняется, не обводится, не ставится на фото без подложки-затемнения ≥ 40 %.
Базовая колонка — 12 колонок, gutter 24 px, поля контейнера 32 px (десктоп) / 20 px (мобайл).
| Контейнер | Ширина | Назначение |
|---|---|---|
--container-wide |
1360 px | Полноширинные секции, фото-полосы |
--container |
1180 px | Основной контент |
--container-text |
720 px | Абзацы, оффер, юридический текст |
--measure |
68 ch | Максимальная длина строки текста |
Брейкпоинты: ≥1200 десктоп · 768–1199 планшет (12 → 8 колонок) · <768 мобайл (12 → 4 колонки, всё в одну колонку).
Правило вертикального ритма: высота любого блока кратна 8 px; фото-блоки — фиксированные соотношения 3:2, 4:5, 16:9 и «арка» (3:4 со скруглением верха, только направление C).
--sp-1 4 --sp-6 32 --sp-11 128
--sp-2 8 --sp-7 48 --sp-12 160
--sp-3 12 --sp-8 64 --sp-13 200
--sp-4 16 --sp-9 80
--sp-5 24 --sp-10 96
Вертикальные отступы секций: десктоп --sp-11/12 (128–160), мобайл --sp-8/9 (64–80). Между заголовком секции и её содержимым — --sp-7 (48). Внутри карточки — --sp-5 (24).
Общая логика: display → title → subtitle → body → caption → label. Шаг шкалы отличается по направлениям — это и есть часть характера.
| Роль | A · Издание (ratio 1.333) | B · Пульт (ratio 1.25) | C · Берег (ratio 1.28) |
|---|---|---|---|
--fs-display |
84 / 44 px | 68 / 38 px | 76 / 40 px |
--fs-h1 |
60 / 34 | 48 / 30 | 54 / 32 |
--fs-h2 |
42 / 28 | 34 / 24 | 38 / 26 |
--fs-h3 |
28 / 22 | 24 / 20 | 26 / 21 |
--fs-lead |
22 / 18 | 20 / 17 | 21 / 18 |
--fs-body |
17 / 16 | 16 / 15 | 17 / 16 |
--fs-small |
15 / 14 | 14 / 13 | 15 / 14 |
--fs-label |
12 / 11 (трекинг .16em) | 11 / 11 (трекинг .12em, mono) | 12 / 11 (трекинг .14em) |
Межстрочные: display 1.02–1.08, заголовки 1.12–1.2, body 1.6, caption 1.5.
Кириллица: все гарнитуры проверены на наличие кириллических подмножеств в Google Fonts (cyrillic, cyrillic-ext) — проверка сделана запросом к fonts.googleapis.com/css2, не по памяти.
Гарнитуры и fallback-стеки:
| Display | Text | Числа/лейблы | |
|---|---|---|---|
| A | Cormorant Garamond → Georgia, «Times New Roman», serif |
Inter → «Helvetica Neue», Arial, sans-serif |
Inter tabular-nums |
| B | IBM Plex Sans → «Helvetica Neue», Arial, sans-serif |
IBM Plex Sans |
IBM Plex Mono → «SF Mono», Consolas, monospace |
| C | Lora → Georgia, serif |
Golos Text → «Helvetica Neue», Arial, sans-serif |
Golos Text tabular-nums |
Имена одинаковы во всех сетах — меняются значения. Это позволяет переключить направление одним файлом.
--c-bg основной фон страницы
--c-bg-alt фон чередующейся секции
--c-surface фон карточки/панели
--c-ink основной текст
--c-ink-soft вторичный текст (подписи, мета)
--c-ink-faint третичный (плейсхолдеры, disabled)
--c-line линии, границы, разделители
--c-accent единственный акцент: действие, фокус, ключевая метка
--c-accent-ink текст на акценте
--c-accent-soft фон-подложка акцента (алерты, бейджи)
--c-focus кольцо фокуса
Пропорция 60 / 30 / 10: фон-нейтраль 60 %, текст и структура 30 %, акцент ≤ 10 % площади. Акцент не используется для декора — только для действия и одного смыслового маркера на секцию.
| Токен | A · Издание | B · Пульт | C · Берег |
|---|---|---|---|
--c-bg |
#F6F2EB тёплая бумага |
#0B0D0F графит |
#FBF6EF песок-светлый |
--c-bg-alt |
#EDE7DD |
#111417 |
#F3E9DC |
--c-surface |
#FFFDF9 |
#161A1E |
#FFFFFF |
--c-ink |
#1B1815 |
#EDF0F2 |
#14343B |
--c-ink-soft |
#5A544B |
#98A2A9 |
#4A6167 |
--c-ink-faint |
#8C8477 |
#6A757C |
#8AA0A4 |
--c-line |
#D8D0C3 |
#252B30 |
#E0D2BF |
--c-accent |
#7A5C2E бронза |
#E8B04B янтарь |
#C2603A терракота |
--c-accent-ink |
#FFFDF9 |
#0B0D0F |
#FFF7EF |
--c-accent-soft |
#EDE2CE |
#2A2317 |
#F6E3D6 |
Контрасты (проверено расчётом WCAG 2.1):
| Пара | A | B | C |
|---|---|---|---|
| ink / bg | 14,6:1 ✅ AAA | 15,1:1 ✅ AAA | 11,8:1 ✅ AAA |
| ink-soft / bg | 7,4:1 ✅ AAA | 5,3:1 ✅ AA | 6,5:1 ✅ AA |
| accent / bg (текст ≥18px) | 6,8:1 ✅ AA | 9,4:1 ✅ AAA | 4,8:1 ✅ AA large |
| accent-ink / accent (кнопка) | 7,1:1 ✅ AAA | 9,4:1 ✅ AAA | 6,2:1 ✅ AA |
--c-ink-faint используется только для плейсхолдеров и disabled — это единственное место, где допускается контраст < 4,5:1, и там нет смысловой нагрузки.
| A | B | C | |
|---|---|---|---|
--r-sm |
0 | 2 px | 6 px |
--r-md |
0 | 4 px | 12 px |
--r-lg |
0 (только фото 2 px) | 6 px | 20 px |
--r-arch |
— | — | 999px 999px 12px 12px (арка) |
--shadow-1 |
нет (только линии) | 0 1px 0 rgba(255,255,255,.04) inset |
0 2px 10px rgba(20,52,59,.06) |
--shadow-2 |
0 24px 60px rgba(27,24,21,.08) (только модальное) |
0 0 0 1px var(--c-line) |
0 18px 44px rgba(20,52,59,.10) |
| Толщина линии | 1 px hairline | 1 px + 2 px акцентная | 1 px + орнаментальный разделитель |
A принципиально бестеневой: иерархия строится линиями и воздухом (Vignelli). B использует тень как «границу панели» — тень заменена на контурный ring, как в приборной панели. C — единственный, где тень мягкая и тёплая.
Три уровня: primary (одна на экран — «Заполнить анкету объекта»), secondary («Обсудить объект»), quiet (текстовая со стрелкой).
| Свойство | Значение |
|---|---|
| Высота | 56 px десктоп / 52 px мобайл (primary, secondary) |
| Паддинги | 0 32 px |
| Типографика | --fs-body, вес 500, трекинг .01em |
| Мин. ширина тач-цели | 44 × 44 px (WCAG 2.5.5) |
| Состояния | default · hover (сдвиг фона на 6 % темнее / светлее) · active (сжатие 1 px по Y) · focus-visible (кольцо 2 px --c-focus + offset 2 px) · disabled (opacity .45, cursor: not-allowed) |
Переходы: 160 ms cubic-bezier(.4,0,.2,1). Никаких трансформ-«прыжков» и теней при hover — премиум не подпрыгивает.
label --fs-label, uppercase, трекинг .14em, --c-ink-soft, margin-bottom 8
control высота 56, паддинг 0 16, 1px --c-line, фон --c-surface
hint --fs-small, --c-ink-soft, margin-top 6
error --fs-small, --c-accent (или --c-danger), + иконка, + aria-describedby
Состояния: default · hover (линия темнее на шаг) · focus (линия --c-accent 1 px + внешнее кольцо --c-focus 2 px) · filled · error · disabled.
Обязательность помечается словом «обязательно» в hint, не одной звёздочкой — звёздочка не читается скринридером как смысл.
select — нативный, со своей стрелкой; textarea — min-height 120 px, resize только по вертикали.
Не «иконка + заголовок + три строки». Карточка услуги = пункт реестра: порядковый номер (01–16), название работы, одна строка «что это значит для собственника».
- A: без рамки, разделитель hairline сверху, номер в колонке слева, крупный воздух.
- B: ячейка сетки с 1 px контуром, номер моноширинным, hover подсвечивает контур акцентом.
- C: карточка со скруглением --r-md, номер в терракотовом круге, тонкий орнаментальный уголок.
Главный честный приём: показываем имена метрик, а не значения. Значение — — с подписью «появится после первого месяца работы».
metric-label ADR · RevPAR · Загрузка · GOP · Отклонение от плана
metric-value — (tabular-nums, --fs-display или --fs-h1)
metric-note что именно считаем и как часто
Обязательная подпись под блоком: «Пример структуры ежемесячного отчёта. Первые объекты — 2026.» Без неё блок читается как фейковые данные.
Колонки: Модель · Что берём на себя · Кто управляет операционкой · Отчётность · Кому подходит. Колонки с ценой нет: цена — предмет разговора после анкеты. Вместо неё строка-подпись под таблицей: «Вознаграждение — процент от прибыли или процент от оборота; конкретная модель обсуждается после аудита объекта.» Мобайл: таблица разворачивается в стек карточек (каждая строка = карточка, заголовки колонок становятся лейблами).
5 шагов: анкета → разговор → аудит объекта → предложение и план на 90 дней → договор и передача управления. Каждый шаг несёт срок («15 минут», «40 минут», «1–2 дня на объекте») — это снимает тревогу «во что я ввязываюсь». - A: нумерация римская/цифровая в антикве, вертикальная линия-«поле» слева. - B: горизонтальная шкала-таймлайн с тиками, как на приборе. - C: арочные медальоны с номерами.
8 блоков, 30 вопросов. На странице показывается шаг 1 из 8 целиком, с реальными полями — это доказательство, что анкета осмысленная, а не «оставьте телефон».
[ Шаг 1 из 8 · «Об объекте» · ~15 минут на всю анкету ]
progress: 8 сегментов, 1 залит --c-accent
Тип объекта select отель / гостевой дом / апарт-отель / санаторий / иное
Город или регион text
Номерной фонд number номеров или юнитов
Звёздность select нет / 2* / 3* / 4* / 5* / в процессе
Год открытия и ремонта text например: открыт 2014, ремонт 2021
Что требует внимания textarea в первую очередь, по вашему мнению
[Продолжить → шаг 2] [Или обсудить объект голосом]
Подпись обязательна: «Анкета ни к чему не обязывает. Можно ответить на вопросы голосом в разговоре — это займёт столько же.»
primary-кнопка справа. Высота 88 px, при скролле сжимается до 64 px с линией снизу. На мобайле — логотип + кнопка, меню в бургер (в макете свёрнуто).| Состояние | Правило |
|---|---|
hover |
Только на устройствах с hover: hover. Изменение ≤ 8 % по светлоте или сдвиг линии. |
focus-visible |
Всегда видимое кольцо 2 px + offset 2 px. Никогда не outline: none без замены. |
active |
Мгновенный (80 ms) отклик, без анимации входа. |
loading |
Кнопка сохраняет ширину, текст меняется на «Отправляем…», спиннер не крутится дольше 8 с. |
error |
Текст ошибки объясняет, что сделать («Укажите количество номеров — хотя бы примерно»), а не «Неверное значение». |
success |
Экран благодарности с честным сроком ответа, а не всплывашка на 2 секунды. |
empty |
Там, где данных нет (метрики), — — и объяснение. Не «0» и не выдуманное число. |
Анимация: длительность 160–240 ms, easing cubic-bezier(.4,0,.2,1). При prefers-reduced-motion: reduce — все переходы 0 ms, параллакс и автоскролл выключены.
h1 на страницу, иерархия заголовков без пропусков, nav/main/footer landmarks, форма — label for на каждом поле (не placeholder вместо label).aria-describedby, группы полей в fieldset+legend, прогресс шагов озвучен текстом «Шаг 1 из 8», а не только полоской.alt («фасад отеля, 4 этажа, вечер»); декоративные — alt="".prefers-reduced-motion; ничего не мигает чаще 3 раз в секунду.rem, px только для линий.#000 не используется — #0B0D0F снижает ореол на светлом тексте; вес body-шрифта на тёмном фоне на шаг меньше (400 → 350/300 визуально компенсирует «раздувание»).DESIGN-SYSTEM.md этот документ
tokens-a.css токен-сет «Издание»
tokens-b.css токен-сет «Пульт»
tokens-c.css токен-сет «Берег»
variant-a.html макет главной, направление A
variant-b.html макет главной, направление B
variant-c.html макет главной, направление C
logo-a.svg знак AlKô, трактовка A
logo-b.svg знак AlKô, трактовка B
logo-c.svg знак AlKô, трактовка C
shots/*.png рендеры 1440 и 390, full page
VARIANTS.md сравнение направлений и рекомендация
HTML-макеты самодостаточны: CSS инлайн (включая копию токенов выбранного сета), шрифты — Google Fonts по ссылке, фото — picsum.photos поверх CSS-заглушки, внешнего JS нет. Формы не отправляются — это макет.
own/coo/decision-log.<text>).