📰 116 строк = дизайн-система Коллеги, 30 страниц. Единый стиль. 116 строк документации.
Один markdown-файл — полный UI-гайд: отступы, цвета, компоненты, паттерны.
📍Структура UI-GUIDELINES.md
# Цвета
--primary: #3B82F6
--secondary: #64748B
--success: #10B981
# Отступы
--space-sm: 8px
--space-md: 16px
--space-lg: 24px
# Компоненты
.btn-primary { background: var(--primary) }
CSS variables + конвенции именования.
📍Что покрывает
- Цветовая палитра (light + dark mode)
- Типографика (размеры, веса, высота строки)
- Отступы и сетка
- Компоненты (кнопки, формы, модальные)
- Паттерны (карточки, списки, таблицы)
- Анимации (transitions, easing)
Всё в одном файле.
📍Применение Разработчики перед версткой читают гайдлайны:
- Какой отступ использовать?
- Какой цвет для ошибки?
- Как стилизовать кнопку?
- Какие анимации допустимы?
Ответ в одном документе.
📍Преимущества Вместо 50-страничного Figma-файла:
- Быстрое обновление через git
- Версионирование изменений
- Автоматическая синхронизация с кодом
- Доступно всем участникам команды
116 строк против 200 экранов.
📍Dark mode CSS variables позволяют легко переключать темы:
[data-theme="dark"] {
--primary: #60A5FA;
--bg: #1F2937;
}
Одна строчка — вся тема меняется.
Как создал единую UI-библиотеку для всех проектов. Гайд по дизайн-системам в бесплатном гиде.
#моикейсы_поповвии Работаем дальше.
