ТУКАЙФ — Брендбук

01 — Логотип

Звёздочка

Восьмиконечная — единственная фирменная фигура.
Без обводок, теней, градиентов.
Минимум 16 px, оптимум ≥24 px.

Светлый фон · #1d1d1f

Тёмный фон · #ffffff

Поверхность · #f5f5f7

Фавикон

Эталон для всех проектов

Один файл на проект: /favicon.svg в корне.
Подключение: <link rel="icon" type="image/svg+xml" href="/favicon.svg">

viewBox: -3 18.51 80.55 80.55 · без transform
Цвет: #0a0a0a на светлой / #EAEAF2 на тёмной (через prefers-color-scheme)
Минимум: 16×16 px · оптимум ≥24 px · до 512 px без потерь
Файл: скачать /favicon.svg

Запрещено: inline data-URI с transform-обёрткой, PNG-фавиконы, цветные градиенты.

02 — Цвета

Палитра

Иерархию делаем чёрным и серым.
Никаких градиентов, никакого glassmorphism.
Акцент — один на проект, если нужен.

Фон

--bg

#ffffff

Поверхность

--surface

#f5f5f7

Поверхность 2

--surface2

#e8e8ed

Приглушённый

--muted

#86868b

Текст

--text

#1d1d1f

Чёрный

theme-dark

#0a0a0a

Граница

--border

rgba(29,29,31,.08)

Граница строки

--border-row

rgba(29,29,31,.16)

03 — Типографика

Inter Tight

Один шрифт на весь бренд.
Вариативный, веса 300–700.
Self-hosted — работает без CDN.

--text-hero

Главный заголовок

140 / 100 / 72 / 52 / 44 px

--text-display

Крупный заголовок

80 / 64 / 48 / 40 / 32 px

--text-headline

Заголовок секции

56 / 48 / 36 / 30 / 26 px

--text-title

Заголовок карточки

32 / 28 / 24 / 22 / 20 px

--text-body-lg

Лид-параграф или цитата

24 / 22 / 20 / 18 / 17 px

--text-body

Основной текст. Спокойный, читаемый, без вычурности.

19 / 17 / 16 px

--text-caption

Подпись или второстепенный текст

16 / 15 px

--text-micro

Метка / Юр-футер

14 px

04 — Компоненты

Кнопки и иконки

Кнопки прямые, без мелких скруглений.
Иконки тонкие, в стиле Apple SF Symbols.
Никаких эмодзи в интерфейсе.

Кнопки

Наведи курсор — увидишь fill-анимацию.

Иконки

stroke-width 1.6–2 · linecap round · линия, не filled. Источник — Lucide / Phosphor / Tabler.

05 — Анимация

Easing-кривые

Используй только эти три кривые.
0.3–0.6 с для микро-движений.
0.9 с для появления секций.

— ease

cubic-bezier(0.4, 0, 0.2, 1)

Hover, цвет, прозрачность

— ease-out

cubic-bezier(0.19, 1, 0.22, 1)

Появление, заливка кнопок

— ease-spring

cubic-bezier(0.16, 1, 0.3, 1)

«Прибытие» секций при скролле

06 — Голос

Тон оф войс

Везде на «ты». Без официоза.
Без штампов и ёлочного капса.
Каждая мысль — короткой строкой.

Так не пишем

Здравствуйте! Меня зовут Руслан, я являюсь профессиональным дизайнером в индустрии event-маркетинга и предлагаю Вам широкий спектр услуг для решения Ваших задач.

Так пишем

Привет, я Руслан. Делаю обложки, афиши и интерактивы для ивент-индустрии. Что нужно — напиши, разберёмся.

Так не пишем

Уважаемый клиент, благодарим Вас за обращение! Стоимость наших услуг составляет от пятнадцати тысяч рублей. С наилучшими пожеланиями, команда ТУКАЙФ! 🔥🔥🔥

Так пишем

Привет! Стоимость: от 15 000 ₽. Если что-то ещё непонятно — напиши, расскажу.

07 — Чеклист

Перед деплоем

Десять пунктов перед деплоем.
Если хотя бы один не закрыт — не релизим.
Касается всего: лендинги, анкеты, PNG.

Inter Tight self-hosted в /fonts/, никаких Google Fonts CDN

Все цвета через CSS-переменные (--text, --bg, --muted)

Иконки — только inline SVG в стиле SF Symbols

Кнопки используют btn-fill или btn-ghost

Тексты на «ты», переносы-панчлайны, без официоза

Корректный <meta name="robots">: index для главных, noindex для клиентских

Security headers в nginx, HTTPS, HTTP→HTTPS редирект

OG и Twitter теги — абсолютные URL

Canonical link установлен

Анимированный favicon (звезда крутится, инвертируется по теме)