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

Вітрина базових компонентів · Mini App

Джерело: design_handoff_spilno_v3 —

Тема

Поза Telegram: тему бере система.

Telegram диктує тло й безпечні зони. Бренд не перефарбовується: борг лишається Ember, кредит — Settled в обох темах.

Типографіка

Юлія позичила ще 240 ₴

Гуляй Карпатами, з’їж їжачка

Чуєш їх, доцю? Гей, філософе, ліквідуй чужі ґанджі! Тест кирилиці, латиниці й польських діакритик: ąćęłńóśźż.

Onest 400 · підпис 12,5

1 284,50 ₴

JetBrains Mono · id 8f21-04c9

Заголовки — Unbounded, текст — Onest, обидва з assets/fonts. Якщо український рядок вище намальовано іншим шрифтом, ніж латиниця, — родина не підвантажилась.

Палітра

Кожен зразок — CSS-змінна, згенерована з tokens.json.

Кнопки

Primary · h56 r16 · один на екран Bot / Plus · градієнт бренду Secondary · h50 r14 Text · h44 Destructive · h50 r14 Вимкнена · 38% і причина підписом Спершу додайте хоча б одну витрату. Вантажиться · ширина заморожена
Пара дій у рядку боргу · h42, flex:1, gap 8
Сума в підписі · табличні цифри Тональна мікро · лише в мінусових рядках
Оля −320,00 ₴
Слот «додати» + квадрат посилання · h46
FAB круглий 60 · і розгорнутий Ember h56

Картка

Готель у Буковелі
Заплатив Тарас · 12 серпня 3 200,00 ₴
Вечеря на всіх
Заплатила Юлія · 12 серпня +415,00 ₴

Шапка екрана зі згасанням

Колір бере рампа категорії витрати — перемкніть і звірте з S-13.

Транспорт

Таксі з аеропорту

12 серпня, 21:40

Заплатив Тарас 640,00 ₴

Стан «вантажиться» й видалена витрата:

Витрату видалено

12 серпня

640,00 ₴

Іконки й колодязі

Одне обведення Azure плюс один акцент Ember. Акцент не перефарбовується ніколи; nav-іконки міняють лише обведення.

Nav-іконки: активна / неактивна (currentColor).

Поля вводу

Шторка

r28, тінь sheet, нижній відступ — безпечна зона Telegram.