NC Hub Design System
Типографика
Базовые шрифты, их размеры, цвета и уровень прозрачности для использования в верстке.
Заголовок H1
TTNorms Medium • 32px • 100% opacity • #333
Заголовок H2
TTNorms Medium • 28px • 100% opacity • #333
Заголовок H3
TTNorms Medium • 24px • 100% opacity • #333
Заголовок H4
TTNorms Medium • 20px • 100% opacity • #333
Стандартный текст основной
TTNorms Regular • 16px • 100% opacity • #333
Стандартный текст дополнительный
TTNorms Regular • 14px • 100% opacity • #333
Второстипенный текст
TTNorms Light • 14px • 100% opacity • #333
Полупрозрачный текст
TTNorms Light • 14px • 75% opacity • #333
Цвета
Базовые цвета, используемые в проекте.
Цвета зашиты в глобальные переменные, а также в :root CSS сквозной секцией.
Primary
rgb(111, 93, 255)
Secondary
rgb(216, 235, 255)
Gray
rgb(160, 162, 164)
Light Gray
rgb(227, 230, 242)
Text color
rgb(51, 51, 51)
Success
rgb(0, 193, 18)
Warning
rgb(251, 198, 16)
Danger
rgb(252, 112, 112)
Body Background
rgb(244, 246, 248)
Card body BG
rgb(255, 255, 255)
Отступы, линии, разделители
Используются для разделения визуального текста, разделов, внутри карточек.
Линия в карточках и разделах.
Цвет: Light Gray
Толщина: 1px
Ширина: 100%
Отступы: 0px / 10px
ЗАГОЛОВОК
Разделитель с заголовком
Цвет линий: Light Gray
Толщина: 1px
Ширина: 100%
Шрифт: 12px; #333: opacity: 0.5; TTNorms Bold
Заголовок
Подзаголовок
Отступ от заголовка до подзаголовка 15px
Отступ от контента 40px
Отступ между контентом: 20px
Кнопки, меню, теги, фильтры, пагинация
Элементы навигации и управления контентом
Размеры
Цвета
Карточки объектов
Основные виды карточек
Кнопки
Показывать всплывающую панель по центру экрана
После нажатия на кнопку, на которой установлено действие "Показать всплывающую панель", отображать панель по центру экрана пользователя. Сейчас она отображается под формой с кнопкой
750 руб. собрано из 3500 руб.
173 Спонсора
by Роман Лихтин
Формы и поля
Формы и поля в разных вариациях
Регистрация пользователя NCHub.io
Имя *
Фамилия
Дата рождения
Часовой пояс *
— не выбран —
Аватар *
Прикрепить файл...
Немного о себе *
0 /
200
Блок текста с форматированием
Промокод
Нажимая кнопку, вы даете согласие на обработку персональных данных
Прогресс-бары
Прогресс-бары
70 - 100
50 - 70
25 - 50
0 - 25
Корзина товаров
Формы и поля в разных вариациях
Профили пользователей
Формы и поля в разных вариациях
CSS Иконки
Иконки в SVG связанные со стилями в CSS
Для использования иконки добавить <div class="nchub-icon {{icon}}"></div> — {{icon}} переменная из БД с названием категории.
CSS уже вшит в плагины глобально.
Текстовые элементы
Вкладки
Формы
Поля
Кнопки
Медиа-плееры
Счетчики
Ховер-эффекты
Декорации
Слайдеры
Фоны
Меню
Мобильные компоненты
Навигация
Спойлеры
Корзина
Анимация
Карты
UI Системы
Номера блоков
Интеграции
UI компоненты
Чаты и общение
Разное
Графики
Скрипты
Календари
Фильтры
Текстовые элементы
Вкладки
Формы
Поля
Кнопки
Медиа-плееры
Счетчики
Ховер-эффекты
Декорации
Слайдеры
Фоны
Меню
Мобильные компоненты
Навигация
Спойлеры
Корзина
Анимация
Карты
UI Системы
Номера блоков
Интеграции
UI компоненты