bytekite-brand-creatives

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):

<link href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">

CSS fallback stacks — always define fallbacks so the layout holds if fonts fail to load:

--font-primary: 'Satoshi', 'Inter', Arial, sans-serif;
--font-mono: 'Roboto Mono', 'Courier New', monospace;

CSS foundation — use these variables:

: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:

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