# Design System Inspiration of X (Twitter) (iOS)

## 1. Visual Theme & Atmosphere

X's iOS app is a newsroom collapsed into a phone screen. The default canvas is pure black (`#000000`) — a deliberate choice that pairs OLED battery savings with the stark, reportage-style aesthetic X has cultivated since the 2023 rebrand from Twitter. Every post sits on a full-bleed black sheet divided by hairline rules in cool neutral gray (`#2F3336`), and the UI chrome is monochrome except for one surviving accent: the legacy Twitter Blue (`#1D9BF0`) used for links, mentions, the verified checkmark on legacy accounts, and the "Reply" action color. The feeling is dense, serious, and real-time — closer to a Bloomberg terminal than a social app.

The post is the unit of everything. A tweet (or "post") fills the viewport edge-to-edge at 16pt horizontal insets, anchored by a 32pt circular avatar on the leading side and a trailing `...` overflow. Below the text: a horizontal action row of five interactions — reply, repost, like, views, share — each a thin-line icon in neutral gray that animates to its role color on tap (reply to blue, repost to green `#00BA7C`, like to red/pink `#F91880`). The animation choreography on these taps is X's most recognizable micro-interaction: a subtle scale bounce on the icon, a haptic tick, and the count number ticking up beside it. Nothing else in the app has this level of polish — the rest is utilitarian.

Typography is Chirp (proprietary, 2021, commissioned by Twitter from Swiss Typefaces & Grilli Type), a grotesque sans with a deliberately awkward italic and sharp terminals tuned for tight-line reading at 15pt. Body type sits at 15pt weight 400 on a 20pt line height — a conversational density that fits 3-5 posts per viewport on a standard iPhone. Headlines (display names, trending titles, hero moments) step up to 17-20pt weight 700. There is no display-size type anywhere in the core app; the biggest moment is the user-profile header name at 20pt. Everything else is UI-first, information-first, and flat. A dim mode canvas `#15202B` (a desaturated navy) offers an alternative for users who want dark-without-contrast, and a high-contrast light mode on `#FFFFFF` is available but the app's gravity is black.

**Key Characteristics:**
- Pure-black OLED canvas (`#000000`) with dim-mode `#15202B` and light-mode `#FFFFFF` alternates
- Twitter Blue (`#1D9BF0`) as the structural accent — links, replies, active tab indicator, verified badges
- Repost green (`#00BA7C`) and like pink (`#F91880`) as the only other accent colors — one per social action
- Chirp font (2021) — grotesque sans with idiosyncratic italic, weights 400/500/600/700
- Hairline dividers (`#2F3336` dark / `#EFF3F4` light) — not rules, not cards, just 1pt separators
- Dense, info-heavy layout — 3-5 posts per viewport, minimal whitespace between
- 32pt circular avatars anchoring every post row
- Animated action row with per-action color transitions (blue/green/pink) + haptic ticks
- X logo replaces the bird — edge-to-edge glyph, monochrome white/black depending on theme
- Trending sidebar / "For You" algorithmic feed / "Following" chronological feed split at the top
- Community Notes under posts — a gray bordered card with collapsible context

## 2. Color Palette & Roles

### Primary
- **Twitter Blue** (`#1D9BF0`): Legacy accent — links, @mentions, hashtags, active tab icon, reply action, verified (legacy) checkmark. Still present across the UI despite the X rebrand.
- **Blue Pressed** (`#1A8CD8`): Pressed state on blue CTAs and link taps.
- **X White** (`#FFFFFF`): Primary "X" logotype on dark canvas; primary CTA background on dark mode (the "Post" button is white-on-black, a deliberate inversion from the old blue bird button).
- **X Black** (`#000000`): Primary canvas (dark); "Post" button text on dark mode; logotype on light canvas.

### Canvas & Surfaces (Dark / Default)
- **Canvas Black** (`#000000`): Primary OLED canvas.
- **Surface 1** (`#16181C`): Card surfaces, sheet backgrounds, compose modal.
- **Surface 2** (`#1E2024`): Higher elevation — DM bubbles (received), settings list rows.
- **Divider** (`#2F3336`): The signature 1pt hairline between posts, list rows, nav sections.
- **Dim Canvas** (`#15202B`): Dim-mode alternative canvas (navy-tinted dark, not true black).
- **Dim Surface 1** (`#192734`): Cards on dim mode.
- **Dim Divider** (`#38444D`): Dividers on dim mode.

