PGP · Brandbook · Раздел 06

Компоненты

Базовые UI-кирпичики, из которых собираются лендинги, сайты, посты и презентации. Каждый компонент — в двух темах (Dark / Light), со спецификацией размеров, состояний и правилами применения. На этом разделе принимается решение о синем градиенте — становится ли он UI-цветом для кнопок и иконок.

06.1

Pills

Info-pill: location-tag «📍 Balneário Camboriú», статус-лейблы, фильтры. Outlined и solid варианты.

✓ Готово

06.2

Кнопки

Primary (solid синий) / Secondary (outline) / Ghost (text). Синий зафиксирован как UI-цвет для интерфейса.

✓ Готово

06.3

Stat card · frosted-glass

Карточка с числами/метриками на размытом фоне, в стиле financial dashboards. JetBrains Mono для цифр.

Запланировано

06.4

Pin info card

Карточка с пином 📍 над основным контентом. Видели в референсе Titanium Residence — короткий тэг локации.

Запланировано

06.5

Numbered grid 2×2

Четыре нумерованных блока в сетке 2×2 для перечисления преимуществ / шагов / принципов.

Запланировано

06.6

Формы

Поля ввода, лейблы, ошибки, кнопка submit. Для CTA-секций лендингов и заявок.

Запланировано

06.7

Иконки

Базовый набор: location, calendar, area m², bed, bath, pool, parking, sea view, phone, chevron-arrow. Filled SVG в одном стиле с location-pin из Pills.

Запланировано

06.1 · PILLS

Pills

Info-теги, локации, статусы, фильтры, caps-метки. Варианты: A · Outlined gold (1 px) — основной info-pill, B · Solid featured (gold в Dark / steel gradient в Light) — featured/highlighted, D · Outlined gradient bronze→gold (1 px) — для крупных attribute-тегов под фото объекта, E · Soft matte (rounded-rect) — мягкая кнопка с матовым тёплым fill для inline-CTA. Поддерживает label/value-формат: «Mês de referência / Março». G · Outlined steel gradient (1 px) — стальной аналог D, для случаев когда тёплый бронза-золото не подходит композиции.

DARK · #1D1C23

A · Outlined gold

Balneário Camboriú Wyndham Grand CUB · 2025

1px gold #D2B66D · bg transparent · text ivory · h ~26px

B · Solid gold (featured)

Featured Pattaya NEW 2026

linear-gradient gold #D2B66D→#B3995D · text #1D1C23 · h ~26px

D · Outlined gradient bronze→gold (1 px)

Balneário Camboriú 3 a 5 dorm. 3.800 m² lazer e bem-estar

1 px gradient bronze→gold (#7E6A4B → #D2B66D, L→R) · fill transparent · text 12 px regular

E · Soft matte (rounded-rect)

você compra... 4 motivos para investir. Mês de referência/Março

bronze rgba(126,106,75,.85) · без border · backdrop-blur 6 px · radius 6 · padding 4×8 · поддерживает label/value через seg-left / sep / seg-right

G · Outlined steel gradient (1 px)

Pattaya Premium 279 m²

1 px gradient steel L→R (тёмный→светлый, как D) · Dark: #5E6469→#FFFFFF · Light: #2A2D31→#C5C7C9 · fill transparent · text 12 px regular

Размеры (на примере Outlined gold)

SM · 10 px MD · 11 px LG · 12 px

SM: padding 4×10 · MD (default): 6×14 · LG: 8×18

LIGHT · #FFFFFF

A · Outlined gold

Balneário Camboriú Wyndham Grand CUB · 2025

1px gold #D2B66D · bg transparent · text charcoal · h ~26px

B · Solid steel gradient (featured)

Featured Pattaya NEW 2026

linear-gradient steel L→R #EEF0F1 → #C5C7C9 · без border · text charcoal #1D1C23

D · Outlined gradient bronze→gold (1 px)

Balneário Camboriú 3 a 5 dorm. 3.800 m² lazer e bem-estar

1 px gradient bronze→gold (#7E6A4B → #D2B66D, L→R) · fill transparent · text 12 px regular

E · Soft matte (rounded-rect)

você compra... 4 motivos para investir. Mês de referência/Março

solid беж #C7BEB4 · text charcoal #231F20 · без border · radius 6 · padding 4×8 · поддерживает label/value (seg-left muted + sep bronze + seg-right plain)

G · Outlined steel gradient (1 px)

Pattaya Premium 279 m²

1 px gradient steel L→R Light: #2A2D31→#C5C7C9 (тёмный→светлый, как D)

Размеры (на примере Outlined gold)

SM · 10 px MD · 11 px LG · 12 px

SM: padding 4×10 · MD (default): 6×14 · LG: 8×18

Тип

Border / fill

Text · font

Когда

A · Outlined gold

1 px #D2B66D · fill transparent

Roboto 500 · 11 px · 0.08em
ivory (Dark) / charcoal (Light)

Основной info-pill: локация, ЖК, бренд-тег. Дефолт для постов/каруселей

B · Solid featured

Dark: gradient gold #D2B66D → #B3995D
Light: gradient steel L→R #EEF0F1 → #C5C7C9 (без border)

Roboto 500–700 · 11 px · 0.08em
Dark: charcoal · Light: charcoal

Featured / highlighted: «NEW», «Топ продаж», «Премиум». Один на экран — не злоупотреблять. На Light использует steel-gradient из лого вместо золота, чтобы не выглядеть «купонно»

D · Outlined gold gradient

1 px gradient L→R
#7E6A4B (бронза) → #D2B66D (золото)
fill transparent

Roboto 400 · 12 px · 0
ivory (Dark) / charcoal (Light)

Тёплая «премиальная» pill: переход бронза→золото слева направо. Для крупных attribute-pills под фото объекта

E · Soft matte
(не pill, rounded-rect)

rounded-rect 6 · Dark: bronze rgba(126,106,75,.85) · Light: solid беж #C7BEB4 · без border · padding 4×8

Roboto 400 · 12 px · 0
ivory #F4EFE0 (Dark) / charcoal #231F20 (Light)

Inline CTA внутри текстового блока: «você compra…», «подробнее». Soft button с тёплым матовым fill. Поддерживает label/value: Mês/Março

G · Outlined steel gradient

1 px gradient L→R (тёмный → светлый, как D)
Dark: #5E6469 → #FFFFFF
Light: #2A2D31 → #C5C7C9
fill transparent

Roboto 400 · 12 px · 0
ivory (Dark) / charcoal (Light)

Стальной аналог D: когда композиция требует холодного металла вместо тёплого (бронза/золото). Та же роль — крупные attribute-pills

Размер MD

padding 6 × 14 · radius 999

11 px / 0.08em
line-height 1

Дефолт. SM 4×10/10 px — мелкие чипы; LG 8×18/12 px — hero-плашка

Иконка-pin

inline SVG 11×13 px

fill = currentColor
gap 6 px

Только для location-pill. Цвет — gold (A/B) или bronze (D)

Caps вариант

text-transform: uppercase

letter-spacing 0.14em
mixed-weight inline-Bold

Бренд-метки в стиле caps-strip: «CUB · 2025», «NEW 2026»

✓ Do

Дефолт — A · Outlined gold (1 px). Все остальные — для конкретного смысла
D · Gradient bronze→gold (1 px) — для крупных attribute-тегов под фото объекта, тёплый переход L→R
Один Solid gold на экран максимум (это featured-акцент)
Location-pill — только с иконкой 📍 слева, через gap 6 px
Caps-вариант — для коротких бренд-меток, 2–3 слова max

✗ Don't

Solid gold более одного на экран — теряет «featured»-смысл
Длинные фразы внутри pill (4+ слов) — выйти за пределы строки
Не смешивать A (solid gold) и D (gradient bronze→gold) на одной плитке — выбрать один материал
Гибрид «outlined + fill» — только одно из двух
Тени, свечения, внутренние обводки — никаких эффектов
Цвет текста внутри pill — золотой. Только ivory/charcoal/dark

06.2 · BUTTONS

Кнопки

Три уровня иерархии: Primary — главное действие на экране (solid синий, UI-цвет из палитры), Secondary — альтернативное действие (outline), Ghost — третичное (text-only). Решение про синий: синий градиент `#4277BB → #2361B0` становится UI-цветом для кнопок и иконок интерфейса (одинаков в Dark и Light). В графматериалах постов/каруселей синий по-прежнему не используется — там только золото/сталь/нейтралы.

DARK · #1D1C23

Primary · glossy blue (default · hover · disabled)

Забронировать Забронировать Забронировать

linear-gradient 180° (T→B) с 3 стопами #5482CE → #4277BB (55%) → #355FA0 · inset highlight ivory 22% / inset shadow black 10% · drop shadow blue 25% · text #FFFFFF · radius 8 · padding 12×24

Primary · альтернативы для Gold-лого (3 варианта)

Забронировать Забронировать Забронировать

1) gold L→R #9F8651 → #E0C375 · 2) solid bronze #7E6A4B · 3) solid charcoal #231F20

Secondary · outline (default · hover)

Консультация Консультация

1 px ivory rgba(.4) · text ivory · hover: border-ivory solid

Ghost · text-only

Подробнее → Подробнее →

text #6B95D0 (приглушённый синий на Dark) · без bg/border · hover → ivory

Размеры

SM · 12 px MD · 14 px LG · 15 px

SM: padding 8×16 · MD (default): 12×24 · LG: 16×32

LIGHT · #FFFFFF

Primary · glossy blue (default · hover · disabled)

Забронировать Забронировать Забронировать

тот же glossy blue · одинаков в обеих темах

Primary · альтернативы для Gold-лого (3 варианта)

Забронировать Забронировать Забронировать

1) glossy gold · 2) solid bronze · 3) solid charcoal · в Light так же — выбираются один из трёх в композициях с Gold-лого

