Колористика¶

Кольорова палітра Факультету прикладних наук УКУ створена для забезпечення впізнаваності бренду та візуальної єдності всіх комунікаційних матеріалів. Дотримання кольорових стандартів є обов'язковим для всіх офіційних матеріалів.

Основні кольори¶

Основні кольори бренду використовуються як головні акценти у всіх матеріалах.

Фіолетовий / Purple

CMYK: 75, 100, 0, 0

HEX: #662d91

RGB: 102, 45, 145

PANTONE: 267 C

Зелений / Green

CMYK: 50, 0, 90, 0

HEX: #8bc751

RGB: 139, 199, 81

PANTONE: 375 C

Допоміжні кольори¶

Нейтральні кольори використовуються для тексту, фонів та допоміжних елементів.

Чистий Білий / White

HEX: #ffffff

PANTONE: 442 C

Світло-сірий / Light Gray

HEX: #f1f1f2

PANTONE: 427 C

Просто Сірий / Gray

HEX: #9d9fa2

PANTONE: 442 C

Темно-сірий / Dark Gray

HEX: #58595b

PANTONE: 424 C

Швидке копіювання HEX¶

Фіолетовий:

#662d91

Зелений:

#8bc751

Білий:

#ffffff

Світло-сірий:

#f1f1f2

Сірий:

#9d9fa2

Темно-сірий:

#58595b

Специфікації кольорів¶

Повна таблиця значень¶

Назва	CMYK	RGB	HEX	PANTONE
Фіолетовий	75, 100, 0, 0	102, 45, 145	`#662d91`	267 C
Зелений	50, 0, 90, 0	139, 199, 81	`#8bc751`	375 C
Білий	0, 0, 0, 0	255, 255, 255	`#ffffff`	442 C
Світло-сірий	0, 0, 0, 5	241, 241, 242	`#f1f1f2`	427 C
Сірий	0, 0, 0, 45	157, 159, 162	`#9d9fa2`	442 C
Темно-сірий	0, 0, 0, 80	88, 89, 91	`#58595b`	424 C

Використання кольорів¶

Фіолетовий — основний брендовий колір¶

Використовується як головний акцент бренду

Заголовки — основні назви та титули
Фони — герой-секції, банери, презентації
Акценти — виділення важливих елементів
Логотип — основний колір логотипу

Зелений — акцентний колір¶

Використовується для акцентів та інтерактивних елементів

Крапка в логотипі — ключовий елемент ідентичності
Кнопки — call-to-action елементи
Іконки — позитивні індикатори, успіх
Виділення — важлива інформація

Нейтральні кольори¶

Колір	Призначення
Темно-сірий	Основний текст, заголовки на світлому фоні
Сірий	Другорядний текст, підписи, мета-інформація
Світло-сірий	Фони секцій, розділювачі, карточки
Білий	Основний фон, текст на темному фоні

Код для розробників¶

CSS VariablesSCSS VariablesTailwind Config

:root {
  /* Primary Colors */
  --asf-purple: #662d91;
  --asf-green: #8bc751;

  /* Secondary Colors */
  --asf-white: #ffffff;
  --asf-light-gray: #f1f1f2;
  --asf-gray: #9d9fa2;
  --asf-dark-gray: #58595b;

  /* Gradients */
  --asf-gradient-purple: linear-gradient(135deg, #662d91 0%, #8b5cf6 100%);
  --asf-gradient-green: linear-gradient(135deg, #8bc751 0%, #a3e635 100%);
}

// Primary Colors
$asf-purple: #662d91;
$asf-green: #8bc751;

// Secondary Colors
$asf-white: #ffffff;
$asf-light-gray: #f1f1f2;
$asf-gray: #9d9fa2;
$asf-dark-gray: #58595b;

// Color Map
$asf-colors: (
  'purple': $asf-purple,
  'green': $asf-green,
  'white': $asf-white,
  'light-gray': $asf-light-gray,
  'gray': $asf-gray,
  'dark-gray': $asf-dark-gray
);

module.exports = {
  theme: {
    extend: {
      colors: {
        'asf-purple': '#662d91',
        'asf-green': '#8bc751',
        'asf-light-gray': '#f1f1f2',
        'asf-gray': '#9d9fa2',
        'asf-dark-gray': '#58595b',
      }
    }
  }
}

Правила використання¶

!!! success "Рекомендовано" - Використовуйте точні значення кольорів з палітри - Забезпечуйте достатній контраст (мінімум 4.5:1 для тексту) - Фіолетовий — для основних акцентів, зелений — для другорядних - Використовуйте градієнти для динамічних елементів

!!! warning "Уникайте" - Не змінюйте відтінки основних кольорів - Не використовуйте більше 3 кольорів одночасно - Не розміщуйте зелений текст на фіолетовому фоні (і навпаки) - Не використовуйте кольори з низьким контрастом для тексту

!!! danger "Заборонено" - Заміна брендових кольорів на інші - Використання кольорів, що не входять до палітри - Зміна прозорості основних кольорів у логотипі