ЦЗРД

UI Kit ЦЗРД

Дизайн-токени та production-компоненти для публічного сайту медичного центру.

SyneШрифтPastelПалітраSoftРухNativeNextJS
CZRD

Кольори

Фон

#FAFAF9

--roota-bg

Текст

#1F2937

--roota-text

Жовтий

#FEF08A

--roota-yellow

Кораловий

#FECACA

--roota-coral

Фіолетовий

#E9D5FF

--roota-purple

Зелений

#BBF7D0

--roota-green

Блакитний

#BFDBFE

--roota-blue

Бордер

#E5E7EB

--roota-border

Типографіка

Hero-заголовок

text-5xl md:text-7xl font-extrabold leading-[0.95]

Ми тут для тебе

Секція

text-4xl md:text-5xl font-extrabold

Наші послуги

Назва картки

text-2xl md:text-3xl font-bold leading-tight

Фізична терапія

Основний текст

text-lg leading-relaxed font-sans

Читабельний допоміжний текст із теплим і спокійним ритмом.

Радіуси

Corner radii

xl
12px · inputs
2xl
16px · tabs, chips
3xl
24px · cards
hero
40px · media frames
pill
9999px · buttons

Тіні

Elevation / shadows

sm
hairline
md
controls
xl
cards
2xl
modals

Рух

Motion tokens

ease-out
cubic-bezier(.16, 1, .3, 1)
dur-fast
150ms
dur-base
280ms
hover
lift + soft shadow
active
scale .97

Елементи

Кнопки

Таби

Активний таб: біла поверхня, компактний бордер і легка тінь.

Поля вводу

Демо реквізитів

IBAN
UA54 3003 3500 0000 0260 0424 36077

Кнопки

Кнопки

Icon + text

Форми

Стани полів

Radio / checkbox

Таби

Таби

Активний таб: біла поверхня, компактний бордер і легка тінь.

Картки

Фізична терапія

Відновлення рухових функцій та розвиток моторики через гру та вправи.

Ерготерапія

Навчання навичкам самообслуговування та адаптація до повсякденного життя.

Психологічна підтримка

Емоційна рівновага для дитини та консультації для батьків.

Кроки

1. Електронне направлення

Зверніться до сімейного лікаря або педіатра та отримайте направлення на реабілітацію.

2. Первинний огляд

Зателефонуйте нам для запису. Наша команда проведе огляд та складе план дій.

3. Початок реабілітації

Ваша дитина отримує курс послуг за програмою НСЗУ.

Модальні вікна

Модальні патерни

Запис на консультацію

Форма підготовлена для майбутньої інтеграції. Поки заявка не відправляється.

Демо реквізитів

IBAN
UA54 3003 3500 0000 0260 0424 36077
Призначення платежу: Благодійна допомога

Партнери

Логотипи партнерів

UNICEF
Партнерство кожній дитині
SendPulse

Бейджі

Семантичні бейджі

Помилка - щось пішло не так
Успіх - дію виконано
Увага - потрібна перевірка

Логотипи

CZRD
CZRD
CZRD
small
CZRD
medium
CZRD
large
CZRD
xl

Маскот

Ruta visual reference

Ruta

Теплий дитячий провідник для емоційних моментів. HTML UI Kit описує м'який 3D-стиль, коралові та лавандові акценти, допоміжні стани й ігровий прогрес.

НастрійТеплийАкцентКораловийСтильSoft 3D

Дудли

Наївна ілюстративна мова

Лінійні SVG-ілюстрації з круглим stroke, що тонуються через currentColor.

Ефекти

Стікер-ефект

border: 4px solid #fff; shadow-xl;

Інтерактивні стани

Картка з hover

Фіолетовий бордер і м'яке focus-кільце.

Вибраний стан

Сильний темний бордер для обраних елементів.

для тебе