---
version: alpha
name: zkPass
description: "A lime proof-glow over pure black, ASCII continents, razor-sharp zero-radius edges."
colors:
  on-surface-variant: "#EBEBEB"
  on-surface: "#FFFFFF"
  surface: "#000000"
  outline: "#3D3D3D"
  neutral: "#C5C5C5"
  primary: "#C5FF4A"
  near-black: "#060606"
  cool-white: "#F5F8FA"
  cool-grey-2: "#E1E6EC"
  cool-grey-3: "#C8CDD2"
  mid-grey: "#8A8A8A"
  dim-grey: "#7A7A7A"
  amber: "#FFA94A"
  hairline-60: "#3d3d3d99"
  hairline-30: "#3d3d3d4d"
typography:
  label:
    fontFamily: JetBrains Mono
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.08em
  body:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.083
    letterSpacing: 0em
  subheading:
    fontFamily: JetBrains Mono
    fontSize: 22px
    fontWeight: 400
    lineHeight: 0.917
    letterSpacing: 0em
  heading:
    fontFamily: JetBrains Mono
    fontSize: 32px
    fontWeight: 400
    lineHeight: 0.906
    letterSpacing: -0.01em
  display:
    fontFamily: PT Serif
    fontSize: 92px
    fontWeight: 400
    lineHeight: 0.902
    letterSpacing: -0.01em
rounded:
  everything: 0px
spacing:
  xs: 48px
  sm: 64px
  md: 80px
  lg: 128px
  xl: 192px
---
# zkPass — Style Reference
> A lime proof-glow over pure black, ASCII continents, razor-sharp zero-radius edges.

**Theme:** dark

zkPass is a cryptography-lab aesthetic: pure `#000` canvas, a single radioactive lime (`#C5FF4A`) that does all the accent work, and a hard rule that *nothing* is rounded — every corner is `0px`. The one signature move is the collision of a large editorial **PT Serif** headline (the "Verifiable Internet." accent word set in green *italic*) against a **JetBrains Mono** UI chrome — mono nav labels, mono body copy, mono value tags — so the page reads like a serif manifesto printed on a terminal. Type is set on brutally tight line-heights (0.90–0.92 on display), and the layout runs on an unusually fine 38-column desktop grid with a zero-width gutter, so blocks butt directly against hairline `#3D3D3D` rules. Lime never appears as fill for large areas except one thing — the LAUNCH pill and the center logo mark — and its only decorative expression is a soft neon *glow* (blurred lime box-shadows), never a gradient. The whole system is monochrome black/white/grey with lime as the single charge, plus a rarely-used amber (`#FFA94A`) held in reserve for editorial credit.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Black | `#000000` | `--zk-black` | The canvas and the identity color; every hero, nav, and section defaults to pure black. Also the text color *on* lime surfaces. |
| Near Black | `#060606` | `--bg-raise` | A one-notch-lifted panel black — used to separate a surface from the true-black canvas without a border. |
| White | `#FFFFFF` | `--zk-white` | Primary foreground: headlines, mono body, logo. The default text on black. |
| Lime | `#C5FF4A` | `--zk-green` | The one accent. LAUNCH pill fill, center logo mark, the italic accent word, active links, glow shadows. Never a gradient; never used for paragraph text at length. |
| Grey | `#3D3D3D` | `--zk-grey` | Hairline borders, dot-grid dots, muted foreground. The structural line color of the entire grid. |
| Heading Grey | `#EBEBEB` | `--color-heading-muted` | Slightly-dimmed white for secondary headings and sub-display text. |
| Cool White | `#F5F8FA` | `--color-text-1` | Coolest near-white for high-contrast copy on black. |
| Cool Grey 2 | `#E1E6EC` | `--color-text-2` | Cool light grey body text. |
| Cool Grey 3 | `#C8CDD2` | `--color-text-3` | Dimmer cool grey for tertiary text. |
| Neutral Grey | `#C5C5C5` | `--color-text-4` | Neutral mid-light grey label text. |
| Mid Grey | `#8A8A8A` | `--color-text-5` | Muted mono captions and metadata. |
| Dim Grey | `#7A7A7A` | `--color-text-6` | Faintest legible grey — timestamps, fine print. |
| Amber | `#FFA94A` | `--color-amber` | Reserve warm accent; editorial credit / status only — never a CTA, never competes with the lime. |
| Hairline 60 | `#3d3d3d99` | `--hair` | Standard hairline border at ~60% alpha (`1px solid`). |
| Hairline 30 | `#3d3d3d4d` | `--hair-soft` | Soft hairline at ~30% alpha for the lightest divisions. |

