Визуальный язык
Два шрифта на весь продукт. Stapel Semi Expanded — громкий, дисплейный, только Black. Artegra Sans — рабочая лошадка для текста. Никакого третьего шрифта «для разнообразия».
| Гарнитура | Начертание | Роль | CSS-переменная |
|---|---|---|---|
| Stapel Semi Expanded | Black (900) | Дисплей: hero, заголовки, названия карточек, uppercase-надписи | var(--seeto-font-display) |
| Artegra Sans | Medium (500) | Основной текст: описания, тело карточек, подписи | var(--seeto-font-card) |
| Artegra Sans Extended | SemiBold (600) / Bold (700) | Даты, CTA-кнопки, акцентные короткие лейблы | var(--seeto-font-card-extended) |
| Manrope / Inter / system-ui | Regular / Medium | Служебный UI-текст, лейблы, fallback-стек | var(--seeto-font-ui) |
Fallback-цепочка объявлена прямо в токене — если Stapel или Artegra Sans не загрузились, браузер переходит на Manrope → Inter → системный sans-serif, не оставляя пользователя с serif по умолчанию.
Живые образцы ниже отрисованы реальными шрифтами и реальными токенами размера/интерлиньяжа.
Живи как мы
Бренд SEETO
Правила бренда
Голос бренда
Токио без перелёта
Приватный кинопоказ, закрытый ужин-омакасе и финал в токийском баре — один вечер, три сцены.
Мы уже убрали всё, на что не стоит тратить вечер.
Подписи под карточками, вспомогательные описания, метаданные.
СЕГОДНЯ · ЗАВТРА · ВЫХОДНЫЕ
Обновлено 5 августа 2026
Источник токенов — мобильный экран 393 px, поэтому шкала уже рассчитана на компактный формат. На более
широких экранах дисплейные роли (hero, title, heading-1) можно
увеличивать через clamp(), как это сделано в заголовке этой страницы, а body-роли не
масштабируются от вьюпорта: это фиксированные значения, чтобы текст внутри карточек не «плавал» при
ресайзе.
Можно
Заголовки — капслоком через Stapel Semi Expanded. Это часть характера бренда, не ошибка Caps Lock.
Нельзя
Ставить Stapel Semi Expanded в длинные абзацы — он рассчитан на короткие заголовочные фразы.
Можно
Переносить длинные заголовки по смысловым группам слов, а не как получится по ширине контейнера.
Нельзя
Растягивать (justify) основной текст — в узких карточках это создаёт рваные пробелы между словами.
Текстовые стили в Figma («SEETO WEB 2») называют шрифтом display/heading-ролей Inter, тогда как продакшен-код везде использует Stapel Semi Expanded для того же самого дисплейного языка бренда. Каноническим считается код: Stapel Semi Expanded — это то, что пользователь видит в реальном продукте. Figma text styles предстоит обновить, чтобы они совпадали с этой страницей.
Нужен третий шрифт для спецпроекта — обсудите это до вёрстки, а не после.