Загрузка UI Kit…
Vatoko Builder
Foundation, атомы, редакторы, иконки и служебные письма App Builder. Поиск фильтрует все разделы сразу.
Vatoko · Foundation
Brand, цвет, типографика, отступы, радиусы и тени. Токены в appBuilderUiKitTokens.ts — клик по свотчу копирует имя переменной.
Ключ бренда App Builder. Редактируются в Vatoko palette.
--ab-brand-primary
Брендовый красный: CTA, акценты, active states, email event banner
#DC0000--ab-brand-500
Soft fill, active nav, badges, filter chips (#F2F2F2)
#F2F2F2--ab-text-on-accent
Текст на primary CTA, invite, акцентных кнопках
#ffffff--ab-cta-primary
Complete and Continue, primary CTA button
#DC0000--ab-vatoko-notice
Notice banners: apps, courses, shop create
linear-gradient(345deg, #fff0f0 1.65%, #fafafa 97.49%), #ffffffab-vatoko-notice
Notice surface
Баннеры apps / courses / shop — фон из --ab-vatoko-notice.
Нейтрали, текст, семантика. Клик по свотчу копирует имя токена.
Общие цвета наведения для кнопок, меню и интерактивных карточек
--ab-surface-hover
Фон при наведении
#DC0000--ab-text-on-hover
Текст и иконки при наведении
#ffffff--ab-page-bg
Фон приложения: shell, onboarding, sidebar
#ffffff--ab-surface
Карточки, панели, inputs, белые поверхности
#ffffff--ab-surface-muted
Stat cards, placeholders, email highlight boxes
#fafafa--ab-border
Borders, dividers
#f2f2f2--ab-surface-subtle
Progress tracks, chevron pills
#f0f0f0--ab-course-callout-border
Course lesson callout border
#DC0000--ab-progress-inactive
Inactive vote progress bar
#cccccc--ab-scroll-thumb
Scrollbar thumb (compose, quiz)
#d4d4d4Фон drawer и кнопки палитры
--ab-palette-drawer-bg
Фон боковой панели UI Kit
color-mix(in srgb, color-mix(in srgb, var(--ab-brand-500) 20%, var(--ab-surface)) 88%, transparent)--ab-palette-peek-bg
Фон кнопки-«ушка» палитры
color-mix(in srgb, color-mix(in srgb, var(--ab-brand-500) 25%, var(--ab-surface)) 92%, transparent)--ab-text
Headings, body, toolbar, icons
#1d1d1d--ab-text-secondary
Secondary meta, wallet address
#808080--ab-text-muted
Placeholders, post action icons
#999999--ab-success
Success state, trend up, online indicator
#0a9954--ab-link
Text links (sidebar, external)
#0866ff--ab-danger
Destructive actions, delete event
#eb5757Inter Tight. Размеры как на экранах App Builder.
UI Kit
Page title
H0 · --ab-font-page · 34px
Featured cases
Section title
H1 секции · --ab-font-section · 24px
Shuffle Club
Card title
Карточки · --ab-font-card · 18px
Цвета, иконки и примитивы App Builder.
Body
Основной текст · --ab-font-body · 16px
Secondary meta and supporting copy.
Secondary
--ab-font-ui · 14px
PLACEHOLDER · LABEL
Muted / meta
--ab-font-meta · 12px
Шкала --ab-space-* × --ab-density (палитра → вкладка «Шкала»).
--ab-space-1
calc(4px * var(--ab-density))
--ab-space-2
calc(8px * var(--ab-density))
gap-2, chip gaps
--ab-space-3
calc(12px * var(--ab-density))
--ab-space-4
calc(16px * var(--ab-density))
page stack gap, card padding base
--ab-space-5
calc(20px * var(--ab-density))
--ab-space-6
calc(24px * var(--ab-density))
page body gap
--ab-space-8
calc(32px * var(--ab-density))
крупные секции
--ab-space-10
calc(40px * var(--ab-density))
Кнопки, inputs, textarea — --ab-radius-control (20px).
--ab-radius-sm
--ab-radius-md
filter chips, мелкие controls
--ab-radius-lg
legacy 10px · квадратные icon buttons
--ab-radius-xl
карточки, баннеры
--ab-radius-2xl
--ab-radius-control
кнопки, inputs, textarea, pill tabs (40×20)
--ab-radius-full
аватары, status dots, scroll arrows
Тени через color-mix — без сырых rgba в продуктах.
--ab-elevation-0
плоско
none--ab-elevation-1
иконки-кнопки, лёгкий lift
0 1px 2px color-mix(in srgb, var(--ab-text) 8%, transparent)--ab-elevation-2
всплывающие панели
0 8px 24px color-mix(in srgb, var(--ab-text) 10%, transparent)--ab-elevation-3
галерейный баннер, крупные карточки
0 18px 48px color-mix(in srgb, var(--ab-text) 12%, transparent)--ab-elevation-brand
hover past-event cards
0 16px 48px color-mix(in srgb, var(--ab-brand-primary) 14%, transparent)Vatoko Builder
Foundation, атомы, редакторы, иконки и служебные письма App Builder. Поиск фильтрует все разделы сразу.
Vatoko · Foundation
Brand, цвет, типографика, отступы, радиусы и тени. Токены в appBuilderUiKitTokens.ts — клик по свотчу копирует имя переменной.
Ключ бренда App Builder. Редактируются в Vatoko palette.
--ab-brand-primary
Брендовый красный: CTA, акценты, active states, email event banner
#DC0000--ab-brand-500
Soft fill, active nav, badges, filter chips (#F2F2F2)
#F2F2F2--ab-text-on-accent
Текст на primary CTA, invite, акцентных кнопках
#ffffff--ab-cta-primary
Complete and Continue, primary CTA button
#DC0000--ab-vatoko-notice
Notice banners: apps, courses, shop create
linear-gradient(345deg, #fff0f0 1.65%, #fafafa 97.49%), #ffffffab-vatoko-notice
Notice surface
Баннеры apps / courses / shop — фон из --ab-vatoko-notice.
Нейтрали, текст, семантика. Клик по свотчу копирует имя токена.
Общие цвета наведения для кнопок, меню и интерактивных карточек
--ab-surface-hover
Фон при наведении
#DC0000--ab-text-on-hover
Текст и иконки при наведении
#ffffff--ab-page-bg
Фон приложения: shell, onboarding, sidebar
#ffffff--ab-surface
Карточки, панели, inputs, белые поверхности
#ffffff--ab-surface-muted
Stat cards, placeholders, email highlight boxes
#fafafa--ab-border
Borders, dividers
#f2f2f2--ab-surface-subtle
Progress tracks, chevron pills
#f0f0f0--ab-course-callout-border
Course lesson callout border
#DC0000--ab-progress-inactive
Inactive vote progress bar
#cccccc--ab-scroll-thumb
Scrollbar thumb (compose, quiz)
#d4d4d4Фон drawer и кнопки палитры
--ab-palette-drawer-bg
Фон боковой панели UI Kit
color-mix(in srgb, color-mix(in srgb, var(--ab-brand-500) 20%, var(--ab-surface)) 88%, transparent)--ab-palette-peek-bg
Фон кнопки-«ушка» палитры
color-mix(in srgb, color-mix(in srgb, var(--ab-brand-500) 25%, var(--ab-surface)) 92%, transparent)--ab-text
Headings, body, toolbar, icons
#1d1d1d--ab-text-secondary
Secondary meta, wallet address
#808080--ab-text-muted
Placeholders, post action icons
#999999--ab-success
Success state, trend up, online indicator
#0a9954--ab-link
Text links (sidebar, external)
#0866ff--ab-danger
Destructive actions, delete event
#eb5757Inter Tight. Размеры как на экранах App Builder.
UI Kit
Page title
H0 · --ab-font-page · 34px
Featured cases
Section title
H1 секции · --ab-font-section · 24px
Shuffle Club
Card title
Карточки · --ab-font-card · 18px
Цвета, иконки и примитивы App Builder.
Body
Основной текст · --ab-font-body · 16px
Secondary meta and supporting copy.
Secondary
--ab-font-ui · 14px
PLACEHOLDER · LABEL
Muted / meta
--ab-font-meta · 12px
Шкала --ab-space-* × --ab-density (палитра → вкладка «Шкала»).
--ab-space-1
calc(4px * var(--ab-density))
--ab-space-2
calc(8px * var(--ab-density))
gap-2, chip gaps
--ab-space-3
calc(12px * var(--ab-density))
--ab-space-4
calc(16px * var(--ab-density))
page stack gap, card padding base
--ab-space-5
calc(20px * var(--ab-density))
--ab-space-6
calc(24px * var(--ab-density))
page body gap
--ab-space-8
calc(32px * var(--ab-density))
крупные секции
--ab-space-10
calc(40px * var(--ab-density))
Кнопки, inputs, textarea — --ab-radius-control (20px).
--ab-radius-sm
--ab-radius-md
filter chips, мелкие controls
--ab-radius-lg
legacy 10px · квадратные icon buttons
--ab-radius-xl
карточки, баннеры
--ab-radius-2xl
--ab-radius-control
кнопки, inputs, textarea, pill tabs (40×20)
--ab-radius-full
аватары, status dots, scroll arrows
Тени через color-mix — без сырых rgba в продуктах.
--ab-elevation-0
плоско
none--ab-elevation-1
иконки-кнопки, лёгкий lift
0 1px 2px color-mix(in srgb, var(--ab-text) 8%, transparent)--ab-elevation-2
всплывающие панели
0 8px 24px color-mix(in srgb, var(--ab-text) 10%, transparent)--ab-elevation-3
галерейный баннер, крупные карточки
0 18px 48px color-mix(in srgb, var(--ab-text) 12%, transparent)--ab-elevation-brand
hover past-event cards
0 16px 48px color-mix(in srgb, var(--ab-brand-primary) 14%, transparent)