## Tokens — Typography
### PT Serif — the editorial display voice; large headlines, with an *italic* green accent word · `--font-kh`
- **Substitute:** Georgia, "Times New Roman", serif
- **Weights:** 400 (normal + italic), 700 (normal + italic)
- **Sizes:** 92px (`--fs-h1`); measured display steps at 129.6px, 89.28px, 86.4px, 77.76px, 74.88px, 72px, 60.48px, 25.92px
- **Line height:** 0.902–0.917 (extremely tight — lines nearly touch)
- **Letter spacing:** none / default; the size and tightness carry it
- **Role:** The one serif — reserved for hero headlines. The accent phrase is set in *italic* lime (`#C5FF4A`) inside an otherwise-white line, e.g. "for the *Verifiable Internet.*"

### JetBrains Mono — UI chrome, nav, labels, and monospace body copy · `--font-mono`
- **Substitute:** ui-monospace, "SF Mono", Menlo, monospace
- **Weights:** 400, 500, 600
- **Sizes:** 10px (`--fs-label`), 11px, 12px (`--fs-p`), 13px, 14px, 16px
- **Line height:** 1.083 on body (`--lh-p`); ~1.2 on labels
- **Letter spacing:** widened caps on nav labels (letterspaced uppercase — PRODUCTS · TECHNOLOGY · $ZKP)
- **Role:** The workhorse. Uppercase letterspaced nav, the LAUNCH pill text, the hero sub-copy ("For humans, zkPass turns private web data into verifiable proof."), and every small value tag. Gives the page its terminal register.

### Inter Tight — supporting sans for dense paragraph / product UI · `--font-pp`
- **Substitute:** ui-sans-serif, system-ui, sans-serif
- **Weights:** 300, 400, 500, 600, 700
- **Sizes:** 12px–16px body range; 32px (`--fs-h2`), 22px (`--fs-h3`) for sans subheads
- **Line height:** ~1.2–1.4 for readable paragraph blocks
- **Letter spacing:** near-neutral; slight negative on larger sizes
- **Role:** The neutral sans for longer-form product and body regions where mono would tire the eye. Secondary to serif + mono in the identity.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Label | 10px | 1.2 | +0.08em uppercase (mono) | `--fs-label` |
| Body | 12px | 1.083 | normal (mono) | `--fs-p` |
| Subheading | 22px | 0.917 | normal | `--fs-h3` |
| Heading | 32px | 0.906 | tight | `--fs-h2` |
| Display | 92px | 0.902 | tight (serif) | `--fs-h1` |

## Tokens — Spacing & Shapes
**Base unit:** 16px (spacers step in 16px increments)   **Density:** comfortable-airy (large hero whitespace, tight type)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| XS | 48px | `--spacer-xs` |
| SM | 64px | `--spacer-sm` |
| MD | 80px | `--spacer-md` |
| LG | 128px | `--spacer-lg` |
| XL | 192px | `--spacer-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Everything (buttons, cards, panels, pills) | `0px` (`--radius-0`) |
| Circular marks only (dots, glow nodes) | `50%` |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Lime Glow | `rgba(197, 255, 74, 0.45) 0px 0px 8px 0px` | `--glow-lime` |
| Lime Glow Strong | `rgba(197, 255, 74, 0.65) 0px 0px 10px 2px, rgba(197, 255, 74, 0.2) 0px 0px 22px 6px` | `--glow-lime-strong` |
| Lime Glow Bright | `rgba(197, 255, 74, 0.7) 0px 0px 8px 0px` | `--glow-lime-bright` |
| White Glow | `rgba(255, 255, 255, 0.6) 0px 0px 10px 2px, rgba(255, 255, 255, 0.18) 0px 0px 22px 6px` | `--glow-white` |

### Layout
- **Page max-width:** full-bleed black canvas; content on a 38-column desktop grid (8-column mobile)
- **Grid gutter:** `0px` (`--layout-gap`) — columns butt together, separated only by hairlines
- **Outer margin:** 36px desktop / 39px mobile
- **Header height:** 98px desktop / 58px mobile
- **Section gap:** 80–192px (`--spacer-md` → `--spacer-xl`)

## Components
### LAUNCH Pill (Primary CTA)
**Role:** The single loud action — top-right in the nav, and the one lime fill in the chrome.
Lime `#C5FF4A` fill, black `#000000` text, `0px` radius, ~`0px 18px` horizontal padding, JetBrains Mono 11px/weight 600, uppercase. Ships with a trailing ↗ glyph. Optional `--glow-lime` on hover.

