Фірмовий стиль
Корпоративний стиль 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); }