---
name: Threads
description: "A masterclass in minimalist social UI that strips away visual noise to focus on text-based conversation."
version: alpha

colors:
  background: "#fafafa"
  primary: "#000000"
  secondary: "#424242"
  neutral: "#999999"
  bg-soft: "#efefef"
  line: "rgba(0,0,0,0.15)"

typography:
  display:
    fontFamily: system-ui
    fontSize: 32px
    lineHeight: 1.4
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: system-ui
    fontSize: 15px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: system-ui
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 18px
  lg: 18px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A minimalist social platform focused on text-based conversations with a clean, monochrome interface.

*A clean, stripped-back social feed that prioritizes text conversation over visual noise.*

## Colors

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

- **Background (`#fafafa`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#424242`)** — uses `ink-soft` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.15)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* 4px base grid with consistent padding multiples

## Elevation & Depth

- 0px 0px 12px rgba(0,0,0,0.04)
- Borders: 1px solid rgba(0,0,0,0.15)

## Shapes

- `sm`: 8px
- `md`: 18px
- `lg`: 18px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with black background and white text, or ghost buttons with rounded borders
- **card:** White cards with 18px border radius and subtle shadows for modals and login prompts
- **chip:** Pill-shaped badges for usernames and tags
- **input:** Minimal inputs with subtle borders
- **hero:** Large bold text centered in modal overlays with descriptive subtext

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```