MedConnekt Design System · v0.1
v0.1 · Травень 2026 · UA · WCAG 2.2 AA

Дизайн-система MedConnekt
для лікарів, які вчаться все життя.

Editorial-clinical мова: тепла пастельна палітра, serif-заголовки, тонкі лінії-ledger, ручні нотатки на полях. Усе працює без зборки — vanilla HTML/CSS/JS.

СТАТУС
Токени
86
кольори · spacing · type · shadow
Компоненти
23
atoms · molecules · domain
Шаблони
15
cabinet + public + checkout
Принципи
07
від професії до естетики
Філософія

Сім принципів, на яких
побудована система.

— робимо так, щоб лікарю стояло легко обирати
№ 01 · Тепла клініка

Не «корпорейт», не «студент».

Палітра кремів і вишні замість синіх. Серйозно, без зайвої формальності. Тон голосу: експертний, але теплий — як лист від колеги.

№ 02 · Editorial-друк

Друкарська типографіка.

Playfair Display для заголовків, Montserrat для тіла, Caveat — рукописний акцент, дозовано. Жодних Inter, жодних generic UI fonts.

№ 03 · Тонкі лінії

1px ink — не blur.

Глибина через лінії, рулери, рамки — не через важкі тіні й glassmorphism. М'які shadow лише як акцент.

№ 04 · Тип-як-герой

Числа великі, цифри табулярні.

Стат-картки = великі serif-числа, бали = монокроки. Cert-IDs у JetBrains Mono. Числа повинні читатись, як на рентгені.

№ 05 · Margin notes

Місце для людини на полях.

Caveat-нотатки, маленькі «штампи» дат, ornament-маркери — як на сторінці медичного журналу. Рідко, але запам'ятовується.

№ 06 · Без поспіху

Motion плавний, не пружинний.

Easings cubic-bezier(0.16, 1, 0.3, 1). Stagger reveal на load. prefers-reduced-motion вимикає все.

№ 07 · Доступно

WCAG 2.2 AA з першого дня.

Контраст ≥ 4.5 для тексту, focus rings скрізь, touch target ≥ 44px, ARIA на інтерактиві, темна тема day-1. Не bolt-on.

COMPONENTS

Компоненти

Atoms → Molecules → Domain. Кожен компонент має приклади, всі states, код.

Atoms

Molecules

Domain

TEMPLATES

Шаблони

Усі ключові екрани кабінету та публічного сайту, готові до інспекції.

T-01 · Кабінет

Dashboard

Головна кабінету: stats + найближча подія + дії, що чекають.

T-02 · Кабінет

Мої події

Список: live, заплановані, активні записи, завершені, архів.

T-03 · Кабінет

Live player

Трансляція з програмою та чатом.

T-04 · Кабінет

Тестування

Однопитанний тест з таймером, прогресом, навігацією.

T-05 · Кабінет

Результат тесту

Score, статус видачі серта, розбір відповідей.

T-06 · Кабінет

Сертифікати

Список з статусами: видано / в очікуванні.

T-07 · Кабінет

Сертифікат — preview

Превʼю PDF, кнопки завантаження, метадані.

T-08 · Публічне

Verify

Публічна сторінка верифікації сертифіката.

T-09 · Кабінет

Записи

Каталог записів з TTL, modal експірації.

T-10 · Кабінет

Особисті дані

Профіль із автозбереженням для серта.

T-11 · Кабінет

Налаштування

Безпека, сповіщення, мова, тема, видалення.

T-12 · Публічне

Подія — деталі

Marketing page з купити CTA.

T-13 · Публічне

Checkout

Оформлення з inline-реєстрацією.

T-14 · Auth

Вхід / реєстрація

Login, register, forgot password.

T-15 · Усе

Empty / Error

Універсальні стани: empty, error, maintenance, denied.