/tokens

zkVerify Design Tokens — Full Reference

Brand Colors

Token	Hex	RGB	Usage
--zk-void	#020212	2, 2, 18	Deep dark backgrounds, primary text
--zk-void-hover	#0A0A2A	10, 10, 42	Void hover/elevated state
--zk-signal	#5C72FF	92, 114, 255	Links, interactive elements, secondary accent
--zk-signal-hover	#4A5FE6	74, 95, 230	Signal hover state
--zk-signal-light	#E8EBFF	232, 235, 255	Signal tint backgrounds
--zk-signal-muted	#C4CCFF	196, 204, 255	Signal soft fills
--zk-pulse	#B5FFA5	181, 255, 165	Primary accent, CTAs, success
--zk-pulse-hover	#9EE88F	158, 232, 143	Pulse hover state
--zk-pulse-dark	#5CB84E	92, 184, 78	Pulse on dark backgrounds
--zk-pulse-light	#E8FFE3	232, 255, 227	Pulse tint backgrounds
--zk-pulse-muted	#D4FFCB	212, 255, 203	Pulse soft fills
--zk-shell	#FCFCFC	252, 252, 252	Page backgrounds, light surfaces
--zk-shell-dim	#EDEDF4	237, 237, 244	Borders, dividers, alternate backgrounds
--zk-white	#FFFFFF	255, 255, 255	Card backgrounds, pure white
--zk-grey	#A0A0B0	160, 160, 176	Secondary text, borders, dividers
--zk-grey-dark	#6B6B80	107, 107, 128	Tertiary text, captions
--zk-grey-light	#D0D0DC	208, 208, 220	Light borders, subtle dividers

Color Ratio

Target surface distribution across a typical page:

• Void (dark): ~15% — hero sections, footer, marquee, CTAs
• Signal (blue): ~10% — links, interactive states, accents
• Pulse (green): ~30% — primary accent, buttons, highlights, success
• Shell/White: ~30% — page backgrounds, card backgrounds
• Grey tones: ~15% — borders, secondary text, dividers

Semantic Colors

Token	Hex	Usage
--zk-text-primary	#020212	Headings, body text on light
--zk-text-secondary	#6B6B80	Captions, metadata
--zk-text-on-dark	#FCFCFC	Text on Void backgrounds
--zk-text-on-pulse	#020212	Text on Pulse backgrounds
--zk-bg-primary	#FCFCFC	Main page background (Shell)
--zk-bg-secondary	#EDEDF4	Alternate section background (Shell-dim)
--zk-border	#EDEDF4	Default borders (Shell-dim)

Status Colors

Token	Hex	Usage
--zk-success	#16A34A	Success states, confirmations
--zk-error	#DC2626	Error states, destructive actions
--zk-warning	#F59E0B	Warning states, cautions
--zk-info	#5C72FF	Informational states (uses Signal)

Each status color has a -bg variant at 12% opacity for alert/badge backgrounds:

• --zk-success-bg: rgba(22, 163, 74, 0.12)
• --zk-error-bg: rgba(220, 38, 38, 0.12)
• --zk-warning-bg: rgba(245, 158, 11, 0.12)
• --zk-info-bg: rgba(92, 114, 255, 0.12)

Extended Color Scales

Signal Scale

Token	Hex	Usage
--zk-signal-50	#F0F2FF	Lightest tint, subtle backgrounds
--zk-signal-100	#E8EBFF	Light backgrounds, muted fills
--zk-signal-200	#C4CCFF	Hover tints, borders
--zk-signal-300	#9EAAFF	Light accents
--zk-signal-400	#7B8EFF	Secondary Signal elements
--zk-signal-500	#5C72FF	Primary Signal
--zk-signal-600	#4A5FE6	Hover state
--zk-signal-700	#384CCC	Active/pressed state
--zk-signal-800	#2639B3	Dark Signal accents
--zk-signal-900	#142699	Darkest Signal

Pulse Scale

Token	Hex	Usage
--zk-pulse-50	#F4FFF2	Lightest tint, subtle backgrounds
--zk-pulse-100	#E8FFE3	Light backgrounds, muted fills
--zk-pulse-200	#D4FFCB	Hover tints, borders
--zk-pulse-300	#C4FFB8	Light accents
--zk-pulse-400	#B5FFA5	Primary Pulse (same as 500)
--zk-pulse-500	#B5FFA5	Primary Pulse
--zk-pulse-600	#9EE88F	Hover state
--zk-pulse-700	#7ACC6A	Active/pressed state
--zk-pulse-800	#5CB84E	Dark Pulse, on dark backgrounds
--zk-pulse-900	#3D9432	Darkest Pulse

Void Scale

