Меню

8(800) 555-14-39

UI Kit — Digital Skills Academy

UI Kit Digital Skills

Единая дизайн-система для создания лендингов в тёмной теме с AI-направлением. Все компоненты готовы к использованию.

Типографика

Все заголовки используют fluid-размеры через clamp() для адаптивности.

H1 — Главный экран

Курс Нейросети для маркетинга

font-size: clamp(26px, 4vw, 48px);
font-weight: 900;
letter-spacing: -0.03em;

H2 Large — Блоки

Что говорят студенты

font-size: clamp(26px, 4vw, 42px);
font-weight: 800;

H2 Medium

Навыки после курса

font-size: clamp(20px, 2.8vw, 32px);
font-weight: 800;

H2 Compact

Программа обучения

font-size: clamp(18px, 2.6vw, 26px);
font-weight: 800;

Label — Метка

Карьерный центр

font-size: 11px;
text-transform: uppercase;
color: var(--r);

Body — Основной текст

Нейросети помогают маркетологу работать быстрее и эффективнее — без увеличения команды.

font-size: 14px;
color: var(--dim2);

Small — Мелкий текст

по данным hh.ru, Superjob за последний месяц

font-size: 12px;
color: var(--dim);

Цветовая палитра

Все цвета через CSS-переменные для единообразия.

RED

Основной акцент

--r: #E50219

RED 2

Ховер / Градиент

--r2: #ff2a3d

Фон страницы

--bg: #0f0c0c

BG ALT

Альтернативный фон

--bg-alt: #141010

CARD

Фон карточек

--card: #1d1414

BORDER

Границы

--bd: #2e1d1d

DIM

Второстепенный текст

--dim: #9a8f8f

DIM 2

Светлый второстепенный

--dim2: #c8b8b8

Кнопки

Три типа кнопок с разной интенсивностью акцента.

Основная CTA

.btn-red {
  background: var(--r);
  box-shadow: 0 4px 18px rgba(229,2,25,0.35);
}
.btn-red:hover {
  transform: translateY(-2px);
}

Вторичная Ghost

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--bd);
}
.btn-ghost:hover {
  border-color: rgba(229,2,25,0.4);
}

.btn-more svg {
  transition: transform 0.2s;
}
.btn-more.open svg {
  transform: rotate(180deg);
}

Карточки

Базовые карточки с градиентным фоном и эффектом при ховере.

Обычная карточка

Градиентный фон, border-radius 14px. При ховере поднимается и светится красной тенью.

.card {
  background: linear-gradient(160deg, var(--card), #1a1010);
  border: 1px solid var(--bd);
  border-radius: 14px;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(229,2,25,0.12);
}

Карточка с подсветкой

Красная линия сверху через ::before. Используется для важных элементов (удостоверения, сертификаты).

.card-highlight::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--r), transparent);
}

Иконки и бейджи

Плоские SVG-иконки с красным stroke. Бейджи и теги для категоризации.

Иконка в box

.icon-box {
  width: 36px; height: 36px;
  background: rgba(229,2,25,0.1);
  border: 1px solid rgba(229,2,25,0.2);
}
.icon-box svg {
  stroke: var(--r);
  stroke-width: 1.8;
}

Бейдж

Старт Экспертиза

.badge {
  background: rgba(229,2,25,0.1);
  border: 1px solid rgba(229,2,25,0.2);
  color: var(--r);
  font-size: 10px;
  font-weight: 700;
}

Теги

ChatGPT Midjourney Аналитика

.tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(46,29,29,0.8);
  color: var(--dim2);
}

УТП-плашка

23 инструмента

.utp {
  display: flex;
  align-items: center;
  gap: 5px;
}
.utp-dot {
  width: 5px; height: 5px;
  background: var(--r);
  border-radius: 50%;
}

Аккордеон

Раскрывающиеся блоки для FAQ, программы обучения, формата курса.

Как нейросети помогают в маркетинге?

Нейросети в маркетинге помогают автоматизировать рутинные задачи, генерировать тексты и визуальный контент, анализировать аудиторию и данные.

Нужны ли технические знания?

Нет. Курс не требует программирования. Достаточно базового владения компьютером.

