Перейти к содержимому
SJI.

Кейс 01 Vetra

Обсудить проект

Telegram Mini App · 2026

Крипто-карта, которая живёт в Telegram

Виртуальная карта, которой платят в USDT: баланс, кэшбэк, история, стейкинг и профиль. Пять экранов на одних токенах, две темы и ни одной внешней зависимости.

Клиент
Vetra
Роль
Дизайн и вёрстка
Стек
HTML · CSS · JS
Год
2026
Смотреть макет

Пять экранов

Весь продукт —
в пяти экранах

Один акцент, крупные радиусы и воздух. Внутри макета ничего не нажимается: это кейс, а не рабочее приложение, — экраны листаются сами.

  1. 01 Баланс Крупная цифра, курс и последние операции. Скрытие сумм — состояние, которое есть в рабочей версии.
  2. 02 Карта Виртуальная карта с фольгой, лимит дня и заморозка. Реквизиты и CVV раскрываются по нажатию.
  3. 03 История Фильтры по категориям, группировка по дням, курс и комиссия в каждой операции.
  4. 04 Earn Стейкинг USDT: сроки от гибкого до 90 дней, калькулятор дохода и прогресс позиции.
  5. 05 Профиль Идентификация, скрытие баланса, биометрия. Настройки без лишних уровней.

Подход

Ни одной детали
без причины

Каждое решение в макете объясняется одной фразой. Если объяснение длиннее — решение лишнее и уходит.

  1. 01

    Один акцент

    Монохром и чёрный акцент. Цвет появляется только там, где нужно действие, — поэтому интерфейс читается с первого взгляда.

  2. 02

    Две темы

    Светлая и тёмная собраны на одних токенах: переключение меняет переменные, а не вторую таблицу стилей.

  3. 03

    Типографика

    Onest в интерфейсе, IBM Plex Mono в цифрах и адресах: моноширинный читается как данные, а не как текст.

  4. 04

    Мелкая моторика

    Тач-цели от 44 px, видимый фокус, состояния нажатий и блокировок. Карта должна ощущаться живой.

Система

Токены
вместо магии

Цвет, радиусы и отступы заданы переменными в одном месте. Поэтому макет масштабируется без правок вручную.

Типографика

Aa

  • Onest400 · 500 · 600
  • IBM Plex Mono400 · 500

Палитра

  • Canvas#ECECEC
  • Surface#F4F4F4
  • Ink#0C0C0C
  • Line#D5D5D5

Компоненты

Пополнить Все Покупки 90 дней

Сетка

Шаг
4 px
Радиусы
12 · 16 · 20 · 28
Поля
20 · 22
Тач-цель
44 px

Кейс в цифрах

Экранов
05
Темы
02
Компонентов
38+
Зависимостей
0