Naar de inhoud

We zijn momenteel niet actief en nemen geen bestellingen aan — we zoeken een partner om mee samen te werken.

Producten zoeken

Categorieën

Je winkelmandje

Дизайн-система

Вкладки с пометкой «выбор» настраивают вид — щелчок сразу меняет весь сайт. Остальные показывают, как он устроен.

Палитра

Набор красок на куске магазина — или своя палитра из цвета марки.

Загружаю выбор палитры…

Тема

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

Фоны

Три фона, на которых стоят вещи сайта: фон страницы, белый лист (карточка, корзина, шторка) и тёмная полоса (шапка, подвал). Отдельно их не выбирают — их даёт палитра. Здесь видно, что одни и те же кнопки и ссылки читаются на каждом.

Фон страницы

На нём стоит всё по умолчанию

−20%
Все товары

Лист

Карточка, корзина, шторка

−20%
Все товары

Тёмная полоса

Шапка и подвал

−20%
Все товары

Роли

То, чем красят вещи: имя по работе, а не по цвету. Перекраска марки меняет краски, имена остаются.

Поверхности

  • Страница--page
  • Лист, карточка--plate
  • Кадр внутри листа--plate-2
  • Орган на листе--plate-3
  • Поле ввода--field
  • Тихая плашка--quiet
  • Стекло на снимке: просвечивает--plate-glass
  • Оно под рукой: непрозрачно--plate-glass-hand
  • Палуба: шапка, подвал--page-deck
  • Меню--menu-bg

Краски текста

  • Текст--ink
  • Подпись, вторичный текст--ink-soft
  • Текст на листе--on-plate
  • Подпись на листе--on-plate-2

Марка и выбор

  • Главная кнопка--pop
  • Она под рукой--pop-hover
  • Она нажата--pop-press
  • Текст краской марки--pop-ink
  • Плашка марки--pop-tint
  • Выбранное--select
  • Кольцо фокуса--ring

Черты

  • Черта, разделитель--rule
  • Линия--line
  • Кромка органа--border

Сигналы

  • Скидка--sale
  • Плашка скидки--sale-tint
  • Ошибка--bad
  • Плашка ошибки--bad-tint
  • Готово, в наличии--ok
  • Плашка успеха--ok-tint
  • Внимание--warn
  • Плашка внимания--warn-tint
  • Сведение--info
  • Плашка сведения--info-tint

Семьи

Из трёх красок строитель палитры считает семь семей по ступеням; роли берут отсюда. Ступень 9 — чистая краска, 11 — текст этой краской, 2 — её плашка.

Нейтраль

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

Марка

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

Ошибка

  • 2
  • 9
  • 11

Скидка

  • 2
  • 9
  • 11

Внимание

  • 2
  • 9
  • 11

Успех

  • 2
  • 9
  • 11

Сведение

  • 2
  • 9
  • 11

Источники

Что на странице и в наборе взято у кого и на каких условиях: знаки, шрифты и исследования, на которых стоят пороги и правила. Новый чужой знак записывается сюда и в файл лицензии рядом со знаком.

Знаки

  • Lucide — основа листа знаков: линейные знаки сайта и их залитые силуэты. ISC.
  • Tabler Icons — знак «магазин · здание» (building-store). MIT.
  • Heroicons — знак «магазин · витрина» (building-storefront). MIT.
  • Simple Icons — логотипы мессенджеров, соцсетей и платёжных систем. CC0.
  • Лист значков cbdin.bg — семь знаков: главная, кабинет, избранное, тележка, корзинка, пакет и магазин с навесом — линией. Рисунки заказчика.

Готовые компоненты — образцы

  • HyperUI — блоки на Tailwind: кнопки, группы кнопок, аккордеоны, корзины, значки, поля; берём устройство, вид рисуем свой. MIT.
  • Uiverse — кнопки, переключатели, карточки и поля от сообщества; лицензия у каждого образца — проверять при взятии. MIT, проверять на образце.
  • shadcn/ui — устройство и состояния доступных компонентов: окно, меню, переключатель, аккордеон. MIT.
  • Radix Themes и Radix Primitives — как устроены окно, меню, вкладки и переключатель без вида. MIT.
  • daisyUI — готовые названия частей и состояния: шаги, полоса прогресса, значок, скелетон. MIT.
  • Flowbite — блоки торгового сайта и формы на Tailwind. MIT.
  • Preline UI — формы, шаги, аккордеоны и их доступность. MIT.
  • Headless UI — поведение выпадающих списков, окон и вкладок для клавиатуры и чтеца. MIT.
  • Meraki UI — свободные блоки на Tailwind: карточки, кнопки, формы; лицензию проверять при взятии. проверять на образце.

Шрифты

  • Google Fonts — шрифты вида: Manrope и другие семейства из панели Look. SIL Open Font License.

Исследования и нормы

  • Material Design 3 — States — наведение и нажатие вуалью поверх заливки: доли состояния, фокус кольцом. Google.
  • Apple Human Interface Guidelines — Pointer — виды ответа указателю: подсветка, подъём, наведение. Apple.
  • WCAG 2.2 — контраст 4.5 : 1 и 3 : 1, цель нажатия, масштаб текста. W3C.
  • APCA — второй замер контраста краски на краске. Myndex.
  • OKLab — цветовое пространство ступеней палитры. Björn Ottosson.
  • Utopia — шкала размеров, плавно меняющихся с шириной. Clearleft.
  • Baymard Institute — исследования покупательского пути: карточка, корзина, оформление. Baymard.
  • Nielsen Norman Group — правила юзабилити: иерархия, формы, навигация. NN/g.
  • Material Design 3 — состояния, цели, выбор по голосу кнопки. Google.
  • Apple Human Interface Guidelines — размер цели под пальцем, отклик на нажатие. Apple.
  • Radix Colors — двенадцать ступеней на краску и их роли; ступени органа: покой, наведение, нажатие. MIT.
  • Material Design 3 — Elevation — тени по работе: уровни, тень только у висящего над страницей. Google.
  • Shopify Polaris — устройство торгового интерфейса. Shopify.
  • Carbon · Atlassian · Primer · Spectrum · Geist — как крупные системы называют и делят роли. IBM · Atlassian · GitHub · Adobe · Vercel.
  • Open Props · Tailwind CSS — сверка токенов и шкал. MIT.
  • MDN Web Docs — как работают dialog, popover, контейнерные запросы. Mozilla.