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

# WalletConnect · Design System

> Institutional clarity with a vivid blue network pulse

**Theme:** light · **Industry:** crypto · **Source:** https://walletconnect.com/ · **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._

WalletConnect pairs dark, cinematic hero and closing sections with bright, spacious product and security content. A restrained blue accent, serif display headlines, and network imagery make the page feel both institutional and connected.

## North star

Use warm dark-and-white section contrast, editorial serif headlines, and blue only where it signals action or network energy.

## Overview

The page alternates between a warm, near-black canvas and clean white content bands, giving the dark hero and closing areas a cinematic, institutional presence. Electric blue is reserved for primary actions and network-like gradients, while charcoal text, muted gray copy, and pale hairlines keep the information legible without adding visual noise. Large editorial serif headlines establish a distinctive voice; Inter carries navigation, body copy, buttons, and dense explanatory content in a practical sans-serif rhythm. The opening pairs centered messaging with a large metallic network orb and a subdued partner-logo row. Below, left-aligned statements and metrics lead into cards, product browsing, and compact security features. Generous section breathing room offsets the denser grids. Soft card shadows, fine borders, rounded cards, and pill-shaped controls provide just enough depth and tactility. The footer gradient is a branded accent field, not a signal to tint every section.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and bright content sections; also appears in headings, button text, and fine outlines on dark backgrounds. |
| Signal Blue | `#0666ff` | `--color-signal-blue` | accent | Primary Contact Sales actions and the strongest blue element in gradients and network accents. |
| Charcoal Ink | `#252525` | `--color-charcoal-ink` | neutral | Default headings and body text across the white product, solutions, and security sections. |
| Warm Obsidian | `#1c180d` | `--color-warm-obsidian` | surface | Warm near-black hero, metrics band, closing CTA, and footer backgrounds. |
| Quiet Line | `#ececec` | `--color-quiet-line` | neutral | Card fills and thin borders separating otherwise clean white content. |
| Muted Graphite | `#4f4f4f` | `--color-muted-graphite` | neutral | Secondary explanatory copy and lower-emphasis text on light backgrounds. |
| Bright Azure | `#3389ff` | `--color-bright-azure` | accent | Blue button border and accent detail; also appears in gradient transitions. |
| Warm Porcelain | `#f6f5ef` | `--color-warm-porcelain` | surface | Warm light tone in navigation, cards, footer text, and light-on-dark supporting content. |
| Silver Gray | `#bbbbbb` | `--color-silver-gray` | neutral | Low-emphasis text tone; use sparingly for subdued supporting copy. |
| Midnight Blue | `#162d50` | `--color-midnight-blue` | semantic | Deep blue within section gradients, not a general-purpose page background. |
| Network Blue | `#267aff` | `--color-network-blue` | accent | Brighter blue transition in the footer gradient and related network color effects. |
| Sky Current | `#6ea6ff` | `--color-sky-current` | accent | Lighter blue stop in the footer gradient, not a dominant interface color. |
| Pale Signal | `#97bfff` | `--color-pale-signal` | accent | Soft blue gradient highlight used in the footer color field. |
| Deep Current | `#0f4497` | `--color-deep-current` | semantic | Dark saturated blue in gradients, supporting network atmosphere rather than text or controls. |
| Storm Slate | `#1a2026` | `--color-storm-slate` | semantic | Blue-gray gradient transition; primarily atmospheric, not a standard interface surface. |
| Cobalt Depth | `#085ee7` | `--color-cobalt-depth` | accent | Deep blue gradient stop reinforcing the branded blue field. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1c180d` (Warm Obsidian) · `--color-surface-2` → `#ececec` (Quiet Line) · `--color-surface-3` → `#f6f5ef` (Warm Porcelain) · `--color-text` → `#252525` (Charcoal Ink) · `--color-text-muted` → `#4f4f4f` (Muted Graphite) · `--color-text-subtle` → `#f6f5ef` (Warm Porcelain) · `--color-border` → `#ececec` (Quiet Line) · `--color-accent` → `#0666ff` (Signal Blue) · `--color-accent-2` → `#267aff` (Network Blue) · `--color-accent-3` → `#6ea6ff` (Sky Current) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#252525` | `#ffffff` | 15.33:1 | AAA |
| `#252525` | `#1c180d` | 1.16:1 | fail |
| `#252525` | `#ececec` | 12.98:1 | AAA |
| `#252525` | `#f6f5ef` | 14.03:1 | AAA |
| `#4f4f4f` | `#ffffff` | 8.19:1 | AAA |
| `#4f4f4f` | `#1c180d` | 2.16:1 | fail |
| `#4f4f4f` | `#ececec` | 6.93:1 | AA |
| `#4f4f4f` | `#f6f5ef` | 7.5:1 | AAA |
| `#f6f5ef` | `#ffffff` | 1.09:1 | fail |
| `#f6f5ef` | `#1c180d` | 16.21:1 | AAA |

### Gradients

