CURATED · OPEN · FREE

Lens

A foundational social layer for onchain culture and communities.

web3social

↓ Download design system (14 MB)Open in OpenDesign

Visit: https://www.lens.xyz

📦 Browse pack contents →

Identity DNA

social protocolonchaindecentralizedecosysteminfrastructure

A clean, infrastructure-focused social protocol for the decentralized web.

Color

#2C2D30Ink

#373737Ink soft

#FFFFFFBG

#F5F5F5BG quiet

rgba(55,55,55,0.4)Muted

Monochromatic foundation with high-contrast black and white, relying on colorful imagery for accents.

Typography

geometric-sans · humanist-sans · sfmono

display56px · 500
body16px · 400
caption14px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px base grid used throughout the layout and component spacing.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(55, 55, 55, 0.4)

rgba(0, 0, 0, 0.05) 0px 0px 0px 1px · rgba(44, 45, 48, 0.08) 0px 10px 24px 0px · rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered, single-column layout for content with a wide container for the ecosystem showcase.

Motion & Interaction

100msmicro

170mssmall

300msmedium

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

Fade in and out for transitions · Subtle hover states on interactive elements

Subtle opacity change or color transition · Immediate response with minimal visual feedback

Components

button Rounded pill-shaped buttons with strong contrast between primary (black) and secondary (white with border) variants.
card Clean cards with subtle borders or shadows, featuring clear typography and action buttons.
chip Small rounded pills used for tags or status indicators.
input Clean text inputs with subtle borders.
hero Centered hero section with a large display headline, supporting text, and two primary actions.

Voice & Don'ts

Tone Confident, clear, and technically-oriented.
Headlines Bold, concise statements about the product's function.
CTAs Direct and action-oriented with clear value propositions.

don't use complex gradients — screenshot shows flat colors and subtle shadows instead
don't use decorative illustrations — screenshot shows real product mockups in phones instead
don't use multiple accent colors — screenshot shows monochromatic palette with colorful imagery instead
don't use heavy drop shadows — screenshot shows subtle 1px borders and soft shadows instead
don't use condensed typography — screenshot shows open, readable sans-serif fonts instead
don't use busy navigation — screenshot shows clean, minimal top navigation with few items
Avoid: Overly technical jargon without context
Avoid: Aggressive sales language
Avoid: Vague promises

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Lens Protocol's website design embodies a clean, infrastructure-focused aesthetic for a web3 social layer. Key colors include a white background (#FFFFFF), black primary (#000000), and a subtle neutral (#2C2D30) for text. Typography uses geometric and humanist sans-serif categories (like Saans and Inter) with a tight letter-spacing. Critical design rules: 1) Maintain generous whitespace and centered layouts. 2) Use high-contrast black and white for primary UI elements. 3) Avoid decorative illustrations, focusing on product mockups instead.

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