Дизайн-токены NSR

Значения сняты с макетов approved-v1 (репозиторий design, коммит 34ec878) и собраны из исходников в формате W3C DTCG. Страница использует те же переменные, что получит UI kit на Nuxt UI 4: переключите тему или поменяйте цвет бренда, чтобы увидеть white-label.

Семантические цвета

В компонентах используются только эти токены. Имя совпадает с CSS-переменной Nuxt UI; значение показано для текущей темы, под ним — ссылка на примитив.

Палитры

Шкалы 50–950 нужны Nuxt UI для оттенков и Tailwind-классов. Нейтральные ink и navy — значения, на которые ссылаются семантические токены; число в имени — светлота OKLab ×10.

ink и navy

Типографика

Inter — весь интерфейс, табличные цифры. Literata — только тексты нормативных положений и документов (класс font-doc, 15,5 px, интервал 1,62).

ОбязательноеСП 1.13130 · п. 4.4.1 · пример

Ширина марша лестницы, предназначенной для эвакуации людей, в том числе расположенной в лестничной клетке, должна быть не менее расчётной или не менее ширины любого эвакуационного выхода на неё, но не менее 1,05 м.

CEn>AAAAЗдание жилое многоквартирное

Формы и размеры

Кнопки и поля · высота md 32 px, радиус 9 px

Как в реестре документов
Заполните наименование
PrimaryВыполненоВ работеОшибка

Радиусы

Тени

--ui-shadow-card · карточки
--ui-shadow-pop · меню, поповеры, окна

Графики и подсветка фрагментов

Палитра графиков --ui-chart-1…5 · порядок фиксирован, цвет всегда с подписью и числом

Фрагменты документа --ui-chunk-1…5

Компоновка

Контраст (WCAG 2.2 AA)

Нормы: обычный текст 4,5:1, графика и границы элементов управления 3:1. Отчёт считается при сборке токенов для бренда NSR; при смене цвета бренда здесь он не пересчитывается.

ТемаПримерТекст / элементФонКонтрастНормаИтогГде используется

Подключение в UI kit

CSS входа kit

@import "tailwindcss";
@import "@nuxt/ui";
@import "@nsr/tokens/nuxt-ui/theme.css";   /* палитры nsr-*, шрифты, брейкпоинты */
@import "@nsr/tokens/tokens.css";          /* --ui-* для светлой и тёмной темы */

vite.config.ts kit

import ui from '@nuxt/ui/vite'
import { nsrUi } from '@nsr/tokens/nuxt-ui/ui.config'

export default defineConfig({
  plugins: [vue(), ui({ ui: nsrUi, fonts: false })]
})

White-label во время работы

// значения приходят из settings Profile
document.documentElement.style.setProperty('--nsr-brand-primary', settings.primary)

Находки при извлечении