Перейти к содержимому
Мой кубикДизайн-системаLiquid Glass · 1.0
Открыть сайт
Мой кубик / общий визуальный язык

Один язык.
Весь новый дизайн.

Главная, каталог, карточка набора, витрина и личный кабинет — в общей системе токенов, компонентов и правил.

Подключено к страницамСветлая тема · адаптивные контейнеры · Vue 3
01 / Foundations

Основа

Значения здесь читаются из того же файла, который создаёт CSS сайта.

Цвет и смысл

ink#292a30--mk-color-ink
muted#647386--mk-color-muted
muted-account#596a80--mk-color-muted-account
subtle#8a99ad--mk-color-subtle
brand#f34046--mk-color-brand
action#c92430--mk-color-action
action-hover#b9212d--mk-color-action-hover
white#ffffff--mk-color-white
canvas#f8fafc--mk-color-canvas
glass-border#ffffffed--mk-color-glass-border
line#d5e1ef88--mk-color-line
success#28704c--mk-color-success
success-bg#eff8f3--mk-color-success-bg
warning#805d20--mk-color-warning
warning-bg#fff7e9--mk-color-warning-bg
info#315e96--mk-color-info
info-bg#eef5fd--mk-color-info-bg
danger#b9212d--mk-color-danger
danger-bg#fff0f1--mk-color-danger-bg
neutral#596a80--mk-color-neutral
neutral-bg#eef2f7--mk-color-neutral-bg

Brand — цвет логотипа и акцентов. Для мелкого текста и залитых кнопок используйте более тёмный Action: белый текст на нём имеет контраст не ниже 4.5:1.

Типографика

Ваша следующая сборкаdisplay / 42px
Ваша следующая сборкаsection / 29px
Ваша следующая сборкаheading / 24px
Ваша следующая сборкаinput / 16px
Ваша следующая сборкаbody / 14px
Ваша следующая сборкаlabel / 12px
Ваша следующая сборкаcaption / 11px

Системный шрифт. Полные названия, перенос длинных строк, табличные цифры для сумм.

Ритм и радиусы

1 / 4px
2 / 8px
3 / 12px
4 / 16px
5 / 20px
6 / 24px
7 / 28px
8 / 32px
10 / 40px
12 / 48px
small12pxmedium18pxcontrol26pxcard28pxpanel30pxaccount26pxpill9999px

Базовый шаг 4 px. Между карточками принят отдельный токен 14 px. Разные радиусы сохраняют плотность макетов.

02 / Materials

Стекло с понятной иерархией

Материал задаёт поверхность; сетка и бизнес-логика остаются у конкретного блока.

Большая панель

Шапка, секции главной, фильтры. Светлые синие и тёплые блики.

--mk-surface-section

Карточка каталога

Товары, серии, предложения. Прозрачность 0.47, радиус 28 px.

--mk-surface-card

Панель кабинета

Сводки, заказы, настройки. Более плотный материал, радиус 26 px.

--mk-surface-account

Непрозрачный слой

Сложные формы и резервное отображение без размытия.

--mk-color-white
03 / Actions

Действия

Одно главное действие на блок. Ссылки ведут на страницу, кнопки меняют состояние.

Ссылка на каталог Недоступная ссылка

Фокус виден с клавиатуры. У иконок без текста обязательно есть доступное название. На сенсорном экране активная область — не меньше 44 × 44 px.

04 / Forms

Ввод и фильтры

Примеры ниже локальные: ввод не отправляет данные и не меняет каталог.

Постоянная подпись остаётся видимой при вводе.

Выбранное значение сохраняется даже при пустой выдаче.

Укажите номер набора.

Объясняйте причину недоступности рядом с полем.

Ошибка связана с полем через aria-describedby; цвет дополняет текст, а не заменяет его.

05 / Feedback

Состояния и навигация

Загрузка, отсутствие данных и ошибка имеют разные тексты и действия.

ЧерновикОплаченПринятОжидает оплатыОшибка

По этим условиям ничего не найдено

Попробуйте другую серию или сбросьте один из фильтров.

