---
version: alpha
name: "X"
website: "https://x.com"
description: >-
  Twitter's rebrand under Elon Musk, presented on a pure white canvas split into two panels — the left half occupied by a 300px black X logotype at optical scale, the right by a centered sign-up form with four buttons. The entire login page runs system-UI fonts (no brand typeface), with TwitterChirpExtendedHeavy appearing only at the 64px "Happening now" display headline. The palette is a total chromatic reduction to black, white, and two structural blue-grays for muted text; no gradients, no brand accent, no color in the UI chrome. The primary CTA ("Create account") is a black pill on white, with white label text — the brand mark inverted into a button.

seo:
  title: "X Design System for React — black on white, TwitterChirpExtendedHeavy, pure pill geometry, 12 components"
  metaDescription: "X's login-page design system as a DESIGN.md file. Pure black on white canvas, TwitterChirpExtendedHeavy at 64px display, system-UI body fonts, pill-only radius. 8 color tokens, 12 components. For React, Next.js, and AI tools."
  highlights:
    - "Black X mark as the left half — the logotype occupies the full left panel of the split-screen layout at ~300px, serving as both brand mark and visual anchor"
    - "Zero brand accent color — the entire UI chrome is black, white, and blue-gray; no Twitter-blue #1da1f2 or X-specific accent in any interactive element"
    - "System-UI for all body text — only TwitterChirpExtendedHeavy appears at display scale; navigation, labels, and body copy run the browser's default system-UI stack"
    - "Pill-only radius — 9999px is the sole border-radius value in the system; every button, every social-login option, every input is fully pill-rounded"
    - "Primary CTA is an inverted brand mark — the 'Create account' button is black fill on white canvas with white label text, the same tonal flip as the X mark itself"
  tags:
    - "Social & Community"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    X's login page is the most opinionated single-viewport design in the social-platform category — a stark white canvas bisected into left and right panels, the left half containing nothing but the black X logotype at approximately 300px, and the right half containing a stacked sign-up form. No carousel, no product screenshots, no user-generated content preview. No photography. The 64px "Happening now" headline in TwitterChirpExtendedHeavy sits above the form; below it, two social-login pills (Continue with Google, Continue with Apple), a dividing "OR" label, and three more pills: Create account, Sign in, Get Grok. Every interactive element is a pill — 9999px border-radius across the entire component set. The one color decision is that the "Create account" primary CTA has a black fill with white text, which is the X brand mark color-inverted into a button. Where Instagram's login page shows a phone carousel and Facebook's shows a product description, X shows only the mark.

    The DESIGN.md file packages the system as a machine-readable spec for React and AI tools. Inside: 8 color tokens centered on pure black (#000000) and the near-black page-text tone (#0f1419), two blue-gray muted-text tones (#536471, #829aab), the legacy Twitter blue (#1d9bf0) appearing only on hyperlinks in legal text, and white (#ffffff) as the form panel background. Seven typography tokens span TwitterChirpExtendedHeavy at two display sizes and system-UI at six body-and-label sizes. A single radius token (9999px pill) and 12 component definitions cover the split hero, the stacked sign-up form, the pill buttons, and the footer navigation.

    Feed this file to Claude or Cursor and it reproduces X's specific moves: split-screen layout with the logotype occupying the full left panel, pill geometry for every interactive element, black-on-white CTA as an inverted-mark button, and complete chromatic reduction — no accent color in the UI chrome. The system is worth studying because it demonstrates how far chromatic elimination can go: a network with 500 million users has reduced its public-facing login surface to two colors, one typeface, one radius value. The restraint is not timidity — it is the post-rebrand identity asserting that the mark alone is enough.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://x.com"
      title: "X — official site"
      description: "X's public homepage — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is X's primary brand color?"
      answer: "X has no brand accent color in its login-page UI chrome. The entire system reduces to black (#000000) and white (#ffffff). The primary CTA ('Create account') is a black pill on a white canvas — the brand mark color-inverted into a button. The legacy Twitter blue (#1d9bf0) appears only 6 times in the captured page, all as link text in the legal fine print ('Terms of Service', 'Privacy Policy', 'Cookie Policy'). It is not wired as a CSS custom property and does not appear on any button, label, or border in the UI. X's post-rebrand identity has deliberately eliminated the Twitter-blue accent from its interactive surfaces."
    - id: "typography"
      title: "What typeface does X use, and what is the best substitute?"
      answer: "X uses two type systems. TwitterChirpExtendedHeavy is the display face — it appears at 64px / weight 700 / -1.2px tracking for the 'Happening now' headline, and at 31px / weight 700 for the 'Join today' sub-heading. Both instances are on the same landing page, and that is the full extent of the brand typeface's usage. Every other text element — nav links, labels, legal fine print, button labels — runs the browser's native system-UI stack (-apple-system, 'system-ui', 'Segoe UI', Roboto, Helvetica, Arial). The closest substitute for TwitterChirpExtendedHeavy is Inter Black (weight 900) or GT Walsheim Ultra Bold; the extended-width quality is its defining characteristic. The system-UI fallback for body needs no substitute."
    - id: "split-layout"
      title: "How does X's split-screen login layout work?"
      answer: "X's login page uses a two-column CSS grid or flexbox at desktop viewport: the left column is roughly 50% of the viewport width and contains only the X logotype, centered vertically and sized at approximately 300px. The right column contains the sign-up form — a centered vertical stack of: the 64px 'Happening now' headline, the 31px 'Join today' sub-heading, two social-login pills (Google, Apple), an 'OR' divider text, the 'Create account' black pill, legal fine print, an 'Already have an account?' label, a 'Sign in' outlined pill, and a 'Get Grok' outlined pill with the Grok icon. The left column has no text, no link, no CTA — just the mark. On mobile, the split collapses to a single column with the form stacked below a smaller logotype."
    - id: "pill-geometry"
      title: "Why does X use only pill-shaped buttons with no other radius tier?"
      answer: "X's single radius token — 9999px, which renders as a full pill regardless of button width — is a continuity from the Twitter era, when pill buttons were a signature of the platform. The post-rebrand kept the pill geometry while eliminating the blue brand color; the shape became even more prominent when the color was removed, because the pill silhouette is now the primary visual differentiator between button states. There is no card-level rounding, no input-field rounding at a smaller radius, no chip rounding — every bordered interactive element resolves to a pill. This means the system's radius scale is genuinely singular: one value, used everywhere."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build an X-style login page?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce X's moves: split-screen layout with logotype-as-left-panel, pill-only geometry (9999px across all buttons), black-fill primary CTA with white label text, system-UI for body and labels, and TwitterChirpExtendedHeavy (or a heavy extended substitute) for the 64px display headline only. The color system is the most transferable element: black, white, and two blue-gray muted tones is a complete UI palette. The structural lesson is chromatic reduction — the system proves that a network at global scale can operate its login surface with zero accent color and only the logotype's tonal value as its interactive identity signal."

mockups:
  - "marketing-hero"
  - "chat-conversation"

colors:
  ink: "#000000"
  ink-text: "#0f1419"
  ink-muted: "#536471"
  ink-subtle: "#829aab"
  canvas: "#ffffff"
  hairline: "#cfd9de"
  link-blue: "#1d9bf0"
  legacy-link: "#0000ee"

typography:
  display-xl:
    fontFamily: "TwitterChirpExtendedHeavy, Verdana, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 84px
    letterSpacing: "-1.2px"
  display-md:
    fontFamily: "TwitterChirpExtendedHeavy, Verdana, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
    fontSize: 31px
    fontWeight: 700
    lineHeight: 36px
    letterSpacing: "0"
  heading-sm:
    fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: "0"
  body-md:
    fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: "0"
  body-sm:
    fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: "0"
  body-xs:
    fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "0"
  caption:
    fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: "0"

rounded:
  pill: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  base: "16px"
  lg: "20px"
  xl: "32px"
  2xl: "48px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: "0px 16px"
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.pill}"
    padding: "0px 16px"
    height: "40px"
    borderColor: "{colors.hairline}"
  button-social:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-text}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "0px 16px"
    height: "40px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    padding: "0px 16px"
    height: "48px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-text}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-text}"
    typography: "{typography.display-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-text}"
    typography: "{typography.body-xs}"
    padding: "0px"
  body-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-text}"
    typography: "{typography.body-xs}"
    rounded: "{rounded.pill}"
    padding: "12px 16px"
    borderColor: "{colors.hairline}"
  link-text:
    backgroundColor: "transparent"
    textColor: "{colors.link-blue}"
    typography: "{typography.caption}"
    padding: "0px"
  logotype-panel:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    padding: "0px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    padding: "20px 16px"

