# Bytekite Design System

> Layout pattern guidance for BYTE&KITE creatives — 11 layout types, composition rules, background diversity systems, and format-specific adaptations (square 1080×1080, story 1080×1920, landscape 1200×628). Use this skill before choosing any layout for a BYTE&KITE creative, when adapting content across formats, or when building multi-slide carousels. Trigger alongside bytekite-brand-creatives for any BYTE&KITE visual creation task. Pair with bytekite-brand-creatives for colors, fonts, and logo rules.

- Skill: `lozovoi-rodion/bytekite-design-system` (Agent Skill, multi-file: 40 files)
- Install (CLI): `npx skillmds@latest add lozovoi-rodion/bytekite-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lozovoi-rodion/bytekite-design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Lozovoi-Rodion (https://skillmd.com/u/lozovoi-rodion)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/lozovoi-rodion/bytekite-design-system

---


# BYTE&KITE Design System

**Pair with:** `../bytekite-brand-creatives/skill.md` for colors, fonts, and logo rules.

**Reference files to load on demand:**
- Layout specs: `references/layout-01-meme-collage.md` through `references/layout-11-integration-map.md`
- Background systems + CSS: `references/backgrounds.md`
- Composition rules + format adaptation: `references/composition.md`
- Brand assets: `assets/ref_01.png` – `assets/ref_06.png` (primary examples; ref_07–ref_25 available)

---

## 1. Formats

| Format    | Size        | Ratio | Usage                          |
|-----------|-------------|-------|--------------------------------|
| Square    | 1080×1080   | 1:1   | Instagram feed, carousel       |
| Story     | 1080×1920   | 9:16  | Stories, Reels, vertical video |
| Landscape | 1200×628    | ~1.9:1| LinkedIn, Facebook, ads        |

Design **format-first** — not a cropped version of another format.

---

## 2. Universal Elements (present on every creative)

**Corner accent:** black triangle top-right (`clip-path: polygon(100% 0, 0 0, 100% X%)`), kite icon inside. Omit triangle on dark bgs — place kite icon directly.

**Arrow button:** bottom-right corner. Black square (48–64px), lime arrow inside. Inverted (lime bg, black arrow) on lime backgrounds.

**Background pattern:** light bgs → subtle cross-hatch grid (36px). Dark bgs → lime dot grid (28px, 12–18% opacity). See `references/backgrounds.md` for full CSS.

**Background diversity (carousels):** NEVER repeat the same bg on two adjacent slides. 3–5 slides → min 3 different systems. See `references/backgrounds.md` for the 7 systems (A–G).

**Headline fonts:** Satoshi Black (default) or Roboto Mono Bold (social proof / tech posts). Lime keyword highlight on dark bgs.

**Lime accent:** present on every slide — as gradient band, text highlight bar, tag bg, separator line, or diagonal split.

---

## 3. Layout Types

Pick the layout, then load its reference file for full specs and ASCII diagrams.

| # | Layout | When to use | Reference file |
|---|--------|-------------|----------------|
| 1 | Meme/Collage | Fun listicles, "who is X?" posts, scattered image grids | `references/layout-01-meme-collage.md` |
| 2 | Media + Analysis | Educational content, case studies, social proof carousels | `references/layout-02-media-analysis.md` |
| 3 | Story/Reels Overlay | Video covers, story posts, Reels thumbnails | `references/layout-03-story-reels-overlay.md` |
| 4 | Dashboard/Product Showcase | ClickUp features, product demos, "still using X?" posts | `references/layout-04-dashboard-product-showcase.md` |
| 5 | Floating Cards | Feature comparisons, "one tool replaces X" posts | `references/layout-05-floating-cards.md` |
| 6 | Stats/Numbers | Case study results, before/after, achievement highlights | `references/layout-06-stats-numbers.md` |
| 7 | Social Proof Collage | Engagement proof, reactions, comment-driven slides | `references/layout-07-social-proof-collage.md` |
| 8 | Brand Cover | Carousel cover slides, brand announcements | `references/layout-08-brand-cover.md` |
| 9 | Pain Point Collage | Problem→solution flows, "still doing X?" posts | `references/layout-09-pain-point-collage.md` |
| 10 | Blog Article Banner | Blog covers, LinkedIn/Facebook landscape banners | `references/layout-10-blog-article-banner.md` |
| 11 | Integration Map | ClickUp integrations, ecosystem diagrams | `references/layout-11-integration-map.md` |

**Content → Layout quick reference:**

| Content type | Primary | Alternative |
|---|---|---|
| Fun listicle | Meme/Collage | — |
| Case study / ad analysis | Media + Analysis | Stats/Numbers |
| Video/Reels cover | Story Overlay | — |
| ClickUp feature | Dashboard | Floating Cards |
| Tool comparison | Floating Cards | Dashboard |
| Stats / results | Stats/Numbers | Dashboard |
| Engagement proof | Social Proof Collage | Media + Analysis |
| Carousel cover | Brand Cover | Dashboard |
| Problem→solution | Pain Point Collage | Dashboard |
| Blog article cover | Blog Article Banner | Brand Cover |
| Integration visual | Integration Map | Floating Cards |
| CTA / final slide | (any with lime bg) | — |

---

## 4. Output Checklist

- [ ] Corner accent (black triangle + kite icon) present
- [ ] Arrow button in bottom-right corner
- [ ] Background pattern matches theme (grid for light, dots for dark)
- [ ] **CAROUSEL: each slide uses a different background system**
- [ ] **CAROUSEL: no two adjacent slides share the same bg+pattern**
- [ ] **CAROUSEL: at least 2 slides have glow accents**
- [ ] Text hierarchy clear (headline > subtitle > body > tags)
- [ ] Screenshots frameless (no device mockups)
- [ ] Lime accent present on every slide
- [ ] Canvas padding consistent (40–60px)
- [ ] Layout matches one of the 11 defined types
- [ ] Format-specific sizing applied (not just scaled)
- [ ] Content is in Ukrainian with English technical terms

---

*Part of the Byte&Kite Skills Collection*