Token	Hex	Usage
--zk-void-50	#F0F0F5	Lightest, subtle backgrounds
--zk-void-100	#D8D8E4	Light borders
--zk-void-200	#B0B0C8	Dividers
--zk-void-300	#8888AC	Placeholder text
--zk-void-400	#606090	Disabled text
--zk-void-500	#383874	Secondary dark
--zk-void-600	#282858	Elevated dark surfaces
--zk-void-700	#18183C	Dark surface cards
--zk-void-800	#0A0A2A	Deep dark backgrounds
--zk-void-900	#020212	Primary Void

Gradients

Token	Value	Usage
--zk-gradient-signal-pulse	linear-gradient(135deg, #5C72FF 0%, #B5FFA5 100%)	Brand accent surfaces, hero highlights
--zk-gradient-void	linear-gradient(180deg, #020212 0%, #18183C 100%)	Dark section backgrounds
--zk-gradient-signal	linear-gradient(135deg, #5C72FF 0%, #9EAAFF 100%)	Signal accent surfaces

Full Typography Scale

Style	Font	Weight	Size	Line Height	Letter Spacing	Usage
Display XL	Monigue	—	170px	1.0	-0.02em	Hero headlines
Display LG	Monigue	—	130px	1.0	-0.02em	Major section headers
Display MD	Monigue	—	100px	1.05	-0.02em	Section headers
H1	Monigue	—	80px	1.05	-0.01em	Page titles
H2	Monigue	—	60px	1.1	-0.01em	Section titles
H3	Monigue	—	48px	1.15	0	Subsection titles
H4	Monigue	—	36px	1.2	0	Card titles
H5	Monigue	—	28px	1.25	0	Small headings
Surheading	Space Grotesk	500	15px	1.4	4px	Category labels above headings
Body LG	Space Grotesk	300	20px	1.6	0	Lead paragraphs
Body MD	Space Grotesk	300	16px	1.6	0	Default body text
Body SM	Space Grotesk	300	14px	1.5	0	Captions, metadata
Body XS	Space Grotesk	300	12px	1.4	0	Fine print, timestamps
P Medium	Space Grotesk	500	16px	1.6	0	Emphasized body text
P SemiBold	Space Grotesk	600	16px	1.6	0	Strong emphasis
P Bold	Space Grotesk	700	16px	1.6	0	Button labels, strong UI text
Label	Space Grotesk	500	14px	1.4	0	Form labels, UI labels
Overline	Space Grotesk	600	12px	1.3	0.08em	Badges, uppercase tags
Code	Space Mono	400	14px	1.5	0	Code snippets, proof hashes

Typography Rules

• Headings always use font-family: 'Monigue', sans-serif; text-transform: uppercase. Monigue is a single-weight blocky condensed display font — do not apply font-weight.
• Body/UI always use font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 300.
• Default body weight is 300 (Light) — this is critical. Do not default to 400.
• Use letter-spacing: -0.02em on Display XL/LG/MD for tighter tracking.
• Use text-transform: uppercase; letter-spacing: 0.08em for Overline style.
• Surheadings are always uppercase, 15px, letter-spacing: 4px, placed directly above the main heading they describe.
• Load Space Grotesk via Google Fonts: family=Space+Grotesk:wght@300;400;500;600;700.
• Monigue is a custom font — load from local assets or CDN.
• Code/proof hashes use Space Mono: family=Space+Mono:wght@400;700.

Full Spacing Tokens

Token	Value	Common usage
--zk-space-1	4px	Tight gaps, icon-text spacing
--zk-space-2	8px	Inline spacing, small gaps
--zk-space-3	12px	Compact padding, badge padding
--zk-space-4	16px	Default padding, form gaps
--zk-space-5	20px	Medium gaps
--zk-space-6	24px	Card padding, section gaps
--zk-space-8	32px	Large gaps, card groups
--zk-space-10	40px	Container horizontal padding
--zk-space-12	48px	Tablet section padding
--zk-space-16	64px	Desktop section vertical padding
--zk-space-20	80px	Large section spacing
--zk-space-24	96px	Maximum section spacing

Section Padding Pattern

.section {
  padding: var(--zk-space-16) var(--zk-space-10); /* 64px 40px — desktop */
}
@media (max-width: 768px) {
  .section {
    padding: var(--zk-space-8) var(--zk-space-4); /* 32px 16px — mobile */
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .section {
    padding: var(--zk-space-12) var(--zk-space-6); /* 48px 24px — tablet */
  }
}

Shadows

Token	Value	Usage
--zk-shadow-sm	0 2px 4px rgba(2,2,18,0.06)	Subtle elevation, inputs
--zk-shadow-md	0 4px 8px rgba(2,2,18,0.08)	Cards resting state, dropdowns
--zk-shadow-lg	0 8px 16px rgba(2,2,18,0.10)	Card hover, popovers
--zk-shadow-xl	0 16px 32px rgba(2,2,18,0.12)	Modals, large overlays
--zk-shadow-2xl	0 24px 48px rgba(2,2,18,0.16)	Maximum elevation
--zk-shadow-glow-signal	0 0 20px rgba(92,114,255,0.30)	Signal glow effect for interactive focus