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

# zkPass · Design System

> A dark technical canvas punctuated by vivid proof-green.

**Theme:** dark · **Industry:** crypto · **Source:** https://zkpass.org/ · **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._

zkPass presents its privacy-preserving verification protocol through a dark, editorial homepage built around proof, trust, and developer tools. Oversized serif headlines, fine grid lines, and sharp lime accents balance cryptographic rigor with a distinctive visual identity.

## North star

Keep the canvas nearly black and spacious, using lime sparingly to signal the most important proof, action, or active state.

## Overview

The page is built on a near-black canvas, with a subtle dotted grid and occasional faint radial or scanline effects adding texture without competing with content. Vivid lime is reserved for the launch CTA, emphasized words, active states, and selected proof details; restrained gray and white carry navigation, copy, and technical labels. Large editorial serif headlines provide contrast against compact sans-serif UI text and monospaced protocol-like details. Content spans a spacious, centered frame and alternates between split introductions, dense product demonstrations, and broad tabular feature sections. Fine dark borders divide panels instead of shadows or rounded containers. A typographic world map and large green protocol mark supply graphic drama, while most product examples are treated as interface evidence. Generous vertical breathing room lets the page feel cinematic despite its information-rich grids.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Protocol Black | `#000000` | `--color-protocol-black` | brand | Dominant page canvas, hero backdrop, and recurring section background. |
| Proof Lime | `#c5ff4a` | `--color-proof-lime` | accent | Primary CTA fill, highlighted headline words, active rows, badges, and proof-status emphasis. |
| Olive Signal | `#5c7624` | `--color-olive-signal` | accent | Muted olive badge outlines and restrained supporting details near green proof accents. |
| Night Moss | `#070905` | `--color-night-moss` | surface | Near-black gradient tone for subtle section atmosphere, not a dominant flat surface. |
| Slate Muted | `#6e7173` | `--color-slate-muted` | neutral | Low-emphasis supporting text and subdued interface annotations. |
| Cool Haze | `#b4b8bd` | `--color-cool-haze` | neutral | Secondary descriptive copy against the black canvas. |
| Pale Alloy | `#edf0f2` | `--color-pale-alloy` | neutral | Bright supporting text and selected explanatory copy. |
| Graphite Rule | `#252525` | `--color-graphite-rule` | neutral | Primary hairlines and separators across navigation, panels, cards, and section boundaries. |
| Proof White | `#ffffff` | `--color-proof-white` | brand | Primary headline, navigation, and high-contrast text on dark surfaces. |
| Carbon Edge | `#1f1f1f` | `--color-carbon-edge` | neutral | Subtle secondary outlines and dark structural details. |
| Iron Border | `#313131` | `--color-iron-border` | neutral | Card edges and button or badge outlines where stronger separation is needed. |
| Obsidian Panel | `#060606` | `--color-obsidian-panel` | surface | Slightly lifted dark card surface for proof examples and product panels. |
| Soft Silver | `#c5c5c5` | `--color-soft-silver` | neutral | Occasional subdued heading or text detail. |
| Moss Panel | `#0c0f04` | `--color-moss-panel` | surface | Green-tinted dark surface for proof status and selected cards. |
| Footer Gray | `#7a7a7a` | `--color-footer-gray` | neutral | Low-priority footer text and subdued supporting labels. |

### Semantic aliases

