---
version: alpha
name: Threads
description: Pure-black canvas minimalism from the Instagram lineage — near-black surfaces with white ink, a system-font sans stack, soft-rounded post cards, muted gray secondary text, and a single restrained blue accent reserved for follow/links. Quiet, text-first, conversation-led.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#101010"
  surface-soft: "#181818"
  surface-raised: "#1e1e1e"
  ink: "#f5f5f5"
  ink-secondary: "#a0a0a0"
  ink-muted: "#777777"
  ink-pure: "#ffffff"

  # Accent — reserved for follow CTA + links
  primary: "#1c9bef"
  primary-hover: "#1884cf"
  link: "#5cb3ff"

  # Engagement / state
  like-red: "#ff3040"
  success: "#22c55e"

  # Borders + dividers
  border: "#2a2a2a"
  border-soft: "#1f1f1f"
  divider: "#262626"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#0a0a0a"

  # Overlays
  overlay-backdrop: "#000000"
  surface-hover: "#1a1a1a"

typography:
  display-hero:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1.2px
  section-heading:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.6px
  card-title:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.3px
  username:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  body-small:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  button-ui:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  meta:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 80px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  # Follow / primary CTA
  button-primary:
    backgroundColor: "{colors.ink-pure}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px

  # Secondary — outlined follow/following
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    borderColor: "{colors.border}"

  # Accent link / follow-back
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px

  # Post card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.border-soft}"

  # Composer / raised surface
  card-raised:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.border}"

  # Avatar
  avatar:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.pill}"
    width: 40px
    height: 40px

  # Composer input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 14px
    borderColor: "{colors.ink-muted}"

  # Bottom / side nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    padding: 12px 16px
    borderColor: "{colors.divider}"

  # Pill tab (For you / Following)
  tab-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 16px

  # Meta / timestamp text
  meta-label:
    textColor: "{colors.ink-muted}"
    typography: "{typography.meta}"

  # Like icon (active)
  like-active:
    textColor: "{colors.like-red}"
    typography: "{typography.body-small}"
---

# Threads Design System

## Overview

Threads is conversation reduced to its quietest possible surface. Where its sibling Instagram is image-loud and chromatic, Threads inverts the lineage into a pure-black, text-first space (`{colors.background}`) where the only thing that should glow is the words people write. The canvas is near-black rather than pure black, with off-white ink (`{colors.ink}`) that reads warmly rather than harshly — a deliberate softening that keeps long reading sessions easy on the eyes. Every chrome element recedes; the post is the hero.

The system inherits Meta's familiar product DNA — the same system-font sans stack, the same circular avatars, the same restraint with color — but strips it down further than Instagram or Facebook ever go. There is no brand-blue wash, no gradient, no decorative fill. Color appears in exactly three places: the white follow CTA, a single muted accent blue (`{colors.primary}`) for links and follow-backs, and the engagement red (`{colors.like-red}`) that fires only when you like a post. Everything else is a graded scale of near-black surfaces and gray text.

Structurally, the feed is a vertical column of soft-rounded post cards (`{rounded.lg}`) separated by hairline dividers (`{colors.divider}`) rather than heavy borders. Surfaces step up in brightness as they rise in elevation — `{colors.surface}` for resting cards, `{colors.surface-raised}` for the composer and modals — so depth is communicated through luminance, not shadow. Avatars are perfect pill circles, usernames sit in semibold, and timestamps fade into muted gray. The whole interface behaves like a well-set page of text with just enough interface to be navigable.

**Key Characteristics:**
- Pure near-black canvas (`{colors.background}`) with warm off-white ink — text-first, gallery-quiet
- Elevation by luminance: surfaces brighten as they rise (`{colors.surface}` → `{colors.surface-raised}`)
- Color used sparingly — white follow CTA, one muted accent blue (`{colors.primary}`), engagement red (`{colors.like-red}`)
- System-font sans stack (`-apple-system`/Inter) — no custom display face, native and fast
- Soft-rounded post cards (`{rounded.lg}`) with hairline dividers, never heavy borders
- Perfect-circle avatars (`{rounded.pill}`), semibold usernames, muted-gray metadata
- Three-tier gray text scale: `{colors.ink}` / `{colors.ink-secondary}` / `{colors.ink-muted}`

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas. Warmer and softer than pure black.
- **Surface** (`{colors.surface}`): Resting post-card surface, one step up from canvas.
- **Surface Raised** (`{colors.surface-raised}`): Composer, modals, menus — elevation by brightness.
- **Ink** (`{colors.ink}`): Primary text. Off-white for comfortable long reading, not harsh pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Body detail, secondary labels.
- **Ink Muted** (`{colors.ink-muted}`): Timestamps, metadata, placeholder text.

