ЦЗРД

CZRD UI Kit

Design tokens and production components for the public medical center site.

SyneDisplayPastelPaletteSoftMotionNativeNextJS
CZRD

Colors

Background

#FAFAF9

--roota-bg

Text

#1F2937

--roota-text

Yellow

#FEF08A

--roota-yellow

Coral

#FECACA

--roota-coral

Purple

#E9D5FF

--roota-purple

Green

#BBF7D0

--roota-green

Blue

#BFDBFE

--roota-blue

Border

#E5E7EB

--roota-border

Type

Hero

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

We are here

Section

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

Our services

Card title

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

Physical therapy

Body

text-lg leading-relaxed font-sans

Readable support text with warm, useful rhythm.

Radii

Corner radii

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

Shadows

Elevation / shadows

sm
hairline
md
controls
xl
cards
2xl
modals

Motion

Motion tokens

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

Controls

Buttons

Tabs

Active tab: white surface, compact border, gentle shadow.

Inputs

Donate Demo

IBAN
UA54 3003 3500 0000 0260 0424 36077

Buttons

Buttons

Icon + text

Forms

Field states

Radio / checkbox

Tabs

Tabs

Active tab: white surface, compact border, gentle shadow.

Cards

Physical Therapy

Restoring motor functions and developing movement skills through play and exercise.

Occupational Therapy

Building self-care skills and adapting to everyday life.

Psychological Support

Emotional balance for children and consultations for parents.

Steps

1. Electronic referral

Contact your family doctor or pediatrician and receive a referral for rehabilitation.

2. Initial examination

Call us to make an appointment. Our team will examine the child and prepare a plan.

3. Start rehabilitation

Your child receives services under the NHSU program.

Modals

Modal patterns

Appointment request

The form is prepared for future integration. It does not submit requests yet.

Donate Demo

IBAN
UA54 3003 3500 0000 0260 0424 36077
Payment purpose: charitable assistance

Partners

Partner logos

UNICEF
Partnership for Every Child
SendPulse

Badges

Semantic badges

Error - something went wrong
Success - action completed
Warning - needs review

Logos

CZRD
CZRD
CZRD
small
CZRD
medium
CZRD
large
CZRD
xl

Mascot

Ruta visual reference

Ruta

Warm child-friendly guide for emotional moments. The source UI Kit describes soft 3D, coral and lavender accents, and gentle usage around help, empty states, and playful progress.

MoodWarmAccentCoralStyleSoft 3D

Doodles

Naive illustration language

Inline SVG illustrations with round strokes and currentColor tinting.

Effects

Sticker Effect

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

Interactive States

Hoverable card

Purple border and soft focus ring.

Selected state

Strong dark border for chosen items.

for you