---
title: "Threads design system"
variant: extended
source: https://www.threads.com/
captured_at: 2026-10-12
theme: dark
industry: media
generator: Design DNA (https://four.wiralomi.com/style/threads-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Threads · Design System

> A quiet monochrome frame for a lively social feed

**Theme:** dark · **Industry:** media · **Source:** https://www.threads.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Threads presents a compact social feed inside a restrained, monochrome interface, with a persistent left navigation and a centered stream of posts. The supplied screenshot is visibly darkened; measured palette data indicates a white page surface beneath that treatment, with black text and a vivid blue accent used sparingly.

## North star

Keep the interface quiet and monochrome so user posts—not ornamental UI—carry the visual focus.

## Overview

The page’s defining structure is an open, white interface organized around a narrow navigation rail and a centered feed. Black carries the brand mark, navigation icons, post text, and primary login action; the vivid blue accent appears selectively rather than becoming a large decorative field. Thin light-gray separators distinguish posts while keeping the stream visually continuous. System-ui typography creates a familiar, utilitarian social-product feel: compact metadata sits beside usernames, and body copy remains easy to scan. The feed mixes short text with user avatars, reaction controls, and portrait video, so the interface stays quiet around varied content. Spacing is comfortable for a dense stream, with repeated post rows providing rhythm instead of large marketing sections. The supplied screenshot has a dark overlay that suppresses contrast; treat it as a display condition, not the underlying brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Thread Ink | `#000000` | `--color-thread-ink` | brand | Primary text, Threads mark, navigation icons, and the solid login button. |
| Overlay Graphite | `#4c4c4c` | `--color-overlay-graphite` | neutral | Dominant screenshot canvas tone caused by darkening; not the underlying white page surface. |
| Feed White | `#ffffff` | `--color-feed-white` | surface | Underlying page and navigation surface, plus the text color on the black login button. |
| Divider Silver | `#d5d5d5` | `--color-divider-silver` | neutral | Fine separators and understated card or feed boundaries. |
| Soft Charcoal | `#424242` | `--color-soft-charcoal` | neutral | Minor text tone recorded in the feed; secondary role rather than a dominant brand color. |
| Signal Blue | `#0095f6` | `--color-signal-blue` | accent | Sparingly used accent for links or selected interactive details. |
| Metadata Gray | `#999999` | `--color-metadata-gray` | semantic | Quiet post timestamps and secondary metadata. |

### Semantic aliases

`--color-canvas` → `#4c4c4c` (Overlay Graphite) · `--color-surface` → `#ffffff` (Feed White) · `--color-text` → `#000000` (Thread Ink) · `--color-border` → `#d5d5d5` (Divider Silver) · `--color-accent` → `#0095f6` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#4c4c4c` | 2.45:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#0095f6` | `#4c4c4c` | 2.71:1 | fail |
| `#0095f6` | `#ffffff` | 3.17:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 400, 600 | Brand-adjacent interface typography for navigation, post content, metadata, and controls. | Inter |

- **system-ui:** Use natural casing and neutral tracking; regular body and navigation with semibold headings and primary actions.

### Type scale — Perfect Fourth (ratio ≈ 1.333, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 20px | 600 | 1.25 | 0 | — | system-ui | Small page or feed heading at the top of the main column. |
| body | 15px | 400 | 1.4 | 0 | — | system-ui | Post copy, usernames, and primary interface text. |
| caption | 13px | 400 | 1.4 | 0 | — | system-ui | Timestamps and compact secondary metadata. |
| nav | 15px | 400 | 1.4 | 0 | — | system-ui | Left-rail navigation labels and related controls. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 3, 4, 6, 7, 8, 9, 10, 12, 15, 16, 20, 22, 24 px.
- Section rhythm — · element gap 4px · card padding 18px · max content width —.

Use a broad white desktop canvas with a persistent left navigation rail and a narrower, centered content feed. Align the feed header and post stream on one vertical axis. Separate navigation groups with generous breathing room, while keeping feed posts relatively compact and vertically continuous. The screenshot shows a single viewport dominated by the shell and feed; no oversized hero or promotional section is present. Preserve a comfortable density and allow media to sit within the post rather than expanding into a full-bleed page section.

## Shape & elevation

- Radius: button `50%` · media `50%` · nav `8px` · link `50%` · xs `1px` · sm `8px` · md `24px` · pill `9999px`
- Shadow `hairline` (other): `rgb(255, 255, 255) 0px 0px 0px 12px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.04) 0px 0px 12px 0px`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is predominantly flat. Fine gray separators define feed rows, with subtle card shadowing reported for a post container; avoid strong elevation or layered panels. The screenshot’s dim appearance is an overlay condition, not a reason to darken the underlying surfaces.

## Imagery

Feed content is user-generated: small circular profile photos accompany text posts, while portrait video appears inline within a post. Keep media framed by the post column and preserve its native portrait character. The interface itself uses simple monochrome line icons rather than decorative illustration or 3D imagery; individual post media may contain varied colors and should not define the brand palette.

## Components

### Left navigation rail

Vertically stacked icon-and-label links for Home, New thread, Search, Messages, Activity, Profile, and Insights, with a login action below.

### Feed header

A simple Home title aligned above the central stream, without a prominent colored banner.

### Post row

User avatar, username, muted timestamp, post copy, and compact interaction controls arranged as a repeatable feed unit.

### Feed divider

Thin light-gray horizontal rules separate adjacent posts while keeping the content column visually unified.

### Login button

Black pill-shaped primary action with white semibold system-ui text.

### Inline media

Portrait video or image sits within the post body, following the feed column rather than taking over the viewport.

### Measured component styles

- **Primary button** (“Log in”): background #000000 · text #ffffff · border 1px solid #000000 · radius 10px · padding 0px 16px · 600 15px system-ui
- **Link** (“your.addiction”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px system-ui
- **Card** (“alfranken 5h The @vikings 5-0! Nice to s”): transparent background · text #000000 · border 1px solid #d9d9d9 · radius 0px · padding 12px 24px · 400 15px system-ui
- **Navigation item** (“Home New thread Search”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px system-ui

## Do

- Keep the underlying page surface white.
- Use black for primary text and core navigation icons.
- Reserve blue for small interactive accents.
- Separate feed entries with subtle gray rules.
- Use compact, repeatable post layouts.
- Let user-generated media provide visual variety.

## Don't

- Do not treat the screenshot’s dark overlay as the base theme.
- Do not turn the feed into a large marketing hero.
- Do not use saturated color for broad interface backgrounds.
- Do not add heavy shadows around every post.
- Do not let inline media overwhelm the feed column.
- Do not introduce decorative display typography.

## Agent prompt

Build a new Threads-style social page with a clean white canvas and a restrained, content-first interface. Use Thread Ink (#000000) for primary text, navigation icons, and the main action; Feed White (#ffffff) for the page and button text; Divider Silver (#d5d5d5) for quiet feed separators; Metadata Gray (#999999) for timestamps; and Signal Blue (#0095f6) only for small interactive accents. Use system-ui with regular body and navigation text and semibold headings or primary controls. Create a persistent left navigation rail and a narrower centered feed with repeatable post rows, avatars, metadata, copy, actions, and inline portrait media. Keep surfaces mostly flat and spacing comfortable. Do not reproduce the screenshot’s darkened overlay as the actual page theme.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Desktop shell with left navigation rail and a centered, vertically scrolling feed. | Persistent navigation, Repeated post stream, Inline post actions | Monochrome icon navigation, Thin post dividers, Avatar-led post rows, Inline portrait media |

## Source CSS custom properties (selected)

```css
--fds-button-text: #444950;
--fds-comment-background: #F2F3F5;
--fds-highlight-cell-background: #ECF3FF;
--fds-primary-icon: #1C1E21;
--fds-primary-text: #1C1E21;
--accent: hsl(214, 89%, 52%);
--attachment-footer-background: #F0F2F5;
--background-deemphasized: #F0F2F5;
--badge-background-color-blue: hsl(214, 89%, 52%);
--badge-background-color-dark-gray: #65676B;
--badge-background-color-gray: #BCC0C4;
--badge-background-color-green: #31A24C;
--badge-background-color-light-blue: #E7F3FF;
--badge-background-color-red: #e41e3f;
--badge-background-color-yellow: #F7B928;
--text-badge-info-background: hsl(214, 89%, 52%);
--text-badge-success-background: #31A24C;
--text-badge-attention-background: hsl(40, 89%, 52%);
--text-badge-critical-background: #e41e3f;
--border-focused: #65676B;
--card-background: #FFFFFF;
--card-background-flat: #F7F8FA;
--comment-background: #F0F2F5;
--comment-footer-background: #F6F9FA;
--dataviz-primary-1: rgb(0,174,143);
--dataviz-blue-primary: #1D85FC;
--dataviz-blue-secondary: #043B72;
--disabled-button-background: #E4E6EB;
--disabled-button-text: #BCC0C4;
--disabled-text: #BCC0C4;
--divider-on-color: #CED0D4;
--filter-primary-icon: invert(8%) sepia(10%) saturate(200%) saturate(200%) saturate(166%) hue-rotate(177deg) brightness(104%) contrast(91%);
--filter-secondary-button-icon-on-media: invert(100%);
--filter-secondary-icon: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
--filter-primary-deemphasized-button-icon: invert(28%) sepia(100%) saturate(6042%) hue-rotate(202deg) brightness(96%) contrast(101%);
--hero-banner-background: #FFFFFF;
--highlight-bg: #E7F3FF;
--inverse-text: #ffffff;
--media-inner-border: rgba(0, 0, 0, 0.1);
--media-outer-border: #FFFFFF;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/threads-com