--- version: alpha name: "X" description: "X (formerly Twitter) renders the most chromatically-disciplined surface in mainstream social — pure `#000000` canvas with white-on-black type and a single legacy `#1d9bf0` blue that survives only as the link / verified-badge accent. The wordmark is a single italicized \"X\" (Chirp Black at 60° rotation), the type system is the proprietary Chirp family across every UI surface, and the timeline runs as a single 600px column of dense post cards separated by 1px hairlines. The brand identity since the 2023 rebrand is algorithmic-minimalist — strip every decorative element, every gradient, every brand voltage, and let the content (and the algorithm) carry the page." colors: bg: "#000000" bg-light: "#ffffff" bg-dim: "#15202b" surface: "#16181c" surface-hover: "#1c1f23" surface-elevated: "#202327" surface-soft: "#0d0d0e" text: "#e7e9ea" text-strong: "#ffffff" text-body: "#e7e9ea" text-muted: "#71767b" text-soft: "#536471" text-faint: "#3e4a55" text-on-brand: "#ffffff" text-on-white: "#0f1419" brand-blue: "#1d9bf0" brand-blue-hover: "#1a8cd8" brand-blue-deep: "#1573b8" brand-blue-soft: "rgba(29,155,240,0.1)" primary-action: "#ffffff" primary-action-hover: "#d7dbdc" secondary-action: "#000000" link: "#1d9bf0" link-hover: "#1a8cd8" border: "#2f3336" border-strong: "#536471" border-subtle: "#16181c" on-brand: "#ffffff" on-bg: "#e7e9ea" shadow-color: "rgba(255,255,255,0.04)" reply-icon: "#71767b" reply-active: "#1d9bf0" retweet-icon: "#71767b" retweet-active: "#00ba7c" like-icon: "#71767b" like-active: "#f91880" share-icon: "#71767b" bookmark-icon: "#71767b" bookmark-active: "#1d9bf0" verified-blue: "#1d9bf0" verified-gold: "#fab421" verified-grey: "#829aab" premium-gold: "#fab421" views-meta: "#71767b" success: "#00ba7c" warning: "#fab421" danger: "#f4212e" info: "#1d9bf0" typography: display: fontFamily: "TwitterChirp" fontSize: "60px" lineHeight: 1.3 letterSpacing: "-1.5px" body: fontFamily: "TwitterChirp" fontSize: "15px" lineHeight: 1.3 mono: fontFamily: "TwitterChirpMono" rounded: button: "12px" card: "16px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "32px" xl: "48px" --- ## Overview ## Overview X's visual surface is the most chromatically-disciplined in mainstream social. The 2023 rebrand stripped Twitter's friendly bird-blue identity down to a single italicized letter glyph and a default canvas of pure `#000000` — a near-total chromatic vacuum that makes every other social platform look gaudy by comparison. The timeline runs as a single 600px-wide column of post cards separated only by 1px `#2f3336` hairlines, with white text on black, a faintly-grey `#71767b` for metadata, and the legacy `#1d9bf0` blue surviving exclusively as the link color and verified-badge fill. There is no second brand voltage. There is no gradient. There is no decorative element. The wordmark itself — a single italicized "X" rendered in Chirp Black, rotated 60° (or rendered with the diagonal stroke heavier than horizontal) — is the most stripped-down brand mark in the FAANG-tier social category. There is no logotype. There is no tagline. There is no color. The X stands alone in pure white on the black canvas, signaling algorithmic confidence: the platform doesn't need to introduce itself. The product (and the algorithm) introduces itself. The defining gesture is **information density at perfect type size**. Every tweet renders at 15px / 400 / 1.3 line-height — a pure-content register that's neither editorial-warm nor UI-utilitarian. The 23px size is reserved for "tweet display" mode (when a tweet is the primary content of a detail page), and the 20px nav-link sizing on the left rail is unusually large for app chrome — bigger than most platforms' body text. That sizing decision is deliberate: navigation is a reading register, not a chrome register. Type voice runs the proprietary **Chirp** family — an in-house adaptation of Grilli Type's GT America commissioned in 2021 — in weights 400 (body) and 700 (display, profile names, button labels). There is no italic for emphasis (italic is reserved for the X wordmark itself); emphasis is carried by weight 700 or by color (text → text-strong). Display sizes hit 60px / 800 / -1.5px tracking on marketing pages, with the negative tracking essential to keep Chirp 800 from reading too wide. The page rhythm is tri-column on desktop: 275px left rail (persistent navigation), 600px center feed (the focal column), 350px right rail (search + trending + suggested follows). The center column is sticky, the rails are static. There is no horizontal scroll, no sidebar drawer pattern, no responsive accordion — the structure is rigid because the platform's whole UX premise is that the user reads a single column. **Key Characteristics:** - Pure `#000000` canvas (Lights Out mode) — the most-used theme on the platform. - Single-letter italicized wordmark — the most stripped-down social brand. - One legacy accent color: `#1d9bf0` blue, surviving as link / verified / focus only. - Chirp display + body, with 20px left-rail nav links (unusually large). - 15px / 400 / 1.3 line-height for every tweet body — the platform's default reading register. - White-on-black primary CTA pill — the inversion of every other dev-tools convention. - Engagement icon row (reply / retweet / like / share / bookmark / views) under every tweet — 5 icons + counter, all `#71767b` muted by default. - Each engagement icon has its own active color: blue reply, green retweet, magenta like, blue bookmark. - Three-mode theming (Default / Dim / Lights Out) but Lights Out is the visual identity. - 1px `#2f3336` hairline divides every tweet — no card chrome, no padding shells. ## Colors ### Primary - **Bg / Canvas** (`#000000`): Lights Out mode — the default and most-used canvas on X. Pure black, no warmth. - **Bg Dim** (`#15202b`): Mid-dark blue-grey alternate canvas. The original Twitter "dim" mode survives as a user preference. - **Bg Light** (`#ffffff`): Light mode — used by approximately 30% of users. - **Text** (`#e7e9ea`): Primary text on dark — slightly off-white for readability ease. - **Text Strong** (`#ffffff`): Display heading text — pure white. ### Brand & Dark - **Brand Blue** (`#1d9bf0`): Legacy Twitter blue. The single accent that survives the rebrand. Appears on links, verified badges, focus rings, and the bookmark-active icon. Note: NOT used on primary CTA buttons in the post-rebrand surface. - **Brand Blue Hover** (`#1a8cd8`): Hover-darker variant. - **Brand Blue Deep** (`#1573b8`): Pressed state. - **Brand Blue Soft** (`rgba(29,155,240,0.1)`): Tinted soft variant — used on mention highlights and selected text background. ### Accent (Engagement icons) Each engagement action has its own dedicated active color — chromatically distinct from the brand blue: - **Reply Active** (`#1d9bf0`): Reply icon turns blue on hover and counter. - **Retweet Active** (`#00ba7c`): Retweet icon turns green when retweet is active. - **Like Active** (`#f91880`): Heart fills magenta-rose when liked. - **Bookmark Active** (`#1d9bf0`): Bookmark fills brand-blue when saved. - **Share Icon** (`#71767b`): Share has no active color — it's transient. ### Verified Tiers - **Verified Blue** (`#1d9bf0`): Premium individual subscribers — the legacy verified blue. - **Verified Gold** (`#fab421`): Verified business / X Premium+ accounts. - **Verified Grey** (`#829aab`): Government / organizational verified accounts. ### Interactive - **Link** (`#1d9bf0`): Inline body links default to legacy blue. Same on dark and light modes. - **Link Hover** (`#1a8cd8`): Hover-darker. - **Selected** (`rgba(29,155,240,0.2)`): Selected text background — soft blue tint. - **Focus Ring** (`#1d9bf0`): 2px solid blue ring on every focusable element. ### Neutral Scale - **Text Strong** (`#ffffff`): Display headings, primary CTAs. - **Text** (`#e7e9ea`): Default text — slightly off-white. - **Text Body** (`#e7e9ea`): Body running-text. - **Text Muted** (`#71767b`): Metadata, "@username · 4h", view counts. - **Text Soft** (`#536471`): Tertiary captions. - **Text Faint** (`#3e4a55`): Ultra-fine annotations. ### Surface & Borders - **Surface** (`#16181c`): Right-rail card surface (trending, who-to-follow). Tweet cards in feed do NOT use a surface — they sit directly on bg. - **Surface Hover** (`#1c1f23`): Hover state on cards. - **Surface Elevated** (`#202327`): Modal and dialog surface. - **Surface Soft** (`#0d0d0e`): Near-black dividers. - **Border** (`#2f3336`): 1px hairline on tweet dividers and card outlines — the most-used border color on the platform. - **Border Strong** (`#536471`): Heavier divider on focused inputs. - **Border Subtle** (`#16181c`): Near-invisible separator. ### Shadow Colors - **Shadow Standard** (`rgba(0,0,0,0.4)`): Modal and elevated card shadow. - **Shadow Elevated** (`rgba(0,0,0,0.6)`): Deep modal shadow. - **Shadow Hairline** (`rgba(255,255,255,0.04)`): Faint outline-shadow used as 0 0 0 1px on cards in dim mode for definition. ### Semantic - **Success** (`#00ba7c`): Green — same hue as retweet-active. - **Warning** (`#fab421`): Gold — same as verified-gold. - **Danger** (`#f4212e`): Saturated red — destructive actions, error toasts. - **Info** (`#1d9bf0`): Same as brand-blue. ## Typography ### Font Family - **Primary (Chirp)**: `"TwitterChirp", "Chirp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. Chirp is the proprietary X type family, an in-house adaptation of Grilli Type's GT America commissioned in 2021. It carries every UI surface — display, body, navigation, captions. - **Mono (ChirpMono)**: `"TwitterChirpMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace`. Chirp's mono companion. Code blocks, technical references. - **OpenType features**: `'cv02'` for the alternative single-storey 'a', `'cv03'` for the disambiguated 'g', `'cv11'` for I/l/1 — toggled on display sizes for the engineered display feel. - **No serif**: X has zero serif type anywhere on the platform. The single-family discipline is the brand's typographic philosophy. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-hero | Chirp | 60 | 800 | 1.05 | -1.5px | cv02, cv03 | Marketing landing h1 | | display-lg | Chirp | 48 | 800 | 1.10 | -1px | — | Section heads on marketing | | display-md | Chirp | 36 | 700 | 1.15 | -0.8px | — | Sub-section heads | | display-sm | Chirp | 28 | 700 | 1.20 | -0.5px | — | Card titles | | title-lg | Chirp | 23 | 700 | 1.30 | 0 | — | Profile display name on tweet | | title-md | Chirp | 20 | 700 | 1.30 | 0 | — | Modal heads | | title-sm | Chirp | 17 | 700 | 1.35 | 0 | — | Right-rail card heads (Trending, Who to follow) | | tweet-display | Chirp | 23 | 400 | 1.30 | 0 | — | Standalone tweet on detail page — the "showcase" register | | body-md | Chirp | 15 | 400 | 1.30 | 0 | — | Tweet body in feed — the platform's default reading register | | body-sm | Chirp | 13 | 400 | 1.30 | 0 | — | Right-rail body | | metadata | Chirp | 13 | 400 | 1.25 | 0 | — | "@username · 4h" — handle and timestamp | | label | Chirp | 12 | 700 | 1.30 | 0.3px | — | Pill labels, badge text | | caption | Chirp | 13 | 500 | 1.30 | 0 | — | Tooltip text, fine annotations | | code-md | Chirp Mono | 13 | 400 | 1.55 | 0 | — | Code spans, technical references | | button | Chirp | 15 | 700 | 1.0 | 0 | — | Primary CTA pill text | | nav-link | Chirp | 20 | 400 | 1.4 | 0 | — | Left-rail nav (default) — unusually large | | nav-link-active | Chirp | 20 | 700 | 1.4 | 0 | — | Active nav item — same size, weight 700 | | counter | Chirp | 13 | 400 | 1.0 | 0 | — | Engagement counter under tweets | ### Principles - **Single family across every register.** Chirp handles display, body, navigation, captions, and code. The discipline IS the brand voice. - **Display weights stay at 700–800.** No 900 weight, no extreme stretching. - **Body sits at 15px / 400 / 1.3.** This is the platform's signature reading register — denser than 16/1.5 SaaS marketing, looser than Reddit's 14/1.5 forum body. - **Left-rail navigation at 20px.** Unusually large for chrome — but appropriate because navigation IS reading on this platform. - **No italic for emphasis.** Italic is reserved exclusively for the X wordmark. - **Negative tracking essential at display.** Without `-0.5` to `-1.5px` tracking, Chirp at 700+ reads too wide. - **Mono only for technical content.** Don't use ChirpMono for design accent — it's a credibility signal, not decoration. - **Tweet body never bolds for emphasis.** Bold is reserved for profile names. Inline emphasis comes from quote tweets or italics within copied text. ## Layout ### Spacing System Base unit **4px**. Scale: `4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96`. The system uses tighter intra-card spacing than typical web brands — tweet cards have 12–16px padding only, with the 1px divider doing the heavy lifting between cards. Section padding (between major bands on marketing pages) at 64–96px. ### Grid & Container The product surface is a fixed tri-column layout: 275 + 600 + 350 = 1225px nominal, 1265px max with gutters. The center 600px column is the focal feed; left rail is 275px persistent nav; right rail is 350px ancillary content. Marketing pages use a 12-column grid with 1280px max width. The center column never expands beyond 600px even at 4K viewports — type optimal-line-length is the constraint. ### Whitespace Philosophy X compresses whitespace inside the feed (12px tweet padding, 1px divider) but allows generous space in marketing pages (64–96px section padding). The dual register reflects the platform's identity: information-dense in product, marketing-comfortable in landing pages. ### Section Cadence Marketing pages alternate dark feature bands and white feature bands, with the X wordmark appearing in white (on dark) or black (on white) per band context. Product pages run uninterrupted: tweet → divider → tweet → divider, with promoted tweets and ads marked only by a 12px / 500 / `#71767b` "Promoted" label above. ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | < 500px | Bottom nav appears; left rail hidden; right rail hidden; full-width feed | | Tablet | 500–768px | Single-column feed; left rail collapses to icon-only column (68px) | | Desktop | 768–1265px | Full tri-column layout; left rail at 275px, feed at 600px, right rail at 350px | | Wide | > 1265px | Same as desktop with more breathing room; max content 1265px | ### Touch Targets - Engagement icons: 36 × 36px hit area (visually 24px icon centered in 36px button). - Primary CTA pill: 44 × 44px minimum (12px × 24px padding). - Profile avatars: 40 × 40px in feed, 32px in compact lists, 80px on profile pages. - Bottom-nav icons (mobile): 56 × 56px each. ### Collapsing Strategy At < 1024px right rail collapses (search moves into top-nav). At < 768px left rail collapses to icon-only column. At < 500px both rails hide and bottom-nav appears. Compose moves from inline button to FAB. ### Image Behavior Image attachments inside tweets use 12px radius and full-bleed within the tweet content region. Multi-image tweets use a 2x2 or 1x2 grid layout. Profile banners crop responsively (1500x500 ideal, mobile shows centered crop). Profile avatars are circular (radius 9999) at all sizes. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border | Body sections, top nav, tweet feed (the canvas IS flat) | | 1 — Hairline | 1px `#2f3336` border or bottom-border | Tweet dividers, card outlines | | 2 — Surface | `#16181c` background, no shadow | Right-rail cards, search bar, suggested follows | | 3 — Elevated | `#202327` background or `rgba(0,0,0,0.4) 0 4px 16px` shadow | Hover states, dropdowns | | 4 — Modal | `#202327` + `rgba(0,0,0,0.6) 0 12px 32px` + backdrop dim | Compose modal, settings dialog | | 5 — Overlay | Same as modal + ESC focus trap | Image lightbox, video fullscreen | ### Shadow Philosophy X uses **hairline borders for elevation, not drop shadows**. The 1px `#2f3336` divider between tweets is the platform's most-used elevation tool — a single horizontal line that says "this content ends, this content begins." Drop shadows are reserved for modal and dialog layers, never for inline cards. The flat-canvas philosophy is what gives X its aggressively-contemporary feel; legacy social platforms used drop shadows on every card for "depth," X strips them. ## Shapes | Tier | Token | Value | Use | |---|---|---|---| | Micro | micro | 2px | Reserved — barely used | | XS | xs | 4px | Text inputs, small inline buttons | | Standard | sm | 8px | Modal sub-elements, tooltip cards | | Comfortable | md | 12px | Image attachments inside tweets | | Large | lg | 16px | Cards (right-rail, modal, detailed tweet) — the default content card radius | | Featured | xl | 20px | Floating panels, drawer shells | | Pill | pill | 9999px | Buttons, search bar, verified badges, profile avatars | X's signature radii are **9999px on every button and badge** (full pill) and **16px on every card**. The pill-shaped CTAs are part of the post-rebrand identity — Twitter's old design used 6px radius rounded rectangles. The shift to full pills made the brand more decisively contemporary. ## Components ### Buttons (5 variants) **`button-primary`** — White-on-black pill — the post-rebrand signature. Background `#ffffff`, text `#000000`, Chirp 15px / 700, padding 12px × 24px, height 44px, radius 9999 (pill). Used on every Post button, every Sign Up CTA. Hover darkens background to `#d7dbdc` over 100ms. **`button-primary-blue`** — Legacy Twitter-blue pill, surviving on certain marketing pages. Background `#1d9bf0`, text `#ffffff`, same shape. Used scarcely; the white-on-black is the new default. **`button-secondary`** — Outlined ghost pill. Transparent background, text `#e7e9ea`, 1px `#536471` border, same shape and padding. Used as the secondary action paired with a primary CTA. **`button-ghost`** — Tertiary text-only. Transparent background, text `#71767b`, no border, padding 8px × 16px, pill. Used for "Cancel" and inline link CTAs. **`button-icon`** — Engagement icon button (reply, retweet, like, share, bookmark). Transparent background, icon `#71767b` muted, 36×36 hit area, pill hover background. On hover, icon color shifts to its specific active hue (blue / green / magenta / blue) and a faint colored circle fades in behind it. ### Cards **`card-tweet`** — Standard timeline tweet. Background `#000000` (sits directly on canvas), 1px `#2f3336` bottom-border (the divider between tweets), 12px × 16px padding, no radius. Avatar 40px circular left, content right. The lack of card chrome is the platform's signature. **`card-tweet-detailed`** — Standalone tweet on detail page. Background `#000000`, 1px `#2f3336` border around the entire card, 16px radius (lg), 16px padding. Tweet body in `tweet-display` register (23px / 400). The "showcase" register. **`card-trending`** — Right-rail trending card. Background `#16181c`, 16px radius, 12px padding. Title in 17/700, count in 13/400 muted. **`card-suggested`** — Who-to-follow card. Background `#16181c`, 16px radius, 16px padding. Profile rows with Follow CTA on right. **`card-quote-tweet`** — Embedded quote tweet inside another tweet. 1px `#2f3336` border, 16px radius, 12px padding. Sits within the parent tweet's content region. ### Badges & Pills **`badge-verified`** — Verified checkmark. Inline blue (`#1d9bf0`), gold (`#fab421`), or grey (`#829aab`) circle (18px) with white checkmark, positioned right of the display name. Tier indicates the user type. **`badge-pill`** — Small pill label. Background `#16181c`, text `#e7e9ea`, 12px / 700, pill, padding 4px × 10px. **`badge-blue`** — Brand-blue accent pill ("NEW", "Subscribed"). Background `#1d9bf0`, text `#ffffff`, 12px / 700, pill, padding 2px × 8px. **`badge-trending`** — Inline trending indicator. No background, text `#71767b`, 13px / 500. "Trending in [country]" lead-in to a topic. ### Inputs / Forms **`text-input`** — Standard input. Background `#000000`, text `#e7e9ea`, 1px `#2f3336` border, 4px radius, 14px × 16px padding, height 56px. Placeholder `#71767b`. **`text-input-focused`** — Border thickens to 2px solid `#1d9bf0`. No background change. **`textarea-compose`** — Tweet composer. No border, no background, no radius. Just a multi-line text area with placeholder "What's happening?!" in 20px / 400 / `#71767b`. The chromeless design is intentional — composing a tweet should feel like writing on the canvas itself. **`search-bar`** — Right-rail search. Background `#16181c`, no border, pill (radius 9999), 12px × 20px padding. Search icon left. ### Navigation **`top-nav`** — Sticky header on timeline, 53px tall, background `rgba(0,0,0,0.65)` with `backdrop-filter: blur(12px)`, no border. Section title left ("Home"), filter icon right. **`left-rail`** — Persistent left navigation, 275px wide, background `#000000`. Top: X wordmark in 28px white italic. Below: vertical nav items (Home / Explore / Notifications / Messages / Bookmarks / Communities / Premium / Profile / More) in 20px Chirp 400 with 700-weight active state. Bottom: large white "Post" CTA pill (full-width). **`right-rail`** — Right sidebar, 350px wide, background `#000000`. Top: search bar. Below: stacked cards (Subscribe to Premium, What's happening, Who to follow, Trends). **`bottom-nav-mobile`** — Mobile bottom nav, 5 icons: Home / Search / Communities / Notifications / Messages. The center action button (compose tweet) floats above the nav as a circular blue or white pill. ### Decorative **`engagement-row`** — Horizontal 5-icon row under every tweet: Reply / Retweet / Like / Bookmark / Share + view-count. Each icon is `button-icon` style with its specific active color. Counter is 13/400/`#71767b`. **`like-burst`** — Heart icon animation on tap. Outline heart fills `#f91880` rose-magenta, scales 1.0 → 1.4 → 1.0 over 240ms with spring-bounce, with a faint magenta particle burst. The retweet animation is similar but in green. **`verified-checkmark`** — 18px circular badge inline next to display name. Color indicates tier (blue / gold / grey). ### Easing Curves - **Standard ease**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hovers, opens, transitions. - **Emphasized ease (spring-bounce)**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — like-burst, retweet animation, follow confirmations. ### Duration Buckets - **Fast (100ms)**: Color shifts on hover, button press feedback, link underline. - **Standard (200ms)**: Card hover background, dropdown open, modal entrance. - **Slow (300ms)**: Tweet expand on quote, image lightbox open, page-section reveals. ### Per-Component Micro-States - **Button hover**: Primary white pill darkens to `#d7dbdc` over 100ms; engagement icons shift to active color over 100ms. - **Button press**: Scale 1.0 → 0.96 → 1.0 over 200ms with spring-bounce. - **Like-burst**: Outline heart fills magenta, scales 1.0 → 1.4 → 1.0 over 240ms with spring-bounce, plus 5–8 magenta particles fading outward over 360ms. - **Retweet animation**: Outline retweet icon fills green, rotates 360° over 280ms with emphasized ease. - **Reply hover**: Reply icon shifts `#71767b` → `#1d9bf0` over 100ms; faint blue circle fades in behind it. - **Bookmark active**: Outline bookmark fills brand-blue, no scale animation (subtle confirmation). - **Tweet hover**: Tweet card background shifts from `#000000` → `#080808` (very faint) over 100ms. - **Input focus**: 2px solid blue ring expands from 0 → 2px over 100ms. - **Avatar hover**: Avatar overlays a 60% black tint with white profile preview popover after 600ms hover. ### Page Transitions X uses standard browser navigation. Tweet detail page opens with a 200ms slide-in-from-right on mobile, instant on desktop. Section-on-scroll reveals on marketing pages are 300ms fade-in (no translate) gated by `IntersectionObserver`. ### Reduced Motion `prefers-reduced-motion: reduce` honored: like-burst skipped (instant fill, no scale), retweet rotation skipped, hover scale animations replaced with color-only transitions, tweet detail slide-in becomes instant. Tweet auto-refresh notifications fade in instead of sliding. ### Contrast Pairs - **Strong on bg**: `#ffffff` on `#000000` = **21.0** — AAA at every size. - **Text on bg**: `#e7e9ea` on `#000000` = **18.7** — AAA. - **Body on bg**: `#e7e9ea` on `#000000` = **18.7** — AAA. - **Muted on bg**: `#71767b` on `#000000` = **5.5** — AA at body sizes; meets WCAG for 13px text. - **Blue on bg**: `#1d9bf0` on `#000000` = **6.7** — AA. - **On-brand on blue**: `#ffffff` on `#1d9bf0` = **3.6** — passes large-text AA only; bold-weight CTA text passes. ### Focus Indicators Every focusable element shows a 2px solid `#1d9bf0` ring with 2px offset. The legacy blue is retained as the focus signal because it provides distinct contrast on both dark (Lights Out) and light (Default) modes. ### ARIA Patterns - **Tweet card**: Wrapped in `
`; engagement actions use `