/components

zkVerify Components — Full Reference

Buttons

Shape: Always pill (border-radius: 9999px). Never square or rounded-rect. Font: Space Grotesk, 700 Bold, uppercase optional for primary CTAs. Min height: 44px (touch target). Padding: 12px 28px.

Variants

Variant	Background	Text	Border	Hover
Primary (Pulse)	--zk-pulse	--zk-void	none	--zk-pulse-hover, shadow-md
Secondary (Void)	--zk-void	--zk-shell	none	--zk-void-hover
Signal	--zk-signal	--zk-white	none	--zk-signal-hover
Ghost	transparent	--zk-void	1px --zk-shell-dim	bg --zk-shell-dim

States

• Hover: Shift to hover color, elevate with --zk-shadow-md
• Active/Pressed: Darken 10%, scale(0.98)
• Disabled: opacity 0.5, cursor not-allowed
• Loading: Spinner replaces label, same dimensions, pulse animation
• Focus: outline: 2px solid var(--zk-pulse); outline-offset: 2px

Sizes

Size	Height	Padding	Font Size
SM	32px	6px 16px	13px
MD	44px	12px 28px	15px
LG	52px	14px 36px	17px

Button with Icon

• Icon before label: gap: 8px, icon 18px
• Icon-only button: 44x44px circle, ARIA label required

Cards

Default (Light): White background, --zk-shell-dim border (1px), --zk-radius-lg (10px). Dark (Void): --zk-void background, --zk-void-700 border, light text. Padding: --zk-space-6 (24px). Hover: --zk-shadow-lg, translateY(-2px), --zk-transition-normal.

Gradient Border Variant

.card-gradient-border {
  background: var(--zk-white);
  border-radius: var(--zk-radius-lg);
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--zk-radius-lg) + 1px);
  background: var(--zk-gradient-signal-pulse);
  z-index: -1;
}

Card Types

• Standard: Title, body text, optional footer with action
• Feature: Icon/illustration top, title, description
• Stat: Large number (Monigue), label, optional trend indicator
• Image: Top image, content below, consistent aspect ratio

Modals

Overlay: rgba(2, 2, 18, 0.6), backdrop-filter: blur(8px). Container: max-width: 440px, --zk-radius-xl (16px), padding --zk-space-8 (32px). Default: Light background (--zk-white), Void text. Close button: Top right, 32x32, ghost style, --zk-grey icon. Animation: fadeIn overlay, slideUp + fadeIn container, --zk-transition-normal.

Modal Types

• Standard: Title, body, action buttons (primary right)
• Confirmation: Icon, title, message, Cancel + Confirm buttons
• Form: Title, form fields, Cancel + Submit buttons

Navigation

Desktop Header:

• Background: --zk-void
• Text: --zk-shell
• Logo: left-aligned
• Nav links: center or right, Space Grotesk 500
• Hover: --zk-pulse text color
• Active: --zk-pulse underline (2px)
• CTA button: Primary (Pulse) pill
• Height: 72px
• Sticky: position: sticky; top: 0; z-index: var(--zk-z-nav)

Desktop Dropdown:

• Background: --zk-white
• Border: 1px --zk-shell-dim
• Shadow: --zk-shadow-lg
• Radius: --zk-radius-lg (10px)
• Item hover: --zk-shell background

Form Inputs

Default (Light):

• Background: --zk-white
• Border: 1px --zk-shell-dim
• Radius: --zk-radius-md (8px)
• Text: --zk-void, weight 300 (Light)
• Placeholder: --zk-grey
• Padding: 12px 16px
• Height: 44px

Focus state: Border --zk-signal, box-shadow: 0 0 0 3px rgba(92,114,255,0.15). Error state: Border --zk-error, helper text in --zk-error. Disabled: opacity 0.5, --zk-shell background.

Input Types

• Text/Email/Password: Standard styling above
• Textarea: Same styling, min-height 100px, resize vertical
• Select: Custom dropdown arrow (--zk-grey), same base styling
• Toggle/Switch: 44x22px track, Pulse active color, Void off
• Checkbox/Radio: 20x20px, Pulse fill when checked, Signal focus ring
• Search: Pill radius (--zk-radius-full), search icon left

Alerts

Structure: Left border 4px accent color, padding 16px, --zk-radius-md (8px). Font: Space Grotesk, weight 300 body, weight 600 title.

Variant	Border	Background	Icon
Success	--zk-success	--zk-success-bg	Checkmark
Error	--zk-error	--zk-error-bg	X circle
Warning	--zk-warning	--zk-warning-bg	Triangle
Info	--zk-info (Signal)	--zk-info-bg	Info circle

Badges

Shape: Pill (--zk-radius-full). Text: uppercase, Space Grotesk 600, 12px. Padding: 4px 12px. Min height: 24px.

Variant	Background	Text
Pulse	--zk-pulse	--zk-void
Signal	--zk-signal	--zk-white
Void	--zk-void	--zk-shell
Success	--zk-success-bg	--zk-success
Error	--zk-error-bg	--zk-error
Warning	--zk-warning-bg	--zk-warning
Ghost	transparent	--zk-grey-dark

