zkverify-design-system

name

zkverify-design-system

description

Design system for the zkVerify verification protocol website (www.zkverify.io). Use this skill whenever building UI, components, pages, or layouts for zkVerify — including when the user mentions zkVerify, zk- tokens, zkverify.io, zero-knowledge proofs, or needs to create verification/ZK-proof UI following zkVerify's green(Pulse)/blue(Signal)/dark(Void) brand. Also use when the user references zk-verify-design-system.html or asks about zkVerify design tokens, typography (Monigue, Space Grotesk), or component patterns.

zkVerify Design System

1. Brand Identity

Protocol: zkVerify — "Zero Doubt" Purpose: Universal verification layer for zero-knowledge proofs. Style: Light-first (~70%) with strategic dark accents (~30%). Green (Pulse) and blue (Signal) accent colors on clean light surfaces, with Void (deep dark) for hero sections, footer, marquee, and CTAs. Color Ratio: Shell/white surfaces ~70%, Void/dark surfaces ~30%. Primary accent: Pulse (green). Secondary accent: Signal (blue). Target: www.zkverify.io Source: Figma "zkVerify_Asset_Library" (qi12B5ufQe9cfj38TlIPF5) Visual Reference: zk-verify-design-system.html — all 37 sections rendered

2. Quick Color Reference

Token	Hex	Usage
--zk-void	#020212	Deep dark backgrounds, text
--zk-signal	#5C72FF	Links, interactive elements, secondary accent
--zk-pulse	#B5FFA5	Primary accent, CTAs, success states
--zk-shell	#FCFCFC	Page backgrounds, light surfaces
--zk-white	#FFFFFF	Card backgrounds, pure white
--zk-grey	#A0A0B0	Secondary text, borders, dividers

Color ratio target: 15% Void, 10% Signal, 30% Pulse, 30% Shell, 15% White/Grey.

Full color tables (semantic, status, extended 50-900 scales, gradients) in references/tokens.md.

3. Typography Overview

• Headings: Monigue — blocky, condensed, uppercase display font. Used for all heading levels.
• Body/UI: Space Grotesk — default weight 300 (Light), NOT 400 Regular. Clean geometric sans-serif.
• Surheadings: 15px, letter-spacing: 4px, uppercase, Space Grotesk. Placed above main headings as category/context labels.

Full type scale (19 styles) in references/tokens.md.

4. Key Design Rules

1. Always use CSS custom properties (--zk-*) for all colors, spacing, typography, shadows, transitions.
2. Primarily light mode (~70%) — Shell/white default. Dark (Void) surfaces ~30% for hero, footer, marquee, CTAs.
3. Buttons are ALWAYS pills — border-radius: 9999px.
4. Headings: Monigue (uppercase). Body: Space Grotesk (weight 300). Never swap them.
5. Cards: 10px border-radius — distinct from Horizen (12px) and Horizen Labs (0px).
6. Body text defaults to Light (300) weight — heavier weights (500, 600, 700) only for emphasis.
7. Surheadings above main headings — 15px uppercase, letter-spacing 4px, provides context for the heading below.
8. Primary accent: Pulse (green). Secondary: Signal (blue). Pulse for CTAs and success; Signal for links and interactive states.
9. Focus rings use Pulse color — outline: 2px solid var(--zk-pulse); outline-offset: 2px.
10. 8px spacing grid — all spacing uses --zk-space-* tokens.
11. All transitions use tokens — --zk-transition-fast, -normal, -slow.

5. Spacing

Base grid: 8px. All spacing derived from --zk-space-* tokens.

Token	Value	Token	Value
--zk-space-1	4px	--zk-space-8	32px
--zk-space-2	8px	--zk-space-10	40px
--zk-space-3	12px	--zk-space-12	48px
--zk-space-4	16px	--zk-space-16	64px
--zk-space-5	20px	--zk-space-20	80px
--zk-space-6	24px	--zk-space-24	96px

Section padding: 64px 40px desktop, 48px 24px tablet, 32px 16px mobile.

6. Border Radius

Token	Value	Usage
--zk-radius-sm	4px	Small elements, tags
--zk-radius-md	8px	Inputs, small cards
--zk-radius-lg	10px	Cards, containers (zkVerify signature)
--zk-radius-xl	16px	Modals, large cards
--zk-radius-2xl	24px	Feature sections
--zk-radius-full	9999px	Buttons, pills, badges

Key rule: Buttons always --zk-radius-full (pill). Cards always --zk-radius-lg (10px).

7. Layout Patterns

Page structure:

• Light surfaces ~70% (Shell --zk-shell, White --zk-white)
• Dark surfaces ~30% (hero, footer, marquee, CTA sections using --zk-void)

Container: max-width: 1440px; margin: 0 auto; padding: 0 40px (16px mobile).

Grid: CSS Grid, 12-column on desktop, responsive collapse.

desktop: repeat(12, 1fr), gap: 24px
tablet:  repeat(6, 1fr),  gap: 16px
mobile:  1fr,             gap: 16px

Section padding (responsive):

desktop: 64px 40px
tablet:  48px 24px
mobile:  32px 16px

8. Responsive Breakpoints

Name	Min-width	Typical use
Mobile	0	Single column, stacked
sm	640px	Small adjustments
md	768px	Tablet, 2-col grid
lg	1024px	Desktop nav, 3-col
xl	1280px	Full desktop layout
2xl	1536px	Large screens

9. Z-Index Scale

Token	Value	Usage
--zk-z-dropdown	100	Dropdowns, popovers
--zk-z-sticky	150	Sticky headers
--zk-z-nav	200	Navigation, bottom bar
--zk-z-overlay	300	Overlays, backdrops
--zk-z-modal	400	Modals, bottom sheets
--zk-z-toast	500	Toasts, snackbars
--zk-z-tooltip	600	Tooltips

