zkPass

Overview

zkPass is a privacy-first infrastructure layer that transforms zero-knowledge cryptography into a trust graph for the verifiable internet. The brand serves both humans seeking data sovereignty and AI agents requiring cryptographic proof of behavior and credit—a dual-audience positioning that demands visual clarity without sacrificing technical sophistication. The aesthetic is "Cryptographic Minimalism": a pure black canvas (rgb(0, 0, 0)) punctuated by a vivid lime accent (#c5ff4a) that evokes both the glow of digital signals and the energy of breakthrough technology. The UI feels austere yet alive—every element is intentional, every interaction carries weight. The emotional response is one of precision and trust: users should feel they are interfacing with something mathematically rigorous, not marketing theater.

The brand voice is direct, technical, and unapologetically sophisticated. zkPass speaks in the language of cryptography and trust architecture, avoiding hype and hyperbole. Vocabulary patterns include "proof," "credit," "verification," "protocol," and "claim"—words that anchor the brand in concrete capability rather than aspiration. The tone is calm and authoritative, as if explaining a complex system to someone who already understands the stakes. Example sentence in brand voice: "Proof is for humans. Credit is for agents. One zkTLS protocol underneath, carrying the weight of both."

Colors

The color system is built on a high-contrast, signal-based palette. Primary (#c5ff4a) is the brand's cryptographic accent—used on all call-to-action buttons, focus states, and key interactive elements. It appears sparingly but with maximum impact, creating a visual hierarchy that guides attention without noise. The lime hue is chosen for its association with digital signals and energy; it reads as both technical and alive on the pure black background. Secondary (#ffffff) serves as the inverse accent for text and secondary UI elements, ensuring legibility and providing a cool counterpoint to the warm lime. Tertiary (#c5ff4a, same as primary in this system) reinforces the accent through badges and status indicators. The surface stack is monochromatic: surface (#000000) is the canvas, with co

Typography

The type system pairs PT Serif for editorial and display content with Inter Tight for UI labels and navigation. PT Serif (400 weight, 69px, -0.02em letter-spacing) anchors the display layer with classical authority—appropriate for a brand that positions itself as foundational infrastructure. Headline-lg (48px, 400 weight) and headline-md (36px, 400 weight) maintain the serif voice for section headers, creating a visual rhythm that feels deliberate and measured. Body text (PT Serif, 16–18px, 400 weight, 24–28px line-height) is set with generous line-height (1.5x) to ensure readability on the dark background and to reinforce the spacious, uncluttered aesthetic. Inter Tight (600 weight, 11–14px, 0.22em letter-spacing for labels) provides the technical, uppercase UI layer—navigation items, but

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fixed container on desktop and fluid margins on mobile. The page rhythm is driven by 40px (lg spacing) section separation, creating breathing room between major content blocks. The hero section occupies 200vh (two full viewport heights) with a sticky header, allowing for parallax and animated background elements without overwhelming the viewport. Navigation uses a horizontal segmented layout with 1.5px borders (rgba(61, 61, 61, 0.6)) separating nav items, creating a modular, grid-like appearance that echoes the brand's technical precision. Gutter spacing is 24px on desktop, reducing to 12px (sm spacing) on tablets and 8px (unit) on mobile. The container-max-width of 1280px ensures content remains readable and foc

Elevation & Depth

Depth in zkPass is achieved through layered borders and subtle glow effects rather than traditional shadows. The elevation system uses three levels: Level 1 (Base) is the pure black background (rgb(0, 0, 0)) with no shadow. Level 2 (Standard Card) applies a 1.5px border at rgba(61, 61, 61, 0.6) and an optional box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for subtle separation. Level 3 (Elevated/Interactive) adds a glow effect: box-shadow: 0 0 8px rgba(197, 255, 74, 0.7) for primary accents, or 0 0 14px rgba(197, 255, 74, 0.3) for secondary glows. Interactive elements (buttons, inputs with focus)

Shapes

The shape philosophy is "Technical Minimalism"—minimal rounding that suggests precision without coldness. Border-radius is kept small and consistent: sm (0.25rem / 4px) for tight, technical elements like small badges; DEFAULT (0.5rem / 8px) for buttons and inputs, providing just enough softness to feel approachable; md (0.75rem / 12px) for cards and larger containers; lg (1rem / 16px) for modals and elevated surfaces; xl (1.5rem / 24px) for hero sections and full-width containers; full (9999px) for pill-shaped badges and circular elements. Buttons use DEFAULT (8px) to balance technical precisi

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses a background of {colors.primary} (#c5ff4a), text color of {colors.on-primary} (#000000), padding of 0 18px, height of 40px, and no border. Typography is {typography.label-sm} (Inter Tight, 11px, 600 weight, 0.22em letter-spacing). On hover (button-primary-hover), the background shifts to {colors.primary-container} (#ffffff) and text remains {colors.on-primary} (#000000), creating a high-contrast inversion. The secondary button (button-secondary) uses a transparent background with a 1.5px border at rgba(61, 61, 61, 0.6), text color of {colors.primary} (#c5ff4a), padding of 14px 22px, and height of 48px. On hover (button-secondary-hover), the background becomes {colors.surface-containe

Do's and Don'ts

**Do**

• Do use the lime accent (#c5ff4a) sparingly and intentionally—on CTAs, focus states, and key interactive elements only. Never use it for body text or large background areas.
• Do maintain the pure black background (rgb(0, 0, 0)) as the canvas; it is non-negotiable for the brand's technical authority and contrast.
• Do apply 1.5px borders at rgba(61, 61, 61, 0.6) to all cards, inputs, and nav items to define edges without visual clutter.
• Do use PT Serif for editorial content and Inter Tight for UI labels; never mix them within a single component.
• Do apply glow effects (box-shadow with rgba(197, 255, 74, ...)) only to interactive or highlighted elements; never use them decoratively.
• Do maintain consistent padding and margin using the spacing scale (8px unit, 12px sm, 24px md, 40px lg); never use arbitrary values.

**Don't**

• Don't use rounded corners larger than {rounded.lg} (16px) on buttons or inputs; it softens the technical aesthetic.
• Don't apply text-shadow to body text; reserve it for accent text over busy backgrounds only.
• Don't use colors outside the defined palette; the system is intentionally limited to reinforce brand identity.
• Don't mix serif and sans-serif fonts within a single line or component; maintain clear typographic hierarchy.
• Don't apply multiple glow effects to a single element; one glow layer is sufficient and more impactful.
• Don't use the secondary color (#ffffff) as a background; it should appear only as text, borders, or accents on dark surfaces.