---
name: bytekite-brand-creatives
description: Generates on-brand BYTE&KITE visual creatives as self-contained HTML/SVG — social media posts, banners, carousels, cards, and web hero sections following the BYTE&KITE brand guidelines (black/lime palette, Satoshi+Roboto Mono fonts, dot grid patterns). Use this skill whenever creating ANY visual for BYTE&KITE — Instagram posts, LinkedIn banners, promotional graphics, carousel slides, or web sections. Trigger on "create a post", "make a banner", "design a creative", "Instagram post", "carousel", or any request to produce a BYTE&KITE visual asset. Always pair with bytekite-design-system for layout structure.
---
# BYTE&KITE Brand Creatives Generator
**What it produces:** On-brand visual creatives as HTML/React artifacts or SVG graphics — social media posts, banners, carousels, cards, web hero sections — following the BYTE&KITE 2026 Brand Guidelines.
**When to use:** Any time you need to create a visual for BYTE&KITE — social posts, Instagram/LinkedIn banners, promotional graphics, web sections.
**Recommended model:** claude-sonnet-4-6
> Before generating, read `references/brandbook.md` for full brand specs. For layout structure and composition, pair with `../bytekite-design-system/skill.md`.
---
## Core Brand DNA (Quick Reference)
These are the non-negotiable brand elements to include in every creative:
**Colors** — Primary: Black `#131313`, Lime `#8EF648`, White `#FFFFFF`. Secondary: Yellow `#E5FE00`, Purple `#6946F5`.
**Fonts** — Satoshi (headings: Bold/Black; body: Medium) + Roboto Mono (labels, tags, metadata). Never use italic.
**Logo** — "BYTE&KITE" wordmark + pixelated kite icon. Place in top-left or top-right. Don't rotate, shadow, outline, or add gradients to it.
**Shapes** — Rectangular labels, square buttons, slight or no rounding. No pills, no circles for buttons, no glass/blob effects.
**Patterns** — Dot grid on dark backgrounds (signature look), line/square grid on light backgrounds, lime gradient for accent areas.
## Creative Generation Workflow
### Step 1: Understand the Request
Clarify with the user:
- **Format**: social media post (square 1080×1080, story 1080×1920, landscape 1200×628), web banner, card, hero section, etc.
- **Theme**: dark or light (dark with dot pattern is the default/signature look).
- **Content**: headline text, stats/numbers, tags, CTA text.
- **Language**: Ukrainian is primary; English for international.
If the user doesn't specify, default to: **dark theme, 1080×1080 square post, Ukrainian language**.
### Step 2: Choose Layout Template
Pick a layout based on the content type:
**Stats/Case Study Post:**
- Large numbers (Satoshi Black, 48-72px) on the left
- Roboto Mono UPPERCASE labels under each number
- Brand logo + partner info on the right
- Lime accent dividers
**Educational/Tip Post:**
- Bold headline (Satoshi Black)
- Screenshot or mockup area (non-device, rectangular)
- Rectangular lime tags: `/CLICKUP`, `/AI`, etc.
- Arrow button (→) in bottom-right corner
**Announcement Post:**
- Full-width lime accent block at top or center
- Large headline text (Satoshi Black)
- Supporting body text (Satoshi Medium)
- Logo icon as watermark in corner
**Quote/Insight Post:**
- Dark background with dot pattern
- Lime highlight bar behind key phrase
- Attribution text in Roboto Mono
### Step 3: Build the Creative
Generate as an HTML artifact (for complex layouts with multiple elements) or SVG (for simpler graphics).
**Font loading** — always include at the top (Satoshi requires internet; Roboto Mono falls back to system monospace if offline):
```html
```
**CSS fallback stacks** — always define fallbacks so the layout holds if fonts fail to load:
```css
--font-primary: 'Satoshi', 'Inter', Arial, sans-serif;
--font-mono: 'Roboto Mono', 'Courier New', monospace;
```
**CSS foundation** — use these variables:
```css
:root {
--white: #FFFFFF;
--lime: #8EF648;
--black: #131313;
--yellow: #E5FE00;
--purple: #6946F5;
--font-primary: 'Satoshi', sans-serif;
--font-mono: 'Roboto Mono', monospace;
}
```
**Dot pattern** (for dark backgrounds) — implement as a CSS pseudo-element or SVG pattern:
```css
background-image: radial-gradient(circle, #8EF64833 1px, transparent 1px);
background-size: 24px 24px;
```
**Logo icon** — recreate the pixelated kite as an SVG element. It's a geometric shape built from squares/rectangles resembling a kite made of pixels. Use black fill on light backgrounds, white or lime fill on dark backgrounds.
### Step 4: Apply Brand Rules Checklist
Before finalizing, verify:
- [ ] Colors are only from the brand palette (no off-brand colors)
- [ ] Satoshi font is loaded and used for all text
- [ ] Roboto Mono is used for labels/tags/metadata only
- [ ] Headlines are Bold/Black weight, body is Medium
- [ ] Labels are UPPERCASE
- [ ] No italic text anywhere
- [ ] No rounded pills — all chips/labels are rectangular
- [ ] No circular buttons — buttons are square with slight or no rounding
- [ ] No glass/blob effects
- [ ] No device mockups (phone frames, etc.)
- [ ] Logo is not rotated, shadowed, outlined, or gradient-filled
- [ ] High contrast maintained (lime on black, black on white, etc.)
- [ ] Dot pattern used on dark backgrounds
- [ ] Logo (icon or full) is placed in a corner
## Implementation Patterns
### Dark Theme Post (Most Common)
```
┌─────────────────────────┐
│ ● ● ● ● ● ● ● ♦ │ ← dot pattern bg + logo icon top-right
│ ● ● ● ● ● ● ● │
│ │
│ ██ HEADLINE TEXT ██ │ ← Satoshi Black, white or lime
│ │
│ Body text here │ ← Satoshi Medium, white
│ │
│ [/TAG1] [/TAG2] │ ← Roboto Mono, lime bg, black text, rectangular
│ │
│ [→] │ ← square black button, lime arrow
└─────────────────────────┘
```
### Light Theme Post
```
┌─────────────────────────┐
│ BYTE&KITE ♦ │ ← logo top-left, light gray bg
│ ───────────────── │ ← subtle line/grid pattern
│ │
│ HEADLINE TEXT │ ← Satoshi Black, #131313
│ │
│ Body text here │ ← Satoshi Medium, dark gray
│ │
│ [LABEL] [LABEL] │ ← lime bg, black text, rectangular
│ [→] │
└─────────────────────────┘
```
### Split Stats Layout
```
┌────────────┬────────────┐
│ │ │
│ 20+ │ BYTE&KITE ♦│
│ AUTOMATIONS│ │
│ │ X │
│ 100% │ │
│ PROJECTS │ ♦ partner │
│ │ │
│ CRM │ │
│ BUILT IN CU│ │
└────────────┴────────────┘
```
## Tone & Content Voice
BYTE&KITE's content personality:
- **Direct and bold** — no fluff, strong statements.
- **Technical but accessible** — ClickUp/AI jargon is fine, but explain when needed.
- **Slightly provocative** — uses contrast, expectation-breaking, meta-humor.
- **Self-aware** — the brand isn't afraid to be ironic about itself or the industry.
Content is primarily in **Ukrainian** with English technical terms left untranslated (ClickUp, AI, CRM, automation).
## Examples of Brand-Appropriate Text
Tag styles: `/CLICKUP`, `/AI`, `/AUTOMATION`, `/MAKE`
Headline styles:
- "5 фейлів у ClickUp" (bold, direct)
- "ПОЧАСОВКА БЕЗ ДАНИХ — ЦЕ ЛОТЕРЕЯ" (provocative caps)
- "Порушення очікувань" (intriguing, pulls reader in)
- "Конкурентний удар" (competitive, bold)
## Output Format
Always produce a complete, self-contained HTML file that:
1. Loads Satoshi and Roboto Mono fonts
2. Has a fixed canvas size matching the requested format
3. Uses only brand colors
4. Is pixel-perfect and ready to screenshot or export
5. Includes all brand elements (logo, patterns, proper typography)
If the user wants multiple variations (dark/light, different layouts), generate them as separate outputs.
---
*Part of the Byte&Kite Skills Collection*