---
version: alpha
name: "Bluesky"
description: "Bluesky is the airy alternative-Twitter aesthetic — a bright `#ffffff` canvas with a confident `#0085ff` sky-blue used throughout the action layer (primary CTA, inline links, brand wordmark, butterfly icon), Inter pulling display through body in the canonical modern-social-app register, and a feed timeline whose density is calibrated for thoughtful scroll rather than addictive engagement. Where X (Twitter) leans into dark-mode-by-default chrome and aggressive monetization UI, Bluesky commits to **open-network warmth**: a paper-white canvas in light mode, every post is a federated AT Protocol record, the algorithmic feed picker lets you choose between Following / Discover / Custom Algorithms / What's Hot. The brand's argument is \"we are building social media as a public utility on top of an open protocol\" — and the visual language commits to the convention that protocol-native social products use: clean type, generous post-card padding, subtle brand-blue accent rationed for action, butterfly logo as the brand glyph. Hand-illustrated aesthetic touches (the butterfly logo descended from Mark Hamill's feather pen sketch on Jay Graber's napkin), playful pinned-post handles like @jay.bsky.team for verification, custom feed selectors at the top of every timeline. The dark-mode variant inverts the canvas to deep navy `#16161a` and lets the sky-blue do its work as the chromatic anchor. This is the cleanest, friendliest, most protocol-respectful social-network surface in 2024–2026."
colors:
  bg: "#ffffff"
  bg-warm: "#f8f9fa"
  bg-muted: "#f1f3f5"
  bg-promo: "#e8f4ff"
  surface: "#ffffff"
  surface-elevated: "#ffffff"
  surface-hover: "#f1f3f5"
  surface-soft: "#eef7ff"
  surface-strong: "#e8eaee"
  text: "#0c0c0c"
  text-strong: "#000000"
  text-muted: "#5e6772"
  text-soft: "#7a838e"
  text-disabled: "#a8aebd"
  text-on-brand: "#ffffff"
  text-link: "#0085ff"
  text-link-hover: "#006cd9"
  brand: "#0085ff"
  brand-hover: "#006cd9"
  brand-active: "#0057b3"
  brand-soft: "#e8f4ff"
  brand-deep: "#0057b3"
  accent-pink: "#fb44a3"
  accent-purple: "#9a75e9"
  accent-yellow: "#f5c518"
  accent-orange: "#f9a13e"
  accent-red: "#e84545"
  accent-green: "#2bb673"
  border: "#dde1e7"
  border-soft: "#eef0f3"
  border-strong: "#bcc1c9"
  border-focus: "#0085ff"
  on-brand: "#ffffff"
  reply-line: "#dde1e7"
  reaction-like: "#fb44a3"
  reaction-repost: "#9a75e9"
  reaction-reply: "#5e6772"
  shadow-card: "rgba(0,0,0,0.06)"
  shadow-modal: "rgba(0,0,0,0.20)"
  shadow-popover: "rgba(0,0,0,0.12)"
  success: "#2bb673"
  success-soft: "#e0f6ec"
  warning: "#f9a13e"
  warning-soft: "#fff3e0"
  danger: "#e84545"
  danger-soft: "#fdebeb"
  info: "#0085ff"
  info-soft: "#e8f4ff"
typography:
  display:
    fontFamily: "Inter"
    fontSize: "56px"
    lineHeight: 1.5
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Inter"
    fontSize: "15px"
    lineHeight: 1.5
  mono:
    fontFamily: "Roboto Mono"
rounded:
  button: "6px"
  card: "8px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "48px"
---

## Overview

## Overview

Bluesky's site is the airy, protocol-respectful alternative-Twitter aesthetic. The canvas is bright `#ffffff` in light mode, deep navy `#16161a` in dark mode, and the chromatic event of the page is `#0085ff` — a confident sky-blue used throughout the action layer (primary CTA, inline links, brand wordmark, butterfly logo, active feed-tab pill, follow button, focus ring). The type is Inter pulling display through body in the canonical modern-social-app register, with display weights up to 800 (Inter Black) for marketing hero gravity. The brand's argument is "we are building social media as a public utility on top of an open protocol (AT Protocol)" — and the visual language commits to the convention that protocol-native social products use: clean type, generous post-card padding, subtle brand-blue rationed for action, butterfly logo as the brand glyph.

The signature is the post timeline with feed-picker tabs. Walk into bsky.app and you'll see (logged in): a sticky top with feed-picker tabs ("Following / Discover / What's Hot / [Custom Feed]") rendered as pill-shaped tabs (active is sky-blue fill, inactive is transparent), then a 600px-wide centred timeline of post cards. Each post card is the workhorse component: 40px circular avatar left, then the post body — display name in 14px / 600 + handle in 14px / 400 muted (`@username.bsky.social`) + timestamp in 13px / 400 muted ("3h" or "2024-04-15") + post text in 15px / 400 / 1.5 + optional embed (image / link card / quote post) + reaction row (reply / repost / like / share icons with tabular counters). Post cards have NO border-radius — they sit flush-edge with a `1px solid #dde1e7` bottom hairline (Twitter convention). The list density is calibrated for thoughtful scroll — 16px padding around each post, generous reaction-icon spacing, no engagement-pumping highlights or gradient-borders. Posts breathe.

