Typography
Заморожена типографічна шкала. Не плодимо <Heading> /<Text> компоненти — копіюй className звідси, коли потрібен той самий стиль у DataTable / Card / form. PageHeader і Modal вже вшивають h1/h2 з цієї шкали.
Headings
Display / H1 / H2 / H3 / H4 / Eyebrow. Tracking негативний на великих, позитивний на uppercase-малих.
Великий тайтл лендингу або hero-секції. Один на сторінку.
text-[34px] font-semibold leading-tight tracking-[-0.02em] text-slate-950Головний заголовок сторінки. Уже вшитий у <PageHeader title>.
text-[24px] font-semibold leading-tight tracking-[-0.025em] text-slate-950 sm:text-[28px]Заголовок розділу всередині сторінки (Modal title / Card heading).
text-[20px] font-semibold leading-tight tracking-[-0.015em] text-slate-950Підрозділ. Те, що зараз стоїть у Modal / Drawer title.
text-[15px] font-semibold leading-tight tracking-[-0.01em] text-slate-950Маленький заголовок групи у формах / sidebar / Section helpers.
text-[13px] font-semibold uppercase tracking-[0.06em] text-slate-700Маленька надтекстівка над H1 (PageHeader.eyebrow).
text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500Body
14px (text-sm) — дефолт інтерфейсу. 16px — лише для intro/hero. Caption 12px — у helper-тексті форм.
Hero paragraph під Display-заголовком, intro статей.
text-[16px] leading-relaxed text-slate-700Параграфи, описи в картках, body форм, error messages під полями.
text-sm leading-6 text-slate-700Описи всередині DataTable, метаінформація, helper text.
text-[13px] leading-5 text-slate-600Допоміжний текст під полями (FormHelperText), timestamp, footnotes.
text-xs leading-5 text-slate-500Колонкові заголовки в DataTable, лейбли над числами.
text-[10px] font-medium uppercase tracking-[0.08em] text-slate-500Inline & utility
Дрібні токени: жирний/курсив/посилання/код/числа з табулярним моноширинним. Числові колонки в DataTable — обов'язково tabular-nums, інакше суми «стрибають».
Виділення слова всередині абзацу. Не використовуй <b>.
font-semibold text-slate-950Цитати або не-критичне виділення.
italic text-slate-700Внутрішнє посилання. Зовнішнє — те ж саме + IconExternalLink size=12.
font-medium text-blue-700 underline decoration-blue-300 underline-offset-2 hover:decoration-blue-500Імена полів, edrpou, IBAN, фрагменти коду в підказках.
rounded-[3px] bg-slate-100 px-1.5 py-0.5 font-mono text-[12px] text-slate-700Грошові колонки в DataTable. tabular-nums гарантує однакову ширину цифр для рівних колонок.
font-mono tabular-nums text-slate-900Приглушений текст: timestamp, second-row у таблиці, optional поля.
text-slate-500Paragraphs
Реальний текст у блоці шириною max-w-2xl. Перевір ширину рядка — комфортно читаємий 60-75 символів.
Розрахунок ОСББ виконується автоматично після підтвердження тарифу. Усі зміни логуються і доступні для перегляду в розділі історії. Якщо тариф було змінено заднім числом — система перерахує всі нарахування за відповідний період.
Особовий рахунок (PA) — це канонічна одиниця обліку для будь-якого клієнта. ОСББ використовує POSTPAID (нараховується наперед, оплачується пізніше); клуби типу 5й-Елемент — PREPAID із credit_limit для VIP-карт.
- Один PA → багато контрактів (води, тепла, домофону).
- Контракти →
ContractAccessдля прав в'їзду. - Платежі → Movement → SubjectBalance кеш.
PageHeader — варіанти
Варіанти живого <PageHeader> з різними слотами. Якщо лейаут уже має padding на <main>, ти отримаєш подвійний відступ — у такому разі або зніми padding з main, або обгорни PageHeader без додаткових контейнерів.
Журнал проводок
Простий — лише title. Знизу — border-b за замовчуванням.
Платежі мешканців
Виписки з банку та звірка з нарахуваннями.
+ description (max-width 2xl, leading-6 — comfortable read).
JE-10042
REVERSAL запис від 30.04.2026 — виправлення помилки кодування.
+ eyebrow + status (status справа від title, не в actions).
Журнал проводок
Усі AUTO-проводки за поточний період.
+ actions (на маленьких — переходять у новий ряд).
Звернення мешканців
Заявки в управляючу компанію за поточний місяць.
+ toolbar (під заголовком, full-width — для фільтрів / лічильників).
Звіти
Регульовані форми + керівнича аналітика. Натисни на категорію щоб відкрити.
color=blue → tinted Surface замість plain. Fasta замість border-b — ціла кольорова сім'я (9 варіантів: blue / emerald / amber / rose / slate / orange / violet / pink / dark).
- Реєстр мешканців з пошуком за об'єктом
- Шахматка лицьових рахунків
- Звірка платежів з банку
- Експорт в Excel / PDF
- Виберіть період звіту
- Підтвердіть тарифи
- Перегляньте розрахунок у preview
- Натисніть «Опублікувати»
- Платник
- Іванов Іван Іванович
- ЄДРПОУ
- 42100123
- Сума
- 12 480,00 ₴
- Статус
- Сплачено
Quote / callout
Цитата або bookkeeping-нотатка всередині сторінки. Border-l + bg-slate-50 — не Banner (Banner це алерт із семантикою).
Реверс проведення створює новий запис типу
REVERSAL, оригінал помічаєтьсяREVERSED. Це єдиний спосіб виправити помилку — soft delete і прямі правки заборонені на рівні SQLAlchemy hooks.
Створення нової проводки через action API:
POST /actions/accounting/journal.create
{
"company_id": 31,
"entry_date": "2026-04-30",
"description": "Нарахування квартплати",
"lines": [
{ "account": "377", "debit": 1245.50 },
{ "account": "703", "credit": 1245.50 }
]
}Numbers — tabular-nums
У DataTable грошові / кількості — обов'язково font-mono tabular-nums. Інакше суми «дихають» при різних цифрах і колонка читається погано.
| Use | Class |
|---|---|
| Page title | PageHeader title="..." |
| Section heading | text-[15px] font-semibold tracking-[-0.01em] text-slate-950 |
| Group label (uppercase) | text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-500 |
| Body | text-sm leading-6 text-slate-700 |
| Helper / caption | text-xs leading-5 text-slate-500 |
| Money (DataTable) | font-mono tabular-nums text-slate-900 |
| Inline code | rounded-[3px] bg-slate-100 px-1.5 py-0.5 font-mono text-[12px] text-slate-700 |
| Link | font-medium text-blue-700 underline decoration-blue-300 underline-offset-2 hover:decoration-blue-500 |