Yulov UI: личная дизайн-система для no-code проектов
Где реально применена: этот сайт-портфолио · Cryptan.pro · «Трансформация B2B-сайта» · ~7 рабочих сайтов в агентстве
Навигация по разделам
Контекст
Я работаю в рекламном агентстве полного цикла и веду вёрстку сайтов на no-code платформах (TapTop, Tilda) — за это время сделал около семи сайтов для разных клиентов. С каждым новым проектом я заново решал одни и те же вопросы: какие отступы, какая шкала шрифтов, как построить сетку.
Клиенты разные, задачи повторяются, а начинать с нуля каждый раз — не то чтобы неправильно, но так копится непоследовательность и уходит время на решения, которые я уже принимал раньше.
Я захотел систематизировать подход — не чтобы все сайты выглядели одинаково (это отдельный риск, для дизайнера агентства «сделать всем одно и то же» — плохой сигнал), а чтобы держать общие системные правила: шкалу отступов, типографику, сетку — и уже поверх них делать разный дизайн под разного клиента.
Как собиралась система
Я не проектировал её с нуля как отдельную задачу. Система — это курирование: беру компонент или подход из систем, которые считаю образцовыми (в первую очередь Yandex Design System и shadcn/ui), иногда достаю конкретные значения токенов через инструменты разработчика на живых сайтах.
Дальше адаптирую под свой вкус и задачу — упрощаю или усложняю.
Каждый проект я строю на конструкторах (TapTop, Tilda) — с их ограничениями и без написания кода. Если готового решения из системы нет или оно не подходит под платформу, я адаптирую его или беру похожее решение под другим углом, а не собираю с нуля.
Систему не использую как библиотеку в Figma — сверяюсь с ней как со шпаргалкой и переношу нужные значения руками в конструктор.
Референс, от которого отталкиваюсь: примитивы shadcn/ui
Ниже — не мои компоненты. Это реальные спеки самих примитивов shadcn/ui (стиль new-york-v4), взятые прямо из открытого кода библиотеки: высоты, отступы, радиусы, варианты и состояния — как есть, без моих правок. Это и есть та база-отправная точка, которую я адаптирую под задачу и платформу — no-code конструктор не всегда позволяет повторить значение один в один, но ориентируюсь именно на эти цифры.
Button
Размеры (радиус везде rounded-md — 6px, вариант — default):
Варианты (размер — default):
Состояния (вариант — default, размер — default):
Input
| Параметр | Значение |
|---|---|
| Высота | 36px (h-9) |
| Padding | 12px по бокам, 4px сверху/снизу |
| Радиус | 6px (rounded-md) |
| Размер текста | 16px на мобильных / 14px на десктопе (защита от авто-зума iOS) |
| Обводка | border-input, полупрозрачный фон в тёмной теме |
Типы инпута, которые поддерживает компонент: text, email, password, file (плюс стандартные HTML-типы).
Checkbox
| Параметр | Значение |
|---|---|
| Размер бокса | 16px (size-4) |
| Размер иконки-галочки | 14px (size-3.5) |
| Радиус | 4px |
Что внутри
Источник истины — Figma-файл (страницы Color, Typography, Grids & spacing, Primitives, Components, Icons). В нём:
Цвет
22 цветовые шкалы по 11 оттенков в OKLCH (на основе палитры Tailwind v4) плюс семантический слой (bg, text, accent, border, sidebar и т. д.) для тем.
Типографика
13 ступеней размера на Inter, с line-height и трекингом под каждую ступень.
Отступы
Шкала на базе 4px, от 4 до 256px.
Радиусы
Радиусы, брейкпоинты: 10 токенов радиуса, 5 брейкпоинтов (640–1536px).
Кнопка
Компоненты пишу под конкретную задачу проекта, опираясь на токены системы; в Figma накопилось около 14 наборов вариантов и 28 самостоятельных элементов как референс, но один в один между проектами пока переиспользую только кнопку.
Доказательство в деле — карточки B2B-кейса
Самый весомый пример системы в работе — кейс «Трансформация B2B-сайта». Сначала это была нативная вёрстка в Tilda без переиспользуемых частей. Позже, уже на основе значений своей системы, я спроектировал сложные карточки — для услуги, для примера работ (портфолио) и для новости, — которые переиспользуются в нескольких разделах сайта одним и тем же компонентом.
Подробности принципов (семантические токены, content-agnostic вёрстка, состояния интерактивных элементов) — в разделе «Дизайн-система» того кейса.