Threads Design System

Overview

Threads' signed-out home is the feed itself. The viewport opens directly into the public timeline: a centered 540px-wide post column on a true white {colors.canvas} ("#ffffff") canvas, flanked by a 68px-wide icon rail on the left (home, search, create, activity, profile, pinned, menu) and a 240px sign-in card on the right titled "Log in or sign up for Threads." There is no marketing band, no hero illustration, no feature grid, no pricing card. The chrome lets the timeline carry the pitch — a childhood-crush thread from @late.july, an ABC7 Chicago news embed about an airline incident, an election-newsletter ask from @marc.e.elias, a punk-quartet recommendation from @beatgrrrl — each rendered as a {components.post-card} with a 36px circular avatar, a 15px weight 600 username, a 12px {colors.ink-soft} ("#999999") timestamp, and four {components.post-action-icon} full-pills (like, reply, repost, share) underneath.

Feed-as-marketing: where most social networks lead with a signed-out marketing hero — Bluesky's auth modal over a darkened photo wash, Discord's starfield-and-Blurple-pill landing band, Pinterest's 70px display headline with alternating feature cards — Threads collapses the entire signed-out experience to the timeline itself. The decision argues that a text-first social network's strongest first impression is the work: actual posts from actual users, rendered at the same density they'd appear at signed in, with the conversion surface relegated to a sidebar card. Unlike the convention of pairing a saturated marketing band with a separate sign-in button, Threads has neither — the chrome is the feed, and the only saturated hex on the page is the Instagram-blue {colors.link-blue} ("#0095f6") on the "Continue with Instagram" handoff CTA.

The second discipline is the monochrome ink ladder. Black-as-voltage: where most signed-out social pages spend their saturation budget on a colored CTA pill, Threads spends it on nothing — the {colors.ink} ("#000000") that carries 1258 page hits is both the text color and the hairline color, and the chrome interactive surfaces (icon-rail buttons, post-action pills, the "Continue with Instagram" CTA) all render at {colors.canvas} ("#ffffff") with a {colors.hairline} ("#d5d5d5") 1px border. The Meta focus pink {colors.meta-focus-pink} ("#d24294") is declared as the keyboard-focus ring through the --primary-web-focus-indicator CSS variable but never renders on a CTA fill. Where Discord runs a singular Blurple voltage and Bluesky runs a singular #006aff pill, Threads runs no voltage at all on chrome — the only blue the feed shows is the Instagram link inside the right-rail card, inherited from Meta's app vocabulary.

Key Characteristics:

• Black-on-white monochrome — {colors.ink} ("#000000") hits 1258 page occurrences (629 text, 624 border, 4 shadow), while no chromatic accent breaks 110
• Full-pill chrome — {rounded.full} ("1000px") radius hits 60 page occurrences, 999px adds 20, leaving every interactive control fully rounded
• 540px single-column feed — the post stream stays centered with a 68px left icon rail and a 240px right sign-in card, no marketing band above the fold
• System-ui at 15px — the typography stack ships zero proprietary faces; the OS renders every label, post body, and button at 15px weight 400/600
• Meta focus pink as accessibility-only — {colors.meta-focus-pink} ("#d24294") is the singular brand-layer hex, declared as the focus ring and never used as a CTA fill
• Instagram-blue handoff CTA — {colors.link-blue} ("#0095f6") appears only on the "Continue with Instagram" pill and the inline link text, never on a chrome surface fill
• Two-radius card system — embedded link previews step to {rounded.md} ("18px"), forms drop to {rounded.sm} ("8px"), and pills resolve to 1000px

Colors

The palette splits along function lines: one load-bearing black for ink and hairlines, a four-step structural grey ladder for secondary text, two off-whites for surfaces, the inherited Meta blue family for link text, a Meta focus pink reserved for the keyboard-focus ring, and a Pinterest-cherry red for the liked-heart icon.