### Canvas & Surfaces (Light)
- **Light Canvas** (`#FFFFFF`): Primary light canvas.
- **Light Surface 1** (`#F7F9F9`): Card surfaces, filter chip fills, search bar fill.
- **Light Surface 2** (`#EFF3F4`): Higher elevation — compose modal background, selected row.
- **Light Divider** (`#EFF3F4`): Hairlines in light mode.

### Text
- **Text Primary Dark** (`#E7E9EA`): Body text on dark canvas — not pure white, slightly warm off-white for readability.
- **Text Primary Light** (`#0F1419`): Body text on light canvas.
- **Text Secondary Dark** (`#71767B`): @handles, timestamps, metadata on dark.
- **Text Secondary Light** (`#536471`): @handles, timestamps on light.
- **Text Tertiary** (`#71767B`): Disabled labels, very low-emphasis copy (shared across modes at lower contrast).

### Social Action Colors
Each of the five post-action icons has its own activated color. The colors only appear when the action is toggled on — default state is always `#71767B` (secondary gray).
- **Reply Blue** (`#1D9BF0`): Same as Twitter Blue.
- **Repost Green** (`#00BA7C`): Active repost (retweet) state and the "Reposted by…" banner.
- **Like Pink** (`#F91880`): Active like / heart-fill state. Not red — a saturated magenta-pink.
- **Views Gray** (`#71767B`): Views icon stays neutral (it's not an action, it's a count).
- **Bookmark Blue** (`#1D9BF0`): Bookmark active state — same blue as reply.

### Semantic
- **Verified Gold** (`#EAB308`): Government-official account badge.
- **Verified Gray** (`#829AAB`): Business verification badge.
- **Error Red** (`#F4212E`): Post failed, connection lost, destructive confirmations.
- **Community Notes Surface** (`#16181C` dark / `#F7F9F9` light): The bordered context-note card under misleading posts.

## 3. Typography Rules

### Font Family
- **Primary**: `Chirp` (proprietary, 2021, by Swiss Typefaces & Grilli Type for Twitter) — grotesque sans with distinctive italic, shipped in UI and Display optical sizes.
- **Fallback Stack**: `TwitterChirp, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **CJK / Non-Latin**: X falls back to system fonts for Chinese/Japanese/Korean/Arabic/Hebrew — iOS SF system fonts carry non-Latin scripts; Chirp is Latin-plus-extended only.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Screen Title (Large) | Chirp Display | 20pt | 700 | 1.2 | -0.2pt | "Home", "Notifications", profile name on header |
| Section Header | Chirp Display | 17pt | 700 | 1.25 | -0.1pt | "What's happening", "Trends for you" |
| Display Name | Chirp Display | 15pt | 700 | 1.3 | 0pt | Post author's display name in post row |
| Post Body | Chirp UI | 15pt | 400 | 1.33 | 0pt | The tweet text itself — the core unit |
| Quoted Post | Chirp UI | 14pt | 400 | 1.3 | 0pt | Quote-tweet embed body |
| @Handle / Timestamp | Chirp UI | 15pt | 400 | 1.3 | 0pt | `@username · 2h` next to display name — color `#71767B` |
| Action Count | Chirp UI | 13pt | 400 | 1.2 | 0pt | The number next to reply/repost/like icons |
| Trending Topic | Chirp Display | 15pt | 700 | 1.25 | 0pt | Trending sidebar topic title |
| Trending Meta | Chirp UI | 13pt | 400 | 1.2 | 0pt | "Trending in Technology · 24.5K posts" |
| Primary Button | Chirp UI | 15pt | 700 | 1.0 | 0pt | "Post", "Follow", "Subscribe" |
| Tab Label | n/a | — | — | — | — | Tabs are icon-only on X (no labels) |
| DM Body | Chirp UI | 15pt | 400 | 1.3 | 0pt | Direct message bubble text |
| DM Timestamp | Chirp UI | 11pt | 400 | 1.2 | 0pt | Above each DM cluster, in gray |
| Link / @Mention | Chirp UI | inherits | 400 | inherits | 0pt | Blue `#1D9BF0` inline inside post body |

