# X (formerly Twitter)

> `x-twitter@1.0.0`

X (formerly Twitter) is the real-time, public-square social platform acquired by Elon Musk in 2022 and rebranded from Twitter to X in July 2023. The post-rebrand identity is a deliberate monochrome reduction: a single geometric X mark in white-on-black or black-on-white, with no chromatic accent surviving from the Twitter Blue era. The product surface retains a multi-mode theme (default dark, "Lights Out" pure-black, light), but the brand-mark surface is one of two values — black or white — with the proprietary Chirp typeface carrying the marketing voice.


**Tags:** `social`, `x`, `twitter`, `monochrome`, `dark-first`, `consumer-tech`

## Atoms

### Palette

**X (Twitter)** · `x-twitter@1.0.0` · Proprietary — All Rights Reserved

> X (formerly Twitter) corporate palette. Following the July 2023 rebrand, the X identity is a monochrome black-and-white system — the X mark sits on either a black or white canvas with no chromatic accent. The platform's product surface remains a multi-mode app (default dark "Dim", "Lights Out" pure-black, and light) and the legacy Twitter Blue (#1DA1F2) is retained only as a deprecated reference for historical applications. The canonical brand surface today is the black mark on white, or the white mark on black. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Chirp** `(chirp@1.0.0)` | Proprietary — All Rights Reserved | sans-serif |
| `body` | **Chirp** `(chirp@1.0.0)` | Proprietary — All Rights Reserved | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `x-black` | X Black | `#000000` |
| `x-white` | X White | `#FFFFFF` |
| `x-dim` | X Dim | `#15202B` |
| `x-dim-elevated` | X Dim Elevated | `#1E2732` |
| `x-charcoal` | X Charcoal | `#16181C` |
| `x-gray` | X Gray | `#71767B` |
| `x-gray-light` | X Gray Light | `#E7E9EA` |
| `x-gray-border` | X Gray Border | `#2F3336` |
| `twitter-blue-legacy` | Twitter Blue (Legacy) | `#1DA1F2` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `x-white` | `#FFFFFF` |
| `surface` | `x-white` | `#FFFFFF` |
| `surface-elevated` | `x-white` | `#FFFFFF` |
| `text-primary` | `x-black` | `#000000` |
| `text-secondary` | `x-gray` | `#71767B` |
| `text-tertiary` | `x-gray` | `#71767B` |
| `primary` | `x-black` | `#000000` |
| `primary-hover` | `x-charcoal` | `#16181C` |
| `accent` | `x-black` | `#000000` |
| `accent-hover` | `x-charcoal` | `#16181C` |
| `warning` | `x-black` | `#000000` |
| `warning-hover` | `x-charcoal` | `#16181C` |
| `error` | `x-black` | `#000000` |
| `success` | `x-black` | `#000000` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `x-black` | `#000000` |
| `surface` | `x-charcoal` | `#16181C` |
| `surface-elevated` | `x-dim-elevated` | `#1E2732` |
| `text-primary` | `x-gray-light` | `#E7E9EA` |
| `text-secondary` | `x-gray` | `#71767B` |
| `text-tertiary` | `x-gray` | `#71767B` |
| `primary` | `x-white` | `#FFFFFF` |
| `primary-hover` | `x-gray-light` | `#E7E9EA` |
| `accent` | `x-white` | `#FFFFFF` |
| `accent-hover` | `x-gray-light` | `#E7E9EA` |
| `warning` | `x-white` | `#FFFFFF` |
| `warning-hover` | `x-gray-light` | `#E7E9EA` |
| `error` | `x-white` | `#FFFFFF` |
| `success` | `x-white` | `#FFFFFF` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `x-black` | `#000000` |
| `on-identity` | `x-white` | `#FFFFFF` |
| `background` | `x-black` | `#000000` |
| `surface` | `x-charcoal` | `#16181C` |
| `surface-elevated` | `x-dim-elevated` | `#1E2732` |
| `text-primary` | `x-gray-light` | `#E7E9EA` |
| `text-secondary` | `x-gray` | `#71767B` |
| `text-tertiary` | `x-gray` | `#71767B` |
| `primary` | `x-white` | `#FFFFFF` |
| `primary-hover` | `x-gray-light` | `#E7E9EA` |
| `accent` | `x-white` | `#FFFFFF` |
| `accent-hover` | `x-gray-light` | `#E7E9EA` |
| `mark` | `x-white` | `#FFFFFF` |
| `text-emphasis` | `x-gray-light` | `#E7E9EA` |
| `text-muted` | `x-gray` | `#71767B` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `wordmark` | `heading` |
| `code` | `mono` |

## Rules

### 🛑 error (7)

#### `colorChoice` → `logo.mark`

- **allowed:** x-black, x-white
- **forbidden:** twitter-blue-legacy, x-gray, x-charcoal, x-dim

> The post-2023 X mark is monochrome — black on light surfaces or white on dark surfaces. The legacy Twitter Blue is explicitly out of scope for the current identity; mid-grays compromise the high-contrast reading the brand depends on. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, chromatic-accent, twitter-blue-recolor

> The X brand toolkit prescribes the X mark only in approved black-or-white variants with adequate clearspace. Recoloring the X into Twitter Blue or any other chromatic value violates the deliberate monochrome reduction that defines the post-rebrand identity. 

#### `variantSelection` → `logo`

- **use:** `x-mark-white`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces (the canonical X.com canvas), the white X mark is required for legibility. Do not invert the mark file on the fly or apply a chromatic fill. 

#### `variantSelection` → `logo`

- **use:** `x-mark-black`
- **when:** `backgroundColorScheme="light"`

> On light surfaces, the black X mark is required. The mark on x.com light mode and on light marketing surfaces is solid black. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. X Gray Light (#E7E9EA) on X Black (#000000) reads at ~17.4:1 — comfortably above AA. The rule encodes the floor for any new foreground/background pairing introduced on X-skinned surfaces. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, endorsement-implication, twitter-era-rebrand-suggestion

> The X brand-use guidance prohibits placement of the X mark in ways that imply endorsement, on competing-product surfaces, or in ways that imply continuity with retired Twitter branding (e.g., pairing the X mark with the bird). 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing. 

### ⚠️ warning (2)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 700, 800

> Chirp is distributed with discrete weights Regular (400), Medium (500), Bold (700), and Heavy (800). X's marketing headlines and the wordmark sit in the 500–800 band; lighter cuts compromise the deliberate, declarative voice the post-rebrand identity depends on. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.5`

> X's marketing headlines run substantially larger than body copy. A 1.5× minimum size ratio preserves the declarative display-to- prose hierarchy the post-rebrand voice depends on. 

## Provenance

- **Source:** <https://about.x.com/en/who-we-are/brand-toolkit>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** X and the X mark are registered trademarks of X Corp. This atom reads the publicly available X brand toolkit at about.x.com/en/who-we-are/brand-toolkit; it is not an official X brand-guidelines document. Chirp is X's proprietary corporate typeface (designed with Grilli Type) and is referenced here with a public-web fallback to Inter when the licensed file is unavailable. 
- **Imported:** `2026-05-18`
- **Notes:** X's canonical brand-mark surface is dark-first: the white X on a black canvas is the most-recognized form across the X.com product and in marketing. The light-mode role mapping is the published inverse — black mark on white canvas — and is equally canonical per the brand toolkit. Legacy Twitter Blue (#1DA1F2) is documented in the palette atom as a deprecated reference only. 

---

*Generated by the brand-atoms converter. Source: `x-twitter@1.0.0` from the encyclopedia.*