Brand Identity System

Vizia Design Guide

Все правила, шрифты, цвета и компоненты сайта vizia.digital — для тех, кто продолжает строить бренд.

Navigation

What's inside

01
Colors
Palette & usage
02
Typography
Fonts & scale
03
Buttons
CTAs & states
04
Glass UI
Glassmorphism
05
Layout
Grid & spacing
06
Motion
Transitions
07
Components
Cards & nav
08
Do / Don't
Правила бренда
01 — Identity

Color Palette

Виза строится на контрасте тёмного фона и яркого розового акцента. Светлые секции используют тёплый белый, никогда холодный.

Pink — Primary Accent
Pink 100
#ffe0ea
Pink 200
#ffb8cd
Pink 300
#ff8faf · dark labels
Pink 400
#ff7a9e · hover
Pink 500 ★
#ff5b86 · main
Pink 600
#e03a6a · gradient end
Light Surfaces
BG
#F8F8F6 · page bg
BG Card
#FFFFFF · cards
BG Section
#F0F0ED · alt sections
Text Dark
#0f0f0f · headings
Text Mid
#555555 · body
Text Soft
#999999 · captions
Hero BG
#060009 · hero
Nav BG
rgba(10,6,16,.88) · nav pill
Pink Glow
rgba(255,91,134,.4) · glow
Pink Glow Soft
rgba(255,91,134,.12) · tint
Pink CTA Gradient — основной градиент кнопок
linear-gradient(135deg, #ff5b86 → #e0365a)
Live Example — цвета в контексте
Start your project with
Free consultation
A 30-minute call to discuss your upcoming project, goals, and visual direction.
We are proud of
Our projects
Motion design & 3D commercials
View all projects →
✦
Cinematic quality
4K · 60fps
→
Get started
Free consultation
Color Pairings — что с чем сочетать
Background
#060009
Hero, контактный блок, модалки
Background
#F8F8F6
Основной фон страницы
Background
#FFFFFF
Карточки, модули, секции
Background
Pink Gradient
Только CTA кнопки — белый текст
Запрещённые сочетания
+
текст не читается
фон секции слишком агрессивно
+
два розовых рядом
02 — Fonts

Typography

Три шрифта с чёткими ролями. Никогда не смешивай их назначение.

Font Stack
InterTight ExtraBold
Headings · Stats · Card titles · Buttons CTA · Labels on dark
e-Ukraine Medium
Body text · Descriptions · UI labels · Input placeholders
Bowlby One
Section eyebrows ONLY · Category labels · Never for headings
font-size: 11px
letter-spacing: 0.15em
text-transform: uppercase
-webkit-text-stroke: 0.3px currentColor
color: var(--pink-500) ← всегда розовый
Type Scale — Light Sections
Hero Headline
InterTight ExtraBold
clamp(40px, 6.5vw, 96px)
line-height: 1.1
hero-headline
Visuals worthy of cinemas
Section Title
InterTight ExtraBold
clamp(28px, 3.5vw, 52px)
line-height: 1.1
section-title
Our projects
Card Title
InterTight ExtraBold
17px · line-height: 1.2
work-card-title
Lee Gardens Playdot
Eyebrow Label
Bowlby One
11px · tracking 0.15em
uppercase · color: pink-500
-webkit-text-stroke: 0.3px
section-label
We are proud of
Body
e-Ukraine Medium
18px · line-height: 1.65
body
Motion design studio making commercials, 3D graphics, explainers, and screen visuals.
Body Small
e-Ukraine Medium
15px · color: text-mid
body-sm
A 30-minute call to discuss your project, goals, potential visual direction, timeline, and estimated budget.
Caption
e-Ukraine Medium
12px · color: text-soft
caption
on small, medium and largest screens
Type Scale — Dark / Hero sections
Start your project with
Free consultation
60+
projects delivered
4K
cinematic quality
Body text на тёмном фоне: rgba(255,255,255,0.75) для основного, rgba(255,255,255,0.5) для описаний, rgba(255,255,255,0.3) для второстепенного.
03 — Interaction

Buttons & CTAs

Четыре стиля кнопок. Primary — только для главных CTA. Никогда не используй обычные квадратные кнопки.

Primary — Pink Gradient CTA (главное действие)
background: linear-gradient(135deg, #ff5b86 0%, #e0365a 100%);
box-shadow: 0 4px 20px rgba(255,91,134,0.4);
border-radius: 100px;
font-family: "InterTight ExtraBold";
letter-spacing: 0.08em; text-transform: uppercase;
hover: translateY(-2px) + stronger shadow
Glass Button — навигация и вторичные CTA (на тёмном фоне)
background: rgba(255,255,255,0.08);
backdrop-filter: blur(16px) saturate(1.6);
box-shadow: 0 2px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
::before gradient: top-left specular highlight
border-radius: 100px;
Outline — вторичные действия на светлом фоне
Dashed — "View all projects" и мягкие CTA
View all projects
border: 2px dashed rgba(255,91,134,0.35) → hover: заполняется #ff5b86
Border Radius Rules — все кнопки
100px
pills
16px
dashed CTA
20px
cards
12px
video wrap
50%
icons
04 — Aesthetic

Glassmorphism

Главный визуальный приём сайта. Все плавающие элементы на тёмном фоне используют стекло. Никогда не используй сплошные непрозрачные фоны там, где должно быть стекло.

White Glass
rgba(255,255,255,0.12)
border: rgba(255,255,255,0.2)
blur(20px)
glass-white
Pink Glass
rgba(255,91,134,0.12)
border: rgba(255,91,134,0.25)
blur(20px)
glass-pink
Dark Glass
rgba(10,6,16,0.88)
border: rgba(255,255,255,0.1)
blur(24px) saturate(1.4)
nav / modals
Specular Highlight — обязательный приём на glass-кнопках
::before {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.06) 40%,
    transparent 70%);
}
Dot Grid Background — текстура всех светлых секций
radial-gradient(circle, rgba(0,0,0,0.14) 1px, transparent 1px) 0 0 / 28px 28px
05 — Structure