### Principles
- **Two optical variants**: Chirp ships UI (tight, optimized for 13-16pt) and Display (more open, for 17pt+). The app switches at the 17pt threshold.
- **Italic is idiosyncratic**: Chirp's italic has distinctive angular lowercase `a` and `g` — use italic only when semantically italic (book titles, emphasis in quoted text), never as a design accent.
- **Weight concentrated at 400 / 500 / 700**: Regular for body, medium for certain labels, bold for names and titles. No thin, no black.
- **Dynamic Type on body**: Post body, DM body, and quoted text all scale with user preference. Display name and timestamp cap at 17pt to preserve post-row layout.
- **Color on text is structural**: Blue for links/mentions, secondary gray for handles/timestamps, primary off-white for body. Never colorize body text for decoration.

## 4. Component Stylings

### Buttons

**Primary "Post" CTA (The Floating Action Button)**
- Shape: Circle, diameter 56pt, floated bottom-right 16pt from edge, 16pt from tab bar
- Background dark mode: `#FFFFFF` (white) — intentional inversion
- Background light mode: `#0F1419` (near-black)
- Icon: feather / pen SF-symbol-like glyph, 24pt, color inverts to match contrast
- Shadow: `rgba(0,0,0,0.4) 0 4px 12px` (dark mode has no shadow effect, so subtle)
- Pressed: scale 0.95 + soft haptic
- Appears on Home, Search, Notifications; hidden on Messages and Profile

**Primary "Post" Button (In-Compose)**
- Shape: Pill, 500pt corner radius
- Background: `#EFF3F4` (dark) / `#0F1419` (light)
- Text: Chirp 15pt w700, `#0F1419` dark / `#FFFFFF` light
- Padding: 8pt vertical, 20pt horizontal
- Disabled (no text entered): opacity 0.5
- Pressed: opacity 0.9

**Primary Follow / Subscribe Pill**
- Shape: Pill, 500pt corner radius
- Not-following state: `#EFF3F4` fill (dark) or `#0F1419` fill (light), contrasting text, "Follow" label
- Following state: transparent fill, `#536471` 1pt border, "Following" label, secondary text color
- Pressed on "Following": opens an action sheet with Unfollow option
- Padding: 8pt vertical, 16pt horizontal, minimum width 80pt
- Font: Chirp 14pt w700

**Action Icons (Reply, Repost, Like, Views, Share)**
- Size: 18.75pt (the precise size X uses) glyph; 44pt hit area
- Default: `#71767B` outlined
- Active Reply: `#1D9BF0` outlined (touched, opens composer)
- Active Repost: `#00BA7C` filled arrows icon
- Active Like: `#F91880` filled heart
- Active Bookmark: `#1D9BF0` filled bookmark
- Tap animation: icon scales 0.85 → 1.1 → 1.0 spring + count ticks up with a micro slide-up transition, 200ms, paired with `.impact(.light)` haptic
- Like tap: bursts 6 small pink particles from the heart center on transition to active

**Text Button ("Show more replies", "Show this thread")**
- Font: Chirp 15pt w400, `#1D9BF0`
- No underline, 44pt hit area
- Sits inline after post body when conversation continues

### Cards & Containers

**Post Row (The Tweet)**
- Full-width, black background, divided by 1pt `#2F3336` hairline at the bottom
- Leading: 32pt circular avatar, 16pt offset from left edge
- Trailing of avatar-row: display name (Chirp 15pt w700) + @handle + `·` + timestamp + `...` overflow (20pt glyph, trailing-aligned)
- Body: post text Chirp 15pt w400 `#E7E9EA`, full-width minus leading avatar + 12pt gutter
- Media (optional): 16:9 or 1:1 rounded (16pt radius) image/video below text, edge-to-edge within the gutter
- Action row: 5 icons evenly distributed — reply, repost, like, views, bookmark — plus trailing share arrow at the far right; icons and counts paired inline
- Padding: 12pt top, 12pt bottom (divider sits exactly on the bottom edge)
- Tap post: opens thread detail; tap avatar: opens author profile

