---
name: carousel-design-system
description: Complete Instagram carousel and visual design system - 20 Swiss Design styles, Instagram frame specs, export pipeline, brand color derivation, typography pairings, 7 output formats. Use when creating carousels, presentations, posts, PDFs, or any visual content.
---

# Instagram Carousel & Visual Design System

## SQUAD FILM COLOR TOKENS (derived from brand)

```
BRAND_PRIMARY   = #C9A84C    // Gold/amber - main accent
BRAND_LIGHT     = #E0C96E    // Light gold - tags on dark
BRAND_DARK      = #8B7333    // Dark gold - CTA text, gradient anchor
LIGHT_BG        = #F5F0E8    // Warm off-white
LIGHT_BORDER    = #E8E0D0    // Dividers on light slides
DARK_BG         = #0A0A0A    // Near-black with warm tint
SQUAD_CYAN      = #1AA7D4    // Secondary accent (from logo ///)
```

Brand gradient: `linear-gradient(165deg, #8B7333 0%, #C9A84C 50%, #E0C96E 100%)`

## INSTAGRAM FRAME SPECS

- Frame width: ALWAYS 420px
- Viewport: 420x525px (4:5 ratio)
- Export: 1080x1350px via device_scale_factor 2.5714
- Header: avatar + handle + three dots menu (ALWAYS visible)
- Dots: between viewport and actions, white bg, padding 12px
- Navigation: right half = next, left half = prev, plus drag/swipe
- Three dots menu dropdown: "Baixar todos (PNG)", "Baixar slide atual", "Copiar legenda", "Baixar legenda (TXT)"
- Download uses html2canvas with scale 2.5714
- Always load html2canvas via CDN

## 20 DESIGN STYLES

### Style 01: ANTHROPIC© — Dark Brutalist Editorial
- Dark bg, heavy analog grain, condensed bold headline
- Red/accent bar as censura visual cutting across composition
- P&B photography as background
- Tracking negativo agressivo on headlines
- Three zones: title top > color bar middle > metadata footer
- **Best for:** label, underground, raw, premium dark

### Style 02: SHABAN IDDRISU© — Neo-Swiss Grid Web
- White/neutral, asymmetric blocks, P&B hero photo
- Geographic coordinates as decorative data
- Four quadrant asymmetric grid
- **Best for:** portfolio, personal brand, creative

### Style 03: CHIMI — Techwear Editorial
- Dark/technical, split vertical (gray left, black right)
- Giant decorative glyphs as texture
- Extreme weight mixing (ultra-bold + ultra-light)
- **Best for:** fashion, tech product, premium product

### Style 04: MONSTER CHILDREN — Swiss Minimal
- B&W only, zero color, maximum restraint
- Black horizontal bar cutting photo = space for brand
- Absolute economy of elements
- **Best for:** editorial, cultural magazine, restraint

### Style 05: TRACK NUMBER 09 — Retro-Modern
- Orange top / cream bottom horizontal split
- Giant numeral crossing the split
- Analog paper grain texture
- **Best for:** music, culture, retro-premium

### Style 06: DEEP — Swiss Pure (International Typographic Style)
- Off-white base, single red accent word
- 4-column grid, numbered sections
- Massive white space as active element
- **Best for:** publications, manifestos, academic

### Style 07: KATIE HUNTER — Swiss Minimal Web
- B&W only, heavy type as only ornament
- Brackets [ ] for labels (code convention)
- Giant typography as CTA (no buttons)
- **Best for:** minimal portfolio, digital designer

### Style 08: BEATROOT STUDIO — Swiss Grid Airy
- Exposed grid lines as aesthetic
- Single accent color in exactly 2 instances
- Lowercase brand name
- **Best for:** studios, agencies, services

### Style 09: COLUMNS & ROWS — Dark Swiss Editorial
- Photo bleeds 100%, grid lines visible over photo
- Headline at footer (inverted convention)
- Multiple info layers simultaneously
- **Best for:** dense editorial, dark magazine

### Style 10: HAUS OF SHIV — Atmospheric Minimal
- Motion blur photo as sole visual
- Typography as footer, atmosphere as product
- Handwritten signature over clean type
- **Best for:** personal brand, creative freelancer

### Style 11: STAPLETOM — Label/Tag Identity
- Physical label/tag floating over B&W portrait
- Barcode as dual graphic/functional element
- Serial number as identity
- **Best for:** fashion, product identity, serial branding

### Style 12: KULTURBAUKASTEN — Wayfinding Editorial
- Dense informational, academic hierarchy
- Colored squares as category indexers
- Historical photos as documentation
- **Best for:** cultural wayfinding, museums, heritage

### Style 13: BWZ RAPPI — Contemporary Swiss Wayfinding
- Vertical gradient (green > turquoise > blue)
- Rounded lowercase logo
- "Fokus." with declarative period
- **Best for:** campus signage, institutional, public

