← вернуться в хаб

05 · Top strip — финальные правила

Триплет «бренд · дескриптор · локация». Слитно внутри каждого поля, bold на втором слове, между полями — middle dot ·. На горизонтальных форматах (4:5 / 1:1 / 16:9) — полное PRIMEGLOBALPROPERTY. На Stories 9:16 — короткий PRIMEPROPERTY, без дескриптора, всё в одну строку.

05.1 · ON LIGHT
PRIMEGLOBALPROPERTY
SMARTINVESTREALESTATE
PATTAYATHAILAND
PRIMEGLOBALPROPERTY
PATTAYATHAILAND
PRIMEPROPERTY
PATTAYATHAILAND
Фон #FFFFFF. Один цвет, два веса: regular — #231F20 / 55%, bold — #231F20. Хайрлайн снизу — #231F20 / 15%.
05.1 · ON DARK
PRIMEGLOBALPROPERTY
SMARTINVESTREALESTATE
PATTAYATHAILAND
PRIMEGLOBALPROPERTY
PATTAYATHAILAND
PRIMEPROPERTY
PATTAYATHAILAND
Фон #1D1C23. Текст — #C7BEB4 (беж) для regular, #F4EFE0 (ivory) для bold. Хайрлайн снизу — #D2B66D / 30%.

Параметры (одинаковые на свет/тёмн)

Шрифт
Roboto Regular 400 + Roboto SemiBold 600 на втором слове
Размер
10 px (≈ 7.5 pt в печати). В Stories 9:16 — 9 px
Трекинг
letter‑spacing: 0.16em (tracked‑out caps)
Кейс
Только UPPERCASE, без диакритики
Раскладка триплета
flex · space-between на всю ширину strip: левое поле к левому краю, центр по середине, правое к правому. Без точек-разделителей
Ширина strip
= ширина хайрлайна = область с горизонтальным отступом 26 px от краёв макета
Отступ от верха
24 px на 4:5, 18 px на Stories 9:16
Отступ от логотипа
Минимум 1×X охранного поля (см. 02.5)
Хайрлайн под strip
1 px, длина = ширине strip минус 18 px с каждой стороны
PRIMEPROPERTY
PATTAYATHAILAND
Stories 9:16 · dark
PRIMEPROPERTY
PATTAYATHAILAND
Stories 9:16 · light

Поведение в узких форматах

В Stories 9:16 и других узких макетах (story‑highlight, превью) длинный триплет не помещается. Правило: убираем «GLOBAL» и поле «дескриптор», шрифт 8.5 px, всё в одну строку.

Слева — образцы: PRIMEPROPERTY · PATTAYATHAILAND, nowrap, трекинг 0.14em. На светлой версии — иконка Standart (синий+стальной), на тёмной — White.

Адаптивное поведение

Top strip имеет три уровня сокращения. CSS сам решает, какой показать, в зависимости от ширины контейнера. Сузь окно браузера — увидишь переключения в живой полосе ниже.

Ширина контейнера Версия Что показывается
≥ 660 pxfull · 10–12 px (растёт ступенями на широких)PRIMEGLOBALPROPERTY · SMARTINVESTREALESTATE · PATTAYATHAILAND
420–659 pxmedium · 10 pxPRIMEGLOBALPROPERTY · PATTAYATHAILAND
< 420 pxshort · 10 px (8 на самых узких)PRIMEPROPERTY · PATTAYATHAILAND

Живая полоса (сужай окно)

PRIMEGLOBALPROPERTY
SMARTINVESTREALESTATE
PATTAYATHAILAND
PRIMEGLOBALPROPERTY
PATTAYATHAILAND
PRIMEPROPERTY
PATTAYATHAILAND

Три ширины одновременно

760 px → auto-fit
PRIMEGLOBALPROPERTY
SMARTINVESTREALESTATE
PATTAYATHAILAND
PRIMEGLOBALPROPERTY
PATTAYATHAILAND
PRIMEPROPERTY
PATTAYATHAILAND
680 px → auto-fit
PRIMEGLOBALPROPERTY
SMARTINVESTREALESTATE
PATTAYATHAILAND
PRIMEGLOBALPROPERTY
PATTAYATHAILAND
PRIMEPROPERTY
PATTAYATHAILAND
480 px → auto-fit
PRIMEGLOBALPROPERTY
SMARTINVESTREALESTATE
PATTAYATHAILAND
PRIMEGLOBALPROPERTY
PATTAYATHAILAND
PRIMEPROPERTY
PATTAYATHAILAND
320 px → auto-fit
PRIMEGLOBALPROPERTY
SMARTINVESTREALESTATE
PATTAYATHAILAND
PRIMEGLOBALPROPERTY
PATTAYATHAILAND
PRIMEPROPERTY
PATTAYATHAILAND
Реализация: в DOM лежат все три версии триплета (.full, .medium, .short). Родитель имеет container-type: inline-size. CSS @container queries переключают display в зависимости от ширины контейнера. Дополнительно clamp() плавно уменьшает шрифт между порогами.