**Quoted Post Embed**
- Appears inside a parent post when quote-tweeting
- Background: same as parent (transparent)
- Border: 1pt `#2F3336` dark / `#CFD9DE` light
- Corner radius: 16pt
- Padding: 12pt all sides
- Contains: mini author row (24pt avatar + name + @handle + timestamp in 14pt) + quoted post body in 14pt

**Community Note Card**
- Appears under misleading posts when a Note has been rated helpful
- Background: same as canvas (transparent)
- Border: 1pt `#2F3336`
- Corner radius: 16pt
- Header: "Readers added context they thought people might want to know" in 13pt w700 `#71767B`
- Body: note text in 15pt w400 `#E7E9EA`
- Footer: "Do you find this helpful?" with thumbs-up / thumbs-down tap options

**Trending Topic Row**
- 1pt hairline divider above
- Left: category label "Trending in Technology" in 13pt w400 `#71767B`
- Center: trending topic in 15pt w700 `#E7E9EA`
- Right: "24.5K posts" in 13pt w400 `#71767B`
- Trailing `...` overflow 16pt
- Tap: opens search results for that trend

**DM Bubble**
- Sent bubble: `#1D9BF0` background, white text
- Received bubble: `#2F3336` dark / `#EFF3F4` light background, primary text color
- Corner radius: 18pt (rounder than posts — DMs feel conversational)
- Max width: 75% of screen
- Padding: 10pt vertical, 14pt horizontal
- Tail: no tail — just the rounded rect

### Navigation

**Bottom Tab Bar**
- Height: 49pt + safe area (iOS default)
- Background: `rgba(0,0,0,0.85)` with `.regularMaterial` blur on dark mode, `rgba(255,255,255,0.85)` light
- Tabs (5): Home (`house`), Search (`magnifyingglass`), Communities (`person.3`), Notifications (`bell`), Messages (`envelope`)
- Icons only — no labels, this is X's signature
- Icon size: 26pt
- Active color: `#E7E9EA` dark / `#0F1419` light (a stark contrast, not blue)
- Inactive: `#71767B`
- Active icon: filled variant; inactive: outlined

**Top Nav (Home / Profile)**
- Height: 44pt + safe area
- Leading: profile avatar 32pt circular — tap opens side drawer with account switcher, Premium, Lists, etc.
- Center: X logo (monochrome) 22pt glyph
- Trailing: Grok sparkles icon (28pt) or settings gear
- Background on scroll: `rgba(0,0,0,0.7)` with blur

**Feed Filter Bar ("For You" / "Following")**
- Sits below top nav, 48pt tall
- Two tappable labels: "For you" and "Following" — font Chirp 15pt w700
- Active tab: primary text color with a 40pt-wide × 4pt-tall `#1D9BF0` underline, 500pt corner radius
- Inactive tab: `#71767B`
- Swipe between the two feeds changes the active indicator

**Side Drawer (Opened from avatar tap)**
- Slides in from the left, 85% of viewport width
- Top: avatar, display name, @handle, following/followers count
- List: Profile, Premium, Lists, Bookmarks, Monetization, Settings
- Background: canvas color
- Bottom: account switcher chevron + logout

### Input Fields

**Compose Box (Full-screen modal)**
- Modal presents up from the bottom, full height
- Background: canvas
- Top nav: "Cancel" text button left, "Post" pill right
- Avatar on left (40pt)
- Text field: multiline, Chirp 18pt w400 (slightly larger than feed), placeholder "What's happening?" in `#71767B`
- Below text field: character counter ring (if near limit), media/poll/GIF/location icon row
- Bottom bar: audience selector ("Everyone", "Circle", "Verified") as a pill button, then reply controls

**Search Bar**
- Height: 38pt
- Corner radius: 500pt (full pill)
- Background: `#202327` dark / `#EFF3F4` light
- Leading: `magnifyingglass` icon 16pt in `#71767B`
- Placeholder: "Search" in 15pt w400 `#71767B`
- Text: primary color when typed
- No border, no focus ring change — cursor only

**DM Compose Field**
- Height: 36pt (grows vertically on long messages)
- Corner radius: 18pt (pill)
- Background: `#202327` dark / `#EFF3F4` light
- Leading: media picker + GIF + sticker icons
- Trailing: send arrow (`#1D9BF0`) when text present, `+` for media when empty

