Communication / iOS / Android / Web

Threads

Threads strips social down to black text on a plain feed, and gives the content all the color there is.

Download
  • #000000
  • #FFFFFF
  • #101010
  • #F5F5F5
  • #999999
  • #0095F6

Color

Every color token in the file, grouped by role.

Brand

  • primary#000000
  • on primary#FFFFFF
  • ink secondary#999999
  • dark ink secondary#777777

Surfaces

  • canvas#FFFFFF
  • surface#F5F5F5
  • surface field#FAFAFA
  • dark canvas#101010
  • dark surface#1E1E1E

Text

  • ink#000000
  • ink body#424242
  • link#0095F6
  • dark ink#F3F5F7
  • dark link#18A3FE

Lines

  • border#D5D5D5
  • dark border#2D2D2D

Typography

Each style is set with the file's own family, size, weight and spacing.

  • system-uiSystem font, drawn with the default on your device.
  • title20px / 600 / 25px

    Pack my box with five dozen liquor jugs

  • body15px / 400 / 21px

    The quick brown fox jumps over the lazy dog

  • button15px / 600 / 21px

    Continue to checkout

  • caption12px / 400 / 16.8px

    Continue to checkout

Shape

Corner radius tokens.

  • radius 88px
  • radius 1010px
  • radius 1616px
  • radius 1818px
  • radius 2424px
  • full1000px

Spacing

The spacing scale, drawn to size.

  • space 1616px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button outline
    button-outline
  • post
    post
  • search field
    search-field
  • login panel
    login-panel
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 90 lines
version: alpha
name: Threads-design-analysis
description: "A text-first social network in strict monochrome: pure white or #101010, black ink, thin dividers, the platform's own font at 15px and a left rail on the web, with almost no color in the chrome."
status: Draft
appVersion: "measured in a browser from threads.com, 2026-11-01"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#000000"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  surface: "#f5f5f5"
  surface-field: "#fafafa"
  ink: "#000000"
  ink-secondary: "#999999"
  ink-body: "#424242"
  border: "#d5d5d5"
  link: "#0095f6"
  dark-canvas: "#101010"
  dark-surface: "#1e1e1e"
  dark-ink: "#f3f5f7"
  dark-ink-secondary: "#777777"
  dark-border: "#2d2d2d"
  dark-link: "#18a3fe"

typography:
  title:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 25px
  body:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 21px
  button:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 21px
  caption:
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px

rounded:
  radius-8: 8px
  radius-10: 10px
  radius-16: 16px
  radius-18: 18px
  radius-24: 24px
  full: 1000px

spacing:
  space-16: 16px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.radius-10}"
    height: 34px
    padding: 0 16px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.radius-10}"
    height: 34px
    padding: 0 16px
  post:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
  search-field:
    backgroundColor: "{colors.surface-field}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-16}"
    height: 44px
  login-panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.radius-24}"

Overview

Threads is Meta's text-first social network, in iOS and Android apps and on the web. The web feed and search are visible logged out on desktop. The design is strictly monochrome and leaves color to the content. [Measured]

What defines the look:

  1. Strict monochrome. Chrome is black, white and gray. [Measured]
  2. System fonts. No brand face in the interface. [Measured]
  3. Compact text. 15 on 21 is the base. [Measured]
  4. A soft dark theme. #101010 with #f3f5f7 text rather than pure black and white. [Measured]
  5. Almost no accent. Blue #0095f6 is used rarely. [Measured]

Source for this file: the threads.com home feed and search, measured in a browser at 1440 and 390 wide on 2026-11-01 with a dark color scheme pass. At the mobile width the site asks visitors to log in or get the app, so most feed values are desktop values. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Ink and filled button#000000, #fffffffeed, Get app [Measured]
Secondary text#999999, #424242metadata, body [Measured]
Surfaces#ffffff, #f5f5f5, #fafafa, #efefefpage, panels, fields [Measured]
Bordersblack at 15 percent, #d5d5d5dividers [Measured]
Accent#0095f6links [Measured]
Overlayblack at 70 percentmodal scrim [Measured]
Darkpage #101010, panel #1e1e1e, text #f3f5f7, #cccccc, #777777, borders #2d2d2d, link #18a3fe[Measured]

Typography

RoleSizeFace and weight
Page title20 on 25system 600 [Measured]
Body15 on 21system 400 [Measured]
Button15 on 21system 600 [Measured]
Legal12 on 16.8system 400 [Measured]

Shape and spacing

Buttons 10, side rail items 8, the search field 16, the login panel 24, avatars circles. Post corners were not identified. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light and dark, following the system setting. [Measured]

Platform: iOS

How the Threads app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

Not measured. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share strict monochrome and the system font with the web. [Inferred]

Platform: Android

How the Threads app looks and behaves was not captured. Tokens a website ships are evidence for the web only, so every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

Not measured. [Inferred]

Main action

Expected on Android: Floating action button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-11-01 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share strict monochrome and the system font with the web. [Inferred]

Platform: Web

The feed and search, measured at 1440 and 390 wide. The mobile width shows a log in and get app prompt.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A left icon rail with Home, Search, New thread, Activity, Messages and Profile, each 32 high with a hidden label. [Measured]

Main action

Expected on Web: Page-level button.

A New thread control in the rail. Log in is a filled black button, 34 high at 10 radius. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

A login modal sits over a 70 percent black scrim, with a Continue with Instagram card 80 high at 16 radius. [Measured]

Controls

Expected on Web: Native or custom.

Log in and Get app at the mobile width are 34 high at 10 radius, outlined with black at 15 percent or filled black. [Measured]

Text sizing

Expected on Web: Browser zoom.

Fixed pixels. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 34 high and rail targets 32, below 44. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Icons are monochrome and drawn in the rail. Sizes were not measured. [Observed]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Sign-in goes through Instagram or a login form. Other rules were not checked. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The mobile web pushes visitors to log in or get the app. [Measured]

Cross-platform consistency

Consistent across platforms: strict monochrome and the system font. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Keep chrome strictly black, white and gray.
  • Use the platform font at 15 on 21.
  • Use #101010 and #f3f5f7 for dark.
  • Separate posts with thin dividers.

Don't

  • Don't add a brand color to the chrome.
  • Don't use pure white text on pure black.
  • Don't use large type for posts.

Known Gaps

  • Posting, profiles and replies behind sign-in were not measured.
  • The mobile web view is mostly a prompt, so mobile feed values were not measured.
  • The iOS and Android apps were not captured, so every mobile topic is inferred.
  • Most root tokens on the page have generic names that the feed does not visibly use, so they were left out.
  • Icon sizes, motion and post content sizes were not measured.
  • Fonts here are system fonts, so no alternative is needed.
  • Account deletion and store sign-in rules were not verified.