Brand kit
The corporate style for Agentfy.ai — palette, presentation, generation prompts, and a downloadable Tailwind template. For the full narrative direction see Story & creative.
The essence of the presentation
Bright, optimistic, a little fantastical — a sunny near-future where agents already do everything for you (Jetsons-style retro-futurism, but clean and modern). Warm, human, effortless; technology on your side. Every asset leaves one thought: "The future already works — for me — and all I did was plug in Agentfy.ai." Tagline: "Plug in the future."
- Do: sunlight, smiles, friendly agent companions, a thriving store running itself, the glowing plug-in / connect beat, lots of light, the cyan→teal logo gradient + warm gold/coral sun.
- Don't: dark/dystopian, cold corporate, fear, clutter, "robots replacing people".
Logo
The mark is a cyan A with a four-pointed star in its counter. One file is the source of truth — app/slices/common/assets/img/logo.png, 1254 × 1254 — and everything below is derived from it.
⬇ Logo, transparent (.png) ⬇ Logo, original (.png)
Two things to know before using it.
There is no vector version. The mark is a raster PNG at 1254 px and nothing larger exists in the repository, so it will not survive being blown up to a billboard or a large print piece. Anything beyond screen sizes needs the logo redrawn as SVG first.
The logo is not the palette's Brand Primary. Measured off the file, the mark is #22E2F2; the swatch below calls Brand Primary #5FC8EE and describes the brand gradient as matching the logo. They are 68 apart in RGB — visibly different, the real logo being the more saturated of the two. Nothing here is broken, but do not sample one and assume you have the other: for interface colour use the palette, and for the mark itself use the file.
Favicon
One set, shared byte-for-byte by all three front ends — app/, admin/ and website/ — so a tab looks the same whichever one the reader has open.
⬇ favicon.ico ⬇ 32×32 ⬇ apple-touch-icon ⬇ icon-512
The icons are not drawn in the logo's colour, and that is worth knowing before you redraw one. Measured off icon-512.png, the glyph is #4EA2D2 — two units from Brand Secondary#4FA3D1, so effectively exactly it, and 84 away from the logo's own #22E2F2. Three blues are therefore in play: the logo's cyan, the palette's Brand Primary, and the Brand Secondary the icons use. Match whichever of them the thing you are making already sits next to, rather than assuming one brand blue exists.
Dropping them into a new front end is four files in public/ and four lines in the 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">Color palette
Brand
Surfaces
Accent (warm / sunny)
Text
Gradients
Generation prompts
The image/video generation prompts live in one place — Story & creative — so the master prompt, per-clip template, and checklist never drift apart. Always keep this palette in the prompt so output stays on-brand.
Download — Tailwind template
The brand palette as ready-to-use files (built with this project):
⬇ Tailwind preset (.js) ⬇ CSS tokens (.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, etc.Tailwind v4 (CSS-first) or any framework — use the CSS tokens:
@import "./agentfy.tokens.css";
.btn { background: var(--af-grad-cta); color: #fff; }
.card { background: var(--af-card); color: var(--af-body); }