`--color-canvas` → `#000000` (Protocol Black) · `--color-surface` → `#060606` (Obsidian Panel) · `--color-surface-2` → `#0c0f04` (Moss Panel) · `--color-text` → `#ffffff` (Proof White) · `--color-text-muted` → `#6e7173` (Slate Muted) · `--color-text-subtle` → `#b4b8bd` (Cool Haze) · `--color-border` → `#252525` (Graphite Rule) · `--color-accent` → `#c5ff4a` (Proof Lime) · `--color-on-accent` → `#000000` (Protocol Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#060606` | 20.26:1 | AAA |
| `#ffffff` | `#0c0f04` | 19.34:1 | AAA |
| `#6e7173` | `#000000` | 4.27:1 | AA-large |
| `#6e7173` | `#060606` | 4.12:1 | AA-large |
| `#6e7173` | `#0c0f04` | 3.94:1 | AA-large |
| `#b4b8bd` | `#000000` | 10.53:1 | AAA |
| `#b4b8bd` | `#060606` | 10.16:1 | AAA |
| `#b4b8bd` | `#0c0f04` | 9.7:1 | AAA |
| `#c5ff4a` | `#000000` | 17.78:1 | AAA |

### Gradients

- `radial-gradient(70% 50%, rgba(40, 48, 30, 0.18), rgba(0, 0, 0, 0) 72%)`
- `repeating-linear-gradient(rgba(255, 255, 255, 0.024) 0px, rgba(255, 255, 255, 0.024) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3px)`
- `radial-gradient(80% 60%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)`
- `radial-gradient(80% 60%, rgba(197, 255, 74, 0.02) 0%, rgba(0, 0, 0, 0) 70%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| JetBrains Mono | `--font-mono` | system | 500, 400, 600 | Protocol labels, compact technical data, and code-like UI details. | IBM Plex Mono |
| Inter Tight | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, captions, buttons, and interface labels. | Inter |
| PT Serif | `--font-pt-serif` | webfont | 400, 300 | Editorial headlines and selected card or product titles. | Lora |

- **JetBrains Mono:** Most prevalent measured family; use compact, crisp monospaced details with restrained weight.
- **Inter Tight:** Tight sans-serif UI; captions and eyebrows are uppercase with widely tracked letters.
- **PT Serif:** Use expressive serif contrast in large headlines; occasional italic emphasis highlights key words.

### Type scale — Major Third (ratio ≈ 1.25, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 13px | 400 | 1.55 | 0.03em | — | Inter Tight | Compact explanatory copy beside headlines and within product and feature panels. |
| caption | 11px | 400 | 1.55 | 0.18em | uppercase | Inter Tight | Small uppercase labels, indices, and contextual metadata. |
| eyebrow | 11px | 400 | 1.55 | 0.18em | uppercase | Inter Tight | Tracked uppercase section markers above major headings. |
| code | 7px | 500 | 0.92 | 0 | — | JetBrains Mono | Tiny monospaced technical snippets and proof-interface details. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 7, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28, 30, 32 px.
- Section rhythm 132px · element gap 10px · card padding — · max content width 1408px.

The measured page frame reaches a maximum width of 1408px, with content aligned to a consistent wide grid. The navigation is a full-width row divided into bordered cells. Long vertical gaps separate major sections, while individual sections switch between two-column editorial layouts, multi-column product panels, and dense table-like demonstrations. Headings align to the start of their content blocks; the closing CTA centers its headline above two side-by-side links. The overall density is spacious, with information compressed into framed product examples rather than scattered cards.

## Shape & elevation

- Shadow `sm` (other): `rgba(197, 255, 74, 0.45) 0px 0px 8px 0px`
- Shadow `lg` (other): `rgba(197, 255, 74, 0.65) 0px 0px 10px 2px, rgba(197, 255, 74, 0.2) 0px 0px 22px 6px`
- Shadow `lg-2` (other): `rgba(255, 255, 255, 0.6) 0px 0px 10px 2px, rgba(255, 255, 255, 0.18) 0px 0px 22px 6px`
- Shadow `sm-2` (other): `rgba(197, 255, 74, 0.7) 0px 0px 8px 0px`
- Shadow `md` (other): `rgba(197, 255, 74, 0.537) 0px 0px 8.26267px 0px`
- Motion: standard transition `0.22s ease` on interactive elements.

The design is predominantly flat: thin graphite and iron borders define the hierarchy instead of rounded cards or broad drop shadows. Panels sit close to the black canvas, with occasional subtly green-tinted surfaces. Lime glows appear only as small decorative or status effects; they should not become a general elevation treatment.

## Imagery

Avoid conventional lifestyle photography. The hero uses a typographic, data-like map graphic with a centered lime protocol mark over a black field; subtle dots and scanline texture support its digital character. Small interface illustrations and product mockups show claims, status, code, and verification results. A large abstract logo mark anchors the footer. Keep graphics monochrome or near-black, reserving bright lime for meaningful proof details.

## Components

### Segmented navigation

Full-width, uppercase Inter Tight navigation in individually divided cells with fine dark borders; the Launch cell is filled Proof Lime.

### Primary action button

Square-cornered Proof Lime button with black uppercase label, compact sans-serif type, and minimal visual ornament.

### Editorial headline

Large white PT Serif headline, often split across lines; italic lime words act as focused emphasis.

### Proof demonstration panel

Dark rectangular interface card with thin Iron Border outlines, small technical labels, and clear query-to-proof status.

### Numbered principles table

Wide, finely ruled rows organize indexed protocol principles, explanatory copy, and right-aligned technical outcomes; active row turns lime.

### Section eyebrow

Small tracked uppercase Inter Tight marker in muted text above an editorial section title.

### CTA link card

Bordered, side-by-side destination panels with an indexed uppercase label, serif title, short helper line, and arrow cue.

### Measured component styles

- **Primary button** (“LAUNCH ↗”): background #c5ff4a · text #000000 · radius 0px · padding 0px 18px · 600 11px Inter Tight · uppercase
- **Link** (“[ 01 · CTA ] APP.ZKPASS.ORG Launch App ↗”): transparent background · text #ffffff · radius 0px · padding 32px 44px · 500 12px Inter Tight
- **Card** (“TRANSGATE · BINANCE.COM ✓ SIGNED CLAIM B”): background #060606 · text #ffffff · border 1px solid #313131 · radius 0px · padding 0px · 400 16px PT Serif
- **Badge** (“SCHEMA”): transparent background · text #c5ff4a · border 1px solid #5c7624 · radius 0px · padding 2px 6px · 400 8.5px ui-monospace
- **Navigation item** (“PRODUCTS”): transparent background · text #ffffff · radius 0px · padding 0px · 500 11px Inter Tight · uppercase

## Do

- Use Protocol Black as the dominant canvas.
- Reserve Proof Lime for actions and meaningful emphasis.
- Pair editorial serif headlines with compact sans-serif UI.
- Use thin borders to structure panels and tables.
- Keep labels uppercase, tracked, and concise.
- Leave generous vertical space between major sections.

## Don't

- Do not introduce unmeasured colors.
- Do not use rounded, soft consumer-style cards.
- Do not fill the page with lime accents.
- Do not add stock photography or decorative lifestyle imagery.
- Do not rely on heavy shadows for hierarchy.
- Do not make technical panels visually louder than the main headlines.

## Agent prompt

Build a new zkPass page as a dark, editorial protocol interface. Use Protocol Black (#000000) for the canvas and Proof Lime (#c5ff4a) sparingly for primary actions, active states, and italic headline emphasis. Set large editorial headings in PT Serif, interface copy and uppercase labels in Inter Tight, and compact technical details in JetBrains Mono. Structure content within a wide grid using split layouts, dense proof demonstrations, and ruled feature rows. Use Graphite Rule (#252525) and Iron Border (#313131) for square-cornered panel divisions; keep surfaces subtly differentiated with Obsidian Panel (#060606) or Moss Panel (#0c0f04). Add restrained dotted-grid or scanline texture, not decorative gradients that dominate. Prioritize generous section spacing, concise technical labels, and clear query-to-proof hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-screen-feeling centered headline over a dark graphic field; segmented navigation runs across the top. | Launch shortcut, Scroll-led discovery | Bordered segmented nav, Serif hero headline, Lime emphasis, Data-map graphic |
| 2 | feature-split | Two-column comparison beneath an introductory split headline and description. | Choose human or agent path, Product discovery links | Divided proof and credit panels, Italic serif headings, Fine borders, Small protocol footer |
| 3 | product-showcase | Section heading and copy above a multi-column product index with a large verification interface. | Select product demo, Inspect generated proof | Product selector, Proof status panel, Technical metadata, Framed interface |
| 4 | feature-grid | Introductory split heading followed by two product panels and a full-width schema strip. | Choose browser extension or SDK, Browse schema marketplace | Two audience cards, Code-like interface snippets, Lime install action, Schema chips |
| 5 | how-it-works | Split section introduction followed by three equal, bordered explanation columns. | Scan the three protocol stages | Large italic stage names, Numbered labels, Thin column dividers |
| 6 | comparison | Editorial heading above a full-width table of five numbered principles. | Compare principles row by row, Highlight key performance result | Numbered table rows, Fine dividers, Lime active row, Right-aligned metrics |
| 7 | content-feed | Editorial heading and intro above a two-column dispatch panel with featured story and list. | Read featured article, Scan dispatch list | Issue metadata, Article list, Framed feature artwork, Small category labels |
| 8 | cta | Single horizontal band with a large left-aligned serif statement and actions on the right. | View token, Read tokenomics | Thin horizontal rules, Lime primary button, Outlined secondary action |
| 9 | cta | Centered headline above two equal destination cards within a bordered block. | Launch app, Open documentation | Centered serif headline, Two CTA link panels, Arrow cues, Fine borders |
| 10 | footer | Large logo mark on the left; grouped navigation columns on the right; thin legal bar below. | Navigate product and protocol links, Back to top | Oversized lime logo, Grouped link lists, Compact legal footer |

## Source CSS custom properties (selected)

```css
--bg: #000;
--bg-invert: #c5ff4a;
--fg: #fff;
--fg-muted: #3d3d3d;
--accent: #c5ff4a;
--theme-primary: #000;
--theme-secondary: #fff;
--font-kh: "PT Serif", Georgia, "Times New Roman", serif;
--font-pp: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
--spacer-xs: 48px;
--spacer-sm: 64px;
--spacer-md: 80px;
--spacer-lg: 128px;
--spacer-xl: 192px;
--layout-gap: 0px;
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
--ease-out-circ: cubic-bezier(.075, .82, .165, 1);
--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
--radius-0: 0px;
```

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