VL. Портфолио
VL / Design System 1.0

Дизайн-система и UI-kit

Живой набор токенов, компонентов и правил для портфолио. Все образцы ниже используют тот же CSS, что и рабочие страницы.

01 / Цвет

Функциональная палитра

Цвет задаёт иерархию, а не заменяет текстовые обозначения.

Ink#121212
Paper#F4F2ED
Accent#C93618
Acid#D9FF43
Case Blue#1547FF
Muted#6E6B65
Surface#FFFFFF
Project Pink#F30694
02 / Типографика

Rubik Variable

Одна гарнитура для кириллицы и латиницы, диапазон насыщенности 300–900.

Display / 55–105Проектирование
Heading / 40–70Продуктовые кейсы
Title / 28–42ERP-система Vasilisa
Lead / 20Проектирование понятных интерфейсов и многостраничных изданий.
Body / 16Основной текст набирается размером 16 px с интерлиньяжем 1.55–1.6.
Label / 12–1403 / Обо мне
03 / Сетка

Отступы и форма

Базовый шаг — 4 px. Рабочий ритм строится на 16, 24, 32, 48, 64 и 80 px.

16 px / --space-4
24 px / --space-6
32 px / --space-8
48 px / --space-12
64 px / --space-16
80 px / --space-20
Radius 12 px
Radius pill
04 / Компоненты

Интерактивные элементы

Минимум вариантов, ясные состояния и единая высота основных действий.

Buttons · демонстрация

Нажмите кнопку, чтобы проверить её состояние.

На главную →
Tags
  • UX research
  • Web + Mobile
  • UI kit
  • Prototype
Project formula
Проблема
Сценарий прерывался и не работал на смартфоне.
Роль
Исследование, сценарии и UI.
Решение
Сохранена знакомая логика продукта.
Результат
Мобильная версия и система компонентов.
Process card
01

Не ломать привычное

Сохранять знакомые сценарии, когда переучивание не несёт ценности.

02

Проверять решение

Менять решение после проверки, а не из предположений.

03

Убирать лишнее

Переносить на мобильный экран только необходимые сценарии.

04

Давать основу

Закреплять правила в токенах и переиспользуемых компонентах.

05 / Правила

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

Система помогает сохранять характер портфолио без лишних вариантов.

Иерархия

На экране один главный заголовок. Оранжевый используется для навигационных акцентов и меток, acid — на тёмном или синем фоне.

Типографика

Заголовки балансируются, короткие предлоги связаны неразрывными пробелами. Абзацы ограничиваются комфортной длиной строки.

Контраст

Мелкий текст соответствует минимуму 4.5:1. Полупрозрачный белый ниже 55% не используется для содержательного текста.

Сетка

Контентный контейнер — до 1440 px, кейс — до 1240 px. На мобильном экране боковой отступ 16 px.

Состояния

У ссылок и кнопок есть hover и видимый focus. Анимация короткая и отключается при prefers-reduced-motion.

Контент

Кейс следует формуле: проблема → роль → решение → результат. Неподтверждённые числа не добавляются.

Откроется в новой вкладке