Custom feeds are a defining feature, and the visual pattern reflects it. The Bluesky feed-picker lets users pin algorithmic feeds maintained by anyone — "Quiet Posters" (low-engagement-but-high-quality posts), "Mutuals" (only people who follow you back), "Discover" (Bluesky's house algorithm), "What's Hot" (legacy default), and dozens of community-maintained feeds. The feed-tile component (used in the feed picker) shows: 48px feed avatar (often a custom illustration or emoji), feed name in 16px / 600, description in 14px / 400 muted, like-count + creator handle, then a "Pin to home" CTA. This explicit-feed-picking UX is the brand's pedagogical commitment: users have agency over what they see, not just over what they post.

Inter — Rasmus Andersson's open-source workhorse — sets the entire site. Display sizes go up to 56px / 800 (Inter Black) with `-0.025em` tracking; body is 15px / 400 / 1.5 line-height (note: 15px not 16px — slightly tighter than docs-grade, calibrated for social-feed scanning rather than long-form reading). Body-large at 18px is used for hero leads and post-detail-page primary post text. The font carries Bluesky's voice, which is the voice of an open-source community that's serious about building public infrastructure: clean, friendly, technically literate but not techbro-coded. There's no display-serif companion, no decorative italic.

Reaction icons carry the brand's chromatic personality. The reply icon is muted grey by default; the repost icon turns purple `#9a75e9` when activated; the like heart turns hot pink `#fb44a3`. These three small saturated accents (sky-blue for action, pink for like, purple for repost) form the brand's social-action palette. They're discrete enough that the page never feels chromatically loud, but vibrant enough that interactions feel rewarded. The like animation is a small heart-pop on tap (scale `1 → 1.3 → 1` over 300ms ease-spring), the repost animation is a 360-degree rotation on tap.

Density on the marketing site (the `bsky.app/about` and `bsky.social` surfaces) is sparse — generous 96–128px section gaps, 600px prose width, large 56px / 800 display headlines. Density in the app itself (the actual feed) is medium — 600px feed column, 16px post padding, no border-radius on post cards (Twitter convention). The dual-density signature reflects the brand's split mission: marketing-side, "explain why this exists"; app-side, "let people post and read."

**Key Characteristics:**
- Bright `#ffffff` canvas in light mode; deep navy `#16161a` in dark mode (full dark-mode token swap).
- Signature `#0085ff` Sky Blue — primary CTA, brand wordmark, butterfly logo, inline links, active feed-tab pill.
- Deeper `#0057b3` blue for outlined buttons on light (AAA contrast). Brightened `#3aa3ff` on dark.
- Inter pulling display through body — display weights up to 800 (Inter Black) with `-0.025em` tracking for marketing hero.
- 15px / 400 / 1.5 body type (slightly tighter than docs-grade) — calibrated for social-feed scanning.
- Post cards with NO border-radius — flush-edge with `1px solid #dde1e7` bottom hairline (Twitter convention).
- 40px circular avatars; 600px feed column width centred.
- Sky-blue active feed-tab pill — the algorithmic-feed-picker UX is the brand's pedagogical commitment.
- Reaction icons in three saturated accents: pink heart `#fb44a3` for like, purple `#9a75e9` for repost, sky-blue `#0085ff` for reply.
- Pill-shaped (`9999px`) primary buttons; pill-shaped follow buttons; circular avatars.
- Heart-pop animation on like (`1 → 1.3 → 1` over 300ms ease-spring); 360° rotation on repost.
- Backdrop-blurred sticky nav and feed-tabs (`rgba(255,255,255,0.92)` + `blur(12px)`).
- Open-source AT Protocol — client apps and protocol both on GitHub. The brand argument is "this is public infrastructure."
- Custom-feed picker as a first-class UX — every user can pin algorithmic feeds maintained by anyone.
- 800-weight Inter Black for marketing hero — among the heaviest weights deployed in modern social-app design.

## Colors

### Primary
- **Bright White** (`#ffffff`): The defining canvas in light mode. Pure white, no warm tint.
- **Warm Off-White** (`#f8f9fa`): Hero band background, alt section banding, post-hover wash.
- **Deep Navy** (`#16161a`): The dark-mode canvas. Slightly lifted from pure black to soften OLED bloom.
- **Bluesky Sky Blue** (`#0085ff`): The brand's primary blue. Wordmark, butterfly logo, primary CTA, inline links, active feed-tab.
- **Display Black** (`#0c0c0c`): Primary body text — near-pure black for the high-contrast register Bluesky favours.

### Brand & Dark
- **Brand Hover** (`#006cd9`): Pointer-over state.
- **Brand Active** (`#0057b3`): Pressed state.
- **Brand Soft** (`#e8f4ff`): Soft sky-blue tint surface, badge bg.
- **Brand Deep** (`#0057b3`): Deeper blue for outlined buttons on light — AAA contrast.
- **Dark Canvas** (`#16161a`): Dark-mode primary surface.
- **Dark Surface** (`#1f1f23`): Dark-mode card.
- **Dark Surface Elevated** (`#26262d`): Raised dark card.
- **Dark Brand** (`#3aa3ff`): Brightened sky-blue for AAA contrast on dark.

### Accent
- **Like Pink** (`#fb44a3`): The like-heart pink. The brand's defining secondary accent.
- **Repost Purple** (`#9a75e9`): Repost-arrow purple. Tertiary accent.
- **Pinned Yellow** (`#f5c518`): Pinned-post tag.
- **Labeled Orange** (`#f9a13e`): Content-warning tag.
- **Block Red** (`#e84545`): Error / block / unfollow-confirm.
- **Success Green** (`#2bb673`): Account verified, follow succeeded.

### Interactive
- **CTA Sky Blue** (`#0085ff`): Primary action button.
- **Inline Link Sky Blue** (`#0085ff`): Inline links — same hue as CTA.
- **Outlined Deep Blue** (`#0057b3` border on white): Secondary action with AAA contrast.
- **Active Feed Tab** (`#0085ff` bg + white text): Pill fill for active feed.
- **Filter Chip Active** (`#0c0c0c` bg + white text): Inverts to black.
- **Disabled** (`#a8aebd` text on `#f1f3f5` bg): Non-interactive control.

### Reaction-Action Colours (Saturated)
- **Like** (`#fb44a3` pink): Heart icon when liked.
- **Repost** (`#9a75e9` purple): Repost arrow when activated.
- **Reply** (`#0085ff` sky-blue): Reply icon when active in compose.
- **Share** (`#5e6772` neutral): Share-icon stays muted (not action-coloured).

### Neutral Scale
- **Display Black** (`#0c0c0c`): Body text.
- **Strong Black** (`#000000`): Hero display only.
- **Muted** (`#5e6772`): Secondary metadata, handle, timestamp.
- **Soft** (`#7a838e`): Tertiary captions, post timestamp on dark.
- **Disabled** (`#a8aebd`): Inactive form labels.
- **Border Default** (`#dde1e7`): Card hairlines, dividers, post bottom-line.
- **Border Soft** (`#eef0f3`): Subtle table-row dividers.
- **Border Strong** (`#bcc1c9`): Focused field outline before brand-blue ring.
- **Reply Tree Line** (`#dde1e7` light / `#2c2c33` dark): The vertical line connecting threaded replies.

### Surface & Borders
- **Surface Default** (`#ffffff` light / `#1f1f23` dark): Card.
- **Surface Hover** (`#f1f3f5` light / `#2c2c33` dark): Nav hover, post hover.
- **Surface Soft** (`#eef7ff` light / `#0d2940` dark): Soft brand-tinted surface.
- **Surface Strong** (`#e8eaee` light): Divider band.
- **Promo Surface** (`#e8f4ff` light): Soft sky-blue promo band.

### Shadow Colors
- Posts have NO shadow at rest or on hover. Bluesky relies on the bottom hairline for separation — Twitter convention.
- **Popover Shadow** (`rgba(0,0,0,0.12)`): Dropdown, tooltip, more-options menu.
- **Modal Shadow** (`rgba(0,0,0,0.20)`): Dialog floor.
- **Dark Shadow** (`rgba(0,0,0,0.4)`): Dark-mode modal floor — deeper because dark canvas needs more contrast for shadow.

### Semantic
- **Success** (`#2bb673` text on `#e0f6ec` soft bg): Account verified, "Followed @user", "Post sent".
- **Warning** (`#f9a13e` text on `#fff3e0` soft bg): "Labeled by [Moderator]" content-warning, low-quality-account warning.
- **Danger** (`#e84545` text on `#fdebeb` soft bg): Form validation error, blocked user warning.
- **Info** (`#0085ff` text on `#e8f4ff` soft bg): "New posts available" feed-update banner.

## Typography

### Font Family
- **Primary**: `"Inter"` (or `"Inter var"` variable) — version 4.0+. Fallback chain: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif`.
- **Mono**: `"SF Mono", "Roboto Mono", Menlo, Consolas, monospace` — used for code samples in dev docs and AT Protocol records.
- **OpenType Features**: `kern` and `liga` enabled site-wide. `tnum` enabled on like/repost/reply counters, follower counts, post timestamps, character counters.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| Display Hero | Inter | 56px | 800 | 1.1 | -0.025em | kern,liga | Marketing landing — "Social media as it should be" |
| Display XL | Inter | 44px | 800 | 1.15 | -0.02em | kern,liga | Section hero, AT Protocol page |
| Display LG | Inter | 32px | 700 | 1.2 | -0.015em | kern,liga | Feature section title |
| Display MD | Inter | 24px | 700 | 1.25 | -0.01em | kern,liga | Section heading |
| Display SM | Inter | 20px | 700 | 1.3 | -0.005em | kern,liga | Subsection heading |
| Title LG | Inter | 18px | 600 | 1.4 | 0 | kern,liga | Card title, profile display name |
| Title MD | Inter | 16px | 600 | 1.4 | 0 | kern,liga | List item title |
| Title SM | Inter | 14px | 600 | 1.4 | 0 | kern,liga | Sidebar nav, dropdown header |
| Body LG | Inter | 18px | 400 | 1.55 | 0 | kern,liga | Lead paragraph, post-detail primary post |
| Body MD | Inter | 15px | 400 | 1.5 | 0 | kern,liga | Default post text in feed |
| Body SM | Inter | 14px | 400 | 1.45 | 0 | kern,liga | Reply, secondary metadata |
| Button LG | Inter | 16px | 700 | 1.0 | 0 | kern,liga | "Sign up" / "Create account" CTA |
| Button MD | Inter | 14px | 600 | 1.0 | 0 | kern,liga | Default button label |
| Handle | Inter | 14px | 400 | 1.45 | 0 | kern,liga | @username.bsky.social handle |
| Timestamp | Inter | 13px | 400 | 1.3 | 0 | tnum | "3h" / "2024-04-15" |
| Counter | Inter | 13px | 500 | 1.0 | 0 | tnum | Like / repost / reply count |
| Caption | Inter | 13px | 400 | 1.4 | 0 | kern,liga | Disclosures |
| Eyebrow | Inter | 12px | 600 | 1.0 | 0.06em | kern,liga | Uppercase "DISCOVER" |
| Badge | Inter | 11px | 600 | 1.0 | 0.04em | kern,liga | "NEW", "FOLLOWS YOU" |

### Principles
- **Single family discipline.** Inter covers display through body. There is no display-serif companion.
- **800-weight (Inter Black) for marketing hero.** The 56px display headline uses Inter Black at 800 — among the heaviest weights deployed in modern social-app design. This is the brand's confidence signal.
- **15px body, not 16px.** Default post text is 15px / 1.5 — slightly tighter than docs-grade. Calibrated for social-feed scanning rather than long-form reading. Body-large at 18px is used for hero leads and post-detail-page primary post.
- **Modest negative tracking on display.** Display sizes use `-0.005em` to `-0.025em`.
- **0.06em tracking on eyebrows.** Uppercase eyebrows use 12px / 600 / `0.06em`.
- **Tabular numerals on counters.** Like / repost / reply counts, follower counts, character-counter on compose, post timestamps all use `tnum` so columns align.
- **400 / 500 / 600 / 700 / 800.** Body at 400, counters at 500, titles at 600, display at 700, marketing hero at 800. Bluesky uses a wider weight palette than Signal because the social-app context benefits from typographic distinction.
- **Sentence case for everything.** "Sign up", "Create account", "Pin to home". Capital first word only.
- **Handles with bsky.social / domain DNS.** Bluesky's handle convention is `@username.bsky.social` for default users, but DNS-verified handles like `@jay.bsky.team` or `@jaytweets.com` use the user's own domain. The handle text is rendered in 14px / 400 muted, distinct from the 14px / 600 display name.

## Layout

### Spacing System
- Base: 4px. Scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128.
- Post-card padding: 16px.
- Reaction-row icon spacing: 16px between icons.
- Avatar gap: 12px between avatar and post body.
- Section gap (marketing): 96–128px.
- Feed column width: 600px centred.

### Grid & Container
- Page width: 1280px max.
- Content max within page: 1080px centred (240px left rail + 600px feed + 320px right rail = 1160 with gutters).
- Marketing pages: 600px prose width centred.
- Hero: full-bleed background, content centred at 1080px.

### Whitespace Philosophy
Bluesky has dual-density. Marketing pages are sparse — generous 96–128px section gaps, 600px prose width, large 56px / 800 hero. The app feed is medium-density — 16px post padding, 1.5 line-height, no border-radius on cards. The marketing argument is "explain why this exists"; the app argument is "let people read and post." Both registers commit to bright white canvas and Inter typography.

### Section Cadence (Marketing)
- Top bar (sticky, glass)
- Hero (560px+, 56px / 800 "Social media as it should be" headline, 18px lead, primary sky-blue pill CTA + outlined deeper-blue secondary)
- "Choose your algorithm" feature explainer
- "Own your identity" feature explainer (DNS-verified handles)
- "Take your account anywhere" feature (AT Protocol)
- "Try it now" CTA band
- Press logos (NYT, Wired, The Verge, etc.)
- Footer (3-column dark `#16161a` band — Get the app / Resources / Legal)

### Section Cadence (App)
- Top bar (sticky, glass) with feed tabs below
- Feed timeline (post cards stacked)
- Composer (sticky bottom on mobile / right rail on desktop)
- Right rail (Suggested follows, Trending, footer)

Light/dark alternation: light by default, full token swap to dark on `prefers-color-scheme: dark` or user toggle.

### Breakpoints
| Token | Min | Use |
|-------|-----|-----|
| mobile | 0px | Single-column feed, FAB compose button, bottom-nav tabs |
| tablet | 600px | Feed centred, no rails |
| desktop | 900px | Left rail visible (240px) + 600px feed |
| wide | 1200px | Left rail + 600px feed + 320px right rail |

### Touch Targets
- 44×44 minimum on all interactive controls. Reaction icons at 36×36 visual but 44×44 tap target via padding.
- FAB at 56×56 — generous mobile thumb target.

### Collapsing Strategy
- **Top nav**: collapses to hamburger + "Get the app" on `< 600px`.
- **Left rail**: collapses to bottom-nav-bar tabs on mobile (Home / Search / Notifications / Chat / Profile).
- **Right rail**: hidden on `< 1200px`.
- **Feed tabs**: horizontal scroll on all breakpoints.
- **FAB compose**: shows only on mobile (`< 900px`); desktop has compose in left rail.
- **Hero (marketing)**: title scales 56 → 44 → 32 → 24; image collapses below text on `< 600px`.

### Image Behavior
- Avatars: served at 1×, 2×, 3× density; circular crop applied via CSS `border-radius: 9999px`.
- Post images: max 1000×750 in feed; tap to open full-screen lightbox with zoom + alt-text overlay.
- Video: native browser video controls; tap to play (autoplay disabled by default for accessibility + bandwidth).
- Banner images: 1200×400 aspect; cropped to fill on different screens.

### Container Queries
Used on the post card — reaction row spacing collapses on narrow card widths; on link-embed card — thumbnail moves from left to top below 320px width.

## Elevation & Depth

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 (flat) | No shadow, no border | Section background, hero band, post card rest |
| 1 (hairline) | `1px solid #dde1e7` bottom only | Post card separator, divider |
| 2 (border) | `1px solid #dde1e7` all sides | Custom feed tile, link embed, quote-post embed |
| 3 (popover) | `0 4px 16px rgba(0,0,0,0.12)` | Dropdown, more-options menu, search-result preview |
| 4 (modal) | `0 16px 48px rgba(0,0,0,0.20)` | Dialog, compose modal, report |

### Shadow Philosophy
Posts have NO shadow. Feed cards rely on bottom hairline only — Twitter convention adopted in full. Modals and dropdowns use neutral shadows (no brand-tint). The brand never uses sky-blue-tinted shadows — blue belongs to action, not elevation. Dark-mode shadows deepen to 0.4 opacity because the dark canvas needs more contrast for shadow.

## Shapes

- **Micro** (`2px`): Tiny indicator dot.
- **Standard** (`4px`): Input, badge.
- **Comfortable** (`6px`): Tag chip.
- **Relaxed** (`8px`): Custom feed tile, modal, form input — the workhorse mid radius.
- **Featured** (`12px`): Quote-post embed, link-embed card, modal.
- **Pill** (`9999px`): Primary button, follow button, search pill, feed-tab pill, avatar circle, FAB.
- **Flat (0px)**: Post cards in feed — flush-edge with bottom hairline (Twitter convention).

The flat-edge post card + pill button pairing is the geometric signature. Flat post cards signal "this is a feed; cards are temporal slices, not standalone artifacts." Pills signal action and identity (avatar). The combination reads as social-feed-native rather than as e-commerce or editorial.

## Components

### Buttons

**Primary (Sky-Blue Pill)**
- Background: `#0085ff`. Text: `#ffffff`. Radius: `9999px` (full pill). Padding: `10px 24px`. Height: `44px`. Font: Inter 16px / 700.
- Hover: `#006cd9`. No shadow lift, no scale.
- Active: `#0057b3`.
- Use: "Sign up", "Create account", "Post". One per viewport in marketing; multiple in app contexts.

**Secondary (Outlined Deep Blue)**
- Background: `#ffffff`. Text: `#0057b3`. Border: `1px solid #0057b3`. Radius: `9999px`. Padding: `10px 24px`.
- Hover: bg `#e8f4ff`.
- Use: "Sign in", "Read the docs". Note: uses deeper `#0057b3` for AAA contrast.

**Tertiary Text**
- Background: `transparent`. Color: `#0085ff`. Padding: `8px 12px`.
- Hover: underline appears.
- Use: Inline action, footer link.

**Follow (Sky-Blue Compact Pill)**
- Background: `#0085ff`. Text: `#ffffff`. Radius: `9999px`. Padding: `6px 16px`. Height: `32px`. Font: 14px / 600.
- Use: Compact "Follow" pill on profile cards, search results, suggested-follows rail.

**Following (Outlined Neutral Compact Pill)**
- Background: `#ffffff`. Text: `#0c0c0c`. Border: `1px solid #dde1e7`. Radius: `9999px`. Padding: `6px 16px`. Height: `32px`.
- Hover: text changes to "Unfollow" + bg `#fdebeb` with `#e84545` text.
- Use: Following-state pill — clear visual differentiation from the active Follow CTA.

**Follow Back**
- Background: `#ffffff`. Text: `#0085ff`. Border: `1px solid #0085ff`. Radius: `9999px`. Padding: `6px 16px`. Height: `32px`.
- Use: Outlined sky-blue when target follows you first.

**Compose Floating Action Button (Mobile)**
- Background: `#0085ff`. Color: `#ffffff` (pencil icon). Radius: `9999px`. Size: `56 × 56`.
- Sticky bottom-right of feed on mobile.

**Reaction Icon Button**
- Background: `transparent`. Default color: `#5e6772`. Radius: `9999px`. Size: `36 × 36`.
- Hover: bg fill with brand-tint (`rgba(0,133,255,0.1)` for reply; `rgba(155,117,233,0.1)` for repost; `rgba(251,68,163,0.1)` for like).
- Active state: icon takes the saturated brand colour for that action.

### Cards & Tiles

**Post Card (Default)**
- Background: `#ffffff`. Color: `#0c0c0c`. Radius: 0 (flush-edge). Padding: `16px`. Border-bottom: `1px solid #dde1e7`.
- Layout: 40px circular avatar left, 12px gap, post body right (display name 14px / 600 + handle 14px / 400 muted + "·" + timestamp 13px / 400 muted, all in one line; then post text 15px / 400 / 1.5; then optional embed; then reaction row with 4 icons: reply / repost / like / share each with `tnum` counter).
- Hover: bg `#f8f9fa` warm-grey wash. No shadow.
- Use: Default post in feed.

**Post Card (Detail Page)**
- Background: `#ffffff`. Padding: `24px`. Larger 18px / 400 / 1.55 body type for the focal post. Below the focal post: full thread tree with reply-line `1px solid #dde1e7`.
- Use: Post detail page primary post.

**Quote Post Embed**
- Background: `#ffffff`. Color: `#0c0c0c`. Radius: `12px`. Padding: `12px`. Border: `1px solid #dde1e7`.
- Layout: nested post card with rounded `12px` border (different from flat-edge feed cards), 12px padding inside parent post.
- Use: Quote-post embed within a parent post.

**Custom Feed Tile**
- Background: `#ffffff`. Color: `#0c0c0c`. Radius: `8px`. Padding: `16px`. Border: `1px solid #dde1e7`.
- Layout: 48px feed avatar (often emoji or custom illustration) left, feed name 16px / 600 + creator handle 14px / 400 muted + description 14px / 400 (max 2 lines), like-count + "Pin to home" pill button below.
- Use: Feed picker, "Discover Feeds" page.

**Profile Header Card**
- Background: `#ffffff`. No radius (flush-edge).
- Layout: banner image 1200×400 (or default sky-blue gradient), 80px circular avatar overlapping at left bottom, then below banner: display name 22px / 700, handle 14px / 400 muted, "Follows you" badge inline, bio 15px / 400 / 1.5, post count + follower count + following count tabular row, primary "Follow" CTA top-right of header.

**Link Embed Card**
- Background: `#ffffff`. Color: `#0c0c0c`. Radius: `12px`. Border: `1px solid #dde1e7`.
- Layout: thumbnail (16:9 or square) left or top depending on content, title 16px / 600 + description 14px / 400 muted (max 2 lines) + domain caption 13px / 400 muted with site-icon left.

### Badges, Tags, Indicators

**Follows You**
- Background: `#f1f3f5`. Color: `#5e6772`. Radius: `4px`. Padding: `2px 6px`. Font: 11px / 500.
- Use: Tiny grey tag inline next to handle on profile pages.

**Pinned**
- Background: `#fff8e0`. Color: `#a06c0a`. Radius: `4px`. Padding: `2px 8px`. Font: 11px / 600.
- Format: "📌 Pinned" with pin emoji.
- Use: Pinned-post indicator.

**Labeled (Content Warning)**
- Background: `#fff3e0`. Color: `#9d5511`. Radius: `4px`.
- Use: "Labeled by [Moderator Service]" content-warning tag.

**NEW**
- Background: `#e8f4ff`. Color: `#0057b3`. Radius: `4px`.
- Use: New-feature tag in marketing.

**Reaction Counter**
- Format: 13px / 500 tnum number beside icon.
- Use: Like / repost / reply counts in reaction row.

### Inputs & Forms

**Search (Pill, Filled)**
- Background: `#f1f3f5`. Color: `#0c0c0c`. Border: none. Radius: `9999px` (pill). Height: `44px`. Padding: `10px 16px 10px 40px`.
- Magnifying-glass icon left in `#5e6772`. Placeholder "Search".
- Focus: bg `#ffffff`, border `1px solid #0085ff`, ring `0 0 0 3px rgba(0,133,255,0.4)`.

**Text Input**
- Background: `#ffffff`. Color: `#0c0c0c`. Border: `1px solid #bcc1c9`. Radius: `8px`. Height: `44px`. Padding: `10px 16px`.
- Label: 14px / 600 above. Hint: 13px / 400 muted below.
- Focus: border `#0085ff`, ring `0 0 0 3px rgba(0,133,255,0.4)`.

**Compose Post Textarea**
- Background: `#ffffff`. Color: `#0c0c0c`. Border: none. Radius: 0.
- Layout: 18px / 400 / 1.5 body type, 300-character counter top-right (counts down from 300 — turns red below 20).
- Below: media-upload icons (image, GIF, video, link), language picker, alt-text reminder, primary "Post" CTA right.

**Filter Chip**
- Default: bg `#ffffff`, color `#0c0c0c`, border `1px solid #dde1e7`, radius `9999px`, padding `6px 14px`.
- Active: bg `#0c0c0c`, color `#ffffff`. Inverts to black.
- Use: Search filter — "People / Posts / Feeds / Lists / Starter packs".

### Navigation

**Top Bar (Logged-Out, Sticky, Glass)**
- Background: `rgba(255,255,255,0.92)` with `backdrop-filter: blur(12px)`. Color: `#0c0c0c`. Border-bottom: `1px solid #dde1e7`. Height: `56px`.
- Layout: Bluesky butterfly logo + "Bluesky" wordmark left (24px logo + 18px / 700 wordmark), nav links right ("About / Blog / Support / Jobs / Privacy / Terms"), "Sign in" + "Get the app" pill CTAs right.
- Mobile: collapses to hamburger + "Get the app".

**Left Rail (Logged-In)**
- Background: `#ffffff`. Width: `240px`. Padding: `24px 16px`.
- Vertical stack: Home / Search / Notifications (with red-dot badge if unread) / Chat (with badge) / Feeds / Lists / Profile / Settings — each row 16px icon + 16px / 600 label.
- Bottom: sky-blue pill "New post" CTA.

**Right Rail**
- Background: `#ffffff`. Width: `320px`. Padding: `24px 16px`.
- Search input top, "Suggested follows" card with 3 user rows + Follow buttons, "Trending" hashtag list, footer links band.

**Feed Tabs (Sticky, Glass)**
- Background: `rgba(255,255,255,0.92)` + `blur(12px)`. Border-bottom: `1px solid #dde1e7`.
- Layout: horizontal scroll of pill tabs — "Following / Discover / What's Hot / [Custom Feed Name] / [+ Add]". Active tab: sky-blue fill, white text. Inactive: transparent with `#5e6772` muted text.

### Modals & Toasts

**Modal Dialog**
- Background: `#ffffff`. Color: `#0c0c0c`. Radius: `12px`. Padding: `24px`.
- Shadow: `0 16px 48px rgba(0,0,0,0.20)`.
- Backdrop: `rgba(0,0,0,0.5)`.
- Use: Compose post (full-screen on mobile), settings, report.

**Toast**
- Background: `#0c0c0c`. Color: `#ffffff`. Radius: `8px`. Padding: `12px 16px`.
- Use: "Post sent", "Followed @user", "Link copied" — bottom-left, auto-dismiss 3s.

### Easing Curves
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material standard ease.
- **Out**: `cubic-bezier(0, 0, 0.2, 1)` — incoming elements.
- **Spring**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — like-heart pop, repost rotation.

### Duration Buckets
- **Fast**: 100ms — colour shifts, hover transitions.
- **Standard**: 200ms — modal open, dropdown.
- **Slow**: 300ms — heart-pop animation, repost rotation.
- **Celebration**: 500ms — like-confetti (rare, for milestone-likes).

### Per-Component Recipes
- **Like (heart-pop)**: On tap, heart icon scales `1 → 1.3 → 1` over 300ms ease-spring + colour `#5e6772 → #fb44a3` over 100ms. Counter increments with tnum number flip.
- **Repost (rotation)**: On tap, repost arrow rotates 0 → 360deg over 300ms ease-spring + colour `#5e6772 → #9a75e9`.
- **Reply (focus)**: On tap, reply icon colour `#5e6772 → #0085ff`, focus moves to inline composer.
- **Follow toggle**: Sky-blue Follow pill swaps to outlined-neutral "Following" pill over 100ms colour transition.
- **Post hover**: bg `#ffffff → #f8f9fa` over 100ms.
- **Modal open**: 200ms ease-out, opacity `0 → 1` + scale `0.96 → 1`.
- **Toast in**: slide up 6px + opacity over 200ms; auto-dismiss after 3s.
- **Feed loading**: Skeleton shimmer pulse — `1.0 → 0.7 → 1.0` opacity over 1500ms ease-in-out, infinite. Pauses on `prefers-reduced-motion`.
- **Character counter**: When typing in compose, counter `300 → 299 → ...` with tnum flip. Below 20 chars, counter turns `#e84545` red.
- **New posts banner**: When new posts arrive, "Show new posts" sky-blue pill banner slides down from top of feed over 300ms ease-out.

### Page Transitions
Bluesky uses Next.js / React Router with client-side routing for app pages. Marketing pages are static (statically rendered). In-app navigation: 100ms opacity fade between feed pages.

### Reduced Motion
`prefers-reduced-motion: reduce` collapses:
- Like heart-pop scale → instant colour-swap.
- Repost rotation → instant colour-swap.
- Modal scale-in → opacity-only.
- Feed-loading skeleton pulse → static (no shimmer).
- New-posts banner slide → instant appear.
- Counter tnum flip → instant.

### Contrast Pairs (Light Mode)
- Display Black `#0c0c0c` on white `#ffffff`: **19.2:1** — AAA at all sizes.
- Muted `#5e6772` on white: **5.4:1** — AA at body sizes.
- White on Sky Blue `#0085ff`: **4.0:1** — fails AAA, used at 16px / 700 (large-text bracket boundary).
- Sky Blue `#0085ff` on white: **4.0:1** — AA at body. For inline links, use deeper `#0057b3`.
- Inline link Deep Blue `#0057b3` on white: **7.4:1** — AAA.
- Like Pink `#fb44a3` on white: **3.4:1** — fails AA, used decoratively only (heart icon).
- Disabled `#a8aebd` on white: **2.6:1** — fails, used for `aria-disabled` only.

### Contrast Pairs (Dark Mode)
- White on Dark Canvas `#16161a`: **19.0:1** — AAA at all sizes.
- White on Dark Brightened Brand `#3aa3ff`: **5.5:1** — AA at body.
- Dark Muted `#8e96a3` on Dark Canvas: **5.6:1** — AA at body.

### Focus Indicators
- Default focus: `3px solid rgba(0,133,255,0.4)` outline with `2px` offset.
- Form fields: border lifts to `#0085ff` on focus, plus the 3px ring outside.
- Tab order: top nav → feed tabs → main content top-to-bottom → reaction icons within each post → right rail → footer.

### ARIA Patterns
- Posts: `<article>` element with `aria-label="[Display name] posted: [Post text excerpt]. [Timestamp]. [Like count] likes, [Repost count] reposts, [Reply count] replies."`
- Reaction icons: `role="button"` with `aria-pressed="true|false"` (for like/repost) and explicit `aria-label="Like" / "Liked"` swap.
- Reply tree: `role="region" aria-label="Conversation thread"` with proper heading hierarchy.
- Feed tabs: `role="tablist"` with `role="tab"` items; selected tab has `aria-selected="true"`.
- Compose modal: `role="dialog" aria-modal="true"` with focus trap.
- Image alt text: required by default in compose modal; "Add alt text" callout if user attaches image without describing.
- Search: `role="search"` with `aria-label="Search Bluesky"`.
- Feed update banner: `aria-live="polite"` announces new posts.

### Keyboard Navigation
- Tab: move forward through controls; Shift+Tab reverses.
- J / K: move to next/previous post in feed (Vim-style; documented but optional).
- L: like focused post.
- R: reply to focused post.
- T: repost focused post.
- N: open compose modal.
- ESC: close modal, dropdown.
- Cmd-K / Ctrl-K: opens search.
- Arrow keys: navigate within reaction row, feed tabs.

### Screen Reader Hints
- Avatars have `alt="[User] profile picture"`.
- Display name + handle + timestamp combined into single screen-reader announcement so feeds scan fast.
- Reaction counts announced with the action ("3 likes, 2 reposts, 1 reply").
- New-posts banner: live-region announces count of new posts available.
- Image alt text: when user adds alt text in compose, screen readers receive the description.
- Quote-post embed: announces "Quoted post by [User]: [Quoted text]".

### Reduced Motion
Honoured. See §8.

### Tone
Bluesky's voice is **friendly, technically literate, and protocol-respectful**. Marketing copy reads like a hopeful open-source project's blog — clear, structured, free of techbro jargon but comfortable explaining "AT Protocol" or "DNS-verified handles" to a curious reader. Headlines ("Social media as it should be", "Choose your algorithm", "Own your identity") set political stakes; descriptions explain how the cryptographic / federated architecture actually works in plain English. The brand never assumes the reader is a Twitter refugee or a dev — it speaks to both. The voice is closer to Mastodon's project blog than to Twitter's marketing surface.

### Microcopy Patterns
- **Primary CTA**: "Sign up", "Create account", "Get the app", "Post".
- **Secondary CTA**: "Sign in", "Read the docs", "Learn about AT Protocol".
- **Tertiary**: "See more →", "View profile →".
- **Confirmation toast**: "Post sent", "Followed @user", "Reposted", "Link copied".
- **Empty feed**: "Welcome to Bluesky! Follow some accounts to see their posts here, or try the Discover feed."
- **Empty notifications**: "No new notifications. When someone follows you, replies, or likes your posts, you'll see it here."
- **Empty search**: "No results for [query]. Try different keywords or search for users by handle."
- **Compose placeholder**: "What's up?"
- **Character limit**: Counter in tnum number; "300 / 300" → "0 / 300" countdown; below 20, turns red.
- **Error**: "Couldn't post. Check your connection and try again."
- **AT Protocol pitch**: "Bluesky is built on AT Protocol — an open-source social networking technology. Anyone can build on it."

### Empty States
- Empty feed (new user): "Welcome to Bluesky! Follow some accounts to see their posts."
- Empty notifications: "Nothing yet. Posts you like or accounts that follow you will show up here."
- Empty messages: "No conversations yet. Tap the compose icon to start chatting."
- Empty search: "No results. Try different keywords."

### CTA Verb Conventions
- "Post" — primary verb for sharing. Bluesky uses "post", not "tweet" or "skeet" (the unofficial-Bluesky term).
- "Reply" — reply to a post.
- "Repost" — share without comment. Bluesky uses "repost", not "retweet" or "boost".
- "Quote" — share with comment.
- "Like" — like a post (heart icon).
- "Follow" / "Following" — relationship status.
- "Pin" — pin a feed to home.
- "Block" / "Mute" — moderation actions.
- "Sign up" — create account. Bluesky uses "Sign up", not "Join" or "Get started".

The brand explicitly avoids: "Tweet", "Boost" (Mastodon's term), "Engage", "Subscribe" (Bluesky has free public follow only).

Bluesky has **full dark-mode support**. The brand respects `prefers-color-scheme: dark` by default and offers an explicit toggle in settings (System / Light / Dark). The dark-mode token swap lifts the canvas to `#16161a`, body text to `#ffffff`, the brand sky-blue brightens to `#3aa3ff` for AAA contrast, cards take `#1f1f23` surface with `#2c2c33` borders, and the like / repost / reply colours stay vibrant (pink, purple, sky-blue) because they're already designed for both modes.

The dark mode is the brand's secondary canvas, not a tertiary afterthought. The whole component system has dark-mode tokens: surface, surface-elevated, surface-hover, border, border-soft, text, text-muted, text-soft, brand, brand-soft, shadow.

Some patterns differ in dark mode:
- The reply-tree line uses `#2c2c33` (deeper) instead of `#dde1e7` (light hairline).
- Modal shadow deepens to `rgba(0,0,0,0.4)` so it registers against the dark canvas.
- Backdrop-blurred sticky nav becomes `rgba(22,22,26,0.85)` + `blur(12px)` instead of light variant.
- Feed-loading skeleton shimmer uses subtler opacity range on dark.

The dark-mode is calibrated for the OLED display reality — most mobile users will see the dark variant. Bluesky's brand accommodates this rather than treating dark as niche.

Bluesky's visual lineage is three-streamed.

**The Twitter / classic-microblog tradition.** Bluesky was originally a Twitter project (announced 2019, spun out 2022) and the visual conventions descend directly: 600px feed column, 40px circular avatars, flush-edge post cards with bottom hairlines (no card border-radius), reaction row at the bottom (reply / repost / like / share), 280–300 character limit, real-time timeline, hashtag and @-mention conventions. Bluesky executed the visual grammar Twitter established but tuned away from the engagement-pumping additions Twitter / X added under Musk (algorithmic-recommendation forced primary, blue-check monetization, ad-tile injection in feed). Bluesky's argument is "the original Twitter visual contract was good; we're keeping it."

**The federated-protocol tradition.** Mastodon (launched 2017), ActivityPub, and the broader fediverse aesthetic — each user's profile is a public AT-Protocol record, handles can use DNS for verification (`@nytimes.com` instead of `@nytimes.bsky.social`), the moderation system is composable (third-party labelers can mark content), the feed algorithm is composable (anyone can publish a custom feed). The visual surface reflects this: the feed-picker is a first-class UX element, not a hidden setting; the handle convention shows DNS verification visually; profile pages link to AT Protocol DIDs in advanced surfaces. Bluesky positions itself as the protocol-respectful descendant of Twitter, not as a closed alternative.

**The modern-Inter web tradition.** Bluesky redesigned its app and marketing site around 2023–2024 using Inter as its single typeface, joining the post-2018 wave of Inter-everywhere web design (Linear, Vercel, Together, Cohere, Anthropic, Notion's NotionInter, Signal). The aggressive 800-weight (Inter Black) on marketing hero, the 15px / 1.5 body type for feed scanning, the pill-shaped primary CTA, the glass-blurred sticky nav — all conform to the modern-Inter web aesthetic. Bluesky differentiates within the genre via the like/repost/reply colour triad (pink, purple, sky-blue) and the butterfly logo glyph.

What Bluesky rejects: dark-mode-as-default-only (full light + dark support), forced algorithmic feed (user chooses), monetized blue-check verification (DNS-verified handles instead), engagement-pumping notification UI, ad-tile injection in feed, modal pop-overs on launch.

**Influences:**
- **Twitter (classic)** — flush-edge post cards, 600px feed column, reaction row, microblog conventions. https://twitter.com (now https://x.com)
- **Mastodon** — federated-protocol social, composable moderation, fediverse handle convention. https://joinmastodon.org
- **AT Protocol** — the underlying decentralized social networking protocol. https://atproto.com
- **Linear / Vercel** — modern-Inter web aesthetic, glass nav, generous spacing. https://linear.app
- **Threads (Meta)** — peer alternative-Twitter app with similar feed-card grammar. https://threads.net
- **Discord** — chat / DM patterns informing Bluesky's chat surface. https://discord.com
- **Inter (Rasmus Andersson)** — single-typeface discipline. https://rsms.me/inter

## Do's and Don'ts

**Do:**
- Use `#0085ff` for the primary CTA, butterfly logo, brand wordmark, inline links, and active feed-tab pill — and `#0057b3` deeper blue for outlined buttons (better contrast on white).
- Pair primary CTA with white text — at 16px / 700 the contrast is AA at body (large-text bracket).
- Round primary buttons to full pill (`9999px`); custom feed tiles to `8px`; quote-post embeds and link cards to `12px`.
- Render post cards FLAT with no border-radius — use bottom hairline (`1px solid #dde1e7`) for separation. Twitter convention is the brand commitment.
- Apply NO shadow to post cards at rest or on hover. Hover gets a subtle bg wash (`#f8f9fa`) only.
- Use 15px / 400 / 1.5 body type for post text — calibrated for social-feed scanning.
- Use Inter Black (800) for marketing hero at 56px with `-0.025em` tracking — Bluesky's confidence signal.
- Use 40px circular avatars with 12px gap to post body.
- Render reaction icons in saturated brand-tints when activated: pink heart `#fb44a3` for like, purple `#9a75e9` for repost, sky-blue `#0085ff` for reply.
- Animate the like with a heart-pop scale `1 → 1.3 → 1` over 300ms ease-spring; repost with a 360° rotation.
- Use feed-tab pills above the timeline with active-state sky-blue fill — the algorithmic-feed-picker UX is a brand commitment.
- Implement full dark-mode token swap, not just an inverted text colour.
- Render DNS-verified handles in the user's domain (e.g., `@nytimes.com`) — the brand's verification model.
- Use tabular numerals on like / repost / reply / follower counters.
- Surface `aria-label` for image alt text in compose; require alt text by default.

**Don't:**
- Don't add card border-radius to post cards in the feed — flush-edge is the brand commitment.
- Don't add shadows to post cards — hairline separation only.
- Don't use `#0085ff` for body links — its 4.0:1 contrast on white only meets AA. Use `#0057b3` deeper blue.
- Don't introduce a multi-color brand palette — sky-blue for action, pink for like, purple for repost. Three saturated accents, no more.
- Don't use scale transforms on hover — Bluesky's elevation is hairline + bg-wash.
- Don't use display-serif companion fonts — Inter alone carries everything.
- Don't tighten display tracking past `-0.025em` — Bluesky is open and confident, not condensed.
- Don't gate primary "Sign up" CTA behind email collection — the brand's open-network commitment requires low friction.
- Don't add forced algorithmic-feed default — Bluesky's argument is "you choose your algorithm".
- Don't add ad-tile injection in feed — the protocol-respectful brand precludes it.
- Don't add modal pop-overs on app launch — friction-free open-network commitment.
- Don't use "Tweet" / "Retweet" / "Boost" — Bluesky's verbs are "Post" / "Repost" / "Reply".
- Don't add a monetized verification tier — DNS-verified handles are the verification model.
- Don't compress post-card padding below 16px — feed density is calibrated for thoughtful scroll.

### Quick Color Reference
- Canvas Light: `#ffffff`
- Canvas Dark: `#16161a`
- Sky Blue (Brand/CTA): `#0085ff`
- Sky Blue Deep (Inline Link): `#0057b3`
- Display Black: `#0c0c0c`
- Muted: `#5e6772`
- Border: `#dde1e7`
- Like Pink: `#fb44a3`
- Repost Purple: `#9a75e9`
- Reply Sky Blue: `#0085ff`

### Example Component Prompts
1. "Create a Bluesky post card — `#ffffff` background, NO border-radius (flush-edge), `1px solid #dde1e7` bottom hairline only, NO shadow, `16px` padding; horizontal layout with 40px circular avatar left + 12px gap + post body right; post body has display name '14px / 600 #0c0c0c' followed by handle '14px / 400 #5e6772' followed by '·' separator followed by timestamp '13px / 400 #5e6772 with tnum' all in one line; below: post text '15px / 400 / 1.5 #0c0c0c'; below: reaction row with 4 icons (reply / repost / like / share) at 18px each, default colour #5e6772, with tnum counter beside each. On hover: bg becomes `#f8f9fa`, no shadow. On like-tap: heart icon scales `1 → 1.3 → 1` over 300ms ease-spring + colour swap to pink `#fb44a3`."
2. "Design a Bluesky primary CTA — `9999px` full-pill radius, `#0085ff` background, white 16px / 700 'Sign up' label, `10px 24px` padding, `44px` height, hover bg `#006cd9`, no shadow lift."
3. "Build a Bluesky marketing hero — `#ffffff` background, 56px Inter 800-weight (Black) headline 'Social media as it should be' in `#0c0c0c` with `-0.025em` tracking, 18px / 400 / 1.55 `#5e6772` lead 'A new kind of social network. Built on an open protocol.', primary sky-blue full-pill CTA 'Sign up' + outlined deeper-blue secondary 'Read the docs' inline. Bluesky butterfly illustration top-right of hero."
4. "Render a Bluesky feed-tabs strip — sticky below top nav, `rgba(255,255,255,0.92)` bg with `backdrop-filter: blur(12px)`, `1px solid #dde1e7` border-bottom; horizontal scroll of pill tabs — 'Following / Discover / What''s Hot / [+ Custom Feed]'; active tab is `#0085ff` fill with white text; inactive tabs are transparent with `#5e6772` muted text; 8px gap between tabs."
5. "Create a Bluesky custom feed tile — `#ffffff` background, `8px` radius, `1px solid #dde1e7` border, `16px` padding; 48px feed avatar (emoji or custom illustration) left, 12px gap, body right with feed name '16px / 600' + creator handle '14px / 400 muted #5e6772' + description '14px / 400 #0c0c0c' (max 2 lines); footer row: like-count with heart icon + 'Pin to home' sky-blue pill button right."
6. "Build a Bluesky compose modal — `#ffffff` background, `12px` radius, `0 16px 48px rgba(0,0,0,0.20)` shadow, `24px` padding; top: 'X' close button left + 'Post' primary sky-blue pill CTA right; body: 40px circular avatar of current user left + 12px gap + textarea right (borderless, 18px / 400 / 1.5, placeholder 'What''s up?'); below textarea: media-upload icon row (image / GIF / video / link / language picker) + 13px / 500 tnum character counter '300 / 300' right (turns `#e84545` red below 20)."

### Iteration Guide
1. **Flat post cards.** If post cards have border-radius or shadows, force flush-edge with bottom hairline only. Twitter convention is the brand commitment.
2. **Pill the CTA.** If primary buttons feel boxy, force `9999px` radius. Bluesky pill is non-negotiable.
3. **Use Inter Black for hero.** If marketing hero feels light, switch to Inter 800 (Black). Bluesky's 56px / 800 is among the heaviest weights deployed in modern social-app design.
4. **Three saturated accents.** Sky-blue for action, pink for like, purple for repost. If a fourth saturated colour appears in feed, audit and remove.
5. **15px body, not 16px.** If post text feels too generous, drop to 15px / 1.5 — the feed-scanning calibration.
6. **Heart-pop on like.** If like-tap feels static, add the scale `1 → 1.3 → 1` over 300ms ease-spring + colour swap.
7. **Full dark-mode swap.** If only text colour inverted on dark, audit all surface, border, brand tokens for proper dark variant.
8. **DNS-verified handles.** If verification feels missing, add support for DNS-verified handles (`@nytimes.com` instead of `@nytimes.bsky.social`). The brand's verification model is open, not monetized.