⚠️ 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

Touchpoints / X
Download .md file
Open .md in new tab

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

Identity here

  • Logo: the avatar variant fills the profile photo; X clips it to a circle and floats it 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.

Specs

Asset Size Safe area 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; edges crop on mobile, keep the message centred JPG/PNG ~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

Specs verified against platform documentation: 2026-07-05.

X publishes the profile-photo rules but not a firm header cap. The ~5 MB figure is the current working consensus. The reliable rule is geometric: 3:1 header with the lower-left surrendered to the avatar, 16:9 post images or the timeline chooses the crop.

Templates & assets

Header and post-image blanks (with the avatar overlap marked) get commissioned from design 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)

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
  • Identity here
  • Specs
  • Templates & assets
  • 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