What is Threads' primary brand color?

Threads has no singular saturated brand color on the signed-out home — the chrome runs monochrome black on white. The two chromatic hexes that do appear are inherited from Meta's design vocabulary: Instagram-blue '#0095f6' carries the 'Continue with Instagram' CTA pill and the inline link text, while Facebook-blue '#1877f2' lives on legacy variables ('--accent', '--base-blue', '--text-highlight') but never renders on the signed-out feed surface. The Meta focus pink '#d24294' is the only brand-layer hex declared in the extracted CSS, but its entire on-page budget is the '--primary-web-focus-indicator' keyboard ring. Threads' wordmark itself is black, the icon rail is black, and the post bodies are black — the chrome is the ink, not the accent.

What typography does Threads use, and what fallbacks ship?

Threads ships zero proprietary fonts on the public feed surface. The declared CSS stack is 'system-ui, -apple-system, "system-ui", Roboto, Helvetica, Arial, sans-serif' — so the chrome renders in San Francisco on macOS / iOS, Roboto on Android / Chrome OS, and Segoe UI on Windows. Body and post text sit at 15px weight 400 with 21px line-height (count 22 in the extraction); usernames step up to 15px weight 600 (count 12); timestamps drop to 12px weight 400 with 16.8px leading; embed captions sit at 13px weight 400; the page heading 'Home' renders at 20px weight 700 with 25px leading. There is no editorial serif, no monospace face, and no display-tier swap — the typography is whatever the operating system serves.

What does Threads' shape vocabulary look like?

The radius scale is dominated by full-pills — '1000px' hits 60 page occurrences and '999px' adds another 20, both resolving to the same fully-rounded geometry. Every interactive control on the chrome is a full-pill: the four left-rail nav icons (home, search, create, activity), the four inline post actions (like, reply, repost, share), the avatar circles, and the 'Continue with Instagram' CTA. Embedded link-preview cards step to '18px' rounded corners (count 20), forms drop to '8px' (count 6), and one '24px' radius appears on a single component variant. The '0px' and '4px' tiers are absent from the captured chrome — Threads has no square edges on interactive surfaces.

Why is the signed-out home the feed itself instead of a marketing hero?

Threads' logged-out home loads directly into the feed: a centered 540px column showing real posts from the public timeline — a childhood-crush thread, a news embed about an airline incident, an election-newsletter ask, a punk-quartet recommendation. There is no hero band, no feature grid, no pricing card. The right rail collapses the entire conversion surface to one card titled 'Log in or sign up for Threads' with two buttons — 'Continue with Instagram' and 'Log in with username instead.' This inverts the convention of a marketing landing page with a separate sign-in modal: the timeline IS the pitch, and the auth chrome is a sidebar afterthought.

What should I not do with these tokens?

Don't use Meta focus pink '#d24294' as a CTA fill or chrome background — its entire role is the keyboard-focus ring, declared as '--primary-web-focus-indicator' with zero render budget outside accessibility. Don't introduce a third radius between '8px' and '18px' — forms sit at 8px, link-preview cards at 18px, and pills at 1000px. The gap encodes 'form input' versus 'content card' versus 'tap target' and a 12px intermediate would shatter the boundary. Don't introduce a saturated brand voltage on the chrome — Threads' decision to keep the home monochrome is the brand. A red, purple, or green CTA on the right-rail card would push the page into a generic-social-app register the design explicitly refuses.

Can I use this DESIGN.md to build a Threads-style React feed?

Yes — feed it to Claude, Cursor, or Copilot and the agent will produce React components that match Threads' voice: a 540px centered single-column feed, system-ui at 15px weight 400/600, full-pill icon-rail navigation, '18px' embedded-link cards, and the right-rail Instagram-handoff card. Or reference the tokens directly: every hex, every typography level, every radius and spacing step is a quoted value ready to paste into Tailwind config or CSS custom properties. The 18 component recipes cover the signed-out feed shell — icon rail, post card, embedded link preview, inline action bar, Instagram CTA pill, sidebar log-in card — not the signed-in composer or the activity-tab notification surface.

Threads Design System

Threads' design system as a DESIGN.md file.

About Threads DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source threads.com

Social & Community

Threads renders its logged-out home as the feed itself — no marketing hero, no testimonial wall, no pricing band. The viewport is a centered 540px-wide post column on a pure white canvas, framed by a 68px-wide left icon rail and a 240px right-side sign-in card. The post bodies run system-ui at 15px weight 400 in pure black "#000000" against the white surface; usernames step up to weight 600; timestamps drop to 12px "#999999"; embedded link cards round to "18px" with an inline ambulance photograph or punk-quartet portrait; reply, repost, like, and share icons stack as four "1000px"-radius full-pill targets beneath every post. The only chromatic chrome is the Instagram-blue "Continue with Instagram" pill in the right rail and the Meta-inherited "#d24294" focus pink that appears only as the keyboard-focus ring.

This file packages the signed-out feed surface as a single Google Labs DESIGN.md spec. Inside: 19 color tokens covering the load-bearing "#000000" ink that hits 1258 page renders, the "#fafafa" page wash clustered from three near-whites, three structural greys ("#999999" / "#65676b" / "#424242") for secondary text and disabled labels, the inherited Instagram blue "#0095f6" and Facebook blue "#1877f2" exposed through legacy Meta variables, the Meta focus pink "#d24294" reserved for the keyboard-focus indicator, and a Pinterest-cherry "#fa383e" reserved for the liked-heart icon; 11 system-ui typography roles from 20px weight 700 page heading down to 12px weight 400 caption; a four-step radius scale where "1000px" full-pills hit 60 occurrences against "18px" link-card corners and "8px" form inputs; and 18 component recipes covering the icon rail, the post card, the inline action bar, and the Instagram-handoff CTA pill.

Feed this file to Claude, Cursor, or GitHub Copilot and the agent reproduces Threads' restraint — the monochrome ink ladder, the 540px feed column, the full-pill chrome, the Instagram-blue handoff CTA — instead of inventing a generic social-app theme. Or reference the tokens directly when building a federated-feed or threaded-comments UI: every hex is quoted, every component recipe ready to paste into Tailwind config or CSS custom properties. The system is worth studying because it argues that a social network's signed-out marketing surface can be the feed itself, dimmed by nothing, framed by nothing — that the strongest first impression is letting the timeline carry the entire pitch.

What makes it distinct

Black-on-white monochrome'#000000' carries 1258 page occurrences across text (629) and hairlines (624), while no chromatic accent breaks 110
Full-pill chrome at every tier'1000px' radius hits 60 occurrences, '999px' adds 20 more, leaving zero square edges on interactive surfaces
System-ui at 15px weight 400/600the typography stack ships zero proprietary faces and lets the OS render every label, post body, and button
Meta focus pink '#d24294' as accessibility-onlythe brand-layer hex appears solely as the '--primary-web-focus-indicator' ring, never on a CTA fill
540px single-column feedthe post stream stays centered on a true white canvas with a 240px right-rail sign-in card, no marketing band above the fold

Live at threads.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

threads.com

Explore Threads

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Threads design system FAQ

Common questions about Threads's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Threads — official site

Meta's text-first social network — share ideas, ask questions, post random thoughts, and log in with your Instagram account.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Threads in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→