| name | bytekite-design-system |
| description | 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. |
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
