Связаться
Telegram MAX WhatsApp VK +7 952 352-84-95
Цены Кейсы Вопросы Оставить заявку
Личные кабинеты2025–2026

USN Expert – платформа онлайн-школы переговоров

Платформа с курсами, уроками и тестами: ученики учатся в личном кабинете, администраторы ведут курсы, тесты и оплаты.

Главная страница сайта usnexpert.com на экране MacBook
Главная страница. Сайт работает: usnexpert.com

01Задача

Школе нужна была своя платформа вместо набора сервисов: курсы и тесты, доступы по ролям, оплата и видео в одном месте.

02Что сделано

  • Курсы с многостраничными уроками и тестами, результат теста можно отправить на почту
  • Регистрация и вход через Google
  • Роли и доступы к курсам, избранное
  • Оплата курсов, в том числе из-за рубежа
  • Видео в HLS со своим плеером
  • Админка: курсы, тесты, платежи с данными покупателя
  • Русская и английская версии интерфейса

03Стек

SvelteKitTailwind CSSNestJSPrismaPostgreSQLRedisDocker

04Экраны на компьютере и телефоне

Снято с работающего сайта usnexpert.com в октябре 2026 года.

Сайт usnexpert.com на компьютере, первый экран Сайт usnexpert.com на компьютере, ниже по странице
Компьютер, 1440 px
Сайт usnexpert.com на телефоне, первый экран Сайт usnexpert.com на телефоне, второй экран
Телефон, 390 px

05Дизайн-система сайта

Цвета, шрифты, размеры, скругления и тени взяты из стилей usnexpert.com: имена токенов – как в коде.

Цвета

  • Фон--usn-color-bg#F4F7FCRGB 244 247 252
  • Текст--usn-color-text#111827RGB 17 24 39
  • Акцент--usn-color-brand#5864E8RGB 88 100 232
  • Вторичный--usn-color-brand-subtle#E2E6FFRGB 226 230 255

Индиго --usn-indigo-*

  1. indigo-50#F0F2FF
  2. indigo-100#E2E6FF
  3. indigo-200#C7CCFF
  4. indigo-300#AAB2FB
  5. indigo-400#8792F5
  6. indigo-500#6976ED
  7. indigo-600#5864E8
  8. indigo-700#4D58D8
  9. indigo-800#3F48B7
  10. indigo-900#343B92
  11. indigo-950#202556

Серые --usn-gray-*

  1. gray-25#FCFCFD
  2. gray-50#F8FAFC
  3. gray-100#F1F5F9
  4. gray-200#E2E8F0
  5. gray-300#CBD5E1
  6. gray-400#94A3B8
  7. gray-500#64748B
  8. gray-600#475569
  9. gray-700#334155
  10. gray-800#1E293B
  11. gray-900#0F172A
  12. gray-950#020617

Акцент и состояния

  1. blue-500#2A7CE6
  2. blue-600#1565D8
  3. green-600#16A34A
  4. amber-600#D97706
  5. red-600#DC2626

Шрифты

Заголовки и интерфейс

Montserrat

Переменный шрифт, начертания от 100 до 900

  • Regular 400
  • Medium 500
  • SemiBold 600
  • Bold 700

АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюяABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 «»!?&@%

Текст

Golos Text

Переменный шрифт, начертания от 400 до 900

  • Regular 400
  • Medium 500
  • SemiBold 600
  • Bold 700

АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюяABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 «»!?&@%

  1. display-lg48 / 56

    Переговоры

  2. display-md36 / 44

    Переговоры

  3. display-sm30 / 38

    Переговоры

  4. xl20 / 30

    Съешь же ещё этих мягких французских булок

  5. lg18 / 28

    Съешь же ещё этих мягких французских булок

  6. md16 / 24

    Съешь же ещё этих мягких французских булок

  7. sm14 / 20

    Съешь же ещё этих мягких французских булок

  8. xs12 / 16

    Съешь же ещё этих мягких французских булок

Скругления и тени

  • --usn-radius-xs0.25rem = 4 px
  • --usn-radius-sm0.375rem = 6 px
  • --usn-radius-md0.5rem = 8 px
  • --usn-radius-lg0.75rem = 12 px
  • --usn-radius-xl1rem = 16 px
  • --usn-radius-2xl1.25rem = 20 px
  • --usn-radius-3xl1.5rem = 24 px
  • --usn-radius-full9999px
  • --usn-shadow-sm0 1px 3px 0 rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.1)
  • --usn-shadow-md0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1)
  • --usn-shadow-lg0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1)
  • --usn-shadow-xl0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1)
Похожий проект

Получите оценку похожего проекта за 2 рабочих дня

Личный кабинет или платформа – MVP от 200 000 ₽ и от 4 недель: этапы, сроки и цена каждого этапа в коммерческом предложении.

Получить прототип и смету
Ещё кейсы

Другие проекты

Все кейсы