Семантична типографіка
src/assets/project_scss/design_system/_typography.scss — opt-in основа типографіки для поступового й контрольованого використання у SCSS та CSS Modules. Роль обирають за змістом і місцем тексту в інформаційній ієрархії, а не за бажаним візуальним розміром, HTML-тегом, назвою компонента чи функціонального модуля.
Ролі й токени
| Роль | Призначення | Розмір | Вага | Висота рядка |
|---|---|---|---|---|
page-title | Основний заголовок поточної сторінки або екрана | 24px | 600 | 32px |
section-title | Заголовок великого логічного розділу сторінки | 20px | 600 | 28px |
block-title | Заголовок локальної картки, таблиці, графіка, віджета чи панелі | 16px | 600 | 24px |
body | Основний читабельний або інформаційний текст | 14px | 400 | 20px |
secondary | Допоміжна інформація зі зниженим акцентом | 13px | 400 | 18px |
caption | Короткі метадані: дата, час, тип або розмір файлу | 12px | 400 | 16px |
kpi-value | Візуально акцентоване кількісне або аналітичне значення | 28px | 700 | 36px |
kpi-label | Текстове пояснення до KPI-значення | 13px | 500 | 18px |
Використання
Foundation не створює глобальних utility-класів і не стилізує HTML-теги автоматично. Потрібний міксин підключається явно:
@use '../design_system/typography' as typography;
.title {
@include typography.typography-page-title;
}Доступні міксини:
typography-page-titletypography-section-titletypography-block-titletypography-bodytypography-secondarytypography-captiontypography-kpi-valuetypography-kpi-label
Коректно: використовувати page-title для єдиного заголовка поточної сторінки, block-title для назви графіка, caption для дати й kpi-value для підсумкового числового показника.
Некоректно: вибирати page-title лише через потрібний розмір; застосовувати його до кнопки, модального вікна чи картки; створювати глобальні ролі на кшталт dashboard-title, media-title, button-label або дублікати наявних ролей.
Типографічний шар відповідає тільки за шрифт, розмір, вагу та висоту рядка. Колір, відступи, розміри контейнера й інші властивості оформлення є окремими concerns і не входять до цього API.
Пілот
Роль page-title застосована до .stack_header_title у спільному StackHeader: компонент обчислює й показує назву всієї поточної сторінки за маршрутом. DOM, React-логіка, колір, відступи та layout заголовка не змінювалися.
Manrope є глобальним продуктовим шрифтом. Поточний зовнішній import у src/index.scss явно завантажує ваги 300, 600 і 700; локальних font-файлів немає. Ролі з вагами 400 і 500 збережені відповідно до затвердженого API, але для гарантії їхнього точного відображення потрібна окрема реєстрація відповідних font-файлів або узгоджена зміна завантаження шрифту.