What is X's primary brand color?

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.

What typeface does X use, and what is the best substitute?

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.

How does X's split-screen login layout work?

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.

Why does X use only pill-shaped buttons with no other radius tier?

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.

Can I use this DESIGN.md to build an X-style login page?

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.

X Design System

X's login-page design system as a DESIGN.md file.

About X DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source x.com

Social & Community

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.

What makes it distinct

Black X mark as the left halfthe logotype occupies the full left panel of the split-screen layout at ~300px, serving as both brand mark and visual anchor
Zero brand accent colorthe 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 textonly TwitterChirpExtendedHeavy appears at display scale; navigation, labels, and body copy run the browser's default system-UI stack
Pill-only radius9999px 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 markthe 'Create account' button is black fill on white canvas with white label text, the same tonal flip as the X mark itself

Live at x.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

x.com

Explore X

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

X design system FAQ

Common questions about X's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

X — official site

X's public homepage — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.