Фирменный стиль
Корпоративный стиль Agentfy.ai — палитра, подача, промпты для генерации и скачиваемый Tailwind-шаблон. Полное нарративное направление — в Истории и креативе.
Суть подачи
Светло, оптимистично, чуть фантастично — солнечное близкое будущее, где агенты уже всё делают за тебя (ретро-футуризм в духе «Джетсонов», но чисто и современно). Тепло, по-человечески, легко; технология на твоей стороне. Каждый материал оставляет одну мысль: «Будущее уже работает — на меня — а мне нужно было лишь подключить Agentfy.ai». Слоган: «Подключи будущее».
- Всегда: солнце, улыбки, дружелюбные агенты-компаньоны, процветающий магазин крутится сам, светящийся момент подключения / коннекта, много света, логотипный градиент cyan→teal + тёплое золото/коралл.
- Никогда: тьма/дистопия, холодный корпоратив, страх, захламлённость, «роботы заменяют людей».
Логотип
Знак — голубая A с четырёхлучевой звездой во внутреннем просвете. Первоисточник один — app/slices/common/assets/img/logo.png, 1254 × 1254, — и всё ниже сделано из него.
⬇ Логотип, прозрачный (.png) ⬇ Логотип, оригинал (.png)
Две вещи, которые надо знать до того, как брать файл.
Векторной версии нет. Знак — растровый PNG на 1254 px, ничего крупнее в репозитории не лежит, поэтому на билборд или крупную печать он не растянется. Всё, что больше экрана, требует сначала перерисовать логотип в SVG.
Логотип — это не Brand Primary из палитры. Замер по самому файлу даёт #22E2F2; палитра ниже называет Brand Primary #5FC8EE и описывает фирменный градиент как совпадающий с логотипом. Между ними 68 единиц расстояния в RGB — разница видна глазом, и настоящий логотип насыщеннее. Ничего не сломано, но не надо брать одно вместо другого: для интерфейса — палитра, для самого знака — файл.
Фавикон
Один комплект, побайтово одинаковый во всех трёх фронтендах — app/, admin/ и website/, — чтобы вкладка выглядела одинаково, какой бы из них ни был открыт.
⬇ favicon.ico ⬇ 32×32 ⬇ apple-touch-icon ⬇ icon-512
Иконки нарисованы не цветом логотипа, и это стоит знать до того, как перерисовывать хоть одну. Замер по icon-512.png даёт #4EA2D2 — две единицы от Brand Secondary #4FA3D1, то есть фактически он и есть, и 84 единицы от собственного #22E2F2 логотипа. То есть в ходу три синих: голубой логотипа, Brand Primary из палитры и Brand Secondary, которым нарисованы иконки. Берите тот, рядом с которым и так стоит то, что вы делаете, а не исходите из того, что фирменный синий один.
Поставить их в новый фронтенд — это четыре файла в public/ и четыре строки в head:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">Цветовая гамма
Бренд
Фоны
Акценты (тёплые / солнечные)
Текст
Градиенты
Промпты для генерации
Промпты для генерации изображений/видео собраны в одном месте — История и креатив — чтобы master-промпт, шаблон под клип и чеклист не расходились. Всегда держи эту палитру в промпте, чтобы оставаться в бренде. (Промпты — на английском: генераторы лучше понимают английский.)
Скачать — Tailwind-шаблон
Палитра бренда готовыми файлами (сделаны в этом проекте):
⬇ Tailwind preset (.js) ⬇ CSS-токены (.css)
Tailwind v3 — tailwind.config.js:
module.exports = {
presets: [require('./agentfy.tailwind.js')],
content: ['./src/**/*.{html,js,ts,vue,jsx,tsx}'],
}
// → bg-brand, bg-surface-alt, text-ink-heading, bg-cta-gradient, и т.д.Tailwind v4 (CSS-first) или любой фреймворк — через CSS-токены:
@import "./agentfy.tokens.css";
.btn { background: var(--af-grad-cta); color: #fff; }
.card { background: var(--af-card); color: var(--af-body); }