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

# Privy · Design System

> Quiet typography, vivid product surfaces, confident whitespace

**Theme:** light · **Industry:** fintech · **Source:** https://www.privy.io/ · **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._

Privy’s homepage pairs a restrained black-and-white interface with vivid lavender product imagery to present digital asset infrastructure as approachable and enterprise-ready. Large editorial headlines, modular feature panels, customer proof, and clear calls to action guide visitors through the product story.

## North star

Keep the interface visually quiet and let crisp typography and lavender product imagery carry the story.

## Overview

The page builds its identity from a quiet white and near-white canvas, using dark text and muted gray to keep attention on the message and product visuals. Lavender and violet gradients appear primarily in dashboard mockups and feature artwork, rather than as a pervasive interface accent. Display headlines use FFF Acid Grotesk Normal with light, closely tracked forms; Inter carries compact body copy, navigation, and supporting labels. A broad, left-aligned hero pairs concise copy and pill-shaped actions with a large financial dashboard composition. Below it, modular image-led panels, four bold metrics, customer case-study cards, and a trust-focused split section create a deliberate progression from capability to proof. Generous section spacing and a predominantly flat surface treatment keep the long page calm, while rounded media and buttons soften the otherwise precise, developer-oriented presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas, white CTA surface, and clean space around product and customer content. |
| Cloud Canvas | `#f8f9fc` | `--color-cloud-canvas` | surface | Soft hero and section-band background that distinguishes content without heavy borders. |
| Slate Haze | `#70707d` | `--color-slate-haze` | neutral | Muted supporting copy and subdued heading text, including secondary lines. |
| Midnight Ink | `#111117` | `--color-midnight-ink` | brand | Near-black primary button fill and strong interface text. |
| Graphite Violet | `#2e2e3d` | `--color-graphite-violet` | neutral | Dark supporting text in body content and explanatory copy. |
| True Black | `#000000` | `--color-true-black` | semantic | High-contrast headings, links, navigation, and logo lettering. |
| Night Blue | `#010110` | `--color-night-blue` | neutral | Very dark heading and text variant; use sparingly where the measured page shows near-black copy. |
| Soft Concrete | `#737373` | `--color-soft-concrete` | neutral | Secondary gray text in small supporting labels. |
| Deep Slate | `#111827` | `--color-deep-slate` | neutral | Occasional dark text detail; not a defining surface or brand accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f9fc` (Cloud Canvas) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#70707d` (Slate Haze) · `--color-text-subtle` → `#111117` (Midnight Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f9fc` | 19.95:1 | AAA |
| `#70707d` | `#ffffff` | 4.88:1 | AA |
| `#70707d` | `#f8f9fc` | 4.64:1 | AA |
| `#111117` | `#ffffff` | 18.81:1 | AAA |
| `#111117` | `#f8f9fc` | 17.87:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 300, 500 | Body copy, navigation, labels, and smaller headings. | Inter |
| FFF Acid Grotesk Normal | `--font-display` | webfont | 400 | Display, H1–H3, and prominent text links. | Space Grotesk |
| Inter-Medium | `--font-inter-medium` | system | 500 | System fallback for medium-weight interface text. | Inter |

- **Inter:** Use restrained weights, compact supporting text, and neutral tracking.
- **FFF Acid Grotesk Normal:** Regular weight, editorial scale, tight negative tracking, and sentence case.
- **Inter-Medium:** A limited fallback; keep medium emphasis subtle and avoid heavy all-caps styling.

### Type scale — Perfect Fourth (ratio ≈ 1.329, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 58px | 400 | 1.1 | -0.03em | — | FFF Acid Grotesk Normal | Oversized hero and high-impact section headline treatment. |
| h1 | 52px | 400 | 1.15 | -0.03em | — | FFF Acid Grotesk Normal | Primary page or section headline, especially the hero. |
| h2 | 42px | 400 | 1.14 | -0.03em | — | FFF Acid Grotesk Normal | Major section titles introducing capabilities and proof. |
| h3 | 26px | 400 | 1.23 | -0.01em | — | FFF Acid Grotesk Normal | Feature-panel titles and secondary content headings. |
| h4 | 22px | 400 | 1.27 | -0.03em | — | Inter | Supporting headings within product and trust sections. |
| body | 14px | 300 | 1.43 | 0 | — | Inter | Descriptions, explanatory copy, and navigation details. |
| caption | 12px | 500 | 1.5 | 0 | — | Inter | Compact labels, metric descriptors, and small metadata. |
| link | 20px | 400 | 1.4 | -0.03em | — | FFF Acid Grotesk Normal | Prominent text links and secondary action labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 60, 70 px.
- Section rhythm 40px · element gap 70px · card padding — · max content width 1200px.

Use a spacious, vertically sequenced page with a measured 1200px maximum content width. The hero is a two-part composition: left-aligned copy and actions beside large product media. Follow with a logo strip, asymmetrical modular feature panels, a four-column metrics row, customer cards, a two-column trust section, centered CTA, and multi-column footer. Keep text alignment mostly left, reserving centered alignment for the closing CTA. The measured density is spacious; preserve generous separation between sections and avoid crowding.

## Shape & elevation

- Radius: button `9999px` · media `8px` · link `8px` · xs `6px` · sm `8px` · md `12px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface reads mostly flat, with little reliance on visible shadows or decorative borders. Separate sections through white and near-white bands, whitespace, and the imagery itself. Rounded media and pill-shaped actions provide the main softness; product mockups create internal depth through overlapping screens and layered illustrations.

## Imagery

Prioritize polished product-interface mockups, including wallets, dashboards, charts, and cards, framed as large rounded media. Lavender and violet gradients, pale lilac panels, and soft pink highlights mostly belong to these product illustrations rather than the core interface palette. Mix interface captures with abstract globe, workflow, and layered 3D-style artwork; case-study tiles combine customer identity, concise copy, and imagery.

## Components

### Primary CTA

Dark near-black pill button with white label, used for the main Get started action; keep its treatment compact and high contrast.

### Secondary CTA

White pill button with a fine dark outline and dark label, paired directly with the primary action.

### Product feature panels

Pale lilac or near-white image-led modules with a concise heading, short supporting copy, and product artwork.

### Customer logo strip

A single horizontal row of partner marks beneath the hero, shown in restrained monochrome.

### Metrics row

Four evenly distributed large numeric proof points with small muted descriptors beneath.

### Case-study cards

A horizontal set of customer cards combining vivid brand-colored panels, short summaries, and supporting images.

### Footer link columns

Dense multi-column navigation groups with small headings, compact links, and a larger Privy brand mark.

### Measured component styles

- **Primary button** (“Get started”): background #111117 · text #0000ee · radius 100px · padding 16px 20px · 400 12px sans-serif
- **Secondary button** (“Contact sales”): background #ffffff · text #0000ee · radius 100px · padding 16px 20px · 400 12px sans-serif
- **Link** (“User wallets”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use white and Cloud Canvas as the dominant page surfaces.
- Reserve saturated violet gradients for product visuals and illustration.
- Set prominent headlines in a light editorial grotesk with tight tracking.
- Pair primary and outlined secondary pill actions.
- Organize capabilities into image-led modular panels.
- Use customer proof and metrics as distinct page beats.

## Don't

- Do not turn the whole interface into a saturated gradient.
- Do not add unsupported palette colors or decorative accent hues.
- Do not crowd sections or compress the generous vertical rhythm.
- Do not use heavy shadows to separate otherwise flat content.
- Do not make body copy compete with oversized headlines.
- Do not treat illustration-only colors as interface-wide brand colors.

## Agent prompt

Build a new Privy-style fintech page with a quiet, spacious interface. Use Gallery White (#ffffff) as the main canvas and Cloud Canvas (#f8f9fc) for soft section bands. Set headlines in an editorial grotesk similar to Space Grotesk, with compact Inter-style supporting copy and dark True Black (#000000) or Midnight Ink (#111117) text. Keep Lavender/violet color effects confined to product mockups and illustrations; do not invent interface accent colors. Use a clear hero with copy and paired pill CTAs beside polished wallet or dashboard media. Follow with modular feature panels, customer proof, and concise metrics. Favor generous section separation, mostly flat surfaces, rounded media, and clear left alignment; reserve centered composition for a closing CTA. Keep interactions legible and the overall mood precise, calm, and developer-focused.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split hero with left-aligned headline and actions beside large wallet and dashboard media. | Primary and secondary CTA, Product value proposition | Near-white background, Lavender product visual, Pill buttons |
| 2 | feature-grid | Asymmetrical modular grid of image-led feature panels beneath a left-aligned section heading. | Capability scanning, Feature-by-feature explanation | Pale illustrated panels, Rounded media, Mixed panel proportions |
| 3 | stats | Four metrics followed by a row of customer case-study cards. | Trust through metrics, Case-study discovery | Large numeric figures, Colorful customer cards, Compact proof labels |
| 4 | feature-split | Two-column trust section with layered abstract artwork on one side and benefits on the other. | Trust reassurance, Scannable benefit list | Flat white canvas, Soft artwork panel, Text-led feature stack |
| 5 | cta | Centered headline, short supporting paragraph, and paired pill actions. | Conversion-focused close, Two-path contact choice | Centered typography, Black and outlined buttons, Generous whitespace |
| 6 | footer | Five-column footer with grouped links and a larger brand-and-message area. | Grouped site navigation, Brand and legal links | Compact text links, Multi-column layout, Prominent logo |

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