Foundation source: use contexts/design-foundations-system.html for type role
discipline, baseline-derived spacing, reading path, bento limits, and
image/text rules before adapting to platform-safe areas.
Canonical source template: templates/social/carousel-outline.md.
System Waterfall
Apply in order: foundation context, tokens and brand systems, media framework, channel data, this social sheet, social template, platform safe-area/export checks. Pixel dimensions are output geometry; composition still follows the foundation reading path, bento limits, type hierarchy, and image/text rules.
Media
Default formats:
- LinkedIn feed: 1200 x 1200.
- LinkedIn banner: 1584 x 396.
- LinkedIn article cover: 1200 x 627.
- Instagram square: 1080 x 1080.
- Instagram portrait: 1080 x 1350.
- Instagram story/reel cover: 1080 x 1920.
Surface: Cool Light by default. Blueprint Dark allowed for video title cards, technical diagrams, or high-contrast series.
Margins And Safe Areas
- Feed square: 96px margin.
- Feed portrait: 96px margin top/sides, 140px bottom.
- Story/reel: 120px top, 120px sides, 260px bottom.
- Instagram bottom-right is unsafe because platform UI can cover controls, captions, or buttons. Do not place logos, page numbers, or key text there.
- LinkedIn banner: keep identity and text inside the center 1350 x 300 zone.
Typography Scaling
- Primary claim: Newsreader 72-112px depending on length.
- Supporting line: Lexend 30-42px.
- Label/caption: IBM Plex Mono 18-24px.
- Smallest acceptable social text: 24px on 1080px assets.
Spacing
- Claim layouts: 2-4rem source equivalent.
- Multi-card carousel internal rhythm: 1.5-2.5rem source equivalent.
- Label to title: 1.5rem source equivalent.
- Logo clear space: 2x mark height.
- Keep all internal spacing on the source baseline. Do not nudge text by arbitrary pixels to make overlong claims fit.
Grid
- Square/portrait: 6 columns, 6 or 8 rows, 24px gap.
- Story/reel: 6 columns, 10 rows, 24px gap.
- LinkedIn banner: 12 columns, 3 rows, 24px gap.
Layout System
- Claim card: one line of argument, no paragraph.
- Proof card: one number, one context line.
- Process card: 3-5 steps maximum.
- Diagram card: one workflow, not a full architecture map.
- Carousel: one idea per card; final card carries CTA.
- Use Z-pattern for sparse single-card claims and vertical/layer-cake scanning for carousels. F-pattern behavior means the card is too dense.
- Bento-style cards are allowed only for peer proof modules or one dominant proof plus supporting modules. Do not make every carousel a box grid.
Medium Constraints
- Social is skimmed on phone screens. Dense proposal language fails.
- Do not use tiny captions to carry meaning.
- Keep key content away from platform chrome.
- Avoid logos on every carousel card unless the format needs standalone circulation.
- Photography and editorial texture must leave quiet space for text. Never place type over faces, hands, tools, or the focal evidence object. Captions and sources stay visually attached.
Native Video And Post Copy
- Feed video follows
media/video.md#social-film-linkedin-and-instagram-feed-45: 4:5, 15 seconds, sound-off first, persistent monochrome mark and address 90px from the bottom corners. - The post copy carries what the film cannot: numbered commitments, lists and detail. Its first two lines must earn the “see more” on their own and must not repeat the film’s first frame word for word.
- Write the English post first; translate to Quebec French at finalization, matching the French film lines exactly. Typographic apostrophes; a non-breaking space before colons only.