/tokens

Horizen Design Tokens — Full Reference

Brand Colors

Token	Hex	RGB	Usage
--hz-yellow	#FECB17	254, 203, 23	Primary brand, CTAs, hero backgrounds
--hz-yellow-hover	#E5B715	229, 183, 21	Yellow hover state
--hz-yellow-active	#CCa313	204, 163, 19	Yellow active/pressed state
--hz-yellow-muted	#FEF3C7	254, 243, 199	Yellow tints, light backgrounds
--hz-black	#030E24	3, 14, 36	Primary text, dark backgrounds
--hz-black-light	#0A1A3A	10, 26, 58	Elevated dark surfaces
--hz-black-lighter	#122650	18, 38, 80	Dark surface borders/hover
--hz-blue	#1038BB	16, 56, 187	Links, interactive elements
--hz-blue-hover	#0D2E9A	13, 46, 154	Blue hover state
--hz-blue-light	#E8EDFB	232, 237, 251	Blue tint backgrounds
--hz-white	#FFFFFF	255, 255, 255	Page backgrounds, text on dark
--hz-grey	#F4F4F4	244, 244, 244	Alternate section backgrounds
--hz-grey-dark	#6B7280	107, 114, 128	Secondary text, captions
--hz-line-grey	#A9B0BD	169, 176, 189	Borders, dividers, disabled

Semantic Colors

Token	Hex	Usage
--hz-text-primary	#030E24	Headings, body text
--hz-text-secondary	#6B7280	Captions, metadata
--hz-text-on-dark	#FFFFFF	Text on dark backgrounds
--hz-text-on-yellow	#030E24	Text on yellow backgrounds
--hz-bg-primary	#FFFFFF	Main page background
--hz-bg-secondary	#F4F4F4	Alternate section background
--hz-border	#A9B0BD	Default borders

Status Colors

Token	Hex	Usage
--hz-success	#16A34A	Success states, confirmations
--hz-error	#DC2626	Error states, destructive actions
--hz-warning	#F59E0B	Warning states, cautions
--hz-info	#2563EB	Informational states

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

• --hz-success-bg: rgba(22, 163, 74, 0.12)
• --hz-error-bg: rgba(220, 38, 38, 0.12)
• --hz-warning-bg: rgba(245, 158, 11, 0.12)
• --hz-info-bg: rgba(37, 99, 235, 0.12)

Extended Color Scales

Yellow Scale

Token	Hex	Usage
--hz-yellow-50	#FFFDF0	Lightest tint, subtle backgrounds
--hz-yellow-100	#FEF3C7	Light backgrounds, muted fills
--hz-yellow-200	#FDE68A	Hover tints, borders
--hz-yellow-300	#FCD34D	Accents, highlights
--hz-yellow-400	#FBBF24	Secondary yellow elements
--hz-yellow-500	#FECB17	Primary brand yellow
--hz-yellow-600	#E5B715	Hover state
--hz-yellow-700	#CCA313	Active/pressed state
--hz-yellow-800	#92740E	Dark yellow accents
--hz-yellow-900	#5C4A09	Darkest yellow

Black (Navy) Scale

Token	Hex	Usage
--hz-black-50	#F0F2F5	Lightest, subtle backgrounds
--hz-black-100	#D9DEE6	Light borders
--hz-black-200	#A9B0BD	Line grey, dividers
--hz-black-300	#7A8494	Placeholder text
--hz-black-400	#4B586B	Disabled text
--hz-black-500	#1C2C42	Secondary dark
--hz-black-600	#122650	Elevated dark surfaces
--hz-black-700	#0A1A3A	Dark surface cards
--hz-black-800	#061230	Deep dark backgrounds
--hz-black-900	#030E24	Primary black

Blue Scale

Token	Hex	Usage
--hz-blue-50	#F0F4FF	Lightest tint
--hz-blue-100	#E8EDFB	Light blue backgrounds
--hz-blue-200	#C7D2F5	Hover tints
--hz-blue-300	#93A8E8	Light accents
--hz-blue-400	#5F7EDC	Secondary blue
--hz-blue-500	#1038BB	Primary blue
--hz-blue-600	#0D2E9A	Hover state
--hz-blue-700	#0A2479	Active/pressed state
--hz-blue-800	#071A58	Dark blue
--hz-blue-900	#041037	Darkest blue

Gradients

Token	Value	Usage
--hz-gradient-brand	linear-gradient(135deg, #FECB17 0%, #F59E0B 100%)	Brand accent surfaces
--hz-gradient-dark	linear-gradient(180deg, #030E24 0%, #0A1A3A 100%)	Dark section backgrounds
--hz-gradient-blue	linear-gradient(135deg, #1038BB 0%, #2563EB 100%)	Blue accent surfaces
--hz-gradient-hero	linear-gradient(135deg, #FECB17 0%, #FDE68A 50%, #FFFFFF 100%)	Hero section backgrounds

Full Typography Scale

Style	Font	Weight	Size	Line Height	Usage
Display XL	Funnel Display	700	127px	1.0	Hero headlines
Display LG	Funnel Display	700	96px	1.05	Major section headers
Display MD	Funnel Display	700	72px	1.1	Section headers
H1	Funnel Display	700	60px	1.1	Page titles
H2	Funnel Display	700	48px	1.15	Section titles
H3	Funnel Display	700	40px	1.2	Subsection titles
H4	Funnel Display	700	34px	1.25	Card titles, labels
Body LG	Proxima Nova	400	20px	1.6	Lead paragraphs
Body MD	Proxima Nova	400	16px	1.6	Default body text
Body SM	Proxima Nova	400	14px	1.5	Captions, metadata
Label	Proxima Nova	600	14px	1.4	Form labels, UI labels
Overline	Proxima Nova	700	12px	1.3	Badges, uppercase tags

Typography Rules

• Headings always use font-family: 'Funnel Display', sans-serif; font-weight: 700.
• Body/UI always use font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, sans-serif.
• Use letter-spacing: -0.02em on Display XL/LG/MD for tighter tracking.
• Use text-transform: uppercase; letter-spacing: 0.05em for Overline style.
• Load Funnel Display via Google Fonts: family=Funnel+Display:wght@700.
• Proxima Nova requires a licensed webfont or use system fallbacks.

Full Spacing Tokens

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

Section Padding Pattern

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

Shadows

Token	Value	Usage
--hz-shadow-xs	0 1px 2px rgba(3,14,36,0.05)	Subtle elevation, inputs
--hz-shadow-sm	0 2px 4px rgba(3,14,36,0.08)	Cards resting state
--hz-shadow-md	0 4px 8px rgba(3,14,36,0.10)	Card hover, dropdowns
--hz-shadow-lg	0 8px 16px rgba(3,14,36,0.12)	Modals, popovers
--hz-shadow-xl	0 16px 32px rgba(3,14,36,0.15)	Large modals, overlays
--hz-shadow-2xl	0 24px 48px rgba(3,14,36,0.18)	Maximum elevation
--hz-shadow-inner	inset 0 2px 4px rgba(3,14,36,0.06)	Pressed states, inset inputs