Design System

UI Kit

Core Boilerplate interface components — typography, forms, feedback and navigation, in one visual language.

1. Typography

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Lead text — a large introductory paragraph for subtitles and section intros.

Regular paragraph text. Used for the main content — descriptions, instructions and text blocks of any length.

Small text — for footnotes, captions and secondary information.

2. Tables

ProfilePlatformStatusDate
alex_bInstagramActiveJul 9, 2026
dev.mikhailTelegramPendingJul 8, 2026
travel.ruVKActiveJul 7, 2026
art_dailyInstagramErrorJul 5, 2026

3. Forms

4. Alert

Story successfully saved to the archive.
A new version of the app is available to download.
The profile changed its privacy settings — viewing may be limited.
Failed to load history — please try again.

5. Badge

Main
New
Pro
Active
Pending
Error
Light
Dark

6. Buttons

7. Tooltips

9. Pagination

11. Colors

Primary
oklch(20% 0.01 280)
Secondary
oklch(55% 0.19 295)
Success
oklch(52% 0.16 145)
Danger
oklch(55% 0.17 25)
Warning
oklch(70% 0.15 70)
Info
oklch(58% 0.14 235)
Light
oklch(97% 0.005 90)
Dark
oklch(20% 0.01 280)
Body
oklch(35% 0.01 280)

12. Gradients

Brand mark
linear-gradient(135deg, oklch(68% 0.19 295), oklch(78% 0.14 180))
Hero title
linear-gradient(90deg, oklch(58% 0.19 295), oklch(66% 0.14 175))
CTA block (dark)
linear-gradient(120deg, oklch(22% 0.03 295), oklch(18% 0.02 260))
Story ring
conic-gradient(oklch(70% 0.19 295), oklch(75% 0.15 175), oklch(70% 0.19 295))
Onboarding — step 1
linear-gradient(135deg, oklch(70% 0.19 295), oklch(78% 0.14 180))
Onboarding — step 2
linear-gradient(135deg, oklch(72% 0.15 175), oklch(80% 0.1 140))
Onboarding — step 3
linear-gradient(135deg, oklch(66% 0.17 40), oklch(76% 0.13 70))
Story viewer background
linear-gradient(160deg, oklch(60% 0.05 295), oklch(30% 0.04 295))
Radial glow
radial-gradient(circle, oklch(90% 0.05 295) 0%, transparent 70%)