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
Part of the Byte&Kite Skills Collection
1---2name: bytekite-design-system3description: 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.4---56# BYTE&KITE Design System78**Pair with:** `../bytekite-brand-creatives/skill.md` for colors, fonts, and logo rules.910**Reference files to load on demand:**11- Layout specs: `references/layout-01-meme-collage.md` through `references/layout-11-integration-map.md`12- Background systems + CSS: `references/backgrounds.md`13- Composition rules + format adaptation: `references/composition.md`14- Brand assets: `assets/ref_01.png` – `assets/ref_06.png` (primary examples; ref_07–ref_25 available)1516---1718## 1. Formats1920| Format | Size | Ratio | Usage |21|-----------|-------------|-------|--------------------------------|22| Square | 1080×1080 | 1:1 | Instagram feed, carousel |23| Story | 1080×1920 | 9:16 | Stories, Reels, vertical video |24| Landscape | 1200×628 | ~1.9:1| LinkedIn, Facebook, ads |2526Design **format-first** — not a cropped version of another format.2728---2930## 2. Universal Elements (present on every creative)3132**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.3334**Arrow button:** bottom-right corner. Black square (48–64px), lime arrow inside. Inverted (lime bg, black arrow) on lime backgrounds.3536**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.3738**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).3940**Headline fonts:** Satoshi Black (default) or Roboto Mono Bold (social proof / tech posts). Lime keyword highlight on dark bgs.4142**Lime accent:** present on every slide — as gradient band, text highlight bar, tag bg, separator line, or diagonal split.4344---4546## 3. Layout Types4748Pick the layout, then load its reference file for full specs and ASCII diagrams.4950| # | Layout | When to use | Reference file |51|---|--------|-------------|----------------|52| 1 | Meme/Collage | Fun listicles, "who is X?" posts, scattered image grids | `references/layout-01-meme-collage.md` |53| 2 | Media + Analysis | Educational content, case studies, social proof carousels | `references/layout-02-media-analysis.md` |54| 3 | Story/Reels Overlay | Video covers, story posts, Reels thumbnails | `references/layout-03-story-reels-overlay.md` |55| 4 | Dashboard/Product Showcase | ClickUp features, product demos, "still using X?" posts | `references/layout-04-dashboard-product-showcase.md` |56| 5 | Floating Cards | Feature comparisons, "one tool replaces X" posts | `references/layout-05-floating-cards.md` |57| 6 | Stats/Numbers | Case study results, before/after, achievement highlights | `references/layout-06-stats-numbers.md` |58| 7 | Social Proof Collage | Engagement proof, reactions, comment-driven slides | `references/layout-07-social-proof-collage.md` |59| 8 | Brand Cover | Carousel cover slides, brand announcements | `references/layout-08-brand-cover.md` |60| 9 | Pain Point Collage | Problem→solution flows, "still doing X?" posts | `references/layout-09-pain-point-collage.md` |61| 10 | Blog Article Banner | Blog covers, LinkedIn/Facebook landscape banners | `references/layout-10-blog-article-banner.md` |62| 11 | Integration Map | ClickUp integrations, ecosystem diagrams | `references/layout-11-integration-map.md` |6364**Content → Layout quick reference:**6566| Content type | Primary | Alternative |67|---|---|---|68| Fun listicle | Meme/Collage | — |69| Case study / ad analysis | Media + Analysis | Stats/Numbers |70| Video/Reels cover | Story Overlay | — |71| ClickUp feature | Dashboard | Floating Cards |72| Tool comparison | Floating Cards | Dashboard |73| Stats / results | Stats/Numbers | Dashboard |74| Engagement proof | Social Proof Collage | Media + Analysis |75| Carousel cover | Brand Cover | Dashboard |76| Problem→solution | Pain Point Collage | Dashboard |77| Blog article cover | Blog Article Banner | Brand Cover |78| Integration visual | Integration Map | Floating Cards |79| CTA / final slide | (any with lime bg) | — |8081---8283## 4. Output Checklist8485- [ ] Corner accent (black triangle + kite icon) present86- [ ] Arrow button in bottom-right corner87- [ ] Background pattern matches theme (grid for light, dots for dark)88- [ ] **CAROUSEL: each slide uses a different background system**89- [ ] **CAROUSEL: no two adjacent slides share the same bg+pattern**90- [ ] **CAROUSEL: at least 2 slides have glow accents**91- [ ] Text hierarchy clear (headline > subtitle > body > tags)92- [ ] Screenshots frameless (no device mockups)93- [ ] Lime accent present on every slide94- [ ] Canvas padding consistent (40–60px)95- [ ] Layout matches one of the 11 defined types96- [ ] Format-specific sizing applied (not just scaled)97- [ ] Content is in Ukrainian with English technical terms9899---100101*Part of the Byte&Kite Skills Collection*
Lozovoi-Rodion