X (Twitter) DESIGN.md

A comprehensive design guide for X's current visual identity (2024-2026)

1. Visual Theme & Atmosphere

Brand Philosophy

X embodies a minimalist, content-first design philosophy. The platform prioritizes rapid information consumption and real-time engagement through an interface that fades into the background, allowing content to take center stage.

Core Aesthetic Principles

• Dark-mode dominance: Pure black backgrounds create an immersive, distraction-free experience
• High contrast: Sharp contrast between text and background for maximum readability
• Monochromatic foundation: Black, white, and blue form the entire visual language
• Editorial clarity: Clean typography and generous whitespace enable rapid scanning
• Functional minimalism: Every element serves a purpose; decorative elements are eliminated

Emotional Tone

• Professional yet accessible: Serious enough for news, casual enough for memes
• Fast and immediate: Design suggests real-time, always-updating content
• Global and neutral: Culturally agnostic visual language
• Bold simplicity: The X logo represents transformation and confident rebrand

Visual Personality

2. Color Palette & Roles

Primary Colors

Extended Palette

Neutral Grays

Semantic Colors

Color Application Rules

Background Layers (Dark Mode):
├── Base: #000000 (pure black)
├── Surface: #16181C (cards, modals)
├── Elevated: #1D1F23 (hover states)
└── Borders: #2F3336 (dividers)

Background Layers (Light Mode):
├── Base: #FFFFFF (pure white)
├── Surface: #F7F9F9 (cards, sidebars)
├── Elevated: #EFF3F4 (hover states)
└── Borders: #EFF3F4 (dividers)

Light Mode Variant

3. Typography Rules

Font Stack

cssfont-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

Fallback Hierarchy

1. -apple-system (iOS/macOS San Francisco)
2. BlinkMacSystemFont (macOS Chrome San Francisco)
3. Segoe UI (Windows)
4. Roboto (Android/Chrome OS)
5. Helvetica, Arial (Universal fallbacks)

Type Scale

Typography Usage

Post Content

css.post-content {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: #E7E9EA; /* dark mode */
  word-wrap: break-word;
  white-space: pre-wrap;
}

Display Name

css.display-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: #E7E9EA;
}

Username/Handle

css.username {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: #71767B;
}

Timestamps

css.timestamp {
  font-size: 15px;
  font-weight: 400;
  color: #71767B;
}

Special Text Treatments

Links & Mentions