- `radial-gradient(41% 71% at -3% 111%, rgb(6, 102, 255) 0px, rgba(6, 102, 255, 0.57) 20%, rgba(6, 102, 255, 0.28) 40%, rgba(6, 102, 255, 0.1) 60%, rgba(6, 102, 255, 0.02) 80%, rgba(6, 102, 255, 0) 100%), radial-gradient(11`
- `radial-gradient(83% 137% at 111% 172% in srgb, color(srgb 0.0235294 0.4 1 / 0.98) 34%, rgba(0, 0, 0, 0) 100%), radial-gradient(96% 94% at -4% 106% in srgb, color(srgb 0.0235294 0.4 1 / 0.87) 0px, color(srgb 0.0235294 0.4`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __Inter_a5256c | `--font-body` | webfont | 400, 600, 500, 700 | Primary interface sans for navigation, body copy, buttons, and most headings. | Inter |
| Exact | `--font-display` | webfont | 400 | Editorial display and section headings, including the large hero headline. | DM Serif Display |

- **__Inter_a5256c:** Use measured 400–700 weights; mostly sentence case, with clean body leading and restrained tracking.
- **Exact:** Use regular-weight serif headlines with tight tracking and compact leading; keep contrast against the sans-serif interface.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.05 | -0.015em | — | Exact | Editorial hero-scale headline and prominent brand statements. |
| h1 | 56px | 400 | 1.14 | -0.02em | — | __Inter_a5256c | Primary page headline, especially hero messaging. |
| h2 | 45px | 400 | 1.15 | -0.015em | — | Exact | Major section headings and editorial statements. |
| h3 | 40px | 400 | 1.1 | -0.015em | — | Exact | Feature and product group headings. |
| h4 | 32px | 600 | 1.25 | 0 | — | __Inter_a5256c | Card and subsection titles, often with stronger sans weight. |
| body | 16px | 400 | 1.5 | 0 | — | __Inter_a5256c | Explanatory copy, descriptions, and supporting content. |
| caption | 12px | 400 | 1.33 | 0 | — | __Inter_a5256c | Compact labels, metadata, and card footnotes. |
| button | 16px | 400 | 1 | 0 | — | __Inter_a5256c | Primary and secondary action labels. |
| nav | 14px | 400 | 1.43 | 0 | — | __Inter_a5256c | Top navigation and compact menu links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 9, 12, 16, 18, 20, 24, 28, 32, 40, 48, 64, 96 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1240px.

Use a spacious, centered page frame with a measured maximum width of 1240px. The hero is centered and cinematic; most later sections switch to left-aligned editorial headings above structured grids. Alternate full-width dark and white bands, with generous section gaps and more compact spacing inside cards. Product content uses a centered title and browsing controls, while solutions and security distribute compact items across columns. Keep alignment deliberate and allow white space to separate dense information rather than adding decoration.

## Shape & elevation

- Radius: button `50%` · card `16px` · link `16px` · xs `8px` · sm `16px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.08) 0px 5px 20px 0px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.06) 0px 1px 2px 0px`
- Motion: standard transition `0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955)` on interactive elements.

Most content sits flat on white or warm dark bands. Cards use fine pale borders, rounded corners, and occasional soft, restrained shadows rather than dramatic elevation. Pill buttons and outlined secondary actions add tactile separation. The hero orb and footer gradient supply the strongest depth and layering, while card layouts remain quiet and legible.

## Imagery

The hero uses a large metallic, globe-like network visual that overlaps a blue atmospheric glow, with partner logos running across its lower edge. Product and feature cards use clean illustrations, logos, and diagrams rather than lifestyle photography. A case-study panel pairs concise copy with a prominent brand mark. Treat illustrative colors as content-specific; keep the interface palette restrained around them.

## Components

### Primary pill CTA

Use Signal Blue #0666ff with white text, a fully rounded capsule shape, and a subtle blue border. Contact Sales is the recurring action.

### Outlined secondary action

Pair a dark or light transparent pill with a thin contrasting outline for Login and Docs beside primary actions.

### Feature cards

Light cards use a #ececec hairline border, a 16px radius, and illustrative media above concise charcoal titles and muted copy.

### Metrics row

Set four large figures in a row on a dark band, with short labels and understated horizontal dividers.

### Product browser

Center the Products heading and compact category selector above a horizontally browsable product feature with directional controls.

### Solutions grid

Present compact linked solution tiles in multiple columns, with concise descriptions and a small directional arrow.

### Security features

Arrange nine security benefits in a clean multi-column grid with simple line icons, short headings, and small explanatory text.

### Partner banner

Overlay a subdued report link and partner wordmarks on the lower portion of the hero’s network artwork.

### Measured component styles

- **Primary button** (“Contact Sales”): background #0666ff · text #ffffff · border 1px solid #3389ff · radius 100px · padding 12px 18px · 400 16px __Inter_a5256c
- **Link** (“Download the State of Policy, Compliance”): transparent background · text #f6f5ef · border 1px solid #ffffff · radius 16px · padding 8px 12px 8px 8px · 400 16px __Inter_a5256c
- **Input**: transparent background · text #252525 · radius 0px · padding 0px · 400 16px __Inter_a5256c
- **Card** (“Financial Institutions Secure, compliant”): transparent background · text #252525 · border 1px solid #ececec · radius 16px · padding 0px · 400 16px __Inter_a5256c
- **Navigation item** (“Trade & Transact”): transparent background · text #f6f5ef · radius 0px · padding 0px · 400 14px __Inter_a5256c

