CURATED · OPEN · FREE

Farcaster

Build. Share. Grow.

web3social

↓ Download design system (2 MB)Open in OpenDesign

Visit: https://www.farcaster.xyz

📦 Browse pack contents →

Identity DNA

DecentralizedSocialDeveloperOpenProtocol

A decentralized social protocol for builders.

Color

#7959FFAccent

#FFFFFFInk

rgba(255, 255, 255, 0.8)Ink soft

#361AACBG

rgba(255, 255, 255, 0.5)Muted

rgba(255, 255, 255, 0.25)Line

Deep indigo background with white text for high contrast.

Typography

humanist-sans

display28px · 600

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px base grid.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 300px

None, relies on background contrast.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard web layout, mobile-first.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth hover transitions.

Scale or color shift. · Scale down slightly.

Components

button Rounded pill shape, primary and secondary styles.
card Dark glass effect on mobile app preview.
chip None visible.
input None visible.
hero Split layout with phone mockup and call to action.

Voice & Don'ts

Tone Direct, confident, technical.
Headlines Short, punchy sentences.
CTAs Clear and actionable.

Don't use thin weights — screenshot shows bold/medium weights.
Don't use sharp corners on primary buttons — screenshot shows pill shapes.
Don't use light backgrounds — screenshot shows deep indigo.
Don't use complex gradients — screenshot shows a solid or very subtle gradient.
Don't use decorative fonts — screenshot shows clean sans-serifs.
Don't clutter the layout — screenshot shows a clear, focused hero section.
Avoid: Vague promises.
Avoid: Excessive marketing fluff.
Avoid: Non-technical jargon.

Inside the pack — real screenshots

Farcaster — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

A decentralized social protocol for developers and creators. Deep indigo background (#361AAC) with white text and a vibrant purple accent (#7959FF). Uses clean humanist sans-serif typography (Inter) with bold weights for emphasis. Buttons are fully rounded (pill shape). The layout is clean and focused, avoiding clutter. Critical don'ts: Don't use sharp corners on buttons, don't use light backgrounds, don't use thin font weights.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko