PrestigeYacht Sochi ← На сайт
Design system

UI Kit

Единая визуальная система сайта Prestige Yacht Sochi — цвета, типографика, сетка, компоненты и их состояния. Используется для того, чтобы каждый новый экран собирался быстро и оставался визуально безупречным.

Цвет

Глубокий графит и чёрный как база, тёплый белый для текста, золото — единственный акцентный цвет. Никаких дополнительных ярких оттенков.

Black#050607
Graphite 950#0a0c0f
Graphite 900#101317
Graphite 800#1b1f25
Navy 900#0a1220
White#f8f7f3
Gold 300#e2c791
Gold 400#cca962
Gold 600#93743a
Success#6fae8c
Error#c9716a

Типографика

Fraunces — вывесочный serif для заголовков и эмоциональных акцентов. Inter — чистый геометрический sans для интерфейса и текста.

H1 / 5xl

Luxury Yacht Charter

H2 / 3xl

Каталог яхт премиум-класса

H3 / 2xl

Популярные маршруты

H4 / xl

Что входит в стоимость

Lede

Крупный вводный текст для подзаголовков секций.

Body

Основной текст параграфа — используется для описаний и контента страниц.

EyebrowКатегория раздела
Italic serifв лучших традициях моря

Кнопки

Состояния: hover — подъём на 2px и смена тона; active — сжатие 0.97; focus-visible — золотое кольцо; disabled — 45% непрозрачность, клики отключены.

Иконки

Lucide — тонкая линия, единая толщина обводки 1.5–2px. Для брендовых соцсетей — Font Awesome Brands.

anchor
sailboat
users
gauge
bed
map-pin
star
gem
crown
shield-check
waves
compass

Карточки

Feature card

Используется в блоке преимуществ. Hover поднимает карточку и заливает иконку золотом.

Event tile
Service card
Компактная карточка услуги
Google

«Пример отзыва клиента с оценкой и указанием источника».

МК
Имя ФамилияМосква

Формы

Проверьте формат
ВсеМоторнаяПарусная

Бейджи и метки

Gold outline Glass badge Outline

Отступы, радиусы, тени

Аккордеон

Открытый пункт

Содержимое раскрытого пункта аккордеона.
Содержимое скрыто до клика.