NPCHub

Много экспертов. Одна система.

Знак — буква N одним быстрым росчерком: живая, уверенная и с разрядом молнии. Синий на белом, белый на тёмном.

Знак

От иконки до фавикона

Росчерк остаётся читаемым на 16 пикселях. В светлой теме он синий, в тёмной — белый.

Светлая
иконка
64
32
20
16
Тёмная
иконка
64
32
20
16

Одноцветные версии: для печати, документов, водяных знаков и партнёрских материалов

Примерка

Знак в работе

Шапка сайта, вкладки браузера, интерфейс продукта и первый экран лендинга — сразу в двух темах.

Шапка сайта

NPCHub
NPCHub

Вкладки браузера

Интерфейс продукта

Обзор

Задач выполнено

1 284+12%

Встреч разобрано

86Неделя
Бриф встречи с командойсегодня
Открыть все задачи ›

Обзор

Задач выполнено

1 284+12%

Встреч разобрано

86Неделя
Бриф встречи с командойсегодня
Открыть все задачи ›

Первый экран npchub.ru

npchub.ru

Много экспертов. Одна система.

ИИ-персонажи, встречи, задачи и сервер — в одном месте.

НачатьСмотреть продукты
npchub.ru

Много экспертов. Одна система.

ИИ-персонажи, встречи, задачи и сервер — в одном месте.

НачатьСмотреть продукты

Цвет

Один синий в двух оттенках

В тёмной теме синий становится светлее — как системные цвета Apple. Иначе он тонет в тёмном фоне.

Aa5.7:1
NPC Blue#2E54F5 · светлая тема: знак, кнопки, ссылки
Aa5.1:1
NPC Blue · тёмная заливка#3A5CFF · кнопки в тёмной теме
Aa6.7:1
NPC Blue · тёмный текст#7D96FF · ссылки и акцент в тёмной теме
Aa15.5:1
Slate#0E1621 · фон тёмной темы, плитка иконки
Aa6.6:1
Slate Surface#17212B · карточки и панели в тёмной теме
Aa17.6:1
Ink#0D1440 · текст светлой темы вместо чёрного

Семейство

Иконки продуктов

Один почерк — жирный росчерк с наклоном, как у N. У каждого продукта свой символ и свой цвет.

NPCHub
Talk
Team
Brief
Gram
GPU Hub
DSH
EventKit
NPCHub
Talk
Team
Brief
Gram
GPU Hub
DSH
EventKit

Цвет продукта в интерфейсе

Атрибут data-product на странице переключает акцент. Все оттенки рассчитаны под контраст WCAG в обеих темах.

ПодробнееНовое
ПодробнееНовое

Файлы

Логотип и иконки

Только вектор. Правила: свободное поле не меньше половины высоты знака, без перекраски, наклона и теней.

Логотипnpchub-logo.svgЛоготип на тёмномnpchub-logo-on-dark.svgЛоготип на синемnpchub-logo-on-blue.svgОдноцветныйnpchub-logo-mono-ink.svgВертикальныйnpchub-logo-stacked.svgВертикальный на тёмномnpchub-logo-stacked-on-dark.svgТолько словоnpchub-wordmark.svgЗнакnpchub-mark.svgЗнак белыйnpchub-mark-white.svgИконка, светлаяnpchub-icon-light.svgИконка, тёмнаяnpchub-icon-dark.svgФавиконnpchub-favicon.svg

Подключение · v0.2.0

Два канала, одна версия

Каждый релиз неизменен: адреса с номером версии работают всегда, обновление — осознанная смена номера.

Next.js, Astro, Tailwind — npm-пакет

npm i https://ds.npchub.ru/v/0.2.0/npchub-design-0.2.0.tgz
@import "tailwindcss";
@import "@npchub/design/base.css";
@import "@npchub/design/brand.css";
@import "@npchub/design/tailwind.css";
@import "@npchub/design/components.css";

Хеш пакета фиксирует package-lock. Цвет продукта: <html data-product="talk">.

FastAPI-шаблоны, боты, мини-аппы, статика — одна ссылка

<link rel="stylesheet"
      href="https://ds.npchub.ru/v/0.2.0/npchub-design.min.css"
      integrity="sha384-Xxyh66v9u217gJJ/UoSCRog5SPHRzsGOZnRfTfNnz/d23INVLhuxAE/y9mQKV1BV"
      crossorigin="anonymous">

Один файл без @import, хеш integrity защищает от подмены. Логотипы: https://ds.npchub.ru/v/0.2.0/logo/…

Все версии и их хеши:0.2.0

Что дальше

До готовой системы