---
name: Lens
description: "This site is worth including as a prime example of a modern, clean aesthetic applied to a complex web3 infrastructure product, balancing technical clarity with approachable design."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#2C2D30"
  secondary: "#373737"
  neutral: "rgba(55,55,55,0.4)"
  bg-quiet: "#F5F5F5"
  line: "rgba(55,55,55,0.4)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.57
    fontWeight: 400
    letterSpacing: "-0.09px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.09px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A foundational social layer for onchain culture and communities.

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#2C2D30`)** — uses `ink` token
- **Secondary text (`#373737`)** — uses `ink-soft` token
- **Muted (`rgba(55,55,55,0.4)`)** — uses `muted` token
- **Borders (`rgba(55,55,55,0.4)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** sfmono

## Layout

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

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

## Elevation & Depth

- 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
- Borders: 1px solid rgba(55, 55, 55, 0.4)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

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

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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