10. Transitions & Animation

Token	Value
--zk-transition-fast	150ms ease
--zk-transition-normal	300ms ease
--zk-transition-slow	500ms ease
--zk-transition-spring	500ms cubic-bezier(0.34, 1.56, 0.64, 1)

Key animations:

• fadeIn — opacity 0 to 1, 300ms
• slideUp — translateY(20px) to 0, 300ms
• slideDown — translateY(-20px) to 0, 300ms
• shimmer — background position sweep, 1.5s infinite (skeleton loading)
• pulseGlow — scale 1 to 1.05, 2s infinite (attention, Pulse color glow)
• spin — rotate 360deg, 1s linear infinite (loading)
• marquee — horizontal scroll, linear infinite
• verifyCheck — scale/opacity entrance for verification success badge

11. Accessibility

• Color contrast: WCAG 2.1 AA minimum (4.5:1 text, 3:1 large/UI)
• Focus visible: outline: 2px solid var(--zk-pulse); outline-offset: 2px
• Keyboard navigable: all interactive elements reachable via Tab
• ARIA labels on icon-only buttons
• prefers-reduced-motion: reduce — disable animations, use opacity-only transitions
• Semantic HTML: proper heading hierarchy, landmarks, lists
• Skip navigation link
• Touch targets: 44x44px minimum

12. Key Differences from Horizen & Horizen Labs

Feature	Horizen (Hz)	Horizen Labs (HL)	zkVerify (zk)
Token prefix	--hz-*	--hl-*	--zk-*
Primary accent	Yellow #FECB17	Orange #FF6B35	Pulse (green) #B5FFA5
Secondary accent	Blue #1038BB	Blue #2563EB	Signal (blue) #5C72FF
Dark color	Black #030E24	Black #0A0A0B	Void #020212
Light surface	White #FFFFFF	White #FFFFFF	Shell #FCFCFC
Heading font	Funnel Display	Funnel Display	Monigue
Body font	Proxima Nova	Inter	Space Grotesk
Body default weight	400 Regular	400 Regular	300 Light
Card radius	12px	0px	10px
Button radius	9999px (pill)	9999px (pill)	9999px (pill)
Light/dark ratio	80/20	85/15	70/30
Surheadings	No	No	Yes (15px, 4px tracking)
Brand naming	Hz colors	HL colors	Void/Signal/Pulse/Shell
Focus ring color	Yellow	Orange	Pulse (green)

13. Reference Pointers

File	Contents
references/tokens.md	Full color tables (brand 16 tokens, semantic, status, extended 50-900 scales, gradients), complete typography scale (19 styles), shadows (6 tokens)
references/components.md	Buttons, cards, modals, navigation, forms, alerts, badges, tables, Web3 components (wallet, transactions, proof verification, network, address, avatars), domain-specific patterns
references/mobile-ux.md	Touch targets, mobile typography, mobile nav (fullscreen overlay), bottom sheets, mobile forms/cards/tables, bottom nav bar, toasts, loading states, search, orientation, sticky headers, accessibility, FAB, AI agent interface, Web3 mobile patterns
zk-verify-design-system.html	Visual reference with all 37 sections rendered

14. HTML Reference Sections

#	Section	Key Components
1	Brand Colors	Void, Signal, Pulse, Shell, semantic swatches
2	Extended Color Palette	Signal, Pulse, Void 50-900 scales
3	Gradients	Signal-Pulse, Void, Signal, hero gradients
4	Typography Scale	All 19 heading/body/surheading styles
5	Spacing System	4px-96px visual tokens
6	Shadow Elevation	6 shadow levels rendered
7	Border Radius	sm through full examples
8	Buttons — Primary	Pulse pill, all states
9	Buttons — Secondary	Void pill, all states
10	Buttons — Signal	Signal variant
11	Buttons — Ghost/Text/Icon	Minimal variants
12	Cards — Light	White bg, shell-dim border, hover
13	Cards — Dark (Void)	Void bg variant
14	Cards — Feature	Gradient border, icon, stat cards
15	Navigation	Void bg desktop header
16	Mobile Navigation	Hamburger, fullscreen Void overlay
17	Form Inputs — Light	Shell bg, signal focus
18	Form Inputs — Dark	Void variant inputs
19	Alerts	Success, error, warning, info with left border
20	Badges	Pulse, Signal, Void, status, ghost variants
21	Modals	Standard, confirmation, form (light default)
22	Tables	Light bg, Signal header accents
23	Hero Section	Void bg, Pulse CTA, headline
24	Feature Grid	3-col cards with icons
25	Marquee	Scrolling ticker, Void bg
26	Footer	Void bg, multi-column links
27	Stats Section	Large numbers, Pulse accents
28	Testimonials	Quote cards, avatars
29	FAQ/Accordion	Expand/collapse items
30	Wallet Connection	Connect modal, wallet list
31	Transaction States	Pending (Pulse spinner), success, error
32	Proof Verification UI	Multi-step, proof hash, verification badge
33	Network Badge	Chain indicator, status dot
34	Address Display	Truncated, copy button
35	Token Avatars	Circle icons, pair display
36	Bottom Navigation	Mobile fixed bar, Pulse active
37	AI Agent Interface	Chat bubbles, prompt bar, status

15. File Reference

File	Purpose
SKILL.md	This file — main guide, quick reference, rules
references/tokens.md	Full design token tables
references/components.md	Component patterns and specs
references/mobile-ux.md	Mobile UX patterns and responsive behavior
zk-verify-design-system.html	Visual HTML reference (37 sections)