---
title: "Lens design system"
variant: extended
source: https://lens.xyz/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/lens-xyz)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lens · Design System

> A quiet canvas for onchain culture

**Theme:** light · **Industry:** crypto · **Source:** https://lens.xyz/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lens pairs a restrained white interface with bold app imagery to present a social layer for onchain communities. Compact navigation and centered messaging lead into product cards, an app directory, ecosystem metrics, and a sparse footer.

## North star

Keep the interface nearly white and editorially quiet, letting real product imagery provide the color and visual energy.

## Overview

The page uses white as its dominant canvas, with charcoal headings and subdued gray supporting copy keeping attention on the message. Pale lavender-gray surfaces frame app cards, while saturated pink, violet, and blue appear mainly in product screenshots and illustrations rather than as interface-wide brand accents. Saans gives headlines a rounded, contemporary character; Inter handles navigation, body copy, and compact labels. The hero is centered and deliberately quiet, with a small mascot above the headline and fine curved lines behind its calls to action. Large app previews provide the visual counterweight below. Subsequent sections retain white backgrounds, centered headings, and compact content groups. Generous open areas separate the showcase, app directory, ecosystem metrics, and footer, while card corners and pill-like navigation soften the otherwise clean geometry. Buttons are black, clear, and restrained, with subtle shadows rather than prominent borders.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and open section backgrounds; preserves a bright, uncluttered field around content. |
| Quiet Slate | `#808183` | `--color-quiet-slate` | neutral | Muted navigation, captions, footer text, and secondary explanatory copy. |
| Lavender Haze | `#f4f1f6` | `--color-lavender-haze` | surface | Pale card and button surfaces and fine borders; keep it subtle against the white canvas. |
| Soft Charcoal | `#2c2d30` | `--color-soft-charcoal` | brand | Primary headings, body text, footer text, and dark interface details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f1f6` (Lavender Haze) · `--color-text` → `#2c2d30` (Soft Charcoal) · `--color-text-muted` → `#808183` (Quiet Slate) · `--color-border` → `#f4f1f6` (Lavender Haze)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2c2d30` | `#ffffff` | 13.77:1 | AAA |
| `#2c2d30` | `#f4f1f6` | 12.3:1 | AAA |
| `#808183` | `#ffffff` | 3.9:1 | AA-large |
| `#808183` | `#f4f1f6` | 3.48:1 | AA-large |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.08) 100%), none`
- `linear-gradient(rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, captions, labels, and utility links. | Inter |
| saans | `--font-display` | webfont | 500, 600 | Hero and section headings, plus selected app-card copy. | Inter |

- **inter:** Use measured regular, medium, and semibold weights; compact labels may use uppercase with tracked lettering.
- **saans:** Use medium to semibold weights for headings; keep forms rounded, clean, and untransformed.

### Type scale — Perfect Fourth (ratio ≈ 1.302, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 46px | 600 | 1.2 | 0 | — | saans | Centered hero headline. |
| h2 | 28px | 500 | 1.35 | 0 | — | saans | Major section headings, including Explore Apps. |
| h3 | 21px | 500 | 1.4 | 0 | — | saans | Smaller headings within feature or content groups. |
| h4 | 20px | 400 | 1.45 | -0.025em | — | inter | Supporting subheads and card-level headings. |
| body | 16px | 400 | 1.4 | -0.022em | — | inter | Descriptions and explanatory page copy. |
| caption | 12px | 400 | 1 | -0.042em | — | inter | Compact app labels, metrics, and footer details. |
| nav | 14px | 500 | normal | -0.006em | — | inter | Top navigation and primary menu items. |
| eyebrow | 11px | 500 | 1.45 | 0.06em | uppercase | inter | Small uppercase category labels above content. |

OpenType features in use: `"cv11"`, `"ss01"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 12, 16, 18, 24, 32, 48 px.
- Section rhythm 32px · element gap 4px · card padding — · max content width 1082px.

Use a centered content frame with a measured maximum width of 1082px, while keeping section backgrounds full-width and white. The navigation is a compact horizontal row; the hero is centered, followed by paired wide product previews. Later content shifts into a multi-column app directory and three-part statistics row, then a two-column footer. Keep the overall density compact within each group, but use generous blank intervals between major sections. Align section titles centrally and let cards establish the local grid.

## Shape & elevation

- Radius: button `10px` · card `40px` · media `50%` · nav `9999px` · link `8px` · xs `8px` · sm `10px` · md `16px` · lg `20px` · xl `40px` · pill `9999px`
- Shadow `hairline` (link): `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `md` (link): `rgba(44, 45, 48, 0.08) 0px 10px 24px 0px`
- Shadow `md-2` (button): `rgba(44, 45, 48, 0.08) 0px 8px 24px 0px`
- Shadow `hairline-3` (other): `rgba(44, 45, 48, 0) 0px 1px 0px 0px`
- Motion: standard transition `0.17s ease` on interactive elements.

Favor flat white sections and pale surfaces over heavy elevation. Cards are defined mainly by their large rounded silhouettes and light contrast against the canvas. Reserve subtle, low-opacity shadows for buttons and compact links; use fine hairlines sparingly and avoid stacked, dramatic layers.

## Imagery

Use large, rounded product-preview panels featuring authentic app screens and phone mockups. Their pink, violet, and blue backdrops supply the strongest color, so keep surrounding UI neutral. A small dark mascot and restrained curved-line illustration anchor the hero; ecosystem marks and app icons remain small, crisp accents rather than oversized decoration.

## Components

### Compact header

Place the Lens mark and small Inter navigation links in a restrained horizontal row; keep the Bridge link separated at the far end.

### Centered hero

Stack a small mascot, centered Saans headline, muted supporting line, and paired documentation and account actions.

### Primary action

Use a black button with white Inter text, a 10px radius, and a subtle measured hairline shadow.

### Product preview cards

Show two large, 40px-radius product panels with colorful app imagery and compact bottom information strips.

### App directory

Present application entries in a compact multi-column arrangement with small icons, short descriptions, and Open links.

### Ecosystem metrics

Center a concise heading above three evenly distributed icon-and-number metrics with muted supporting labels.

### Footer

Keep the brand mark on one side and grouped navigation links on the other, followed by a quiet copyright line.

### Measured component styles

- **Primary button** (“Get App”): background #000000 · text #ffffff · radius 10px · padding 0px 18px · 500 16px inter · shadow rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
- **Secondary button**: transparent background · text #2c2d30 · border 1px solid #eeefef · radius 999px · padding 0px · 400 13.3333px saans · shadow rgba(44, 45, 48, 0.08) 0px 8px 24px 0px
- **Link** (“Open”): transparent background · text #2c2d30 · radius 8px · padding 0px · 400 14px inter · shadow rgba(0, 0, 0, 0.05) 0px 0px 0px 1px
- **Card** (“ORB 800,000+ DOWNLOADS Orb is a web3 soc”): background #f4f1f6 · text #373737 · radius 40px · padding 0px · 400 16px saans
- **Navigation item** (“Build with Lens”): transparent background · text #2b2d30 · radius 0px · padding 0px · 500 14px inter

## Do

- Keep the page canvas white and visually quiet.
- Use Soft Charcoal for the strongest text hierarchy.
- Reserve Lavender Haze for subtle card or control surfaces.
- Let colorful product screenshots carry most of the visual saturation.
- Center the hero and major section headings.
- Use black, understated calls to action with white labels.
- Preserve generous whitespace between content groups.

## Don't

- Do not introduce unmeasured interface palette colors.
- Do not turn illustration colors into full-width section backgrounds.
- Do not crowd the hero with navigation or extra copy.
- Do not add heavy shadows, thick borders, or dense card chrome.
- Do not make supporting text compete with the primary heading.
- Do not use oversized decorative elements throughout the page.

## Agent prompt

Build a new Lens-style page as a bright, restrained canvas. Use Gallery White (#ffffff) for the main background, Soft Charcoal (#2c2d30) for primary text, Quiet Slate (#808183) for secondary copy, and Lavender Haze (#f4f1f6) only for pale surfaces and fine borders. Set headings in Saans or a close substitute and interface text in Inter. Keep the top navigation compact, then center the hero with a small brand illustration, clear headline, short muted subtitle, and paired actions. Follow with rounded, image-led product panels; keep any vivid color inside real product visuals rather than adding decorative interface accents. Use centered section titles, compact app grids, simple metrics, and a sparse footer. Favor flat surfaces, subtle shadows, clean spacing, and concise copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero with mascot, headline, supporting line, and actions above paired product previews. | Primary account action, Developer documentation link | Centered typography, Small mascot illustration, Black primary button, Product preview cards |
| 2 | integrations | Centered heading above a multi-column directory of app entries with compact links. | Browse ecosystem apps, Open an app | App icons, Pale card surfaces, Compact descriptions, Subtle navigation controls |
| 3 | stats | Centered introduction followed by three evenly spaced metric columns. | Scan platform scale, Understand ecosystem reach | Minimal line icons, Large metric values, Muted captions |
| 4 | footer | Two-part footer with brand identity, grouped link columns, and a separate copyright line. | Browse company resources, Access legal links | Brand mark, Grouped text links, Small muted copyright |

## Source CSS custom properties (selected)

```css
--primary: color(display-p3 0 .796078 1);
--primary-dark: color(display-p3 .184314 .745098 1);
--accent-1: color(display-p3 .117647 .776471 .635294);
--accent-2: color(display-p3 .0705882 .694118 .588235);
--color-gho: color(display-p3 .156863 .827451 .345098);
--color-aave: color(display-p3 .576471 .568628 .968627);
--color-family: color(display-p3 .172549 .176471 .188235);
--text-primary: color(display-p3 .172549 .176471 .188235);
--text-secondary: color(display-p3 .172549 .176471 .188235/.6);
--text-tertiary: color(display-p3 .172549 .176471 .188235/.3);
--card-bg: color(display-p3 .172549 .176471 .188235/.02);
--duration-snappy: .22s;
--ease-snappy: cubic-bezier(.175, .885, .32, 1.1);
--duration-swift: .8s;
--ease-swift: cubic-bezier(.175, .885, .32, 1.275);
--duration-smooth: .3s;
--ease-smooth: cubic-bezier(.19, 1, .22, 1);
--body-bg: #fff;
--body-color: #37373766;
--heading-color: #373737;
--hyperlink-color: #373737;
--hr-color: #ebebeb;
--focus-color: color(display-p3 .117647 .776471 .635294);
--selection-color: #fff;
--selection-bg: #000c;
--font-primary: "saans", "saans Fallback";
--font-secondary: "inter", "inter Fallback";
--font-mono: "sfMono", "sfMono Fallback";
--privy-color-background: #FFFFFF;
--privy-color-background-2: #F1F2F9;
--privy-color-background-3: #5B4FFF;
--privy-color-foreground: #040217;
--privy-color-foreground-2: #64668B;
--privy-color-foreground-3: #9498B8;
--privy-color-foreground-4: #E2E3F0;
--privy-color-foreground-accent: hsl(0, 0%, 97%);
--privy-color-accent: hsl(0, 0%, 0%);
--privy-color-accent-light: hsl(0, 0%, 15%);
--privy-color-accent-hover: hsl(0, 0%, 30%);
--privy-color-accent-dark: hsl(0, 0%, 0%);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lens-xyz