### Style 14: SQUAD DEMO REEL — Dark Cinematic
- Black dominant + P&B city photo + cyan glitch/scan-lines
- Serif italic + sans bold typographic pair
- "//" in cyan as brand DNA separator
- Bilingual (EN/PT)
- **Best for:** portfolio opener, stories, reels cover

### Style 15: SQUAD COLLAGE — Analog Before/After
- Off-white bg, original photo vs collage treatment
- Tape, torn paper edges, stitching visible
- Before/after as narrative format
- **Best for:** differentiation, problem/solution

### Style 16: SQUAD DEPOIMENTO — Testimonial Real Estate
- Full-bleed warm interior photo
- Sans-bold + serif-italic typographic pair
- "//" in cyan between project and client
- Logo bar on solid black corner
- **Best for:** social proof, client case

### Style 17: SQUAD VIVENCIA — Atmospheric B&W Editorial
- Motion blur figure as background
- Photo-within-photo as reality window
- Poetic prose as copy
- 1:1 format (adapt to 4:5)
- **Best for:** experience, lifestyle, brand immersion

### Style 18: SQUAD FILM PROJECT — Documentary Poster
- B&W landscape with heavy grain, low exposure
- Series numbering ("SERIES 01")
- Category tags with "/" separator
- Co-branding lockup (producer + client)
- **Best for:** project case, editorial series

### Style 19: SQUAD END CARD — Film End Card
- Vertical text (90° rotation) as architectural frame
- "tempo. natureza. verdade." declarative periods
- "/" in cyan as phrase marker
- "film by SQUADFilm" as authorship credit
- **Best for:** final slide, co-branding, closing

### Style 20: SQUAD MANIFESTO — Brand Positioning
- Split horizontal: black solid (40%) + warm photo (50%) + footer (10%)
- Manifesto phrase as content: "O [SEGMENTO] nao precisa de mais [COMUM]. Precisa de [ELEVADO]."
- Keywords in serif italic cyan
- Footer in 4 equidistant columns
- **Best for:** hook slide, positioning, manifesto

## TYPOGRAPHIC PRINCIPLES

### Pairs
| Style | Heading | Body |
|-------|---------|------|
| Editorial/premium | Playfair Display 700 | DM Sans 400 |
| Modern/clean | Plus Jakarta Sans 700 | Plus Jakarta Sans 400 |
| Technical/sharp | Space Grotesk 700 | Space Grotesk 400 |
| Bold/expressive | Fraunces 700 | Outfit 400 |
| Warm/approachable | Lora 700 | Nunito Sans 400 |

### Squad Film Signature
- Sans-serif condensed bold + serif italic = tension pair
- "//" in cyan as separator (DNA from "///FILM" logo)
- Declarative period on single words: "Fokus." "studio." "Cinema."
- Brackets [ ] for categories/labels
- 4-column footer for closing credit

### Font Sizes (420px base)
- Headings: 28-34px, weight 600, letter-spacing -0.3 to -0.5px
- Body: 14px, weight 400, line-height 1.5
- Tags/labels: 10px, weight 600, letter-spacing 2px, uppercase
- Step numbers: 26px, weight 300
- Small: 11-12px

## SLIDE ARCHITECTURE

### Standard Narrative Arc (7 slides)
1. Hero (LIGHT_BG) — hook, bold statement
2. Problem (DARK_BG) — pain point
3. Solution (brand gradient) — the answer
4. Features (LIGHT_BG) — what you get
5. Details (DARK_BG) — depth, specs
6. How-to (LIGHT_BG) — steps/process
7. CTA (brand gradient) — call to action, NO arrow, full progress bar

### Required Slide Elements
- Progress bar (bottom, 3px, fills by percentage)
- Swipe arrow (right edge, except last slide)
- Light/dark alternation for rhythm

## 7 OUTPUT FORMATS

| Format | Ratio | Export Size | HTML Width |
|--------|-------|-------------|------------|
| Carousel IG | 4:5 | 1080x1350 | 420px |
| PDF A4 Landscape | 1.414:1 | 3508x2480 | 842px |
| PDF A4 Portrait | 1:1.414 | 2480x3508 | 595px |
| Post 4:5 | 4:5 | 1080x1350 | 420px |
| Post 1:1 | 1:1 | 1080x1080 | 420px |
| Post 16:9 | 16:9 | 1920x1080 | 640px |
| Blog | Responsive | max 800px | 800px |

## EXPORT PIPELINE
- Playwright with device_scale_factor (NOT viewport resize)
- Hide IG frame chrome for export
- Wait 3000ms for fonts
- Disable transition on track before screenshot
- Use Python for HTML generation (never shell scripts)
- Embed images as base64

## REUSABLE COMPONENTS
- Progress bar (adapts light/dark)
- Swipe arrow (adapts light/dark)
- Tag pills, strikethrough pills
- Prompt/quote box
- Feature list (icon + label + desc)
- Numbered steps
- CTA button (final slide)
- Color swatches