zkverify-design-system - SKILL.md Agent Skill

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

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