### Distinctive Components

**X Logo Glyph**
- The replacement for the bird logo since 2023
- Monochrome — white on dark, black on light
- Used at 22pt in top nav, 120pt on splash, 16pt in Reposted-by banner
- Never colored, never gradient, never animated on its own

**Reposted-By Banner**
- Appears above a post that someone you follow reposted
- "🔁 @username reposted" in 13pt w700 `#71767B`
- The repost glyph is the green arrows icon but shown in secondary gray
- Tap `@username` to open their profile

**Like Burst Animation**
- On tap, heart fills pink `#F91880`
- 6 small pink particles shoot outward in a hexagonal pattern for 400ms
- Heart scales 0.85 → 1.2 → 1.0 spring
- Haptic: `.impact(.light)`
- Count number slides up: old number swipes up and fades, new number fades in from below

**Verified Checkmark**
- 16pt blue `#1D9BF0` filled checkmark-in-circle glyph
- Sits inline after display name with 2pt leading gap
- Gold version (`#EAB308`) for government officials
- Gray version (`#829AAB`) for business accounts

**Spaces Indicator (Live Audio)**
- When a Space is live in the user's network, a purple `#7856FF` pulsing badge appears at the top of the feed
- "LIVE" label + host avatars in a cluster
- Tap opens the Space player

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56
- Standard horizontal margin: 16pt — but post content begins at 68pt from the leading edge (16pt margin + 32pt avatar + 12pt gutter), and actions row aligns to that same 68pt indent
- Vertical post spacing: 0pt (posts touch; hairline divider separates)

### Grid & Container
- Content width: full device width with 16pt horizontal safe margins
- Post body column: screen width minus 84pt (accounts for avatar + gutter)
- Media inside post: full post-body column width, 16pt corner radius
- Trending sidebar: not shown on iPhone portrait; only on iPad split view or larger breakpoints

### Whitespace Philosophy
- **High density**: Posts touch — 3-5 fit a typical iPhone viewport. X is built for fast scroll-reading.
- **Hairlines not cards**: Depth is communicated with 1pt dividers, not shadows or card surfaces. The feed is a flat river of posts.
- **Generous tap targets**: Despite visual density, every interactive element (action icons, `...` menu, avatar) has a 44pt minimum hit area.

### Border Radius Scale
- Hairline (0pt): Post rows themselves have no radius — the divider separates them
- Small (4pt): Verified badge, legacy avatars (rarely rectangular)
- Media (16pt): Images, videos, quoted posts, Community Notes
- DM Bubble (18pt): Direct message bubbles
- Full Pill (500pt): Follow button, Post CTA, search bar, filter tabs, audience selector
- Circle (50%): Avatars (all user photos), FAB Post button, action icon hit areas

## 6. Depth & Elevation

X's depth model is flat by design. Content sits on the canvas and is separated by hairlines, not elevated on shadowed cards. The only prominent shadow is the floating Post CTA.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, no elevation | Posts, feed, nav bars, tab bar |
| Hairline (Level 0.5) | 1pt solid `#2F3336` / `#EFF3F4` | Between posts, sections, list rows |
| Floated FAB (Level 1) | `rgba(0,0,0,0.4) 0 4px 12px` | The compose Post circle button |
| Sheet (Level 2) | `rgba(0,0,0,0.6) 0 -8px 24px` | Bottom sheets (menus, audience selector, share) |
| Modal Backdrop | `rgba(0,0,0,0.7)` | Behind full-screen compose, media lightbox |
| Top Nav Blur | `.regularMaterial` over canvas at 70-85% opacity | Floating top nav on scroll |

**Shadow Philosophy**: X is almost entirely flat. The only prominent shadow is the floating Post CTA, which lifts off the canvas to signal "primary action anywhere". Posts themselves never cast shadows — they are content, not surfaces.

