№ 01 · Тепла клініка
Не «корпорейт», не «студент».
Палітра кремів і вишні замість синіх. Серйозно, без зайвої формальності. Тон голосу: експертний, але теплий — як лист від колеги.
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
від професії до естетики
Філософія
Сім принципів, на яких
— робимо так, щоб лікарю стояло легко обирати
Сім принципів, на яких
побудована система.
№ 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.
✦FOUNDATIONS✦
Основи
Токени — єдина правда. Усі компоненти використовують CSS-змінні. Ніяких magic numbers у компонентах.
F-01
Кольори
Berry, olive, cream — три шкали по 10 кроків. OKLCH-стиль. Семантичні + доменні.
F-02
Типографіка
Playfair · Montserrat · Caveat · JetBrains Mono. 9 розмірних кроків, fluid.
Aa Бб 0123
F-03
Spacing
4pt grid. 12 кроків від 4 до 96. Container 1240, narrow 880.
F-04
Radius
7 кроків — 8/14/18/22/28/36/pill. Cards радіус 22, btn — pill.
F-05
Shadows
5 рівнів glow — від xs до xl. М'які, теплі, не сині.
F-06
Motion
Easings, durations, stagger. Reduced-motion respect.
F-07
Icons
Lucide stroke-1.5, SVG sprite. 32 starter glyphs.
F-08
Доступність
WCAG 2.2 AA чекліст, focus, контраст, ARIA правила.
✤COMPONENTS✤
Компоненти
Atoms → Molecules → Domain. Кожен компонент має приклади, всі states, код.
Atoms
Molecules
C-05
Cards
C-06
Tabs
C-07
Dialogs
C-08
Toasts
C-09
Progress
C-10
Navigation
C-11
Empty / Loading
C-12
Tables
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.