X (formerly Twitter)

Overview

X is a real-time information network designed to surface what's happening now through direct, unfiltered human expression. The design system embodies 'Functional Minimalism'—a philosophy that strips away ornament to expose pure utility, where every pixel serves the core mission of rapid information discovery and sharing. The aesthetic is deliberately austere: pure white backgrounds (rgb(255, 255, 255)), deep charcoal text (rgb(15, 20, 26)), and a single vibrant accent blue (#1d9bf0) that commands attention on interactive elements. The emotional response is one of immediacy and trust—users feel they are accessing unmediated reality, not a curated experience.

The brand voice is direct, urgent, and conversational. Sentences are short and punchy ('Happening now.' not 'Discover what is currently occurring'). The vocabulary avoids corporate jargon; instead, it uses active verbs and present tense to convey liveness. Tone is neutral and factual, never breathless or promotional. Example sentence in brand voice: 'See what's happening in the world right now.'

Colors

The color system is built on a foundation of extreme contrast and clarity. Surface colors range from pure white (#ffffff) at the brightest to soft grays (#f3f4f6, #e8eaed) for container differentiation, enabling users to scan content hierarchically without cognitive load. The on-surface text color is a near-black (#0f141a, rgb(15, 20, 26)) that meets WCAG AAA contrast ratios (19:1) against white backgrounds, ensuring legibility for all users including those with low vision.

Primary (#1d9bf0) is the signature accent—a medium-saturation cyan-blue used exclusively on call-to-action buttons, links, and focus states. It appears in the 'Continue with phone' button and all interactive affordances. Secondary (#1a73e8) is a deeper, more saturated blue reserved for secondary actions and status indi

Typography

The type system uses TwitterChirp as the primary font family, with a fallback stack of system fonts (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto) to ensure consistent rendering across platforms. The hierarchy is built on six levels: Display (64px, 600 weight) for hero headlines like 'Happening now.'; Headline-lg (40px, 600) for section titles; Headline-md (28px, 600) for subsections; Title-lg (20px, 600) for card headers; Body-lg (18px, 400) for long-form content; Body-md (15px, 400) for standard interface text; Label-md (14px, 500) for buttons and form labels; Label-sm (12px, 500) for metadata and timestamps.

Line heights are set generously (1.5x to 1.8x font size) to maximize readability on screens. Letter-spacing is minimal (-0.02em on display, 0em on body) to maintain the comp

Layout

The page uses a fluid, single-column layout with a maximum container width of 1200px, centered on the viewport. The grid is 12 columns with 16px gutters (spacing.gutter). Content sections are separated by 24px (spacing.lg) vertical spacing, creating a rhythm that feels neither cramped nor wasteful. The hero section ('Happening now.' + CTAs) occupies the full viewport height on desktop, with the X logo positioned on the right at 60% of viewport width. Form inputs use full width within their container, with 16px padding (spacing.md) and 48px height for touch accessibility.

Whitespace is used strategically: 8px (spacing.sm) between related elements (e.g., button and secondary text), 16px (spacing.md) between distinct sections, 24px (spacing.lg) between major layout blocks. The container max-

Elevation & Depth

Depth in this system is achieved through subtle shadows and border treatments rather than color shifts. The elevation scale has three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for cards and popovers; md (0 4px 12px rgba(0, 0, 0, 0.1)) for modals and elevated surfaces; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for top-level overlays. Shadows use a soft, diffused blur (4px to 8px) and low opacity (8–12%) to avoid harsh contrast. All interactive elements have a 1px solid border at outline-variant (#c4c7c8) to define edges crisply without relying on shadow alone. On focus, elements receive a 3px inset

Shapes

The shape philosophy is 'Pragmatic Roundness'—curves are used sparingly and purposefully to signal interactivity without sacrificing the austere, functional aesthetic. Buttons use full rounding (border-radius: 9999px) to create pill-shaped affordances that are unmistakably clickable; this 40px-tall button with 9999px radius creates a distinctive silhouette. Input fields use 6px (rounded.DEFAULT) for subtle definition without distraction. Cards and containers use 12px (rounded.lg) to soften corners while maintaining a structured appearance. Dividers and borders have 0px radius (sharp edges) to

Components

Action Elements Buttons are the primary affordance for user intent. The primary button uses background {colors.primary} (#1d9bf0), text {colors.on-primary} (white), 12px horizontal padding, 40px height, and 9999px border-radius. On hover, background transitions to {colors.primary-container} (#1a8cd8) over 200ms. Secondary buttons use a transparent background with a 1px border at {colors.outline-variant} and text in {colors.primary}; on hover, the background becomes {colors.surface-container-low} (#f3f4f6). Ghost buttons (tertiary actions) have no border or background, only text in {colors.on-surface}; on hover, background becomes {colors.surface-container-high} (#e8eaed). All buttons use {typography.label-md} (14px, 500 weight) and include a 150–200ms transition on all properties.

###

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1d9bf0) exclusively on primary CTAs and focus states—it is the only accent color users should see for interactive affordances.
• Do maintain minimum 16px padding on all interactive elements to ensure 44px touch targets on mobile devices.
• Do apply {elevation.md} (0 4px 12px rgba(0, 0, 0, 0.1)) shadows only on hover or elevated states; default cards use {elevation.sm}.
• Do use TwitterChirp font family with fallback to system fonts; never substitute with generic sans-serif.
• Do keep line-height at 1.5x or higher for body text to maximize readability on screens.
• Do use 9999px border-radius only on buttons; use 12px for cards and 6px for inputs to maintain hierarchy.

**Don't**

• Don't use secondary (#1a73e8) or tertiary (#262626) colors on primary CTAs—they dilute the primary accent and confuse user intent.
• Don't apply shadows to more than one layer at a time; use either shadow or border, not both, except on focus states.
• Don't exceed 70 characters per line of body text; use the 1200px container max-width to enforce this.
• Don't use color alone to convey status; always pair with text labels or icons (e.g., error red + 'Error' label).
• Don't animate transitions faster than 150ms or slower than 400ms; use 200ms as the default for all state changes.
• Don't reduce padding below 12px on interactive elements; this breaks touch accessibility and feels cramped.