### Accent
- **Primary Blue** (`{colors.primary}`): Links, follow-back, mentions/hashtags. The only chromatic chrome.
- **Link** (`{colors.link}`): Inline link color, lighter for legibility on black.

### Engagement
- **Like Red** (`{colors.like-red}`): The heart when active — appears only on interaction.
- **Success** (`{colors.success}`): Confirmations, verified-style positive states.

### Borders & Dividers
- **Border** (`{colors.border}`): Outlined buttons, raised-surface edges.
- **Divider** (`{colors.divider}`): Hairline separators between feed posts.

## Typography

### Font Family
- **Primary**: `-apple-system, BlinkMacSystemFont, Inter, Helvetica Neue, Helvetica, Arial, sans-serif`
- No custom display typeface — Threads leans on the native system stack for speed and platform familiarity, falling back to Inter on non-Apple platforms.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.body}`, `{typography.username}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Logged-out hero / large marketing headline |
| `section-heading` | Section titles, profile name |
| `card-title` | Prominent post or profile headers |
| `username` | Post author handle — semibold |
| `body` | Post text — the core reading size |
| `body-small` | Replies, secondary post content |
| `button-ui` | Buttons, tabs, action labels |
| `meta` | Reply/repost counts, inline meta |
| `caption` | Timestamps, smallest metadata |

### Principles
- **Text is the interface**: Body at 15px weight 400 is the protagonist; chrome stays smaller and lighter.
- **Two weights carry it**: 400 for reading, 600 for usernames and actions; 700 reserved for marketing display only.
- **Negative tracking only at display**: Headlines tighten (-1.2px at 40px); body and UI stay at natural tracking.
- **System-native**: No web-font load on the critical path — the system stack renders instantly.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px (with a 4px micro step). Feed rhythm leans on `{spacing.lg}` (16px) card padding and `{spacing.xl}` (24px) between major regions.

### Grid & Container
- Central single-column feed, roughly 600px max width, centered on desktop
- Persistent left/bottom nav rail flanking the column
- Posts stack vertically, separated by `{colors.divider}` hairlines
- Composer and modals render on `{colors.surface-raised}`

### Whitespace Philosophy
- **Breathing column**: The narrow centered feed leaves generous dark margins — focus stays on the text.
- **Quiet separation**: Posts divide by hairline + spacing, never by boxes-within-boxes.
- **Elevation, not ornament**: Depth comes from surface luminance steps, not shadows or gradients.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}` | Page canvas, feed backdrop |
| Surface (Level 1) | `{colors.surface}` + hairline divider | Resting post cards |
| Raised (Level 2) | `{colors.surface-raised}` + `{colors.border}` | Composer, menus, modals |
| Hover (Level 1b) | `{colors.surface-hover}` | Interactive row/card hover |

**Depth Philosophy**: Threads communicates elevation almost entirely through luminance. On a near-black canvas, a slightly brighter surface reads as "closer." Shadows are minimal-to-absent; the system trusts the eye to read a lighter rectangle as raised. This keeps the dark UI flat, calm, and free of the muddy shadow halos that plague many dark themes.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media edges |
| `xs` | 4px | Tags, tiny chips |
| `sm` | 8px | Inline media thumbnails |
| `md` | 12px | Buttons, inputs |
| `lg` | 16px | Post cards, composer |
| `xl` | 24px | Large media, sheets |
| `pill` | 9999px | Avatars, tab pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.card}`, `{components.button-primary}`).

### Buttons
- **`button-primary`** — White fill, near-black text, `{rounded.md}`. The follow / primary CTA.
- **`button-secondary`** — Dark surface with `{colors.border}` outline (Following / secondary state).
- **`button-accent`** — Muted blue fill for follow-back and accent actions.

### Cards
- **`card`** — Resting post surface on `{colors.surface}`, `{rounded.lg}`, hairline-separated.
- **`card-raised`** — Composer/modal on `{colors.surface-raised}` with `{colors.border}`.