### Outline Button (Secondary)
**Role:** Quiet secondary action on the black canvas.
Black `#000000` bg, white `#FFFFFF` text, `1px solid #3D3D3D` border, `0px` radius, `0px 18px`–`0px 22px` padding, 16px/weight 400. No fill change on hover — the hairline brightens to lime (`--hair-bright`) instead.

### Ghost Button (on light section)
**Role:** Secondary action when a section inverts to white.
Transparent bg, black `#000000` text, `1px solid #000000` border, `0px` radius, `14px 22px` padding, 12px/weight 400.

### Green CTA Block
**Role:** Large emphatic call-to-action panel.
Lime `#C5FF4A` fill, `0px` radius, generous `24px 24px 24px 30px` padding, 16px text. A solid lime slab — the only large-area use of the accent.

### Nav Bar
**Role:** Fixed top chrome; the terminal register of the site.
98px tall, black, uppercase letterspaced JetBrains Mono labels (PRODUCTS · TECHNOLOGY · ECOSYSTEM · $ZKP · RESOURCES) divided by vertical `1px #3D3D3D` hairlines, with the lime LAUNCH pill flush to the right edge.

### Hairline Divider
**Role:** The structural line of the whole system.
`1px solid #3d3d3d99` (`--hair`) standard, `#3d3d3d4d` (`--hair-soft`) for the faintest splits, `1px solid #C5FF4A` (`--hair-bright`) on active/hover. Zero gutter means these hairlines *are* the layout.

### Dot Grid Field
**Role:** Ambient background texture on black.
`#3D3D3D` dots (`--dot`) on a fine repeating grid across the hero canvas — subtle, never foreground.

### Hero Headline
**Role:** The editorial anchor.
PT Serif, ~92px, white, line-height 0.902, with one *italic* lime accent phrase inline. Text is left-toward-center, stacked over the ASCII world-map artwork.

### Hero Sub-copy
**Role:** The plain-spoken proof statement under the headline.
JetBrains Mono, 12–14px, centered, white with the closing line ("Both on the same zkTLS protocol.") set in lime.

### Logo Mark
**Role:** Center brand token — a lime chip in the middle of the map.
Solid lime `#C5FF4A` square (`0px` radius) with the black "P"/keyhole glyph knocked out, optionally wearing `--glow-lime`.

### Link (inline)
**Role:** Text links in copy.
Lime `#C5FF4A` text on black, JetBrains Mono, weight 500–600, no underline; underline or `--hair-bright` appears on hover. Often carries a → or ↗ affordance glyph.

### Value / Status Tag
**Role:** Small monospace metadata chips ($ZKP, protocol names).
JetBrains Mono 10–11px, `#8A8A8A`–`#C5C5C5` grey or lime, `0px` radius, hairline-bordered.

## Do's and Don'ts
### Do
- Keep the canvas pure `#000000`; lift a panel with `#060606` before you reach for a border.
- Let `#C5FF4A` be the *only* saturated color on screen — one lime accent per viewport, maximum.
- Set every corner to `0px`. Buttons, cards, pills, inputs — sharp, always. The only curve permitted is a `50%` dot.
- Pair the PT Serif headline against JetBrains Mono chrome — that serif-on-terminal contrast is the brand.
- Put the accent word of a headline in *italic* lime; keep the rest white.
- Use hairlines (`#3D3D3D`) and zero gutters to build structure — the grid lines are the design.
- Express energy with a soft lime *glow* (blurred box-shadow), never a gradient.

### Don't
- Don't round anything. A single rounded button breaks the whole system.
- Don't fill large areas with lime except the deliberate CTA slab and logo mark — it must stay rare to stay radioactive.
- Don't introduce a second bright accent; `#FFA94A` amber is a reserve editorial tint, never a button.
- Don't set long paragraphs in PT Serif — the serif is display-only; mono or Inter Tight carries body.
- Don't loosen the display line-height above ~0.92 — the near-touching lines are intentional.
- Don't add drop-shadow elevation; depth here is luminance and glow, not soft shadows.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | The default black — hero, nav, most sections. |
| 1 | Raised Panel | `#060606` | A barely-lifted surface to separate a block from true black without a border. |
| 2 | Inverted Section | `#FFFFFF` | Full white invert for contrast sections; black headings, black-outline ghost buttons. |
| Accent | Lime Slab | `#C5FF4A` | The CTA block / LAUNCH pill / logo mark — black text on lime. |