Вкладки

Содержание вкладки

Стрелки переключают доступные вкладки. Home и End переходят к первой и последней.

Диалог удерживает фокус, закрывается по Escape и возвращает фокус к кнопке открытия.

06 / Icons

Общая библиотека иконок

24 × 24, линия 1.6, скруглённые окончания. HomeIcon и CatalogIcon используют этот же источник.

arrow-right
arrow-up-right
arrow-down
chevron-left
chevron-right
chevron-down
heart
search
user
bag
messages
info
close
copy
flag
plus
check
calendar
blocks
sliders
grid
list
share
expand
store
07 / Patterns

Весь интерфейс в одной системе

Готовые составные блоки используются на страницах. Не создавайте вторую копию карточки или оболочки.

Категории деталей

catalog

Общий справочник категорий, поиск и алфавит.

app/pages/(catalog)/parts/themes.vueОткрыть пример

Детали

catalog

Карточки, фильтры и пагинация деталей.

app/pages/(catalog)/parts/index.vueОткрыть пример

Минифигурки

catalog

Общий каталог минифигурок и связанных наборов.

app/pages/(catalog)/minifigs/index.vueОткрыть пример

Инструкции

catalog

Поиск по наборам, электронные инструкции LEGO и печатные предложения.

app/pages/(catalog)/instructions/index.vueОткрыть пример

Корзина

homepage

Пустая корзина, выбор категории, товары и оформление заказа.

app/pages/(user)/cart/index.vueОткрыть пример

Главная

homepage

Общая шапка, реклама, серии и товарные подборки.

app/pages/index.vueОткрыть пример

Серии наборов

catalog

Избранные направления, поиск, алфавит, окно подтем.

app/pages/(catalog)/sets/themes.vueОткрыть пример

Каталог наборов

catalog

Фильтры из URL, плитки/список, пагинация и пустая выдача.

app/pages/(catalog)/sets/index.vueОткрыть пример

Карточка набора

catalog

Полное имя, фото, состав, предложения, вкладки.

app/pages/(catalog)/sets/[set_num]/index.vueОткрыть пример

Витрина магазина

catalog

Обложка, профиль и фильтры лотов. Нужен реальный ID открытого магазина.

app/pages/(catalog)/shops/[store_id]/index.vueОткрыть пример

Кабинет покупателя

account

Боковое меню, сводки, заказы, коллекция и вишлисты. Нужен вход.

app/layouts/account.vueОткрыть пример

Кабинет продавца

account

Роль продавца, лоты, настройки магазина и заказы. Нужен вход.

app/components/account/AccountStoreProducts.vueОткрыть пример

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

Граничные ширины контейнеров, px
КонтекстГраницы
publicnarrow: 360 · mobile: 540 · tablet: 750
catalognarrow: 359 · mobile: 540 · filters: 650 · tablet: 850
accountnarrow: 350 · mobile: 600 · tablet: 900 · wide: 1100

Сетки используют minmax(0, 1fr), длинные названия переносятся. Карточка товара сохраняет фото через object-fit: contain. Ширины профилей сохранены из принятых макетов.

08 / Implementation

Как использовать в коде

TypeScript → CSS-токены → базовые компоненты → составные блоки → страницы.

Новая секция в существующем layout

<script setup lang="ts">
import MkButton from '~/components/design-system/MkButton.vue'
import MkSurface from '~/components/design-system/MkSurface.vue'
</script>

<template>
  <MkSurface material="section">
    <h2>Новая секция</h2>
    <MkButton variant="primary">Продолжить</MkButton>
  </MkSurface>
</template>

Стили уже подключены в homepage, catalog и account. Для отдельного интерфейса используйте layout design-system или импорт design-system.css и корень data-mk-design.

Скачать CSS-токены

Основа

MkIconMkSurfaceMkBadgeHomeIconCatalogIcon

Действия и ввод

MkButtonMkIconButtonMkFieldMkSelectMkOptionSelect

Обратная связь

MkNoticeMkDialogMkTabs

