Бренд-ассеты¶
Файлы лежат в docs/assets/brand/. Это закоммиченные
артефакты, а не результат сборки, поэтому ссылки на эту страницу достаточно
любому, кому нужен логотип.
Что где применять¶
| Поверхность | Файл | Почему именно он |
|---|---|---|
| Google OAuth consent screen | threadory-mark-120.png |
Google требует квадрат; 120×120 — размер, в котором он показывает |
| Страница в LinkedIn и всё, что просит 300×300 | threadory-mark-300.png |
Точный размер: если отдать файл крупнее и дать площадке ужать его самой, узлы замыливаются |
| PWA / экран Android и другие слоты 192×192 | threadory-mark-192.png |
Размер, который просят такие манифесты |
| Аватар приложения в GitLab / GitHub / Slack | threadory-mark-512.png |
Квадрат, читается и на тёмном, и на светлом интерфейсе; у Slack это минимум |
| Карточка в каталоге или сторе | threadory-mark-1024.png |
Самый большой квадрат, чисто уменьшается |
| Слайды, партнёрские страницы, подпись в почте | threadory-lockup-light.png |
Знак и вордмарк на белом |
| То же на тёмном фоне | threadory-lockup-dark.png |
Тот же локап, вордмарк белым |
| Везде, где принимают вектор | threadory-mark.svg |
Масштабируется без потерь, геометрия та же |
Знак сделан белым на accent-плашке сознательно: он несёт свой фон, поэтому остаётся читаемым и на полосе вкладок, и на сером consent-экране, и в тёмном каталоге приложений — ни один из них мы не контролируем.
Фавикона здесь нет: он живёт внутри приложения как
apps/web/src/app/icon.svg с растрами рядом, потому что Next отдаёт теги
<link rel="icon"> только для файлов, названных по его конвенции в app/.
Правила¶
- Не перекрашивайте плашку и знак. Accent —
#3a4ef0. - Не кладите прозрачный знак на цветной фон, используйте плашку.
- Не растягивайте, не поворачивайте, не добавляйте тень и не меняйте расстояния в локапе: вместо увеличения экспортируйте PNG большего размера.
- Вордмарк набран Geist SemiBold. Не набирайте его другой гарнитурой — берите готовый файл локапа.
Пересборка¶
Форма живёт в apps/web/src/app/icon.svg. После её изменения, из apps/web:
# favicon.ico + apple-icon.png рядом с SVG
python3 scripts/render-brand-icons.py src/app
# квадраты для пресс-кита
python3 scripts/render-brand-icons.py ../../docs/assets/brand 120 192 256 300 512 1024
# локапы (нужен node_modules ради Geist и next/og)
node scripts/render-brand-lockup.mjs ../../docs/assets/brand
Результат коммитится. Ни один из скриптов не запускается в CI: эти файлы меняются примерно так же часто, как переименовывается продукт.
Нужен размер, которого здесь нет? Передайте его аргументом: python3 scripts/render-brand-icons.py ../../docs/assets/brand 144 создаст
threadory-mark-144.png. Экспортируйте ровно тот размер, который просит
площадка, вместо загрузки файла покрупнее: узлы в знаке мелкие, и чужой
уменьшатель их замыливает, а наш — нет.