Threads

Overview

Threads is a text-first social platform that prioritizes clarity, readability, and conversational depth. The design system embodies "Conversational Minimalism"—a philosophy that strips away visual noise to foreground human expression and discourse. The aesthetic is deliberately light, clean, and accessible, using a restrained palette of white surfaces, neutral grays, and a single vibrant blue accent (#1877F2) that signals interactivity without overwhelming. The brand personality is thoughtful, inclusive, and direct: the interface gets out of the way so users can focus on what matters—the conversation itself. Voice example: "Your thoughts, threaded together."

Colors

The Threads color system is built on a foundation of pure white (#FFFFFF) surfaces paired with a carefully calibrated gray scale (from #F5F6F7 to #1C1E21) that ensures readability across all contexts. Primary (#1877F2) is the signature Facebook blue, used exclusively for interactive elements—buttons, links, focus states, and highlights. It appears in three intensities: the full blue for primary actions, #2851A3 for hover states, and #1D3C78 for pressed states. Secondary (#F3425F) is a warm cherry red reserved for notifications, alerts, and status indicators; it should never appear on primary CTAs. Tertiary (#31A24C) is a muted green used for success states and positive feedback. The surface stack progresses from #FFFFFF (base) through #F5F6F7 (container-lowest) to #DADDE1 (container-high),

Typography

The type system pairs Optimistic (a custom Meta typeface) for headlines and display text with system fonts (-apple-system, Segoe UI, Roboto) for body and label text. This hybrid approach balances brand personality with universal legibility. Display (60px, 700 weight, -0.04em tracking) anchors hero sections; headline-lg (40px, 600 weight) frames major sections; headline-md (28px, 600 weight) introduces subsections; title-lg (20px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content and thread text; body-md (16px, 400 weight, 24px line-height) is the default for UI copy and comments. Label-md (14px, 600 weight, 0.01em tracking) styles button text and metadata; label-sm (12px, 500 weight, 0.02em tracking) is reserved for timestamps,

Layout

Threads uses a 12-column fluid grid with a maximum container width of 1280px, allowing responsive scaling from mobile (full bleed) to desktop (centered with gutters). The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major layout breaks, and xl (64px) for hero spacing. Gutters are fixed at 16px on all sides, creating a consistent breathing room around content. The page rhythm relies on white space: threads are separated by md spacing (24px), comments by sm spacing (12px), and inline elements by xs spacing (4px). Container max-width of 1280px ensures optimal line length for body text (approximately 65–75 characters per line at body-md size). Padding inside cards is always md (24px) horizontally an

Elevation & Depth

Depth in Threads is achieved through subtle shadows and layering rather than color shifts. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for base cards and list items, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hover states and floating elements, and lg (0 12px 28px rgba(0, 0, 0, 0.12)) for modals and popovers. All interactive surfaces use a 1px solid border at #CED0D4 (outline-variant) to define edges without relying solely on shadow. Hover states elevate from sm to md shadow while maintaining the same border. Pressed states reduce shadow to none and apply a rgba(

Shapes

The Threads design system embraces "Geometric Clarity"—a philosophy of consistent, predictable corner radii that signal component hierarchy. Buttons and inputs use 6px (DEFAULT / 0.5rem) radius, creating a subtle softness without appearing rounded or pill-shaped. Cards and containers use 12px (md / 0.75rem) radius, slightly more generous to indicate larger surfaces. Modals and popovers use 16px (lg / 1rem) radius, the most prominent radius, reserved for the highest-level surfaces. Avatars and badges always use full (9999px) radius for perfect circles. Comment bubbles use 18px radius as a speci

Components

Action Elements Buttons follow a three-tier system: primary (blue background #1877F2, white text, 36px height, 8px vertical / 16px horizontal padding, 6px radius) for main CTAs; secondary (light gray background #F2F3F5, dark text, 1px border at #CED0D4) for alternative actions; ghost (transparent, dark text) for tertiary options. All buttons use label-md typography (14px, 600 weight). Hover states transition background color in 150ms using cubic-bezier(0.08, 0.52, 0.52, 1) (the --fds-soft easing). Pressed states darken to #1D3C78 and remove shadow. Disabled buttons use #E4E6EB background with #BCC0C4 text, never interactive.

Containers & Surfaces Cards are the primary container: white background (#FFFFFF), 1px border at #CED0D4, 12px radius, 24px padding, and sm shadow (0 1px 2px

Do's and Don'ts

**Do**

• Do use primary blue (#1877F2) exclusively for interactive elements—buttons, links, focus states—never for backgrounds or decorative elements.
• Do maintain 24px (md) spacing between major sections and 12px (sm) spacing between related items to create visual rhythm and scanability.
• Do apply the soft easing curve (cubic-bezier(0.08, 0.52, 0.52, 1)) to all interactive transitions (150–200ms) for a cohesive, fluid feel.
• Do use the full gray scale (#F5F6F7 to #1C1E21) to create subtle depth; avoid pure black (#000000) for text—use #050505 instead for reduced contrast strain.
• Do reserve secondary (#F3425F) and tertiary (#31A24C) colors for status and feedback only; never use them as primary accents or CTAs.

**Don't**

• Don't use shadows heavier than lg (0 12px 28px rgba(0, 0, 0, 0.12)) on any component; Threads prioritizes flatness and clarity over depth.
• Don't apply corner radii larger than 16px (lg) to any component except avatars and badges; excessive rounding dilutes the geometric precision of the system.
• Don't mix Optimistic (headlines) and system fonts within the same component; maintain clear separation between brand-forward display text and utilitarian body copy.
• Don't use opacity or alpha overlays for interactive states on text; use solid color changes or background shifts instead to maintain readability.
• Don't exceed 1280px container width even on ultra-wide displays; maintain optimal line length and visual hierarchy by constraining content.