// JS: клик на .accordion-head переключает класс .open
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
// При открытии:
body.style.maxHeight = body.scrollHeight + 'px';

Прогресс-бары

Анимированные полосы для демонстрации навыков, экономии времени, популярности направлений.

Генерация текстов

96%

Визуальный контент

84%

Таргетинг

71%

.bar-fill {
  background: linear-gradient(90deg, var(--r), var(--r2));
  width: 0; /* начальное состояние */
  transition: width 1.3s cubic-bezier(0.2,0.8,0.2,1);
}
// Триггер через IntersectionObserver:
bar.style.width = bar.getAttribute('data-w');

Нумерованные шаги

Кружки с номерами для пошаговых инструкций (карьерный центр, процесс обучения).

Резюме и портфолио

Учим составлять интересное и грамотное резюме

Подготовка к интервью

Рассказываем, как успешно проходить собеседования

Вакансии от партнёров

Лучшим студентам предлагаем вакансию

.step-num {
  width: 40px; height: 40px;
  background: var(--r);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(229,2,25,0.4);
}
.step-num::after {
  content: "";
  inset: -3px;
  border: 2px solid rgba(229,2,25,0.25);
}

Точки навигации

Для горизонтальных слайдеров на мобилке. Активная точка растягивается.

.dot {
  width: 7px; height: 7px;
  background: var(--bd);
  border-radius: 50%;
}
.dot.active {
  background: var(--r);
  width: 20px;
  border-radius: 4px;
  transform: scale(1.3);
}

Glow эффект

Светящиеся пятна на фоне через blur для атмосферности.

Текст поверх glow-эффекта

.glow {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: var(--r);
  filter: blur(120px);
  opacity: 0.12;
  pointer-events: none;
}

Горизонтальный скролл

Карточки в одну строку с градиентными фейдами по краям.

Карточка 1

Скролл горизонтальный

Карточка 2

С градиентными фейдами

Карточка 3

По краям экрана

Карточка 4

Для ПК и мобилки

/* Обёртка */
.scroll-wrap {
  margin-left: -22px; margin-right: -22px;
  position: relative;
}
/* Градиенты по краям */
.scroll-wrap::before,
.scroll-wrap::after {
  content: ''; position: absolute;
  top: 0; bottom: 0; width: 40px;
  z-index: 3; pointer-events: none;
}
.scroll-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.scroll-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}

Адаптивность

Breakpoints и подход к мобильной версии.

/* Основные breakpoints */

@media (max-width: 900px) {
  /* Планшет: 2 колонки вместо 3 */
}

@media (max-width: 680px) {
  /* Мобилка: 1 колонка, слайдеры */
  .grid { grid-template-columns: 1fr; }
  
  /* Snap-скролл для карточек */
  .scroll-inner {
    scroll-snap-type: x mandatory;
  }
  .card {
    scroll-snap-align: start;
    flex: 0 0 85vw;
  }
  
  /* Показываем точки навигации */
  .dots { display: flex; }
}

@media (max-width: 480px) {
  /* Компактные отступы */
  .wrap { padding: 0 16px; }
}

Подход

ПК: сетки, hover-эффекты
Планшет: меньше колонок, карточки растягиваются
Мобилка: горизонтальные слайдеры с snap-scroll, точки навигации, упрощённый hover (тап)
Все размеры через clamp() для плавного масштабирования

Правила использования

10 принципов для соблюдения единства дизайн-системы.

Все цвета через CSS-переменные (var(--r), var(--dim))
Все размеры заголовков через clamp()
Все иконки — SVG с stroke, без fill
Все карточки — градиентный фон linear-gradient(160deg, var(--card), #1a1010)
Все border-radius — округлые (8px–20px в зависимости от размера)
Все переходы — transition: 0.2s или cubic-bezier для сложных анимаций
Все горизонтальные скроллы — с градиентными фейдами по краям
Мобильные слайдеры — scroll-snap-type: x mandatory + точки навигации
Акценты — только красный (--r / --r2), никаких синих/зелёных
Аккордеоны — max-height: 0 → scrollHeight при открытии

UI Kit готов к использованию в Тильде (T123)

Все компоненты можно копировать и адаптировать под конкретные блоки