horizenlabs-design-system

Horizen Labs Design System

1. Brand Identity

Company: Horizen Labs — developer company building blockchain infrastructure (NOT the Horizen protocol). Tagline: "Building the Infrastructure of the Verifiable Web" Style: Sharp, institutional, monospace-driven. Navy/teal dominance, no rounded corners. Surfaces: Almost entirely light mode (~100%) — white/grey-light default. Dark (navy) ONLY for nav CTA, modal overlays, drawers, rare dark cards. Target: www.horizenlabs.io Source: Figma "HL WEB 2.0" (4vyFlIPGnd66tBXk764WXA) Visual Reference: horizenlabs-design-system.html — all 33 sections rendered

2. Quick Color Reference

Token	Hex	Usage
--hl-navy	#041742	Primary brand, text, dark accents
--hl-teal	#4CDFDD	Accent, borders, highlights
--hl-teal-text	#00C0BD	Teal text for links and emphasis
--hl-white	#FFFFFF	Page backgrounds
--hl-grey	#BABDC3	Secondary text, borders
--hl-grey-light	#F5F6F8	Alt section backgrounds, inputs
--hl-magenta	#F251EA	Accent, highlights, special CTAs

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

3. Typography Overview

• Headings: Azeret Mono, 700 Bold (monospace, technical feel)
• Body/UI: Roboto, 400/500/600/700 weights
• CTAs, nav links, badges, labels: ALWAYS uppercase with wide letter-spacing (2.4-3.8px)

Full type scale in references/tokens.md.

4. Key Design Rules

1. Always use CSS custom properties (--hl-*) for all colors, spacing, typography, shadows, transitions.
2. Almost entirely light mode (~100%) — white/grey-light default. Dark (navy) ONLY for nav CTA, modal overlays, drawers, rare dark cards.
3. EVERYTHING sharp-cornered — border-radius: 0 on buttons, cards, inputs, badges, modals, avatars. This is THE core brand distinction.
4. CTAs, nav links, badges, labels are ALWAYS uppercase with letter-spacing (2.4-3.8px).
5. Headings: Azeret Mono. Body: Roboto. Never swap them.
6. Footer uses teal background (not dark like other brands).
7. Cards hover with three-part effect — lift (translateY) + shadow escalation + gradient border reveal. See references/polish.md.
8. Alerts use left-border style — 4px solid left border, status color bg at 12%.
9. Link buttons use square arrow-box icons — 25x25px, 2px border, 45-degree chevron.
10. Nav CTA is an integrated navy block — not a standard button.
11. Gradient accent bar at top of every page — 3px magenta→teal, fixed position. Footer mirrors it.
12. Frosted glass navbar — rgba(255,255,255,0.85) + backdrop-filter: blur(20px), sits below accent bar.
13. Button/card hover always lifts — translateY(-2px) buttons, -4px to -6px cards, with shadow escalation.
14. Background patterns on hero/feature sections — grid lines or dot patterns, always with radial mask fade.
15. Ambient glow blobs on hero sections — large blurred teal/magenta circles, max 2 per section.

Full V2 polish patterns in references/polish.md.

5. Spacing

Custom scale (not strict 8px grid). All spacing uses --hl-space-* tokens.

Token	Value	Token	Value
--hl-space-1	4px	--hl-space-10	40px
--hl-space-2	8px	--hl-space-12	50px
--hl-space-3	10px	--hl-space-14	60px
--hl-space-4	12px	--hl-space-16	80px
--hl-space-5	16px	--hl-space-20	100px
--hl-space-6	20px	--hl-space-24	120px
--hl-space-8	25px	--hl-space-28	150px
		--hl-space-32	200px

Section padding: 150px 100px large desktop, 80px 40px tablet, 40px 20px mobile.

6. Border Radius

Token	Value	Usage
--hl-radius-none	0px	DEFAULT for everything
--hl-radius-sm	2px	Rare, subtle rounding
--hl-radius-md	4px	Occasional, minor elements

KEY RULE: Everything defaults to 0. Sharp corners are the core brand identity. Never use border-radius: 9999px or large radii.

7. Layout Patterns

Page structure:

• Light surfaces ~100% (white --hl-white, grey-light --hl-grey-light)
• Teal footer background
• Dark (navy) only for nav CTA, overlays, rare accent cards
• Gradient CTAs are rare and reserved for special emphasis

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

Grid: CSS Grid, responsive collapse.

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

Section padding (responsive):

large desktop: 150px 100px
desktop:       100px 60px
tablet:         80px 40px
mobile:         40px 20px

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

10. Transitions & Animation

Token	Value
--hl-transition-fast	150ms ease
--hl-transition-normal	all 0.3s ease
--hl-transition-slow	500ms ease
--hl-transition-border	0.4s ease