### Motion
- **Like tap**: heart scales 0.85 → 1.2 → 1.0 spring over 350ms, 6 pink particles burst in hexagonal pattern for 400ms, count slides up 12pt with fade, `.impact(.light)` haptic
- **Repost tap**: icon spins 0 → 360deg over 400ms as it fills green, count ticks up, `.impact(.light)` haptic
- **Reply tap**: icon scales 0.9 → 1.05 → 1.0 spring, navigates to compose screen sliding up from bottom
- **Feed swipe For You ↔ Following**: horizontal page transition 280ms spring + underline indicator slides smoothly between the two label positions
- **Pull-to-refresh**: custom loader — a single line that expands into the X logo glyph as the user pulls, then spins as refresh fires
- **Tab switch**: instant cross-fade between tabs (no slide transition)
- **Compose open**: modal slides up from bottom 320ms spring with backdrop fade

## 7. Do's and Don'ts

### Do
- Use pure black `#000000` as the default dark canvas — X is committed to true-black OLED
- Reserve Twitter Blue `#1D9BF0` for links, replies, verified marks, and the active tab underline
- Use role-specific colors on action icons: blue (reply/bookmark), green (repost), pink (like)
- Keep post rows flat with 1pt hairlines — no shadows, no cards, no elevation between posts
- Use the Chirp font at weights 400 and 700 only (with 500 for select labels) — no lights, no extra-bolds
- Keep the tab bar icon-only (no labels) — it's the recognizable X pattern
- Use 32pt circular avatars leading every post — this is the anchoring element
- Animate action icons with per-action color + scale + count tick — pair with `.impact(.light)` haptic
- Treat the X glyph as monochrome — white on dark, black on light, never tinted
- Use the FAB Post button inverted from canvas (white on black, black on white) — the deliberate contrast is the brand

### Don't
- Don't use shadows to separate posts — hairlines are the brand-correct separator
- Don't colorize post body text — body text is always primary neutral
- Don't add more accent colors beyond blue / green / pink — they map 1:1 to reply / repost / like
- Don't use uppercase on button labels — "Post", "Follow", "Subscribe" are in sentence case
- Don't use thin font weights — Chirp starts at 400 and tops out at 700
- Don't color the X logo — it's monochrome, always
- Don't use cards — posts are full-bleed with hairlines, containers are rare
- Don't default to light mode — the app opens dark for new users
- Don't hide the FAB Post button — the floating compose circle is persistent on feed screens
- Don't animate slowly — X's motion is tight, 200-400ms, no hero transitions

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | 30pt avatars; post body column narrows to ~280pt |
| iPhone 13/14/15 | 390pt | Standard 32pt avatars; post body column ~306pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in nav — X logo slides slightly |
| iPhone 15/16 Pro Max | 430pt | 32pt avatars; post body column ~346pt; media scales up |
| iPad | 768pt+ | Split view — 3-column (nav rail | feed | trending sidebar); trending sidebar becomes visible |

### Dynamic Type
- Post body, quoted post body, DM body: full scale
- Display name, @handle, timestamp: cap at xxLarge
- Action counts: fixed 13pt (layout-sensitive)
- Tab icons: fixed (icon-only bar)
- Compose placeholder: scales with prompt size

### Orientation
- Home / Search / Notifications / Messages / Profile: **portrait-locked**
- Media lightbox (photo / video viewer): **rotates freely**
- Video playback (fullscreen): **rotates freely**
- Spaces (audio): **portrait-locked**

### Touch Targets
- Action icons: 18.75pt glyph, 44pt effective hit
- FAB Post button: 56pt
- Avatar tap: 32pt glyph, 44pt hit
- `...` overflow: 20pt glyph, 44pt hit
- Tab icons: 26pt glyph, 49pt hit (full tab bar height)
- Follow pill: min 32pt tall, 80pt wide

### Safe Area Handling
- Top: top nav respects safe area + Dynamic Island; logo shifts around the island
- Bottom: FAB Post floats above tab bar (16pt gap), both respect home indicator
- Sides: 16pt insets on all content; bleed-to-edge only for fullscreen media

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas (dark/default): `#000000`
- Canvas (dim): `#15202B`
- Canvas (light): `#FFFFFF`
- Surface 1 (dark): `#16181C`
- Divider (dark): `#2F3336`
- Divider (light): `#EFF3F4`
- Text primary (dark): `#E7E9EA`
- Text primary (light): `#0F1419`
- Text secondary: `#71767B`
- Twitter Blue: `#1D9BF0`
- Repost Green: `#00BA7C`
- Like Pink: `#F91880`
- Verified Gold: `#EAB308`
- Error Red: `#F4212E`