Layout & Spacing

Максимальная ширина контента — 1400px. Горизонтальные отступы секций — 5vw на десктопе, 4vw на мобильном.

Content Constraints
max-width: 1400px — все секции
max-width: 820px — hero content
Padding секций: padding: 96px 5vw 80px — стандарт
Мобильный: padding: 64px 4vw 40px
Gap между карточками: 16px
Works Grid — адаптивная сетка проектов
Desktop: 3 колонки, first card span 2
Large card (span 2)
Card
Card
Card
Card
Tablet (≤1024px): 2 колонки
Large card (span 2)
Card
Card
Spacing Scale
4px
— micro gaps (nav items)
8px
— base gap (icons, inline)
16px
— card gaps, form inputs
24px
— card padding horizontal
32px
— section inner padding
48px
— between major blocks
64px
— section top padding mobile
96px
— section top padding desktop
Shadow Scale
glass-shadow
0 4px 24px rgba(0,0,0,.06)
glass-shadow-pink
0 8px 40px rgba(255,91,134,.15)
CTA glow
0 4px 20px rgba(255,91,134,.4)
nav shadow
0 4px 32px rgba(0,0,0,.25)
06 — Feel

Motion & Transitions

Плавные, органичные. Никакого linear. Hover на карточках — translateY(-4px), никакого zoom без scale.

Standard Transition
0.3s cubic-bezier(0.4, 0, 0.2, 1)
Все кнопки, ссылки, цвета, opacity. Основной.
Slow Transition
0.6s cubic-bezier(0.4, 0, 0.2, 1)
Hover на превью видео/фото (scale 1.04).
Card Hover
transform: translateY(-4px)
box-shadow: glass-shadow-pink
border-color: border-pink
Карточки проектов при наведении.
Button Hover
transform: translateY(-2px)
box-shadow: stronger glow
Primary CTA кнопки.
Nav Hide/Show
top: -80px / 0
transition: top 0.2s ease
Навбар скрывается/появляется при скролле.
Marquee
animation: marquee-scroll
32s linear infinite
translateX(0 → -50%)
Логотипы клиентов — единственный linear.
07 — Components

UI Components

Navigation — Floating Pill
VIZIA
Home About Projects
Плавающий pill навбар: background: rgba(10,6,16,0.88), blur 24px, border-radius 100px. Активная страница: белый текст + text-shadow. CTA — glass button.
Project Card
Open project →
Lee Gardens Playdot
Visualization for indoor play space
Card anatomy:
• Thumb: aspect-ratio 16/9 (или flex:1 для large)
• Hover overlay: rgba(255,91,134,0.15) + blur(4px)
• border-radius: 20px
• Title: InterTight ExtraBold 17px
• Desc: e-Ukraine 13px, text-soft
• Padding info: 18px 22px 22px
• Hover: translateY(-4px) + pink shadow
Section Header — eyebrow + title
We are proud of
Our projects
Eyebrow всегда перед заголовком. Никогда не меняй порядок.
Icon Badge — круглая иконка
→
✦
+
width/height: 56–60px · border-radius: 50% · background: #ff5b86 или rgba-tint
08 — Guidelines

Do / Don't

Ключевые правила для сохранения стиля бренда.

✓ DO — Colors
Используй #ff5b86 как основной акцент
Тёплый белый (#F8F8F6) для светлых секций
Тёмный #060009 для hero и контактного блока
Только пятно цвета — остальное нейтрально
✗ DON'T — Colors
Не используй холодный белый (#FFFFFF как bg)
Не добавляй вторые акцентные цвета (синий, зелёный)
Не используй яркий градиент на фонах секций
Не меняй оттенок розового — только из палитры
✓ DO — Typography
InterTight ExtraBold для всех заголовков
Bowlby One только для eyebrow labels
e-Ukraine Medium для тела и UI
Eyebrow всегда над заголовком, розовым цветом
✗ DON'T — Typography
Не используй жирный в e-Ukraine для заголовков
Не используй Bowlby One для основного текста
Не используй underline кроме ссылок в тексте
Не смешивай размеры — только из scale
✓ DO — Buttons & UI
Все кнопки — border-radius: 100px (pills)
Glass effect на тёмном фоне
Pink gradient только для главного CTA
Hover всегда меняет тень и position
✗ DON'T — Buttons & UI
Не используй квадратные кнопки
Не ставь розовый gradient на вторичные кнопки
Не делай outline кнопки на тёмном фоне
Не убирай backdrop-filter с glass элементов
✓ DO — Images & Video
Aspect ratio 16:9 для превью проектов
object-fit: cover для всех медиа
Hover overlay с розовым тинтом + blur
autoplay muted loop playsinline на видео
✗ DON'T — Images & Video
Не обрезай лого — только серые / grayscale
Не добавляй рамки на медиа внутри карточки
Не используй квадратные превью для проектов
Не добавляй текст поверх видео без overlay
Brand Voice — тон
Vizia — кинематографичная студия. Копирайтинг короткий, уверенный, без лишних слов.
Примеры: "Visuals worthy of cinemas", "Fast and no-obligation"
Cinematic
Minimal
Bold
Premium
No fluff