Оболочка и навигация

HomeHeaderHomeFooterHomeCartLinkSiteHeaderAccountNavigationLinksAccountMobileNavCatalogBreadcrumbsCatalogPaginationAccountPagination

Главная

HomeCategoriesHomeRailHomeSelectionHomeProductCardHomeAdvertising

Каталог и магазин

CatalogSetCardCatalogOfferCardCatalogOffersCatalogImageCatalogPurchaseCatalogStatusCatalogDialogCatalogDirectoryCatalogEntryCardCatalogEntryListCatalogEntityDetailCatalogRelated

Кабинет

AccountOverviewAccountOrderListAccountOrderStatusAccountOrderItemsAccountOrderTotalsAccountWishlistProductsAccountStoreProductsAccountRoleSwitchAccountStateAccountLogoutAccountPhotoUpload

Корзина

CartEmptyCartTotalsDeliverySelector

Правила, которые сохраняют систему

  • Новые общие значения добавляйте в shared/design-system/tokens.ts, затем выполняйте pnpm design:tokens и pnpm design:check.
  • Подключайте Mk-компоненты явным импортом. Их состояние принадлежит родителю; они не обращаются к API и не знают о пользователе.
  • Составные карточки каталога и кабинета сохраняют свои данные и действия. Общая система управляет материалами, визуальными значениями и базовыми элементами.
  • Показывайте реальные фото и значения. Неизвестные характеристики обозначайте явно, не заменяйте нулями.
  • Проверяйте клавиатуру, ширину 320 px, длинный текст, ошибку запроса и reduced motion. Тёмная тема пока не входит в утверждённый дизайн.
Мой кубик · Liquid Glass 1.0 Токены и компоненты — в репозитории проекта

Пример диалога

Это локальный пример. Он не сохраняет данные в профиль или каталог.

CSS-токены Liquid Glass

