horizen-design-system

name

horizen-design-system

description

Design system for the Horizen protocol website (www.horizen.io). Use this skill whenever building UI, components, pages, or layouts for the Horizen protocol — including when the user mentions Horizen, hz- tokens, horizen.io, or needs to create web3/blockchain UI following Horizen's yellow/black brand. Also use when the user references horizen-design-system.html or asks about Horizen design tokens, typography (Funnel Display, Proxima Nova), or component patterns.

Horizen Design System

1. Brand Identity

Protocol: Horizen — "Onchain Privacy That Works for You" Style: Bold, clean, high-contrast. Yellow/black/blue palette. Surfaces: Light backgrounds (~80%), dark for nav/footer/marquee (~10%), yellow for hero/CTA (~10%). Target: www.horizen.io Source: Figma "Horizen Brand Web Refresh '25" (Qe2wva8728QKeBpg6wiX6r) Visual Reference: horizen-design-system.html — all 37 sections rendered

2. Quick Color Reference

Token	Hex	Usage
--hz-yellow	#FECB17	Primary brand, CTAs, accents
--hz-black	#030E24	Text, dark backgrounds
--hz-blue	#1038BB	Links, interactive elements
--hz-white	#FFFFFF	Page backgrounds
--hz-grey	#F4F4F4	Alt section backgrounds
--hz-line-grey	#A9B0BD	Borders, dividers

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

3. Typography Overview

• Headings: Funnel Display, 700 Bold, sizes 127px down to 34px
• Body/UI: Proxima Nova, 400/600/700 weights

Full type scale in references/tokens.md.

4. Key Design Rules

1. Always use CSS custom properties (--hz-*) for all colors, spacing, typography, shadows, transitions.
2. Primarily light mode (~80%) — white/grey default. Dark for nav/footer/marquee (~10%). Yellow for hero/CTA (~10%).
3. Buttons are ALWAYS pills — border-radius: 9999px.
4. Headings: Funnel Display. Body: Proxima Nova. Never swap them.
5. Cards: 12px radius, subtle borders (--hz-line-grey), hover shadows.
6. 8px spacing grid — all spacing uses --hz-space-* tokens.
7. All transitions use tokens — --hz-transition-fast, -normal, -slow.
8. Focus: outline: 2px solid var(--hz-yellow); outline-offset: 2px.

5. Spacing

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

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

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

6. Border Radius

Token	Value	Usage
--hz-radius-sm	4px	Small elements, tags
--hz-radius-md	8px	Inputs, small cards
--hz-radius-lg	12px	Cards, containers
--hz-radius-xl	16px	Large cards, modals
--hz-radius-2xl	24px	Feature sections
--hz-radius-full	9999px	Buttons, pills, badges

Key rule: Buttons are always --hz-radius-full (pill shape).

7. Layout Patterns

Page structure:

• Light surfaces ~80% (white --hz-white, grey --hz-grey)
• Dark surfaces ~20% (nav, footer, marquee, feature sections using --hz-black)

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
--hz-z-dropdown	100	Dropdowns, popovers
--hz-z-sticky	150	Sticky headers
--hz-z-nav	200	Navigation, bottom bar
--hz-z-overlay	300	Overlays, backdrops
--hz-z-modal	400	Modals, bottom sheets
--hz-z-toast	500	Toasts, snackbars
--hz-z-tooltip	600	Tooltips

10. Transitions & Animation

Token	Value
--hz-transition-fast	150ms ease
--hz-transition-normal	300ms ease
--hz-transition-slow	500ms ease
--hz-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)
• pulse — scale 1 to 1.05, 2s infinite (attention)
• spin — rotate 360deg, 1s linear infinite (loading)
• marquee — horizontal scroll, linear infinite

11. Accessibility

• Color contrast: WCAG 2.1 AA minimum (4.5:1 text, 3:1 large/UI)
• Focus visible: outline: 2px solid var(--hz-yellow); 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. Reference Pointers

File	Contents
references/tokens.md	Full color tables (brand, semantic, status, extended 50-900 scales, gradients), complete typography scale, shadows
references/components.md	Buttons, cards, modals, navigation, forms, alerts, badges, tables, Web3 components (wallet, transactions, network, address, avatars)
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
horizen-design-system.html	Visual reference with all 37 sections rendered

13. HTML Reference Sections

#	Section	Key Components
1	Brand Colors	Primary, semantic, status swatches
2	Extended Color Palette	Yellow, Black, Blue 50-900 scales
3	Gradients	Brand, dark, blue, hero gradients
4	Typography Scale	All 12 heading/body styles
5	Spacing System	4px-96px visual tokens
6	Shadow Elevation	7 shadow levels rendered
7	Border Radius	sm through full examples
8	Buttons — Primary	Yellow pill, all states
9	Buttons — Secondary	Outline pill, all states
10	Buttons — Dark	For dark backgrounds
11	Buttons — Ghost/Text/Icon	Minimal variants
12	Cards — Standard	White bg, border, hover
13	Cards — Dark	Black bg variant
14	Cards — Feature	With icon, image, stat cards
15	Navigation	Desktop header, dark bg
16	Mobile Navigation	Hamburger, fullscreen overlay
17	Form Inputs	Text, select, textarea, toggle
18	Form Inputs — Dark	Dark variant inputs
19	Alerts	Success, error, warning, info
20	Badges	7 color variants
21	Modals	Standard, confirmation, form
22	Tables	Striped, sortable, responsive
23	Hero Section	Yellow bg, headline, CTA
24	Feature Grid	3-col icon cards
25	Marquee	Scrolling ticker, dark bg
26	Footer	Dark bg, multi-column links
27	Stats Section	Large numbers, labels
28	Testimonials	Quote cards, avatars
29	FAQ/Accordion	Expand/collapse items
30	Wallet Connection	Connect modal, wallet list
31	Transaction Modals	Pending, success, error states
32	Network Badge	Chain indicator, status dot
33	Address Display	Truncated, copy button
34	Token Avatars	Circle icons, pair display
35	Bottom Navigation	Mobile fixed bar
36	Toast/Snackbar	Notification, action button
37	AI Agent Interface	Chat bubbles, prompt bar, status

14. 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
horizen-design-system.html	Visual HTML reference (37 sections)