### Avatars
- **`avatar`** — 40px perfect circle (`{rounded.pill}`) on `{colors.surface-soft}`.

### Inputs
- **`input`** — Composer field, dark surface, `{colors.border}` edge; focus lifts the border to `{colors.ink-muted}`.

### Navigation
- **`nav-bar`** — Black bar, muted icons (`{colors.ink-secondary}`) that brighten to `{colors.ink}` when active.
- **`tab-pill`** — Pill tab for "For you / Following" feed switching.

### Distinctive Components
- **Hairline feed**: Posts separated by `{colors.divider}` lines and spacing only — no card chrome stacking.
- **Like state**: Heart icon stays muted until tapped, then fires to `{colors.like-red}`.
- **Muted metadata row**: Username (semibold ink) + handle/timestamp (`{colors.ink-muted}`) in one quiet line.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) and let text be the brightest element
- Communicate elevation by brightening the surface, not by adding shadows
- Reserve color for the white CTA, one accent blue (`{colors.primary}`), and like red (`{colors.like-red}`)
- Use off-white ink (`{colors.ink}`), not pure white, for reading comfort
- Separate posts with hairline dividers and spacing, never nested boxes
- Use perfect-circle avatars and semibold usernames

### Don't
- Don't introduce gradients, brand-blue washes, or decorative fills
- Don't use pure-white text for body copy — the warm off-white matters
- Don't stack heavy borders or drop shadows on dark surfaces
- Don't add a custom web display font on the critical path — stay system-native
- Don't let accent blue spread into general chrome — it marks links and follows only
- Don't box every post — the feed is a column of text, not a grid of cards

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single feed column, bottom tab nav |
| Tablet | 600–900px | Centered column, side nav appears |
| Desktop | 900–1200px | Left nav rail + centered ~600px feed |
| Large Desktop | >1200px | Generous dark margins, feed stays narrow |

### Touch Targets
- Action icons (like/reply/repost/share) at comfortable 44px tap zones
- Buttons use 10px vertical padding
- Avatars and tab pills sized for thumb reach on mobile

### Collapsing Strategy
- Desktop left nav rail → mobile bottom tab bar
- Centered column stays ~600px; margins absorb extra width
- Composer expands to a raised sheet on mobile
- Media maintains aspect ratio within the column width

### Image Behavior
- Post media rounds to `{rounded.lg}`, clipped within the card width
- Avatars stay perfect circles at every size
- Full-bleed media uses `{rounded.none}` edges where it meets the card frame

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Near-black `{colors.background}`
- Resting card: `{colors.surface}`
- Primary text: Off-white `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Metadata: `{colors.ink-muted}`
- Primary CTA: White `{colors.ink-pure}` with near-black text
- Accent / link: Muted blue `{colors.primary}`
- Like (active): `{colors.like-red}`

### Example Component Prompts
- "Build a post card on `{colors.surface}`, `{rounded.lg}`, 16px padding. Top row: 40px circular avatar, semibold username (15px) in `{colors.ink}`, then handle and timestamp in `{colors.ink-muted}`. Post body at 15px weight 400, `{colors.ink}`. Separate from the next post with a `{colors.divider}` hairline."
- "Create a follow button: white fill `{colors.ink-pure}`, near-black text `{colors.on-ink}`, `{rounded.md}`, 10px 20px padding, 14px weight 600. Following state: switch to `{colors.surface}` fill with a `{colors.border}` outline."
- "Design a composer on `{colors.surface-raised}`, `{rounded.lg}`. Input field on `{colors.surface}` with `{colors.border}` edge, placeholder in `{colors.ink-muted}`. Focus lifts the border to `{colors.ink-muted}`."
- "Build a feed tab switcher as pill tabs (`{rounded.pill}`) — active tab `{colors.ink}` text, inactive `{colors.ink-secondary}`."

### Iteration Guide
1. Start from the near-black canvas and let text be the brightest thing on screen
2. Raise elevation by brightening the surface, never by adding shadow
3. Keep color to three jobs only: white CTA, accent blue for links/follows, red for likes
4. Use off-white ink, not pure white, for body text
5. Separate posts with hairlines and space — never nest boxes
6. Stay on the system font stack; no custom display face on the critical path

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Threads. Brand names and trademarks belong to their respective owners.