/* Generated from shared/design-system/tokens.ts by pnpm design:tokens. */
:where([data-mk-design]) {
  --mk-color-ink: #292a30;
  --mk-color-muted: #647386;
  --mk-color-muted-account: #596a80;
  --mk-color-subtle: #8a99ad;
  --mk-color-brand: #f34046;
  --mk-color-action: #c92430;
  --mk-color-action-hover: #b9212d;
  --mk-color-white: #ffffff;
  --mk-color-canvas: #f8fafc;
  --mk-color-glass-border: #ffffffed;
  --mk-color-line: #d5e1ef88;
  --mk-color-success: #28704c;
  --mk-color-success-bg: #eff8f3;
  --mk-color-warning: #805d20;
  --mk-color-warning-bg: #fff7e9;
  --mk-color-info: #315e96;
  --mk-color-info-bg: #eef5fd;
  --mk-color-danger: #b9212d;
  --mk-color-danger-bg: #fff0f1;
  --mk-color-neutral: #596a80;
  --mk-color-neutral-bg: #eef2f7;
  --mk-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mk-font-family-account: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mk-font-caption: 11px;
  --mk-font-label: 12px;
  --mk-font-small: 13px;
  --mk-font-body: 14px;
  --mk-font-input: 16px;
  --mk-font-heading: 24px;
  --mk-font-section: 29px;
  --mk-font-display: 42px;
  --mk-font-regular: 400;
  --mk-font-medium: 500;
  --mk-font-semibold: 600;
  --mk-font-line-body: 1.5;
  --mk-font-line-account: 1.45;
  --mk-font-line-heading: 1.14;
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 12px;
  --mk-space-4: 16px;
  --mk-space-5: 20px;
  --mk-space-6: 24px;
  --mk-space-7: 28px;
  --mk-space-8: 32px;
  --mk-space-10: 40px;
  --mk-space-12: 48px;
  --mk-radius-small: 12px;
  --mk-radius-medium: 18px;
  --mk-radius-control: 26px;
  --mk-radius-card: 28px;
  --mk-radius-panel: 30px;
  --mk-radius-account: 26px;
  --mk-radius-pill: 9999px;
  --mk-layout-max: 1480px;
  --mk-layout-grid-gap: 14px;
  --mk-layout-touch-target: 44px;
  --mk-layout-control-height: 46px;
  --mk-layout-compact-height: 39px;
  --mk-layout-dialog-max: 620px;
  --mk-effect-blur: 26px;
  --mk-effect-blur-control: 18px;
  --mk-effect-blur-section: 28px;
  --mk-effect-opacity-card: 0.47;
  --mk-effect-opacity-account: 0.55;
  --mk-effect-sheen: 0.72;
  --mk-motion-fast: 180ms;
  --mk-motion-normal: 220ms;
  --mk-motion-card: 320ms;
  --mk-motion-hero: 760ms;
  --mk-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mk-layer-header: 8;
  --mk-layer-popover: 12;
  --mk-layer-overlay: 20;
  --mk-surface-page: radial-gradient(ellipse at 0% 1%, #e8f2ffbf, transparent 18%), radial-gradient(ellipse at 100% 0%, #fff0e5a3, transparent 15%), #f8fafc;
  --mk-surface-page-account: radial-gradient(ellipse 64% 48% at 3% 35%,#ddeaffd9,transparent 82%),radial-gradient(ellipse 46% 47% at 95% 56%,#e7edfbc7,transparent 80%),radial-gradient(ellipse 58% 40% at 77% 100%,#ffe7dbb0,transparent 82%),radial-gradient(ellipse 45% 29% at 70% 0%,#fff0e9b3,transparent 88%),linear-gradient(120deg,#f8fbff,#fff 46%,#f9fbff);
  --mk-surface-card: linear-gradient(140deg, rgb(255 255 255 / calc(var(--mk-effect-opacity-card) + 0.18)), rgb(255 255 255 / var(--mk-effect-opacity-card)) 48%, rgb(236 245 253 / calc(var(--mk-effect-opacity-card) - 0.1)));
  --mk-surface-section: radial-gradient(ellipse at 22% 0%, #ffffffde, transparent 62%), radial-gradient(ellipse at 4% 100%, #ffefe67a, transparent 42%), radial-gradient(ellipse at 100% 58%, #dfefff86, transparent 55%), linear-gradient(140deg, #ffffffb8, #ffffff8f 48%, #f5faff8c);
  --mk-surface-account: radial-gradient(ellipse at 9% 0%,rgba(255,255,255,calc(.22 + var(--mk-effect-sheen)*.46)),transparent 64%),linear-gradient(137deg,rgba(255,255,255,calc(var(--mk-effect-opacity-account) + .14)),rgba(255,255,255,var(--mk-effect-opacity-account)) 43%,rgba(255,255,255,calc(var(--mk-effect-opacity-account) - .16)));
  --mk-surface-control: linear-gradient(140deg, #fffffff0, #ffffff55);
  --mk-surface-fallback: #f8fbff;
  --mk-surface-backdrop: #253b5266;
  --mk-shadow-card: inset 0 2px 2px #fff, inset 1px 0 1px #ffffffc9, inset 0 -2px 3px #6e8ba132, 0 12px 24px #5f7e971c, 0 2px 6px #4e6b8610;
  --mk-shadow-section: inset 0 2px 2px #fff, inset 1px 0 2px #ffffffb3, inset 0 -2px 3px #708ca12a, 0 12px 28px #58758f16, 0 3px 7px #4e6c8610;
  --mk-shadow-account: inset 0 2px 2px rgba(255,255,255,calc(.48 + var(--mk-effect-sheen)*.48)),inset 1px 0 1px #ffffffab,inset -1px 0 1px #ffffff80,inset 0 -1px 2px #95aec53d,0 12px 28px #4e71951a,0 2px 5px #4a6b8f09;
  --mk-shadow-control: inset 0 1px 2px #fff, inset 0 -1px 2px #8399b028, 0 6px 16px #69849d12;
  --mk-shadow-control-account: inset 0 1.5px 1.5px #ffffffed,inset 0 -1px 2px #829cb82b,0 5px 12px #4e719519;
}