Key animations:

• fadeIn — opacity 0 to 1, 300ms
• slideUp — translateY(20px) to 0, 300ms
• slideDown — translateY(-20px) to 0, 300ms
• log-blink — teal bg pulse, 0.6s, 3 repetitions
• pulse-text — opacity 1→0.4→1, 2s infinite (processing labels)

V2 Polish interactions (see references/polish.md):

• Button hover: translateY(-2px) + shadow lift
• Card hover: translateY(-4px to -6px) + shadow escalation + gradient border reveal
• Border reveals: 0.4s ease (staggered behind the faster card lift)

11. Accessibility

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

Aspect	Horizen Labs (this system)	Horizen Protocol
Entity	Developer company	Blockchain protocol
URL	horizenlabs.io	horizen.io
Token prefix	--hl-*	--hz-*
Primary palette	Navy / Teal / Magenta	Yellow / Black / Blue
Headings font	Azeret Mono (monospace)	Funnel Display
Body font	Roboto	Proxima Nova
Border radius	0 — sharp corners everywhere	Pill buttons (9999px), 12px cards
Surface split	~100% light	~80% light, ~20% dark
Footer bg	Teal	Dark (black)
Card hover	Teal-light background	Shadow-based
Button shape	Sharp rectangle	Pill (9999px)
Alert style	Left-border (4px solid)	Standard rounded
Nav style	White bg, integrated navy CTA block	Dark bg
Text treatment	Uppercase + wide letter-spacing on CTAs/nav/badges	Standard casing

13. Reference Pointers

File	Contents
references/tokens.md	Full color tables (brand, semantic, status, extended 50-900 scales, gradients), typography scale, spacing tokens, shadows, glow tokens, opacity scale, transitions
references/components.md	Buttons (with hover lift), cards (with three-part hover), modals, navigation (frosted glass), forms, alerts, badges, toasts, tables, unique HL patterns, Web3 components, icons & illustrations
references/polish.md	V2 visual polish: gradient accent bar, frosted glass navbar, card/button hover animations, ambient glows, background patterns (grid/dot), glow blobs, gradient text, section labels, micro-animations, dark section treatment, color-coded meaning, responsive clamp values, polish checklist
references/mobile-ux.md	Mobile nav, typography scale, buttons, cards, forms, bottom sheets, tables, spacing, gestures, safe areas, performance, bottom nav bar, toasts, loading, search, orientation, sticky headers, accessibility, FAB, AI agent interface, Web3 mobile patterns
horizenlabs-design-system.html	Visual HTML reference (33 sections)

14. HTML Reference Sections

#	Section	Key Components
1	Brand Colors	Primary, semantic, status swatches
2	Extended Color Palette	Teal, Navy, Magenta 50-900 scales
3	Gradients	Brand, brand-reverse gradients
4	Typography Scale	All heading/body/subheading styles
5	Spacing System	4px-200px visual tokens
6	Shadow Elevation	4 shadow levels rendered
7	Border Radius	none, sm, md examples
8	Buttons — Primary & Secondary	Sharp rectangle, all states
9	Buttons — Teal & Ghost	Teal fill, ghost outline variants
10	Buttons — Link & Arrow Box	Link with arrow-box pattern
11	Cards — Standard & Grey	White/grey bg, teal-light hover
12	Cards — Teal & Dark	Teal-border and navy bg variants
13	Cards — Expertise & Blog	330px expertise, borderless blog
14	Cards — Research & Horizontal	Research horizontal layout
15	Navigation	White bg, uppercase links, navy CTA block
16	Mobile Navigation	Fullscreen navy overlay
17	Form Inputs	Text, select, textarea, sharp corners
18	Newsletter Combo	Input + button combo pattern
19	Alerts	Left-border style, 4 status variants
20	Badges	Sharp, uppercase, 6 variants
21	Modals	Sharp corners, navy overlay
22	Toasts	Navy bg, sharp, uppercase
23	Tables	Teal header underline, teal-light hover
24	Numbered List Items	Grey-light bg, "01"/"02" format
25	Left-Border Tabs	6px border, teal active
26	Accordion	Azeret Mono, + to x rotation
27	Wallet Connection Modal	36x36 icon box, teal hover
28	Transaction Modals	Pending, success, error states
29	Network Badge & Address	Sharp badge, Azeret Mono address
30	Avatars	SHARP SQUARE, navy bg, initials
31	Footer	Teal background, multi-column
32	Stats & Testimonials	Large numbers, quote cards
33	Icons & Illustrations	44 icons, 29 illustrations, SVG sprites

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
horizenlabs-design-system.html	Visual HTML reference (33 sections)