• Ink (#000000) — frequency 1258. Used as text (629), border (624), background (1), shadow (4). The dominant chrome color and the load-bearing structural hex; carries every headline, username, post body, hairline, and icon glyph. Lives across more than 100 CSS variables including --text-primary, --icon-primary, --lines-primary, --fds-black, and --barcelona-primary-button. The brand IS this black.
• Ink-soft (#999999) — frequency 152. Used as text (76), border (76). The secondary grey for post timestamps, like-count subscripts, and disabled-state labels. Declared as --text-secondary and --barcelona-secondary-text-loading. Sits squarely halfway up the structural ladder.
• Ink-charcoal (#424242) — frequency 120. Used as text (60), border (60). The dark-grey one step lighter than black, exposed through --fds-button-text, --barcelona-charcoal-text, and --media-hover. Carries the secondary button-text and the hovered-media tint.
• History-blue (#385898) — frequency 106. Used as text (57), border (49). The visited-link slate-blue inherited from Meta's link vocabulary; appears on visited inline links and on a small set of legacy footer chrome. Not declared on a CSS variable in the captured surface.
• Page (#fafafa) — frequency 26. Used as background (24), shadow (2). Clustered from three near-white variants (#fafafa, #ffffff, #f5f5f5) in the extraction. The page wash and the background of every elevated surface — modal, popover, card-flat. Declared across more than 100 CSS variables including --background-primary, --canvas, --surface-background, and --fds-white.
• Surface-wash (#efefef) — frequency 10. Used as background (10). The very-light grey for icon-rail hover backgrounds, secondary-button fills, and toggle-active surfaces. Declared as --secondary-button-background, --wash, and --barcelona-newspaper-back-page-1. Pure fill token; never used as text or border.
• Hairline (#d5d5d5) — frequency 4. Used as border (4). The 1px boundary color around every card, button, and input frame. Declared as --divider, --input-border-color, and --switch-inactive. Pure border-only token; sits between page-wash and ink-soft on the lightness scale.
• Link-blue (#0095f6) — frequency 4. Used as text (2), border (2). The Instagram-link blue, declared as --barcelona-link-text and --barcelona-verified-badge-background. Carries the "Continue with Instagram" pill text, the inline newsletter-link text inside post bodies, and the verified-badge fill. The only saturated chromatic chrome on the captured feed surface.
• Ink-mute (#65676b) — declared on --secondary-text, --placeholder-text, --input-label-color-inside, and --barcelona-bar-chart-gradient-top. The Facebook-inherited muted grey for placeholder text, secondary icons, and label color on inactive form fields.
• Ink-stone (#8a8d91) — declared on --barcelona-newspaper-masthead-bar and --xzdavdm. The stone-grey one step warmer than ink-soft; reserved for masthead-bar accents and one structural divider variant.
• Link-blue-deep (#216fdb) — declared on --blue-link, --primary-button-background, and --toast-text-link. The deeper blue exposed through Meta's primary-button-background variable, but the captured signed-out feed never renders it — the live CTA is the lighter #0095f6 Instagram pill.
• Meta-blue (#1877f2) — declared on --fds-blue-60, --accent, --base-blue, --text-highlight, and --focus-ring-blue. The Facebook-vocabulary primary blue; lives on legacy Meta variables but never renders on the signed-out Threads feed chrome.
• Facebook-blue (#0866ff) — declared on --fb-wordmark, --fb-logo, and --buttonSendBackgroundColor. The newer Facebook brand blue inherited through the shared Meta CSS pipeline; reserved for cross-app surfaces, not used on Threads chrome.
• Meta-focus-pink (#d24294) — frequency 0 on the captured render, declared on --primary-web-focus-indicator. The singular brand-layer hex in the extraction; exists exclusively as the keyboard-focus ring color and never appears on a CTA fill, card surface, or text layer. Accessibility-only voltage.
• Liked-cherry (#fa383e) — declared on --barcelona-liked-text, --barcelona-notification-badge-background, --barcelona-error-text, and --red-primary. The cherry-red reserved for the liked-heart icon fill, error states, and the notification badge dot. Never used on chrome surfaces beyond those three roles.
• Success-green (#31a24c) — declared on --positive, --fds-green-60, and --text-badge-success-background. The success-state green inherited from Meta; reserved for verified-state icons and positive-status badges.
• History-blue (extended) — declared on the visited-link slate variant in addition to the count above; serves as the only non-Meta-blue link tone on the page.
• Canvas (#ffffff) — the true white surface for elevated chrome (the icon-rail background, the post-card background, the "Continue with Instagram" pill fill). One step brighter than the #fafafa page wash; identical to --always-white and --primary-button-text in the captured CSS.
• Shadow-rgba (rgba(0,0,0,0.08)) — declared as --shadow-1 and --barcelona-box-shadow-04. The translucent black wash used on the rare card-elevation shadow and on the icon-rail edge below the masthead.

Typography

Every text role on the page sits inside the platform system-ui stack: system-ui, -apple-system, "system-ui", Roboto, Helvetica, Arial, sans-serif. There is no proprietary face, no editorial serif, no monospace, and no display-tier swap. The chrome renders in San Francisco on macOS / iOS, Roboto on Android / Chrome OS, and Segoe UI on Windows — whatever the operating system serves at native rendering quality.

The display tier is a single role: 20px weight 700 with 25px line-height, used exclusively for the centered "Home" page heading at the top of the feed column. Beneath that, body and UI run six roles. The workhorse is body-md at 15px weight 400 with 21px line-height (count 22 in the extraction) — the post-body text, the inline-link text, the right-rail sign-in card copy. The strong variant body-md-strong at 15px weight 600 (count 12) carries usernames, the "Continue with Instagram" button label, and section headers inside the sign-in card.

The smaller roles are: body-sm at 13px weight 400 with 18.2px leading (count 4) for embed-link captions and footer-link text; caption at 12px weight 400 with 16.8px leading (count 7) for post timestamps, like-count subscripts, and inline action-count labels; caption-strong at 12px weight 600 for emphasis variants; and micro at 11px weight 400 for the footer legal rail ("© 2026 Threads Terms Privacy Policy"). Line-heights run wider than Bluesky's 17-on-15 rhythm — 21px on 15px gives post bodies more breathing room, which makes the dense feed feel less cramped than a stricter ratio would.

Layout

The page is a three-column grid pinned around a centered 540px-wide feed column. The left column is a 68px-wide icon rail anchored to the viewport edge, the middle column is the post stream, and the right column is a 240px-wide sign-in card flush against the right edge. There is no header bar — the page-heading "Home" sits inside the feed column at the very top, centered above the first post. The footer is also collapsed: a single row of legal links ("© 2026 Threads Terms Privacy Policy Cookies Policy Report a problem") sits inside the right-rail card beneath the auth buttons.

Inside the feed column, each {components.post-card} follows a vertical stack: a 36px circular {colors.surface-wash}-tinted avatar at the top-left, the username at body-md-strong immediately to the right, a 12px {colors.ink-soft} timestamp pushed to the far right, the post body underneath at body-md, an optional embedded link-card or photograph at {rounded.md} ("18px") corner radius, then a row of four {components.post-action-icon} full-pills (like, reply, repost, share) with caption-tier counts to their right. Post padding is 16px 16px 15px per the extraction spacing — slightly asymmetric to give the bottom action-row room above the next post's hairline.

Spacing tokens lean on a tight 2-4-6-8-12-16-24 ladder. The 0px 12px step dominates (32 occurrences) for icon-rail padding and post-card horizontal rhythm, while normal 4px (24 occurrences) and normal 6px (21 occurrences) carry inline-action gap spacing. The 12px 24px step (10 occurrences) is the button-padding standard for the Instagram-handoff CTA. The largest single spacing step on the captured chrome is 24px — there is no 32px or 48px section spacing because the page has no section structure, just an infinite feed of post cards.

Elevation & Depth

Threads' signed-out chrome doesn't use drop shadows on the main feed surface. The post cards stack vertically with {colors.hairline} ("#d5d5d5") 1px boundaries between them; the icon rail, the post column, and the sign-in card all sit flat on the {colors.canvas} ("#ffffff") page surface with no cast shadow and no elevation lift.

The only elevation effect on the page is on the rare card-edge shadow declared as --shadow-1 and --barcelona-box-shadow-04 (rgba(0,0,0,0.08)), used by a small number of legacy modal and popover components inherited from Meta's design pipeline. The captured signed-out feed surface never renders these shadows — the feed is a single layer of post cards on a true-white page, separated by hairlines, with no z-stacking and no atmospheric depth.

Hairline-as-shadow: where most social-feed designs use a 0-4px box-shadow on each post card to lift it off the page, Threads relies on a single 1px #d5d5d5 hairline between posts. The hairline does the entire boundary work — there's no card surface elevation, no rounded corners on the outer post frame, and no separation other than the single-pixel divider. The result is that the feed reads as one continuous scroll surface rather than a stack of floating cards, which is the inverse of the Twitter/X / Bluesky convention of card-shadow-on-page-wash.

Shapes

The radius scale is dominated by full-pills — {rounded.full} ("1000px") at 60 page occurrences, plus another 20 hits for 999px (the same geometry at one-pixel less). Every interactive control on the chrome resolves to a full-pill: the four left-rail icon buttons (home, search, create, activity), the four inline post-action icons (like, reply, repost, share), the 36px avatar circles, and the "Continue with Instagram" CTA. The radius hits a third occurrence count of 10 for 1px (used as a faint inner-border tier) and 6 for 8px (used on the single text-input variant inside the auth-fallback form).

The two load-bearing radii are 1000px and 18px. Pill-at-1000, embed-at-18 is the entire system: every interactive control inside the feed is a full-pill (reads as "tap target"), every embedded link-preview card or photograph is an 18px rounded card (reads as "content frame"), and the post-card itself has no radius (reads as "scroll surface"). The 24px radius appears on a single variant of the create-button overlay; the 2px and 10px tiers exist for a small set of legacy Meta-shared chrome (focus rings, image inner borders) and never render on the captured feed surface.

Components

• button-primary — Canvas-white {colors.canvas} ("#ffffff") fill, ink text, 15px weight 600 body-md-button typography, 1000px full-pill radius, 12px × 24px padding, 44px tall, 1px hairline border. The neutral button shape; "Log in with username instead" inside the sign-in card is the on-page render.
• button-primary-hover — Page-wash {colors.page} ("#fafafa") fill, ink text, same body-md-button typography, 1000px radius, 12px × 24px padding, 44px tall, 1px hairline border. The hover state lifts to the off-white page surface rather than a tint of the canvas-white.
• button-secondary — Transparent fill, ink-mute {colors.ink-mute} ("#65676b") text at body-md 15px weight 400, 1000px full-pill radius, 12px × 24px padding, 44px tall, no border. The ghost variant for tertiary actions inside the sign-in card.
• instagram-handoff-pill — Canvas-white fill, ink text at body-md-button 15px weight 600, 1000px full-pill radius, 12px × 16px padding, 44px tall, 1px hairline border. The "Continue with Instagram" CTA inside the sign-in card; the Instagram-glyph icon sits to the left of the label.
• side-nav-rail — Canvas-white fill, ink icon glyphs, 0px corner radius, 0px 12px padding, 68px wide, full-height left rail. Anchors seven icon buttons: home, search, create, activity, profile, pinned, menu.
• side-nav-icon — Transparent fill, ink glyph color, 1000px full-pill radius, 8px padding, 48px tall. Each rail icon is a fully-rounded tap target with the icon centered.
• side-nav-icon-hover — Surface-wash {colors.surface-wash} ("#efefef") fill, ink glyph, 1000px radius, 8px padding, 48px tall. The hover state lifts to the very-light grey fill without a border or shadow.
• post-card — Canvas-white fill, ink text at body-md, 0px corner radius, 16px 16px 15px padding, no border (the bottom 1px hairline between posts is rendered as the next card's top border). The scroll-surface frame for each feed post.
• post-avatar — Surface-wash placeholder fill, 1000px full-pill radius, 0 padding, 36px × 36px. The circular author thumbnail at the top-left of each post card.
• post-username — Transparent fill, ink text at body-md-strong 15px weight 600, no padding. The handle like @late.july or @beatgrrrl to the right of the avatar.
• post-timestamp — Transparent fill, ink-soft {colors.ink-soft} ("#999999") text at caption 12px weight 400, no padding. The time-ago indicator like "2h" or "5h" pushed to the post-card's right edge.
• post-body — Transparent fill, ink text at body-md 15px weight 400 with 21px line-height, no padding. The post-content text rendered with inline-link runs in {colors.link-blue} and emoji inline at native size.
• post-action-icon — Transparent fill, ink glyph color, 1000px full-pill radius, 8px padding, 36px tall. The four inline icons (like, reply, repost, share) underneath each post body; tap area is fully rounded.
• post-action-count — Transparent fill, ink-mute text at body-sm 13px weight 400, no padding. The numeric count to the right of each action icon ("66", "28", "511", "883").
• embed-link-card — Canvas-white fill, ink text at body-sm, 18px corner radius, 0 padding, 1px hairline border. The wrapper for shared-link previews showing a photograph plus a caption (e.g. the abc7chicago.com news embed).
• sidebar-signin-card — Canvas-white fill, ink text at body-md, 0px corner radius, 16px padding, 240px wide, no border. The right-rail "Log in or sign up for Threads" container holding the Instagram-handoff pill and the username-fallback link.
• inline-link — Transparent fill, link-blue {colors.link-blue} ("#0095f6") text at body-md weight 400. The inline link inside post bodies (e.g. newsletters.democracydocket.com/Ancho...).
• focus-ring — Transparent fill, 2px meta-focus-pink {colors.meta-focus-pink} ("#d24294") border, 1000px radius matching the focused element's geometry, 0 padding. The keyboard-focus indicator wraps any focused pill or input.

Do's and Don'ts

Do keep the chrome monochrome on the signed-out feed surface. The captured page renders zero saturated chromatic chrome — only {colors.link-blue} ("#0095f6") appears, and only on the "Continue with Instagram" CTA and inline link runs. Adding a colored primary CTA to the right-rail sign-in card would collapse the feed-as-marketing discipline into a generic social-app landing band.

Do stack every interactive control as a 1000px full-pill. The icon rail, the inline post actions, the avatars, and the Instagram-handoff CTA all share the full-pill geometry — 60 page occurrences against zero square interactive surfaces. Introducing a square-cornered control on the feed would visually shatter the pill-monopoly the page depends on.

Do render every text role in the system-ui stack. The platform-native typography is load-bearing — swapping in Inter or a proprietary face would lose the "this is the OS rendering its own text" register that makes the feed read as a chat-like surface rather than a marketing page.

Don't use Meta focus pink #d24294 as a CTA fill or chrome background. Its entire role is the --primary-web-focus-indicator keyboard ring with zero render budget outside accessibility. Promoting it to chrome creates a second saturated voltage on a page that explicitly carries none.

Don't introduce a third radius between {rounded.sm} ("8px") and {rounded.md} ("18px"). Forms sit at 8px, embedded link-preview cards at 18px, and pills at 1000px. The gap encodes "form input" versus "content card" versus "tap target," and adding 12px in the middle erases the boundary.

Don't add a drop shadow to the post cards. The boundary work is done by 1px {colors.hairline} ("#d5d5d5") between posts — the entire feed is one continuous scroll surface, not a stack of floating cards. A shadow on each post would push the chrome toward a Twitter/X card register the design refuses.

Don't use #000000 as a button background fill on chrome. Black appears as the dominant text and border color (1258 occurrences) but never as a button fill — the primary chrome action is canvas-white-with-hairline, and a black pill would read as a system-error state or an unintended dark-mode preview.

Don't widen the feed column beyond 540px. The single-column rhythm at this width is the design — wider columns push post bodies into magazine-paragraph territory and break the chat-like density Threads is reaching for.

Known Gaps

• Signed-in shell (post composer, reply thread tree, activity tab, profile pages, settings) is out of scope — the captured surface is the signed-out feed only. The component recipes here cover the post card, the icon rail, the inline action row, the embedded link preview, and the right-rail sign-in card, not the in-product compose or thread-reply chrome.
• Mobile breakpoint behavior is not captured. The signed-out feed is known to collapse to a single full-bleed column on small screens with the right-rail sign-in card pinned as a sticky bottom bar, but the exact responsive pixel values aren't in the extracted tokens.
• Dark mode for the in-product surface is real on iOS, Android, and web, but the signed-out home renders only the light-canvas variant. The dark-mode ink ladder (white-on-black with #101010 and #1c1c1c declared on --background-inverse and --fds-gray-100) is partially declared in CSS but not active on the captured surface.
• Motion — the feed scroll behavior, the like-icon fill-and-burst transition, the repost-confirmation pulse, and the load-more spinner animations are not in the captured tokens.
• Form validation — error-state borders, helper-text styles, and inline form-validation messaging on the auth-fallback inputs are not captured beyond the default focus-ring color.
• Verified badge and notification dot — the badge geometry, the #fa383e notification-dot positioning, and the verified-state checkmark inside the Instagram-handoff CTA are partially declared but not rendered on the captured feed.