Screenshot of X Formerly Twitter

X Formerly Twitter

create.video

The reference for a content-first social product UI where one X Blue (#1d9bf0) accent punctures an otherwise monochrome white interface, hairline borders replace shadows, and every control is an infinite-radius pill.

Media Streaming flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
TwitterChirp
body
TwitterChirp
mono

Do / Don't

Reference it for

  • Single-accent discipline: reserve X Blue #1d9bf0 for links and taps only, leave everything else ink #0f1419 on paper #ffffff so colour signals action
  • Three-column app shell: fixed left icon nav, a bounded centre feed column (~600px), a right rail for auth/context cards
  • Hairline dividers in mist grey #eff3f4 / #cfd9de instead of shadows to separate feed rows and sections
  • Pill everything: black solid pills for primary CTAs (Create account, Follow), outlined pills for secondary (Log in, Sign up), radius 9999px
  • Muted metadata in graphite #536471 for handles, timestamps, follower counts, sitting under bold ink names
  • Compact stat row pattern: bold count + muted label inline (546 Following, 4,355 Followers) for profile headers
  • Tab strip with an underline indicator (Posts / Replies / Media) in X Blue under the active label
  • Full-bleed orange banner behind a circular avatar that overlaps the banner/content seam, ringed in paper white

Do not copy

  • The X wordmark/logo and the circular avatar of the real account shown
  • TwitterChirp with the ss01 stylistic set (proprietary; substitute a neutral grotesk)
  • The exact X Blue #1d9bf0 as your own brand accent
  • The blue verified check badge and any platform-specific iconography
  • The Grok/refresh and platform nav glyphs verbatim
  • The '2026 X Corp' footer link cluster and legal microcopy