Secondary · outline blue (default · hover)

Консультация Консультация

1 px #4277BB · text #4277BB · hover: лёгкая синяя заливка rgba(.06)

Ghost · text-only

Подробнее → Подробнее →

text #4277BB · без bg/border · hover → #2361B0

Размеры

SM · 12 px MD · 14 px LG · 15 px

SM 8×16 / 12 px · MD 12×24 / 14 px · LG 16×32 / 15 px

Тип

Background · border

Text · font

Когда

Primary

linear-gradient 180° (T→B) · 3 стопа
#5482CE → #4277BB (55%) → #355FA0
box-shadow: inset top ivory 22% / inset bottom black 10% / drop blue 25%
radius 8 · padding 12×24
hover: ↓ на тон темнее
active: ↓ ещё, без drop shadow
disabled: opacity 0.4

Roboto 600 · 14 px · 0.01em
#FFFFFF

Главное действие на экране: «Забронировать», «Получить подборку», «Отправить заявку». Один Primary на экран. Центральный стоп #4277BB совпадает с базовым синим палитры — переход вокруг этой точки даёт мягкую растяжку. Вертикальный glossy + inset highlight = классическая affordance кнопки (видно, что это кликабельный объект)

Secondary

1 px outline
Dark: ivory rgba(.4) · Light: #4277BB
fill transparent · radius 8

Roboto 600 · 14 px
Dark: ivory · Light: #4277BB

Альтернативное действие: «Консультация», «Узнать о ЖК». Парная к Primary в hero / форме

Ghost

без bg / border · text-only
padding 12×0

Roboto 600 · 14 px
Dark: #6B95D0 · Light: #4277BB

Третичное действие: «Подробнее →», «Скачать PDF». Inline в тексте или рядом с Primary/Secondary

Размер MD

padding 12 × 24 · radius 8

14 px · 0.01em
line-height 1

Дефолт. SM 8×16/12 px — компактные CTA в карточках; LG 16×32/15 px — hero-блок

✓ Do

Один Primary на экран (главное действие)
Парный Secondary рядом с Primary — для альтернативы («Купить» / «Консультация»)
Ghost — для третичных действий, не конкурирует с Primary
Синий #4277BB → #2361B0 используем только в UI (кнопки, иконки); в графматериалах постов — не применять
Размер выбирать по контексту: hero — LG, форма/карточка — MD, чип/list-item — SM

✗ Don't

Не использовать gold/bronze для UI-кнопок — это акценты постов, не интерфейса
Не делать два Primary рядом — пользователь не поймёт, что главное
Не менять цвет Primary под фон (синий универсален в обеих темах)
Без теней, без свечений, без градиентов внутри кнопки (только flat solid)
Не использовать Secondary в Light с белым bg fill — только transparent