### Example Component Prompts
- "Build an X post row in SwiftUI: full-width on `#000000` canvas, 12pt vertical padding, 1pt `#2F3336` divider bottom. Leading 32pt circular avatar, 16pt from left. To its right: display name 'Elon Musk' in Chirp 15pt w700 `#E7E9EA`, then 16pt verified blue checkmark, then `@elonmusk · 2h` in 15pt w400 `#71767B`, trailing `ellipsis` icon 20pt. Below (indented 12pt after avatar): post body Chirp 15pt w400 `#E7E9EA` with 1.33 line height. Bottom action row: reply, repost, like, views, bookmark icons at 18.75pt `#71767B` with 13pt counts beside each."
- "Create the X like tap animation: tap on outlined heart turns it filled `#F91880`, heart scales 0.85 → 1.2 → 1.0 via spring (response 0.35), 6 small pink particles burst outward in hexagonal pattern fading over 400ms, count number slides up 12pt with fade from old value to new, paired with `.impact(.light)` haptic."
- "Design X's floating Post button: 56pt circle, positioned bottom-right 16pt from screen edge and 16pt above tab bar. Dark mode: `#FFFFFF` fill with black `pencil.and.outline` glyph 24pt; light mode: `#0F1419` fill with white glyph. Shadow `rgba(0,0,0,0.4) 0 4px 12px`. Pressed: scale 0.95 + soft haptic. Navigates to full-screen compose modal sliding up from bottom over 320ms spring."
- "Build the X top nav: 44pt tall + safe area, canvas background at 70% opacity with `.regularMaterial` blur on scroll. Leading 32pt circular user avatar (tap opens side drawer), center 22pt monochrome X logo glyph (white on dark, black on light), trailing 28pt sparkles 'Grok' icon. Below the nav, feed filter bar: 'For you' and 'Following' labels in Chirp 15pt w700, active one has a 40pt × 4pt `#1D9BF0` underline pill; swiping horizontally changes active tab."
- "Create the X compose modal: full-screen over canvas, slides up 320ms spring. Top nav: 'Cancel' text button leading (Chirp 15pt w400 `#1D9BF0`), 'Post' pill button trailing (Chirp 15pt w700, `#EFF3F4` fill on dark / `#0F1419` fill on light, 8pt × 20pt padding, 500pt radius, disabled until text entered). Below: 40pt avatar leading, then multiline text field with Chirp 18pt w400 placeholder 'What's happening?' in `#71767B`. Bottom toolbar: media/gif/poll/emoji/location/schedule icons at 22pt `#1D9BF0`, plus audience selector pill ('Everyone')."
- "Build an X quoted-post embed: inside a parent post body, 1pt `#2F3336` border, 16pt corner radius, 12pt padding. Mini author row at top: 24pt circular avatar, Chirp 14pt w700 display name, 16pt verified check, @handle · timestamp in 14pt `#71767B`, trailing `...`. Below: quoted body in Chirp 14pt w400 `#E7E9EA`. Media inside quote: full-width 16pt-rounded image."

### Iteration Guide
1. Canvas is pure black `#000000` by default — dim mode is `#15202B`, light mode is `#FFFFFF`; app opens dark for new users
2. Twitter Blue `#1D9BF0` is structural: links, replies, verified marks, active tab underline — never decorative
3. Three action accent colors ONLY: blue (reply/bookmark), green (repost), pink (like) — mapped 1:1 to each action
4. Posts separate with 1pt `#2F3336` hairlines — NO shadows, NO cards, NO elevation between posts
5. Typography is Chirp at weights 400/500/700 only — no light, no black; sentence case on buttons
6. Tab bar is icon-only (26pt glyphs, no labels) — the signature X pattern
7. Action row animations: scale bounce + per-action color fill + count tick-up + `.impact(.light)` haptic on every tap
8. FAB Post button inverts from canvas (white-on-black, black-on-white) and floats persistently on feed screens
9. Avatars are always 32pt circular — the anchoring element of every post row
10. X logo is monochrome — never colored, never gradient, never animated on its own