# Threads · Design system migration spec

> Source: https://threads.net  ·  Curated by OpenDesign  ·  en

> A masterclass in minimalist social UI that strips away visual noise to focus on text-based conversation.

## 1. Identity DNA

Threads treats its interface like a well-lit reading room, stripping away ornamentation to foreground the conversation itself. The design system is a monochrome study in restraint, where every decision serves legibility and the thread of dialogue.

**One-liner:** A minimalist social platform focused on text-based conversations with a clean, monochrome interface.
**Keywords:** social · thread · conversation · minimalist · meta
**Analogy:** A clean, stripped-back social feed that prioritizes text conversation over visual noise.

## 2. Color

The palette is a disciplined monochrome: **black** for primary ink, **white** for interactive surfaces, and subtle grays for depth and hierarchy. This absence of accent color forces the content to carry all visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#fafafa` | main background |
| `--bg-soft` | `#efefef` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#424242` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(0,0,0,0.15)` | divider |

**Color principle:** Monochrome palette with subtle grays for depth, black for primary elements, and white for cards and modals.

The principle is absolute: no hue should compete with the user's own words or the shared images in their feed.

## 3. Typography

Type is set in the system font stack, a pragmatic choice that ensures native rendering speed and platform familiarity across devices. The voice is maintained through compact line heights and a bold weight reserved for usernames, creating a clear hierarchy within the dense flow of posts.

- **Display:** system-ui
- **Body:** system-ui

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.4 | 700 | 0px | Modal headlines |
| body | 15px | 1.4 | 400 | 0px | Post content |
| caption | 13px | 1.4 | 400 | 0px | Timestamps and secondary text |

**Type rules:**
- Use system font stack for consistent rendering across platforms
- Maintain tight line heights for compact text blocks
- Use weight 600 for usernames and emphasis

## 4. Spacing

All spatial relationships are governed by a **4px base grid**, producing a consistent and rhythmic cadence for padding and margins.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** 4px base grid with consistent padding multiples

## 5. Surfaces

Depth is communicated through a single, faint shadow: `0px 0px 12px rgba(0,0,0,0.04)`. Interfaces feel lifted but never heavy, defined more by their clean, rounded corners than by dramatic elevation.

- **Radius:** sm 8px · md 18px · lg 18px · pill 999px
- **Shadows:**
  - 0px 0px 12px rgba(0,0,0,0.04)
- **Borders:** 1px solid rgba(0,0,0,0.15)

## 6. Layout

On desktop, the skeleton is a classic three-column framework: navigation to the left, the central feed to the right, and a complementary sidebar on the far right. On mobile, this compresses to a focused single-column stream, prioritizing vertical scrolling and content immersion.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 3 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Three-column layout with left navigation, central feed, and right sidebar

## 7. Motion & Interaction

Motion is minimal and functional, never decorative. Transitions are brief—typically 150 milliseconds—and exist solely to confirm an action or gently reveal a new layer of the interface.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Quick fade transitions for modal appearance
  - Smooth color transitions for interactive elements

- **Hover:** Subtle opacity or color change
- **Click:** Immediate response with micro-transition
- **Transition:** 150ms ease for most interactive elements
- **Keyboard:** Standard focus management for accessibility

## 8. Voice & Don'ts

The editorial voice is **conversational and direct**, matching the platform's purpose. It avoids corporate jargon and dense paragraphs, favoring clear, action-oriented headlines and plain language.

- **Tone:** Friendly and inviting, conversational
- **Headline style:** Direct and action-oriented, using bold weight
- **CTA style:** Clear call-to-action with strong contrast
- **Avoid:** Corporate jargon / Dense paragraphs / Decorative language

### Don'ts
- ❌ Don't use bright accent colors — screenshot shows monochrome palette with black, white, and gray only
- ❌ Don't use decorative fonts — screenshot shows system-ui stack throughout
- ❌ Don't use heavy shadows — screenshot shows very subtle or no box-shadows
- ❌ Don't use complex gradients — screenshot shows flat, solid color fills
- ❌ Don't use sharp corners on primary elements — screenshot shows 18px radius on cards and 999px on buttons
- ❌ Don't use small touch targets — screenshot shows generous padding on interactive elements

The system deliberately forgoes decorative fonts, bright accent colors, and complex gradients, trusting that the conversation is the design.

## System Prompt (paste into AI tool)

```
This is Threads, a minimalist social platform focused on text conversations. The design uses a monochrome palette of #fafafa background, #000000 ink, and #999999 muted tones. Typography relies on the system-ui font stack with bold weights for headlines and regular for body text. The layout features a three-column structure with generous spacing. Critical design rules: avoid any bright accent colors, use only rounded corners (18px for cards, 999px for buttons), maintain subtle shadows, keep text concise and friendly in tone, use system fonts exclusively, and ensure touch targets are large enough for mobile interaction. The interface prioritizes content readability and clean visual hierarchy.
```