VASTELOR
Открыть Shell

Visual Contract · Stage 1A.8

Спокойная финансовая система без визуального шума

Это изолированный живой контракт VASTELOR: темы, иерархия, текст, действия, поля, карточки, навигация и поверхности окон. Он не подключён к пользовательским данным и не меняет рабочее приложение.

Review 0.9 Без зависимостей Light / Dark

01 · Foundation

Четыре уровня поверхности вместо одинаковых рамок

Фон задаёт пространство, основная карточка держит данные, интерактивная поверхность сообщает действие, floating-поверхность принадлежит окнам. Акцент используется для выбора и главного действия, а не для каждой рамки.

Canvas
Surface 1
Surface 2
Surface 3
Accent soft

Base

Обычный контент

Без лишней тени и рамки.

Primary card

Главная информация

Тихая рамка и лёгкая глубина.

Interactive

Строка или выбор

Наведите курсор: поверхность мягко поднимется без изменения раскладки.

Floating

Окно или popover

Самый высокий уровень.

Spacing scale

4 8 12 16 24 32 48

02 · Typography

Один смысл — один уровень текста

Деньги и проценты используют табличные цифры. Kicker остаётся только там, где добавляет контекст, а не повторяет заголовок.

Money / 64

12 480,00

Page / 46

История

Section / 30

Последние операции

Card / 20

Путешествие

Body / 16

Все важные действия видны сразу, дополнительные данные раскрываются по необходимости.

Eyebrow / 12

Текущая сумма

03 · Actions

Строгая иерархия действий

На одной поверхности один primary. Наведение мягко приподнимает элемент, нажатие слегка сжимает его, а возврат использует единый ритм без резкого скачка.

Button hierarchy

System states

Icon actions

Segmented control

04 · Input

Поля без повторяющихся инструкций

Label объясняет смысл, placeholder показывает формат, сообщение появляется только когда действительно нужно. Слово «необязательно» не повторяется в каждом поле.

05 · Goal cards

Отдельная композиция для каждого состояния

No-image карточка компактнее и не хранит место картинки. Достигнутая цель получает спокойный статус, а реальный процент выше 100% остаётся видимым.

Текущая цель

Путешествие

600,00 / 1 000,00 USD

До 12 сент. · 20,00 USD/день

Текущая цель

My life

600,00 / 1 000,00 USD

60%
Цель достигнута

Новый дом

1 250,00 / 1 000,00 USD

Перевыполнено на 25%

125%

Без названия

Моя цель

200,00 / 1 000,00 EUR

Нажатие на область процента открывает выбор изображения.

20%

Адаптивная главная

В Shell Preview место цели не резервируется пустым: его занимает полезный итог, динамика прямых корректировок или ничего, если данных ещё нет.

06 · Lists

Строки держат геометрию при смене значений

  • Зарплата12 сент. · Доход+2 400,00 USD
  • Продукты на неделю11 сент. · Покупки−86,40 USD
  • Корректировка остатка10 сент. · Изменение суммы+200,00 USD

За месяц

−1 840,00 USD

07 · Overlay geometry

Разные задачи — разные поверхности

Ниже показаны базовые геометрии поверхностей. В Shell Preview статистика уже использует единый dialog/bottom-sheet контракт с коротким движением, защитой от повторного открытия и reduced-motion.

Добавить деньги

Удалить операцию?

Сумма и прогресс цели будут пересчитаны. Операцию можно восстановить в настройках.

08 · Long copy

Контракт обязан переживать длинные реальные строки

RUВалюта для новых операций следует за основной валютой
DEWährung für neue Transaktionen folgt der Hauptwährung
PLWaluta nowych operacji jest zgodna z walutą główną
FRLa devise des nouvelles opérations suit la devise principale

EN · compact

DE · long

FR · medium

UK · Cyrillic