⚠️ Design system CSS not found. Check the path in cms/docs.config.js → designSystemPath, then re-run npm run docgen.

X

The header loses its corner to the avatar, and the timeline crops the rest

Social / X
Download .md file
Open .md in new tab
On this page
  • Regulations
  • Standards
  • Formats
  • Tools
  • Don't

X is a rented channel and the brand is not live on it yet. These guidelines exist so launch day starts on-brand instead of from scratch. Its catch: the avatar punches into the header's lower-left corner, and the timeline recrops any post image that is not 16:9. The studio team owns it.

Regulations

X sets these per format and changes them without notice. Nothing here is ours to negotiate.

Format Size / ratio Safe area File format Max weight Notes
Profile photo 400×400 · 1:1 circular crop, centre the mark JPG/PNG 2 MB no animated GIF
Header 1500×500 · 3:1 avatar overlaps the lower left, and edges crop on mobile, so keep the message centred JPG/PNG roughly 5 MB, working cap 3000×1000 export reads sharper on high-DPI
Post image (single) 1600×900 · 16:9 exact 16:9 fills the card uncropped JPG/PNG/GIF/WebP 5 MB other ratios get cropped in the timeline

X publishes the profile-photo rules but not a firm header cap, so the 5 MB figure is the current working consensus rather than a platform figure. The reliable rules here are geometric: a 3:1 header with the lower left surrendered to the avatar, and 16:9 post images or the timeline chooses the crop for you. Verified 2026-07-05.

Standards

  • Logo: the avatar variant fills the profile photo, which X clips to a circle and floats over the header. Variants and clear space: 4.1 Logo
  • Colour: header and post graphics carry the brand palette: 4.2 Colour
  • Type: designed post images use the brand type roles: 4.3 Typography
  • Surrender the corner. Design the header as though its lower left does not exist, because on every profile view it does not.
  • Export at 16:9 or accept someone else's crop. The sizes in the table are ours; the ratios are the platform's, and the timeline enforces them whether or not the framing survives.

Formats

Design commissions the header and post-image blanks, with the avatar overlap marked, when the channel activates. Each frame below holds its format at the exact ratio until the template lands.

Header, 1500×500 (3:1)

Post image, 1600×900 (16:9)

Tools

  • Image Placeholder, blanks at the header and post sizes, for laying out drafts before the imagery exists

No X-specific tool exists yet. A header preview that shows where the avatar lands is the obvious first one, since that corner is the thing people forget. Request it when the channel activates.

Don't

Don't use the header's lower left

The profile photo floats over that corner on every profile view. A logo or tagline placed there is permanently covered.

Don't post off-ratio images

Anything that isn't 16:9 gets cropped by the timeline, and the timeline doesn't know where the logo is. Export at 1600×900 and keep the framing.

Don't put a lockup in the circle

The profile slot is a circular crop, floated over the header. A horizontal lockup loses its ends and its balance. The avatar variant is built for this crop.

On this page
  • Regulations
  • Standards
  • Formats
  • Tools
  • Don't
Previous LinkedIn
Next TikTok

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback

Send feedback

© 2026 By Default