A clean, stripped-back social feed that prioritizes text conversation over visual noise.
02
Color
#000000Ink
#424242Ink soft
#fafafaBG
#efefefBG soft
#999999Muted
rgba(0,0,0,0.15)Line
Monochrome palette with subtle grays for depth, black for primary elements, and white for cards and modals.
03
Typography
system-ui
display32px · 700
body15px · 400
caption13px · 400
Use system font stack for consistent rendering across platforms · Maintain tight line heights for compact text blocks · Use weight 600 for usernames and emphasis
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
4px base grid with consistent padding multiples
05
Surfaces
sm · 8px
md · 18px
lg · 18px
pill · 999px
1px solid rgba(0,0,0,0.15)
0px 0px 12px rgba(0,0,0,0.04)
06
Layout
1280container
3columns
24pxgutter
768 / 1024breakpoints
Three-column layout with left navigation, central feed, and right sidebar
07
Motion & Interaction
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Quick fade transitions for modal appearance · Smooth color transitions for interactive elements
Subtle opacity or color change · Immediate response with micro-transition
08
Components
buttonPill-shaped buttons with black background and white text, or ghost buttons with rounded borders
cardWhite cards with 18px border radius and subtle shadows for modals and login prompts
chipPill-shaped badges for usernames and tags
inputMinimal inputs with subtle borders
heroLarge bold text centered in modal overlays with descriptive subtext
09
Voice & Don'ts
ToneFriendly and inviting, conversational
HeadlinesDirect and action-oriented, using bold weight
CTAsClear call-to-action with strong contrast
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
Captured from the live site · real computed styles
11
System prompt
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.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