## Elevation
Depth is conveyed by **luminance and glow, not shadow.** Panels separate via a one-step black lift (`#000000` → `#060606`) or a `#3D3D3D` hairline — never a soft drop shadow. The only "elevation" effect is the neon **glow** (`--glow-lime`, `--glow-white`): a blurred, colored box-shadow that makes the lime mark and active elements appear lit from within. Because the gutter is `0px`, hairlines do the spatial work that padding and shadow do elsewhere.

## Imagery
**Generative ASCII / dot-matrix artwork.** The hero renders a world map as a field of monospace glyphs and dots (`#`, `*`, `+`, `.`) in white/grey on black — a terminal-plotter aesthetic that reinforces the cryptography-lab register. No photography, no gradients, no illustration. The lime logo chip is the single solid graphic element floating in the map. Imagery is code-native: character fields, dot grids, and the hairline layout itself.

## Layout
Full-bleed black canvas on a fine **38-column desktop grid** (8 on mobile) with a **zero-width gutter** — an unusual, deliberately technical grid where columns abut and separation is done with `#3D3D3D` hairlines rather than whitespace. A fixed 98px nav pins uppercase mono labels across the top, divided by vertical hairlines, with the lime LAUNCH pill flush right. The hero centers a serif headline + mono sub-copy over the ASCII map with the logo chip at the optical center. Section rhythm steps in large increments (80–192px). Outer margin 36px. Everything is edge-aware and grid-locked.

## Typography Voice
zkPass runs a deliberate **two-voice** split. The **serif voice** (PT Serif) is editorial and human — it makes the promise ("Privacy & Trust Layer for the *Verifiable Internet.*"), set huge, tight (line-height 0.902), with a single italic-lime word carrying the emotional charge. The **mono voice** (JetBrains Mono) is the machine — uppercase letterspaced nav, protocol names, the plain proof statement, every metadata tag. The tension between a warm serif manifesto and cold terminal chrome *is* the brand's typographic thesis: trustworthy human claims, cryptographically machine-verified. Inter Tight sits underneath as the neutral connective sans for anywhere mono would fatigue. The signature move is the near-zero display line-height — lines nearly overlap — which reads as compression, density, precision.

## Agent Prompt Guide
## Quick Color Reference
- background: `#000000` (raised `#060606`) / text: `#FFFFFF` / surface: `#060606` / border: `#3D3D3D` / accent: `#C5FF4A` / primary action: `#C5FF4A` fill with `#000000` text
- inverted section background: `#FFFFFF` with `#000000` text · reserve warm accent: `#FFA94A`

## Example Component Prompts
1. **LAUNCH pill**: Build a nav CTA — lime `#C5FF4A` fill, black `#000000` text, `0px` border-radius, `0px 18px` padding, JetBrains Mono 11px weight 600 uppercase with a trailing ↗. On hover add box-shadow `rgba(197,255,74,0.45) 0 0 8px`.
2. **Hero headline**: PT Serif ~92px, weight 400, color `#FFFFFF`, line-height 0.902 on pure `#000000`. Set the last phrase in *italic* lime `#C5FF4A`. Below it, JetBrains Mono 13px sub-copy, centered, closing line in lime.
3. **Outline button**: Black `#000000` bg, white `#FFFFFF` text, `1px solid #3D3D3D` border, `0px` radius, `0px 20px` padding, 16px weight 400. On hover keep the fill and brighten the border to `#C5FF4A`.
4. **Hairline-divided nav**: 98px tall black bar, uppercase letterspaced JetBrains Mono 10–11px labels, each separated by a vertical `1px solid #3d3d3d99` divider, zero gutter, lime pill flush to the right edge.
5. **Green CTA block**: A solid lime `#C5FF4A` slab, `0px` radius, `24px 24px 24px 30px` padding, 16px text, black glyph — the only large lime fill on the page.

