Перейти к содержимому
Дизайн-система d2n

d2n core

Интерфейсы из готовых блоков

Ядро продуктов d2n: компоненты на все случаи, WoW эффекты, темы и локализация. Эта страница собрана из самих core-компонентов — она и есть их витрина.

Витрина компонентовWoW эффекты
Режим
Акцент
Цвета темы

Цвета применяются к текущему режиму (светлая/тёмная) и сохраняются в браузере. -fg акцентов подбирается по контрасту автоматически.

Преимущества

Что даёт core продуктам d2n с первого дня.

  • 71 компонент

    Формы, данные, навигация, оверлеи — полный набор для продуктовых интерфейсов, от CoreButton до CoreDataTable.

  • WoW эффекты

    Палитра команд ⌘K, онбординг-туры, конфетти, reveal-анимации, бегущая строка и сравнение «до/после».

  • Темы без FOUC

    Светлая и тёмная темы на семантических токенах --ui-*: применяются до первой отрисовки, слой переопределяет палитру теми же переменными.

  • Контент без статики

    Весь контент — по ключам переводов в коде: ни одной статичной строки; даты, цены и склонения форматируются по локали.

  • Доступность

    WCAG 2.0 Level AA из коробки: контраст токенов проверяет CI, фокус-кольца :focus-visible, клавиатура без ловушек, prefers-reduced-motion.

  • Единый стек оверлеев

    Modal, Sidebar, Drawer и палитра команд в одном стеке: «назад» закрывает верхний оверлей, URL не меняется.

  • Документация из кода

    Пропсы, слоты и события генерируются из сигнатур SFC одной командой — docs:components.

  • Компоненты в Markdown

    Core-компоненты вставляются прямо в MDC-контент @nuxt/content — ::core-button, :core-icon: статьи и документация пишутся как текст, без Vue-файлов.

  • Покрыто тестами

    Каждый компонент сопровождается набором тестов Vitest — регрессии ловятся до продакшена.

  • Строгая типизация

    Props, emits и слоты типизированы: vue-tsc ловит несовместимости до запуска, типы компонентов — в shared/types.

  • SSR из коробки

    Компоненты безопасны при серверном рендере: уникальные id через useId, гидратация без расхождений.

  • Нативная основа

    Где есть нативный элемент — используем его: select, checkbox, radio, range. Клавиатура и семантика бесплатно.

  • Flow-переливы

    Фирменные переливающиеся рамки, фоны и текст: пара цветов на компонент, перекрывается переменными без правки кода.

  • Адаптивность

    Bottom-навигация, мобильное меню и крупные touch-цели: интерфейс собран для телефонов с первого дня, а не как дополнение.

  • Переходы страниц

    View Transitions API включён из коробки: мягкий кроссфейд между страницами без единой строчки кода.

  • База любого Nuxt-приложения

    Подключается как слой (extends) или стартовая база: компоненты, темы, i18n и тулинг переиспользуются в любом проекте одной строкой конфига.

  • Микроразметка JSON-LD

    Схемы schema.org для поисковиков одной строкой: useJsonLd добавляет ld+json-тег в head при SSR — товары, статьи и хлебные крошки видны как структура.

  • PWA и офлайн

    Манифест, service worker и клиентский бандл иконок: витрина устанавливается на телефон и десктоп, страницы открываются без сети.

Технологии

Nuxt 4Vue 3.5TypeScriptUnoCSSVitestaxe-core@nuxt/content@nuxtjs/i18n@nuxtjs/color-modeVueUsemotion-vvaul-vueFlickingdriver.js@nuxt/icon@nuxt/imagelibphonenumber-jscanvas-confetti

Наведите курсор — прокрутка встанет на паузу.

Технические разделы

Витрины для разработчиков: включаются переменной NUXT_DEV_PAGES=1 и не попадают в прод-билд.

Собрано на core-компонентах d2n