Типографика
Шкала заголовков, тексты и семантические цвета. Размеры CoreTitle/CoreText задаются утилитами — здесь показано, как они применяются на страницах.
Аа
CoreTitle · flowСъешь ещё этих мягких французских булок, да выпей же.
Заголовки
6CoreTitle + размерные утилиты. Шорткат задаёт font-bold leading-tight.
Типографика интерфейса
h1 · text-5xl lg:text-7xl · Hero главной и витринТипографика интерфейса
h2 · text-4xl lg:text-5xl · Заголовок страницыТипографика интерфейса
h3 · text-3xl · СекцияТипографика интерфейса
h4 · text-xl · Подсекция / карточкаТипографика интерфейса
h5 · text-base · Мелкий заголовокТипографика интерфейса
h6 · text-sm text-fg-muted · Оверлайн-лейблТекст
4CoreText: шорткат leading-normal, размер и приглушённость — утилитами. Панграм для проверки кириллицы.
Съешь ещё этих мягких французских булок, да выпей же.
Лид / описание в hero · text-lgСъешь ещё этих мягких французских булок, да выпей же.
Основной текст · text-baseСъешь ещё этих мягких французских булок, да выпей же.
Вторичный текст, описания · text-smСъешь ещё этих мягких французских булок, да выпей же.
Подписи, QA-строки · text-xsПриглушённый текст: text-fg-muted — подписи и пояснения.
text-fg-mutedОбрезка по строкам: CoreText с пропом max-lines зажимает текст CSS line-clamp — длинный абзац заканчивается многоточием после второй строки, а не разрывает раскладку карточки.
max-lines="2"Семантические цвета текста
6Утилиты читают токены темы — цвет меняется вместе с режимом и акцентом.
text-primary
text-secondary
text-success
text-warning
text-danger
text-info
text-fg-muted
Числа, моно и клавиши
Соседние витрины
QA: тема system (system) · акцент перекрашивает text-primary и свотчи палитры