## Do

- Alternate warm near-black bands with crisp white content sections.
- Use blue for primary actions and purposeful network accents.
- Pair editorial serif headlines with practical Inter interface text.
- Give major sections generous breathing room.
- Keep cards light, bordered, and visually quiet.
- Let hero artwork and footer gradients carry the strongest visual drama.

## Don't

- Do not turn every section blue or gradient-filled.
- Do not use the illustration palette as the global interface palette.
- Do not crowd headings, metrics, or card copy.
- Do not replace the serif display voice with heavy sans headlines.
- Do not add strong shadows to every panel.
- Do not use decorative imagery where concise diagrams or logos suffice.

## Agent prompt

Build a new page in the WalletConnect visual style using a spacious, centered content frame and clear alternating light and dark bands. Use Warm Obsidian #1c180d for selective hero or CTA surfaces, Gallery White #ffffff for primary content, and Charcoal Ink #252525 with Muted Graphite #4f4f4f for readable text. Reserve Signal Blue #0666ff for primary actions and focused network accents. Pair editorial serif display headlines with Inter for navigation, body copy, and controls. Organize content into generous sections, concise grids, and restrained cards with Quiet Line #ececec borders and soft elevation only where useful. Favor network diagrams, logos, and polished technical illustrations over lifestyle photography. Keep forms and navigation understated, buttons pill-shaped, and the overall hierarchy institutional, calm, and legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width warm-dark hero with top navigation, centered headline and copy, paired actions, and large artwork below. | primary and secondary CTA, partner proof, report link | warm dark canvas, serif headline, blue pill button, network orb |
| 2 | stats | Dark metrics band with a left-aligned statement above four horizontally distributed figures. | at-a-glance metrics, scale proof | four-column figures, subtle dividers, light-on-dark text |
| 3 | other | White section with one left-aligned editorial heading and substantial surrounding whitespace. | section framing | serif display heading, open white canvas |
| 4 | feature-grid | White section with a left-aligned heading and two-column grid of four image-led feature cards. | trust proof, feature overview | illustrated cards, thin borders, soft shadows |
| 5 | product-showcase | Centered title and category tabs above a horizontally browsable product panel with artwork and controls. | category selection, carousel navigation, learn more | pill selector, product illustration, directional arrows |
| 6 | feature-grid | Centered section heading above a three-column grid of compact linked solution tiles. | audience discovery, linked solution cards | minimal tiles, short descriptions, arrow affordances |
| 7 | feature-grid | Centered heading and supporting sentence above a spacious three-column grid of nine security features. | security reassurance, compliance overview | line icons, compact text, light background |
| 8 | feature-split | Dark two-column case-study band with copy and CTA on the left and a large client mark on the right. | case-study proof, read case study | dark canvas, blue CTA, large brand panel |
| 9 | cta | Centered closing statement and supporting line on a full-width warm-dark section. | sales conversion | large serif headline, blue pill CTA |
| 10 | footer | Dark multi-column footer with brand and signup area, link groups, social icons, and a narrow legal row. | email signup, social links, utility navigation | blue gradient field, compact link columns, bottom legal strip |

## Source CSS custom properties (selected)

```css
--c-profile-stack-gap: 0;
--c-button-primary-bg: #0666ff;
--c-button-primary-bg-hover: #0540e0;
--c-button-primary-border: #0666ff;
--c-button-primary-text: #fff;
--p-color-blue-50: #e6f0ff;
--p-color-blue-100: #cce2ff;
--p-color-blue-200: #99c4ff;
--p-color-blue-300: #66a7ff;
--p-color-blue-400: #3389ff;
--p-color-blue-500: #0666ff;
--p-color-blue-600: #0540e0;
--p-color-blue-700: #0205ba;
--p-color-blue-800: #02048c;
--p-color-blue-900: #01035e;
--p-color-blue-950: #010230;
--p-color-warm-50: #fbf7eb;
--p-color-warm-100: #f6f5ef;
--p-color-warm-200: #ffd9b3;
--p-color-warm-300: #f2caaa;
--p-color-warm-900: #1c180d;
--p-color-gray-50: #f7f6f4;
--p-color-gray-100: #ececec;
--p-color-gray-200: #bbb;
--p-color-gray-300: #9a9a9a;
--p-color-gray-400: #787878;
--p-color-gray-500: #6c6c6c;
--p-color-gray-600: #4f4f4f;
--p-color-gray-700: #363636;
--p-color-gray-800: #252525;
--p-color-orange-100: #ffe1d6;
--p-color-orange-300: #ff8f66;
--p-color-orange-500: #f40;
--p-color-orange-700: #b32f00;
--p-color-orange-900: #591800;
--p-color-sky-200: #d5e6ec;
--p-color-sky-300: #7bb8e7;
--p-color-black: #252525;
--p-color-white: #fff;
--p-color-gradient-primary-from: #0666ff;
```

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