## Similar Brands
- **Linear** — shares the dense hairline grids, tight type, and a single restrained accent doing all the work, but Linear is soft-cornered where zkPass is razor-sharp.
- **Vercel / Geist** — the pure-black canvas, monospace-forward technical chrome, and zero-decoration confidence.
- **Arweave / crypto-protocol sites** — the terminal-and-neon register: black backgrounds, one radioactive accent, ASCII/data-field artwork as identity.
- **Framer's "brutalist tech" templates** — zero-radius everything, letterspaced uppercase mono nav, editorial serif clashing with system chrome.
- **Braun / Dieter Rams grids (spiritually)** — the hairline-locked, gutterless discipline where the grid *is* the ornament.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — core */
  --zk-black: #000000;
  --zk-white: #ffffff;
  --zk-green: #c5ff4a;
  --zk-grey: #3d3d3d;
  --bg-raise: #060606;

  /* Colors — semantic aliases */
  --bg: var(--zk-black);
  --bg-invert: var(--zk-green);
  --fg: var(--zk-white);
  --fg-muted: var(--zk-grey);
  --accent: var(--zk-green);
  --dot: var(--zk-grey);
  --theme-layout: var(--zk-black);
  --theme-primary: var(--zk-black);
  --theme-secondary: var(--zk-white);
  --theme-contrast: var(--zk-green);
  --theme-dot: var(--zk-grey);
  --theme-invert: var(--zk-green);

  /* Colors — text ramp */
  --color-heading-muted: #ebebeb;
  --color-text-1: #f5f8fa;
  --color-text-2: #e1e6ec;
  --color-text-3: #c8cdd2;
  --color-text-4: #c5c5c5;
  --color-text-5: #8a8a8a;
  --color-text-6: #7a7a7a;
  --color-amber: #ffa94a;

  /* Borders / hairlines */
  --hair: 1px solid #3d3d3d99;
  --hair-soft: 1px solid #3d3d3d4d;
  --hair-bright: 1px solid var(--zk-green);

  /* Glows (used instead of elevation shadows) */
  --glow-lime: rgba(197, 255, 74, 0.45) 0px 0px 8px 0px;
  --glow-lime-strong: rgba(197, 255, 74, 0.65) 0px 0px 10px 2px, rgba(197, 255, 74, 0.2) 0px 0px 22px 6px;
  --glow-lime-bright: rgba(197, 255, 74, 0.7) 0px 0px 8px 0px;
  --glow-white: rgba(255, 255, 255, 0.6) 0px 0px 10px 2px, rgba(255, 255, 255, 0.18) 0px 0px 22px 6px;

  /* Typography — Families */
  --font-kh: "PT Serif", Georgia, "Times New Roman", serif;      /* display serif */
  --font-pp: "Inter Tight", ui-sans-serif, system-ui, sans-serif; /* paragraph sans */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* UI/chrome */

  /* Typography — Scale */
  --fs-h1: 92px;
  --fs-h2: 32px;
  --fs-h3: 22px;
  --fs-p: 12px;
  --fs-label: 10px;
  --lh-h1: 0.902;
  --lh-h2: 0.906;
  --lh-h3: 0.917;
  --lh-p: 1.083;

  /* Spacing */
  --spacer-xs: 48px;
  --spacer-sm: 64px;
  --spacer-md: 80px;
  --spacer-lg: 128px;
  --spacer-xl: 192px;

  /* Layout */
  --layout-columns-desktop: 38;
  --layout-columns-mobile: 8;
  --layout-margin-desktop: 36px;
  --layout-margin-mobile: 39px;
  --layout-gap: 0px;
  --header-height-desktop: 98px;
  --header-height-mobile: 58px;

  /* Border Radius */
  --radius-0: 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — core */
  --color-zk-black: #000000;
  --color-zk-white: #ffffff;
  --color-zk-green: #c5ff4a;
  --color-zk-grey: #3d3d3d;
  --color-bg-raise: #060606;

  /* Colors — text ramp */
  --color-heading-muted: #ebebeb;
  --color-text-1: #f5f8fa;
  --color-text-2: #e1e6ec;
  --color-text-3: #c8cdd2;
  --color-text-4: #c5c5c5;
  --color-text-5: #8a8a8a;
  --color-text-6: #7a7a7a;
  --color-amber: #ffa94a;

  /* Typography — Families */
  --font-kh: "PT Serif", Georgia, "Times New Roman", serif;
  --font-pp: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Typography — Scale */
  --text-h1: 92px;
  --text-h2: 32px;
  --text-h3: 22px;
  --text-p: 12px;
  --text-label: 10px;
  --leading-h1: 0.902;
  --leading-h2: 0.906;
  --leading-h3: 0.917;
  --leading-p: 1.083;

  /* Spacing */
  --spacing-xs: 48px;
  --spacing-sm: 64px;
  --spacing-md: 80px;
  --spacing-lg: 128px;
  --spacing-xl: 192px;

  /* Border Radius */
  --radius-0: 0px;
}
```