---

## Overview

X's login page is a chromatic elimination exercise taken further than any platform at comparable scale. **Mark as argument.** The left half of the viewport contains only the X logotype — no tagline, no product description, no social proof — at a size (approximately 300px) that treats it as an argument rather than an identifier. The right half contains four pill buttons stacked in a form. No photography, no carousel, no testimonials, no animated hero. Where Instagram's login page shows a phone with app screenshots and Facebook's leads with a product description, X leads with the mark alone and trusts it to carry the page.

The palette is a total reduction: black (#000000, #0f1419), white (#ffffff), and two blue-gray muted tones (#536471, #829aab). The legacy Twitter blue (#1d9bf0) appears only in legal link text — six times, all as hyperlink color in the fine print. It is not used for any button, label, or border in the interactive layer. Unlike the Twitter era's brand-blue pill CTA, the "Create account" button is black fill with white text — the mark's own tonal value inverted into an action shape.

Typography follows the same logic: TwitterChirpExtendedHeavy at 64px for the "Happening now" display headline, and then the browser's system-UI stack for every other text element. There is no brand body face. The system trusts the operating system's default sans for everything below the display tier.

**Key Characteristics:**
- Split-screen layout: logotype occupies the full left half of the viewport, sign-up form occupies the full right half.
- Zero brand accent color in any interactive element — the only chromatic moment in the UI is the legacy Twitter blue in hyperlinked legal text.
- Single radius token: 9999px pill, applied uniformly to every button, social-login option, and form control.
- TwitterChirpExtendedHeavy at 64px and 31px only — the display-only brand typeface used at exactly two sizes.
- System-UI stack for all body, label, and caption text — no proprietary type at body scale.
- Primary CTA ("Create account") is a black pill with white label — the same tonal relationship as the X mark itself.
- Muted footer nav in blue-gray (#536471) at 11px — the smallest text tier, almost invisible, echoing a legal disclaimer register.

## Colors

### Ink

- **Ink** (`{colors.ink}` — #000000): frequency 177 — 45 as text, 132 as border. The dominant border color across the pill-button set (the outlined "Sign in," "Continue with Google," "Continue with Apple," "Get Grok" buttons all have black or dark-tone border). Also the fill for the "Create account" primary CTA.
- **Ink Text** (`{colors.ink-text}` — #0f1419): frequency 22 — 21 as text, 1 as background. The near-black used for all body text — a very dark blue-gray rather than pure black, which softens long-form reading without stepping away from the monochrome register.
- **Ink Muted** (`{colors.ink-muted}` — #536471): frequency 39 as text. The footer nav link color and metadata label tone — a medium blue-gray carrying 39 instances across footer links and legal captions.
- **Ink Subtle** (`{colors.ink-subtle}` — #829aab): frequency 18 as text. A lighter blue-gray used for secondary metadata and form field sub-labels.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 6 as text/background. Pure white — the page floor, the form panel background, and the "Sign in" / social-login button fill. No warm tint, no off-white.

### Structural

- **Hairline** (`{colors.hairline}` — #cfd9de): frequency 3 as border. Used on the outlined pill buttons (Continue with Google, Sign in, Get Grok) — a soft blue-gray that reads as a hairline on white without the harshness of a pure-black border.

### Legacy

- **Link Blue** (`{colors.link-blue}` — #1d9bf0): frequency 6 as text. The legacy Twitter-blue used only for hyperlinks in the legal fine print — "Terms of Service," "Privacy Policy," "Cookie Use." Not wired as a CSS variable, not used in interactive buttons or labels.
- **Legacy Link** (`{colors.legacy-link}` — #0000ee): frequency 3 as text. Browser-default link blue appearing on a small subset of legal links that have not been overridden by the X stylesheet — a sign of the minimalist approach extending even to link styling.

## Typography

### Font Families

**TwitterChirpExtendedHeavy** is the only proprietary type face — appearing at 64px and 31px, both in weight 700. Fallback stack: `Verdana, -apple-system, "system-ui", Roboto, Helvetica, Arial, sans-serif`. The extended-width proportion and heavy optical weight are the face's defining characteristics.

**System-UI** (`-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif`) handles every other text tier — headings below 31px, button labels, nav links, legal captions. X does not ship a brand body typeface. This is deliberate: the system-UI stack renders the platform in the user's native type environment, which reinforces X's claim to be infrastructure rather than a designed product experience.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 700 | 84px | "Happening now" display headline |
| `{typography.display-md}` | 31px | 700 | 36px | "Join today." section heading |
| `{typography.heading-sm}` | 17px | 700 | 20px | Secondary bold labels |
| `{typography.body-md}` | 15px | 700 | 20px | Button labels and bold inline text |
| `{typography.body-sm}` | 15px | 500 | 20px | Medium-weight body text |
| `{typography.body-xs}` | 15px | 400 | 20px | Default running text |
| `{typography.caption}` | 11px | 400 | 12px | Footer nav links, legal fine print |

### Note on Font Substitutes

TwitterChirpExtendedHeavy → GT Walsheim Ultra Bold or Inter Black (weight 900) with `font-stretch: expanded` where supported. The extended width is the character — a standard-width heavy sans will not reproduce the same display identity. For the system-UI body tier, no substitute is needed; the browser renders it natively.

## Layout

### Spacing System

- **Base unit:** 4px.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px.
- **Form column padding:** 16px horizontal on the right panel.
- **Inter-button gap:** 16px vertical between each pill button in the sign-up stack.

### Grid & Container

- **Desktop:** two-column split, equal halves. Left: logotype centered in the column. Right: form centered vertically at approximately 600px wide.
- **Max form width:** approximately 400px for the button group.
- **Mobile:** single column, logotype above form, sized down to approximately 60–80px mark.

### Rhythm

The right-panel form reads as a tightly spaced vertical stack with consistent 16px gaps between buttons. Above the form, the 64px display headline and 31px sub-heading sit with minimal spacing — no decorative interstitial elements. The logotype panel has no internal structure; the mark is centered in the available space and that is the entire layout decision.

## Elevation

The system has **no shadows**. Elevation is not a concept in this surface — the white canvas is flat, the pills are outline-only or black-fill, and there are no lifted cards, no dropdown overlays, no modal-style surfaces. The two-column split creates visual hierarchy through spatial allocation, not elevation.

- **Flat:** 100% of surfaces.
- **Button depth:** conveyed through fill (black CTA vs. outline secondary) rather than shadow.
- **No tonal surface ladder:** unlike dark-canvas systems, there are no intermediate surface tones.

## Shapes

The radius scale has a single entry:

- `{rounded.pill}` 9999px — applied uniformly to every button (Create account, Continue with Google, Continue with Apple, Sign in, Get Grok) and to every outlined form element.

There are no cards with independent rounding, no chip variants, no input fields at a tighter radius. The absence of any radius below pill is the most decisive shape choice in the system: X uses pill geometry as the only shape signal, which means the shape alone differentiates interactive elements from content text without any color accent doing the work.

## Components

**`button-primary`** — "Create account." Black `{colors.ink}` fill, white label text, `{rounded.pill}` 9999px, 0×16 padding, 40px height. System-UI at 15px / weight 700. The mark's tonal values applied to a button.

**`button-secondary`** — "Sign in" and "Get Grok." White `{colors.canvas}` fill, near-black ink text, 1px `{colors.hairline}` border, same pill rounding and height. The outlined state is the secondary action across the form.

**`button-social`** — "Continue with Google" and "Continue with Apple." White fill, near-black ink text, 1px `{colors.hairline}` border, pill rounding. Carries a third-party logo icon at left (Google rainbow mark, Apple mark). Same structural shape as button-secondary but the icon changes the visual weight.

**`hero-heading`** — "Happening now." Near-black ink in `{typography.display-xl}` (64px / TwitterChirpExtendedHeavy / -1.2px tracking). No background, no padding.

**`section-heading`** — "Join today." Near-black ink in `{typography.display-md}` (31px / TwitterChirpExtendedHeavy). Placed below the hero-heading with minimal vertical spacing.

**`body-paragraph`** — Fine-print text below the Create account button. Near-black `{colors.ink-text}` at `{typography.body-xs}` (15px / 400).

**`body-muted`** — Footer nav links and metadata. `{colors.ink-muted}` (#536471) at `{typography.caption}` (11px / 400).

**`link-text`** — Legal hyperlinks in the fine print. `{colors.link-blue}` (#1d9bf0) at `{typography.caption}`.

**`card`** — The sign-up form's outlined container is structured as a pill-rounded card — white fill, `{colors.hairline}` border, 12×16 padding. Wraps the social login options at a component level.

**`logotype-panel`** — The left viewport half. White canvas, black X mark, no other content. Treated as a component because its behavior (responsive collapse, padding, minimum width) is the core layout decision of the entire page.

**`footer`** — White canvas floor, `{colors.ink-muted}` text at `{typography.caption}` (11px / 400), 20×16 padding. Lists legal and contextual links (About, Download, Help, Terms, Privacy, Cookie, Ads info, Blog, Careers, Brand Resources, Advertising, Marketing, X for Business, Developers, News, Settings).

**`top-nav`** — Minimal — the X mark at left, no links in the captured state (the nav only shows the mark as a home-link).

## Do's and Don'ts

**Do** use the black-fill primary button (`{colors.ink}`) for the single primary action. The black CTA on white is the only fill-based interactive element in the system — reserving it for one action per surface preserves its weight.

**Do** apply `{rounded.pill}` 9999px to every interactive element. The pill geometry is the system's only shape differentiator — removing it from even one button (by using 8px or 16px) would introduce a radius inconsistency that the system does not have vocabulary to explain.

**Do** use `{colors.hairline}` (#cfd9de) for outlined button borders, not `{colors.ink}` (#000000). The hairline blue-gray is softer than pure black on white — it reads as an outline without the visual heaviness of a 1px black border.

**Do** use `{colors.ink-muted}` (#536471) for footer and metadata text. The blue-gray muted tone at caption scale is the system's sub-label register — using `{colors.ink-text}` (#0f1419) at the same size would make footer items compete with body text.

**Don't** use the link blue (#1d9bf0) as a CTA or button fill. It appears only in legal hyperlinks in the captured surface — wiring it into button backgrounds would reintroduce the Twitter-blue brand color that the rebrand deliberately removed from the interactive layer.

**Don't** introduce any radius below 9999px. The single-radius system is what makes the pill geometry feel like a design decision rather than a default. Adding an 8px card radius or a 12px input radius would create a two-tier radius system that the visual language cannot sustain without additional context.

**Don't** add background-color sections to the page structure. The entire page is white canvas — no gray alternating bands, no dark hero panels, no colored feature strips. The logotype's visual mass and the form's centered stack are sufficient hierarchy signals without background variation.

**Don't** use TwitterChirpExtendedHeavy below 31px. The extended-width and heavy weight of the face reads as display at 64px and 31px; at body sizes (15–17px) it would appear as oversized and compressed rather than intentional. The system draws a hard line: brand typeface at display, system-UI everywhere below.

## Known Gaps

- **Dark mode:** X's in-app interface has a prominent dark mode, but the captured marketing/login page is light-only. The dark surface token set is not represented here.
- **Authenticated timeline:** the in-app interface (post feed, DM panel, navigation sidebar) carries a far richer token set — colors, spacing, icon sizing — that this marketing-surface capture does not include.
- **Mobile and responsive:** at mobile widths the split-screen collapses to a single column with the logotype at reduced size; breakpoint values are not captured.
- **Hover and focus states:** no hover or focus ring styles are captured from the login page; the interactive component set only documents resting state.
- **Grok identity tokens:** the Grok AI product has its own visual identity (circular animated logo, distinct interaction states) that appears as a single "Get Grok" button on this page without further token documentation.
- **API and developer surface:** X's developer portal and API docs carry separate design conventions not represented here.
- **Animation:** X's login page may include subtle animations on button hover or form focus — the spec captures static values only.