Ghost badges have 1px --zk-shell-dim border.

Tables

Default (Light):

• Background: --zk-white
• Header: --zk-shell background, --zk-void text, weight 600
• Header accent: Bottom border 2px --zk-signal
• Body text: weight 300
• Row borders: 1px --zk-shell-dim
• Striped alt row: --zk-shell
• Hover row: --zk-pulse-light background
• Cell padding: 12px 16px
• Radius: --zk-radius-lg (10px) on table container

Sortable columns: Signal icon, hover underline. Responsive: Horizontal scroll on mobile with shadow edge indicators.

Web3 Components

Wallet Connection Modal

• Background: --zk-white
• Title: "Connect Wallet", Monigue H4
• Wallet list: vertical stack, 60px row height
• Wallet item: icon (32px) + name, --zk-shell hover background
• Hover: --zk-signal left border accent
• Connected state: --zk-pulse dot indicator, "Connected" badge (Pulse)
• Close button: top-right, ghost style
• Radius: --zk-radius-xl (16px)

Transaction States

Pending:

• Pulse spinner (24px), --zk-pulse color, spin animation
• "Transaction Pending" text, Space Grotesk 500
• Transaction hash truncated, monospace

Success:

• Checkmark icon in --zk-pulse circle
• "Transaction Confirmed" text
• Block number, gas used details
• View on explorer link (--zk-signal)

Error:

• X icon in --zk-error circle
• Error message, retry button (Primary Pulse)
• Error code details in --zk-grey-dark

Details Panel:

• Label-value pairs, label weight 500, value weight 300
• Dividers: --zk-shell-dim
• Copy buttons on addresses/hashes

Proof Verification UI

Multi-step flow:

1. Submit Proof — upload or paste proof data, select proof system
2. Processing — Pulse spinner, progress indicator
3. Verified — Success badge with checkmark, verification details
4. Failed — Error state with reason

Proof Hash Display:

• Monospace font (Space Mono), 14px
• Truncated with ellipsis: 0x1a2b...9f0e
• Copy button on hover
• Background: --zk-shell
• Padding: 8px 12px
• Radius: --zk-radius-md

Verification Badge:

• Pill shape, --zk-pulse background
• Checkmark icon + "Verified" text
• --zk-void text color
• Glow: 0 0 12px rgba(181,255,165,0.3)

Proof System Labels:

• Badge style, pill shape
• Examples: "Groth16", "PLONK", "STARK", "Risc0", "Ultraplonk"
• Signal background variant

Network Badge

• Dot indicator (8px) + network name
• Active: --zk-pulse dot
• Inactive: --zk-grey dot
• Background: --zk-shell, border --zk-shell-dim
• Pill shape, padding 6px 12px

Address Display

• Monospace font, 14px
• Truncated format: 0x1a2b...9f0e
• Copy button: icon-only, ghost style
• Tooltip on copy: "Copied!" with Pulse accent
• Optional: ENS/identity label above address

Avatars

Token Avatars:

• Circle, sizes: 24px, 32px, 40px
• Background: gradient or brand color
• Border: 2px --zk-white (for overlapping pairs)
• Pair display: -8px overlap, z-index stacking

User Avatars:

• Circle, same sizes
• Fallback: initials on --zk-signal background
• Online indicator: 8px --zk-pulse dot, bottom-right

Domain-Specific Components

Proof Verification Flow

Full-page or modal workflow for verifying zero-knowledge proofs:

Step 1 — Select Proof System:

• Grid of proof system cards (Groth16, PLONK, STARK, etc.)
• Each card: icon, name, description
• Selected state: --zk-signal border, --zk-signal-light background

Step 2 — Submit Proof:

• Textarea for proof data (monospace, Void bg on dark variant)
• File upload dropzone: dashed --zk-shell-dim border, Pulse icon
• Verification key input (optional)
• Public inputs fields

Step 3 — Verification Result:

• Large verification badge (success/fail)
• Proof details: system, hash, timestamp, block number
• On-chain attestation link
• Share/export verification button

Staking & Token UI

Staking Card:

• White card, 10px radius
• APY display: large Monigue number, Pulse color
• Stake/Unstake buttons: Primary (Pulse) / Ghost
• Balance display: token icon + amount, weight 300
• Progress bar: --zk-pulse fill, --zk-shell-dim track

Token Display:

• Avatar (32px) + symbol + amount
• Price change: Pulse (positive), Error (negative)
• Sparkline chart: Pulse stroke

Governance Voting

Proposal Card:

• White card, status badge (Active/Passed/Failed)
• Title: H5 Monigue
• Summary: Body SM, weight 300
• Vote progress bar: For (--zk-pulse) / Against (--zk-error)
• Vote count labels below bar

Vote Actions:

• Three buttons: For (Pulse), Against (Ghost+Error border), Abstain (Ghost)
• Voting power display above
• Confirmation modal before submitting