INTO Consulting INTO Consulting
Start typing to search.
↑ ↓ navigate Enter open Esc close Full-page search →

Media framework

Social Media

Foundation source: use `contexts/design-foundations-system.html` for type role

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: Warm 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.