• Color: #1D9BF0 (X Blue)
• No underline by default
• Underline on hover
• Mentions (@) and hashtags (#) follow same styling

Quoted/Embedded Text

• Background: #16181C (dark mode)
• Border radius: 16px
• Padding: 12px
• Full width within post

4. Component Stylings

Buttons

Primary Button (Blue)

css.btn-primary {
  background-color: #1D9BF0;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  padding: 0 16px;
  height: 36px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #1A8CD8;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Secondary Button (Outline)

css.btn-secondary {
  background-color: transparent;
  color: #E7E9EA;
  font-size: 15px;
  font-weight: 700;
  padding: 0 16px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid #536471;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn-secondary:hover {
  background-color: rgba(239, 243, 244, 0.1);
  border-color: #E7E9EA;
}

Large Post Button

css.btn-post {
  background-color: #1D9BF0;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  padding: 0 32px;
  height: 52px;
  border-radius: 9999px;
  width: 100%; /* sidebar context */
}

Post Card

css.post-card {
  background-color: transparent;
  border-bottom: 1px solid #2F3336;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.post-card:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

Avatar

css.avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-large {
  width: 48px;
  height: 48px;
}

.avatar-profile {
  width: 134px;
  height: 134px;
  border: 4px solid #000000;
}

Action Icons

css.action-icon {
  width: 34.75px;
  height: 34.75px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}

/* Reply */
.action-reply:hover {
  background-color: rgba(29, 155, 240, 0.1);
  color: #1D9BF0;
}

/* Repost */
.action-repost:hover {
  background-color: rgba(0, 186, 124, 0.1);
  color: #00BA7C;
}

/* Like */
.action-like:hover {
  background-color: rgba(249, 24, 128, 0.1);
  color: #F91880;
}

/* Bookmark */
.action-bookmark:hover {
  background-color: rgba(29, 155, 240, 0.1);
  color: #1D9BF0;
}

/* Share */
.action-share:hover {
  background-color: rgba(29, 155, 240, 0.1);
  color: #1D9BF0;
}

Input Fields

css.input-field {
  background-color: transparent;
  border: 1px solid #333639;
  border-radius: 4px;
  padding: 12px;
  font-size: 17px;
  color: #E7E9EA;
  width: 100%;
  outline: none;
}

.input-field:focus {
  border-color: #1D9BF0;
  box-shadow: 0 0 0 1px #1D9BF0;
}

.input-field::placeholder {
  color: #71767B;
}

Search Box

css.search-box {
  background-color: #202327;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 12px 16px 12px 44px;
  font-size: 15px;
  color: #E7E9EA;
  width: 100%;
}

.search-box:focus {
  background-color: #000000;
  border-color: #1D9BF0;
}

Modal/Dialog

css.modal-overlay {
  background-color: rgba(91, 112, 131, 0.4);
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #000000;
  border-radius: 16px;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

Tabs

css.tab-item {
  padding: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #71767B;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tab-item:hover {
  background-color: rgba(231, 233, 234, 0.1);
}

.tab-item.active {
  color: #E7E9EA;
  font-weight: 700;
  border-bottom-color: #1D9BF0;
}

Verified Badge

css.verified-badge {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  fill: #1D9BF0; /* Blue checkmark */
}

.verified-badge-gold {
  fill: #E2B719; /* Organizations */
}

.verified-badge-gray {
  fill: #829AAB; /* Government/Multilateral */
}

Tooltips

css.tooltip {
  background-color: #5B7083;
  color: #FFFFFF;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  max-width: 200px;
}

5. Layout Principles

Three-Column Layout

┌─────────────────────────────────────────────────────────────┐
│                      Viewport (100%)                        │
├──────────┬─────────────────────────────┬───────────────────┤
│  Sidebar │        Main Feed            │   Right Sidebar   │
│  (275px) │        (600px)              │   (350px)         │
│          │                             │                   │
│  [Logo]  │  ┌─────────────────────┐   │  [Search]         │
│  [Nav]   │  │ What's happening?   │   │  [Trends]         │
│  [Post]  │  └─────────────────────┘   │  [Who to Follow]  │
│          │  ┌─────────────────────┐   │  [Premium]        │
│          │  │ Post Card           │   │                   │
│          │  │ ────────────────    │   │                   │
│          │  │ Post Card           │   │                   │
│          │  │ ────────────────    │   │                   │
│          │  │ Post Card           │   │                   │
│          │  └─────────────────────┘   │                   │
│          │                             │                   │
│  [User]  │                             │  [Footer Links]   │
└──────────┴─────────────────────────────┴───────────────────┘

Grid Specifications

Spacing System

Base Unit: 4px

Spacing Scale:
├── xs: 4px
├── sm: 8px
├── md: 12px
├── lg: 16px
├── xl: 20px
├── 2xl: 24px
├── 3xl: 32px
└── 4xl: 48px

Component Spacing

Content Width Constraints

css.main-content {
  max-width: 600px;
  width: 100%;
  border-left: 1px solid #2F3336;
  border-right: 1px solid #2F3336;
  min-height: 100vh;
}

.sidebar-right {
  width: 350px;
  padding: 12px 24px;
}

.sidebar-left {
  width: 275px;
  padding: 0 8px;
  position: fixed;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Navigation Structure

css.nav-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px;
  border-radius: 9999px;
  font-size: 20px;
  font-weight: 400;
  color: #E7E9EA;
  transition: background-color 0.2s;
}

.nav-item:hover {
  background-color: rgba(231, 233, 234, 0.1);
}

.nav-item.active {
  font-weight: 700;
}

6. Depth & Elevation

Elevation Levels

X uses a flat design approach with minimal shadows. Depth is communicated through:

1. Background color changes rather than shadows
2. Border treatments for separation
3. Overlay opacity for modals

Surface Hierarchy (Dark Mode)

Shadow Usage

css/* Minimal shadow use - primarily for floating elements */
.dropdown-menu {
  background-color: #000000;
  border-radius: 12px;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 15px rgba(255, 255, 255, 0.1);
}

/* Image lightbox */
.media-viewer {
  background-color: rgba(0, 0, 0, 0.9);
}

/* Sticky header */
.header-blur {
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
}

Z-Index Scale

Navigation:     100
Sticky Header:  200
Dropdowns:      300
Tooltips:       400
Modal Overlay:  500
Modal Content:  600
Toast/Alerts:   700

Border Treatments

css/* Primary dividers */
.divider {
  border-bottom: 1px solid #2F3336;
}

/* Card borders */
.card-border {
  border: 1px solid #2F3336;
}

/* Focus rings */
.focus-ring {
  box-shadow: 0 0 0 2px #1D9BF0;
}

/* Subtle glow on dropdowns */
.dropdown-glow {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

Animation & Transitions

css/* Standard transition */
.transition-default {
  transition: all 0.2s ease-out;
}

/* Button hover */
.transition-button {
  transition: background-color 0.2s ease;
}

/* Modal entrance */
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Like animation */
@keyframes like-burst {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

7. Do's and Don'ts

DO's

Colors

• Use pure black (#000000) as the primary background in dark mode
• Apply X Blue (#1D9BF0) sparingly for interactive elements and links
• Maintain high contrast ratios (minimum 4.5:1 for text)
• Use semantic colors consistently (green for repost, pink for like)

Typography

• Stick to the system font stack for performance and native feel
• Use 15px as the base font size for body text
• Apply bold weight (700) for display names and emphasis
• Keep line height at 20px for comfortable reading

Components

• Use 9999px border-radius for all pill-shaped elements (buttons, avatars, tags)
• Keep action buttons icon-only with count beside them
• Provide clear hover states with subtle background color changes
• Use full-width layouts within the 600px content area

Layout

• Center the three-column layout on wide screens
• Fix the left sidebar for persistent navigation
• Use infinite scroll for timeline content
• Maintain consistent 12-16px padding on cards

Interactions

• Show loading states with subtle skeleton screens
• Provide immediate visual feedback on interactions
• Keep animations under 200ms for snappy feel
• Support keyboard navigation throughout

DON'TS

Colors

• Don't use true gray backgrounds (avoid #808080 mid-grays)
• Don't apply gradients anywhere in the UI
• Don't use colored backgrounds for cards or sections
• Don't deviate from the monochromatic + blue palette

Typography

• Don't use decorative or custom fonts
• Don't go below 11px for any text
• Don't use all-caps except for specific labels
• Don't center-align body text

Components

• Don't use shadows for elevation (use background colors instead)
• Don't add borders to buttons
• Don't use square corners on interactive elements
• Don't create custom icon styles (use consistent line icons)

Layout

• Don't exceed 600px for main content width
• Don't use multi-column layouts within the feed
• Don't implement horizontal scrolling for content
• Don't hide primary navigation

Interactions

• Don't use bounce or elastic animations
• Don't implement long-press as primary interaction (desktop)
• Don't auto-play videos with sound
• Don't use modals for simple confirmations

Common Mistakes to Avoid

8. Responsive Behavior

Breakpoint System

Desktop (≥1100px)

┌──────────────────────────────────────────────────┐
│ [Sidebar 275px] [Feed 600px] [Right Bar 350px]   │
│ - Full nav with labels                           │
│ - All three columns visible                      │
│ - Trending sidebar shown                         │
└──────────────────────────────────────────────────┘

Tablet (1005-1099px)

┌──────────────────────────────────────────────────┐
│ [Sidebar 68px] [Feed 600px] [Right Bar 350px]    │
│ - Icons only navigation                          │
│ - X logo only (no wordmark)                      │
│ - Three columns, narrow sidebar                  │
└──────────────────────────────────────────────────┘

Mobile Large (688-1004px)

┌──────────────────────────────────────────────────┐
│ [Sidebar 68px] [Feed 600px]                      │
│ - Right sidebar hidden                           │
│ - Icon navigation only                           │
│ - Trends moved to Explore tab                    │
└──────────────────────────────────────────────────┘

Mobile (<688px)

┌─────────────────────────┐
│ [Header with menu]      │
│ [Feed full width]       │
│ [Bottom navigation]     │
│                         │
│ - Tab bar at bottom     │
│ - Hamburger menu        │
│ - FAB for compose       │
└─────────────────────────┘

Mobile-Specific Components

Bottom Navigation Bar

css.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 53px;
  background-color: #000000;
  border-top: 1px solid #2F3336;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

Floating Compose Button

css.fab-compose {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background-color: #1D9BF0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

Mobile Header

css.mobile-header {
  position: sticky;
  top: 0;
  height: 53px;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #2F3336;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

Touch Optimizations

• Minimum touch target: 44x44px
• Swipe gestures for navigation between tabs
• Pull-to-refresh on timeline
• Long-press for additional options menu
• Swipe actions on posts (experimental)

Image Responsiveness

css.media-container {
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.media-container img {
  width: 100%;
  height: auto;
  max-height: 510px;
  object-fit: cover;
}

9. Agent Prompt Guide

System Prompt for X-Style UI Generation

You are an AI assistant specialized in generating user interfaces that match X's (formerly Twitter) design system. Follow these specifications precisely:

VISUAL FOUNDATION:
- Use pure black (#000000) as primary background
- White (#E7E9EA) for primary text
- X Blue (#1D9BF0) for interactive elements and links only
- Gray (#71767B) for secondary text and placeholders
- Border gray (#2F3336) for all dividers

TYPOGRAPHY:
- System font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
- Base size: 15px
- Line height: 20px
- Bold (700) for names and emphasis
- Regular (400) for body content

COMPONENT PATTERNS:
- Buttons: Pill-shaped (border-radius: 9999px)
- Cards: Subtle borders, no shadows
- Avatars: Perfect circles (border-radius: 9999px)
- Icons: Line style, 18-24px
- Inputs: Minimal borders, blue focus states

LAYOUT RULES:
- Max content width: 600px
- Card padding: 12px 16px
- Consistent 4px spacing grid
- Border-based elevation only

INTERACTION STATES:
- Hover: Subtle background (#1D1F23)
- Active: Slightly darker
- Focus: Blue ring (#1D9BF0)
- Disabled: 50% opacity

Component Generation Prompts

Generate a Post Card

Create a post card component with:
- 40px circular avatar on the left
- Display name (bold) and @username (gray) on same line
- Timestamp with "· Xh" format
- Body text at 15px
- Action bar with reply, repost, like, bookmark, share icons
- Hover state with subtle gray background
- Bottom border divider

Generate a Profile Header

Create a profile header with:
- Banner image (200px height, full width)
- Circular avatar (134px) overlapping banner
- Display name with verified badge
- @username in gray
- Bio text (15px)
- Following/Followers counts
- Follow/Following button (pill-shaped)

Generate Navigation Sidebar

Create a navigation sidebar with:
- X logo at top (28px)
- Vertical nav items with icons (24px) and labels
- Items: Home, Explore, Notifications, Messages, Grok, Lists, Bookmarks, Communities, Premium, Verified Orgs, Profile, More
- Full-width Post button at bottom
- User profile summary at very bottom
- Pill-shaped hover states

Color Usage Quick Reference

When to use X Blue (#1D9BF0):
- Links and mentions
- Primary buttons
- Focus states
- Selected tab indicators
- Follow button

When to use Pure Black (#000000):
- Page backgrounds
- Modal backgrounds
- Input backgrounds (focused)

When to use Gray (#71767B):
- Timestamps
- Usernames (@handles)
- Placeholder text
- Secondary information
- Disabled states

When to use White (#E7E9EA):
- Display names
- Post content
- Button text
- Headlines
- Active icons

Semantic Action Colors

Reply action: #1D9BF0 (blue)
Repost action: #00BA7C (green)
Like action: #F91880 (pink)
Bookmark action: #1D9BF0 (blue)
Share action: #1D9BF0 (blue)
Delete/Error: #F4212E (red)

Common UI Patterns

Loading States:
- Use skeleton screens with #2F3336 animated bars
- Pulse animation at 1.5s intervals
- Match exact content layout

Empty States:
- Large icon (48px) centered
- Bold headline
- Gray descriptive text
- Optional blue CTA button

Error States:
- Red accent (#F4212E) for alerts
- Keep messaging concise
- Provide retry actions

Success States:
- Minimal celebration
- Quick toast notifications
- Auto-dismiss after 3s

Quick Reference Card

Last updated: 2024-2026 Design System Based on X (formerly Twitter) web and mobile applications