W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
X (formerly Twitter)
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.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/x-twitter/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/x-twitter/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
X (formerly Twitter)
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) · [email protected] · 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 ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
body |
Chirp ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by X (formerly Twitter)
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
X (formerly Twitter)
A clear hierarchy in X (formerly Twitter)'s typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
X (Twitter)
[email protected]font · heading
Chirp
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Chirp
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ x-white #FFFFFF accent-hover
→ x-gray-light #E7E9EA background
→ x-black #000000 identity
→ x-black #000000 mark
→ x-white #FFFFFF on-identity
→ x-white #FFFFFF primary
→ x-white #FFFFFF primary-hover
→ x-gray-light #E7E9EA surface
→ x-charcoal #16181C surface-elevated
→ x-dim-elevated #1E2732 text-emphasis
→ x-gray-light #E7E9EA text-muted
→ x-gray #71767B text-primary
→ x-gray-light #E7E9EA text-secondary
→ x-gray #71767B text-tertiary
→ x-gray #71767B Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Chirp prose
→ body Chirp wordmark
→ heading Chirp Palette mode mappings (from x-twitter)
Light mode (14 roles)
accent
→ x-black accent-hover
→ x-charcoal background
→ x-white error
→ x-black primary
→ x-black primary-hover
→ x-charcoal success
→ x-black surface
→ x-white surface-elevated
→ x-white text-primary
→ x-black text-secondary
→ x-gray text-tertiary
→ x-gray warning
→ x-black warning-hover
→ x-charcoal Dark mode (14 roles)
accent
→ x-white accent-hover
→ x-gray-light background
→ x-black error
→ x-white primary
→ x-white primary-hover
→ x-gray-light success
→ x-white surface
→ x-charcoal surface-elevated
→ x-dim-elevated text-primary
→ x-gray-light text-secondary
→ x-gray text-tertiary
→ x-gray warning
→ x-white warning-hover
→ x-gray-light Rules (9 typed constraints)
error · 7 rules
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 rules
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.