Design System

Финансовый Конгресс Банка России · IF Congress 2026

Палитра цветов

colors.css

Primary base/900

50#F0F5FF
100#CBDCFA
200#B2C2DF
300#99A9C5
400#8190AC
500#6A7993
600#53627B
700#3E4C64
800#29374E
900#1A2332

Accent base/600

50#FFF2EF
100#FFD0C8
200#EDB6AE
300#E6958E
400#DD7470
500#D15054
600#C41E3A
700#80192A
800#431118
900#0F0405

Tertiary base/500

50#FFF2EC
100#F7D7C8
200#E7BFAD
300#D7A792
400#C79077
500#B87860
600#855945
700#573B2F
800#2F1E17
900#0C0604

Malachite base/600

50#E3FCF1
100#CEE6DC
200#B4D3C5
300#97C1AF
400#7AAF99
500#5D9D83
600#3D8B6E
700#2C5A48
800#1A2E25
900#030906

Baltic base/500

50#ECF7FF
100#C6DAE9
200#A9BCCB
300#84A1B7
400#6086A2
500#3D6B8E
600#314F66
700#233542
800#141D24
900#03080D

Neutral base/50

50#F5F5F0
100#D8DCD9
200#BCC3C4
300#A5A9B0
400#8B9199
500#747A82
600#5C6370
700#404143
800#212224
900#070708

Error

400#E8594A
500#E33121
600#C42A1B
700#A32217

Типографика

Montserrat + PT Mono

Montserrat (sans)

Heading XL40 / 500
Heading L32 / 500
Heading M24 / 400
Body Medium — 16px, line-height 24px16 / 400 / -0.3
Body Small — 14px, line-height 22px14 / 400 / -0.2
Body Small Strong — 14px, semibold14 / 600
Body XSmall — 12px, line-height 18px12 / 400 / -0.2
Label XSmall — 12px, medium12 / 500

PT Mono

Mono Regular 1616 / 400
Mono Regular 1414 / 400 / -1
Mono Regular 1212 / 400

Кнопки

.btn .btn-*

Big (default)

Primary

.btn .btn-primary

Secondary

.btn .btn-secondary

CTA

.btn .btn-cta

Danger

.btn .btn-danger

Success

.btn .btn-success

Text / Link

Inline link
.btn-text .btn-link .link

Small

Primary small

.btn .btn-small .btn-primary

Secondary small

.btn .btn-small .btn-secondary

Success small

.btn .btn-small .btn-success

Text small

.btn-text-small

Бейджи

UBadge

Success

ОдобреноОплачено
<UBadge color="success" variant="soft">

Ожидание действия

ОжидаетНе заполненоНа проверке
<UBadge color="secondary" variant="soft">

Negative

Отклонено
<UBadge color="error" variant="soft">

Поля ввода

.form-input

Default

Filled

Error

Ошибка ввода

.form-input .form-input-error

Disabled

OTP

.form-input-otp

Default

Active

Запросить повторно через 2:00

Error

Неверный код

Чек-боксы и радио

.form-checkbox .form-radio

Checkbox

.form-checkbox

Radio

.form-radio

Выпадающее меню

.form-select

Default

.form-select

Текстовые области

.form-textarea

Default

.form-textarea

Шаги

.steps .step

Vertical

  1. Телефон
  2. Тип регистрации
  3. Личные данные
  4. Документы
  5. Готово
.steps .step .step--done .step--active

Horizontal

  1. 1 Телефон
  2. 2 Тип
  3. 3 Данные
  4. 4 Документы
  5. 5 Готово
.steps .steps--horizontal

Toggle кнопки

.btn-toggle
.btn-toggle

Загрузка файлов

FileUpload.vue

Empty

Нажмите для загрузки файла

Uploading

passport_scan_front.jpg

Uploaded

passport_scan_front.jpg

Error

Загрузите файл повторно

Disabled

Загрузка недоступна

Загрузка фото

PhotoUpload.vue

Default

Uploading

Success

Error