--- 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 | Role | Value | Where | |------|-------|-------| | Ink and filled button | `#000000`, `#ffffff` | feed, Get app [Measured] | | Secondary text | `#999999`, `#424242` | metadata, body [Measured] | | Surfaces | `#ffffff`, `#f5f5f5`, `#fafafa`, `#efefef` | page, panels, fields [Measured] | | Borders | black at 15 percent, `#d5d5d5` | dividers [Measured] | | Accent | `#0095f6` | links [Measured] | | Overlay | black at 70 percent | modal scrim [Measured] | | Dark | page `#101010`, panel `#1e1e1e`, text `#f3f5f7`, `#cccccc`, `#777777`, borders `#2d2d2d`, link `#18a3fe` | [Measured] | ### Typography | Role | Size | Face and weight | |------|------|-----------------| | Page title | 20 on 25 | system 600 [Measured] | | Body | 15 on 21 | system 400 [Measured] | | Button | 15 on 21 | system 600 [Measured] | | Legal | 12 on 16.8 | system 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.