/components

Horizen Components — Full Reference

Buttons

Shape: Always pill — border-radius: 9999px (no exceptions). Font: Proxima Nova, 600 weight, 16px. Padding: 12px 32px default, 10px 24px small, 16px 40px large. Transition: all var(--hz-transition-fast).

Variants

Variant	Background	Text	Border
Primary	--hz-yellow	--hz-black	none
Secondary	transparent	--hz-black	2px solid --hz-black
Dark	--hz-white	--hz-black	none
Ghost	transparent	--hz-blue	none
Text	transparent	--hz-blue	none (underline on hover)
Icon	transparent	--hz-black	none, 44x44px circle

States

State	Primary	Secondary
Default	--hz-yellow bg	Outlined
Hover	--hz-yellow-hover bg, --hz-shadow-sm	--hz-black bg, --hz-white text
Active	--hz-yellow-active bg, scale(0.98)	--hz-black bg, scale(0.98)
Disabled	opacity 0.5, pointer-events none	opacity 0.5, pointer-events none
Focus	outline: 2px solid --hz-yellow; offset: 2px	Same
Loading	Spinner icon replaces text, same bg	Same

Button CSS Pattern

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hz-space-2);
  padding: 12px 32px;
  border-radius: var(--hz-radius-full);
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--hz-transition-fast);
  border: none;
}
.btn-primary {
  background: var(--hz-yellow);
  color: var(--hz-black);
}
.btn-primary:hover {
  background: var(--hz-yellow-hover);
  box-shadow: var(--hz-shadow-sm);
}

Cards

Background: --hz-white (light) or --hz-black (dark variant). Border: 1px solid var(--hz-line-grey) (light), none (dark). Padding: var(--hz-space-6) (24px). Border radius: var(--hz-radius-lg) (12px). Hover: box-shadow: var(--hz-shadow-md); transform: translateY(-2px). Transition: all var(--hz-transition-normal).

Card Variants

Variant	Background	Border	Notes
Standard	--hz-white	1px solid --hz-line-grey	Default card
Dark	--hz-black-light	none	Light text, for dark sections
Feature	--hz-white	1px solid --hz-line-grey	Icon top, title, description
Image	--hz-white	1px solid --hz-line-grey	Image top with border-radius: 12px 12px 0 0
Stat	--hz-white	1px solid --hz-line-grey	Large number, label below

Card CSS Pattern

.card {
  background: var(--hz-white);
  border: 1px solid var(--hz-line-grey);
  border-radius: var(--hz-radius-lg);
  padding: var(--hz-space-6);
  transition: all var(--hz-transition-normal);
}
.card:hover {
  box-shadow: var(--hz-shadow-md);
  transform: translateY(-2px);
}
.card-dark {
  background: var(--hz-black-light);
  border: none;
  color: var(--hz-white);
}

Modals

Overlay: background: rgba(3, 14, 36, 0.6); backdrop-filter: blur(4px). Width: 480px default, 640px large, 90vw mobile. Padding: var(--hz-space-8) (32px). Border radius: var(--hz-radius-xl) (16px). Shadow: var(--hz-shadow-xl). Close button: Top-right, 44x44px touch target, X icon. Animation: fadeIn overlay + slideUp content, 300ms. Z-index: var(--hz-z-modal) (400).

Modal Variants

Variant	Description
Standard	Title, body content, action buttons
Confirmation	Icon, title, message, confirm/cancel buttons
Form	Title, form fields, submit/cancel buttons
Full-screen (mobile)	position: fixed; inset: 0 on mobile breakpoints

Modal CSS Pattern

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 14, 36, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--hz-z-modal);
  animation: fadeIn var(--hz-transition-normal);
}
.modal {
  background: var(--hz-white);
  border-radius: var(--hz-radius-xl);
  padding: var(--hz-space-8);
  max-width: 480px;
  width: 90vw;
  box-shadow: var(--hz-shadow-xl);
  animation: slideUp var(--hz-transition-normal);
}

Navigation

Background: var(--hz-black). Height: 72px desktop, 64px mobile. Logo: Left-aligned, Horizen wordmark in white. Links: Proxima Nova, 16px, 600 weight, white, hover opacity 0.8. CTA: Primary button (yellow pill), right-aligned. Mobile: Hamburger icon (right), triggers fullscreen overlay. Position: sticky; top: 0. Z-index: var(--hz-z-nav) (200). Border bottom: 1px solid rgba(255, 255, 255, 0.1).

Navigation CSS Pattern

.nav {
  position: sticky;
  top: 0;
  background: var(--hz-black);
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 var(--hz-space-10);
  z-index: var(--hz-z-nav);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

Form Inputs

Height: 48px (single-line inputs). Border: 1px solid var(--hz-line-grey). Border radius: var(--hz-radius-md) (8px). Padding: 12px 16px. Font: Proxima Nova, 16px, 400 weight. Transition: border-color var(--hz-transition-fast).

Input States

State	Style
Default	border: 1px solid --hz-line-grey
Focus	border-color: --hz-blue; box-shadow: 0 0 0 3px rgba(16, 56, 187, 0.12)
Error	border-color: --hz-error; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12)
Disabled	opacity: 0.5; background: --hz-grey; pointer-events: none

Dark Variant Inputs

.input-dark {
  background: var(--hz-black-light);
  border-color: var(--hz-black-lighter);
  color: var(--hz-white);
}
.input-dark:focus {
  border-color: var(--hz-yellow);
  box-shadow: 0 0 0 3px rgba(254, 203, 23, 0.2);
}

Form Elements

• Select: Same as input + chevron icon right.
• Textarea: Same border/radius, min-height 120px, resize vertical.
• Toggle: 48x24px track, 20px circle thumb, yellow when active.
• Checkbox: 20x20px, 4px radius, yellow check when active.
• Radio: 20x20px circle, yellow dot when active.
• Label: Proxima Nova, 14px, 600 weight, 4px margin-bottom.
• Error text: 14px, --hz-error color, 4px margin-top.

Alerts

Layout: Full-width, flex row, icon left, text center, close right. Padding: 16px. Border radius: var(--hz-radius-md) (8px). Border-left: 4px solid status color.

Variant	Background	Border-left	Icon
Success	--hz-success-bg	--hz-success	Checkmark circle
Error	--hz-error-bg	--hz-error	X circle
Warning	--hz-warning-bg	--hz-warning	Triangle exclamation
Info	--hz-info-bg	--hz-info	Info circle

Alert CSS Pattern

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--hz-space-3);
  padding: var(--hz-space-4);
  border-radius: var(--hz-radius-md);
  border-left: 4px solid;
}
.alert-success {
  background: var(--hz-success-bg);
  border-left-color: var(--hz-success);
}

Badges

Shape: Pill — border-radius: 9999px. Font: Proxima Nova, 12px, 700 weight, text-transform: uppercase, letter-spacing: 0.05em. Padding: 4px 12px.

Variant	Background	Text
Default	--hz-grey	--hz-black
Yellow	--hz-yellow-muted	--hz-yellow-800
Blue	--hz-blue-light	--hz-blue
Success	--hz-success-bg	--hz-success
Error	--hz-error-bg	--hz-error
Warning	--hz-warning-bg	--hz-warning
Dark	--hz-black	--hz-white

Tables

Width: 100%. Header: background: --hz-grey, Proxima Nova 12px 700 uppercase, letter-spacing: 0.05em, padding: 12px 16px. Body rows: padding: 16px, border-bottom: 1px solid --hz-line-grey. Row hover: background: --hz-grey. Sortable: Chevron icon in header, active column highlighted. Responsive: Horizontal scroll wrapper on mobile or collapse to card layout.

Table CSS Pattern

.table { width: 100%; border-collapse: collapse; }
.table th {
  background: var(--hz-grey);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  text-align: left;
}
.table td { padding: 16px; border-bottom: 1px solid var(--hz-line-grey); }
.table tr:hover td { background: var(--hz-grey); }

Web3 Components

Wallet Connection Modal

• Trigger: "Connect Wallet" primary button in nav
• Modal: Standard modal (480px), title "Connect Wallet"
• Wallet list: Vertical stack, each wallet row:
  • 48px icon (left), wallet name (center), arrow icon (right)
  • padding: 16px; border: 1px solid --hz-line-grey; border-radius: 8px
  • Hover: background: --hz-grey
• Popular wallets first: MetaMask, WalletConnect, Coinbase Wallet, etc.
• Loading state: Spinner + "Connecting to [wallet]..." after selection
• Error state: Red alert with retry button

Transaction Modals

Pending:

• Spinner animation (spin, 48px, --hz-yellow)
• Title: "Transaction Pending"
• Hash display (truncated, copy button)
• "View on Explorer" link (blue)

Success:

• Green checkmark circle (48px, --hz-success)
• Title: "Transaction Successful"
• Hash + amount details
• "View on Explorer" link + "Close" button

Error:

• Red X circle (48px, --hz-error)
• Title: "Transaction Failed"
• Error message in --hz-error text
• "Try Again" primary button + "Close" ghost button

Details:

• Label-value pairs: From, To, Amount, Gas, Hash
• Labels: 14px, --hz-grey-dark; Values: 16px, --hz-black
• Monospace font for addresses/hashes

Network Badge

• Shape: Pill badge
• Layout: Status dot (8px circle) + chain name
• Connected: Dot is --hz-success green
• Wrong network: Dot is --hz-warning amber, "Switch Network" text
• Disconnected: Dot is --hz-error red
• Padding: 6px 12px
• Background: --hz-grey (light) or --hz-black-lighter (dark)

Address Display

• Font: Monospace, 14px
• Truncation: 0x1234...5678 (first 6, last 4 characters)
• Copy button: Clipboard icon (16px), tooltip "Copied!" on click
• Layout: Inline-flex, gap 8px
• Full address on hover/click optional tooltip

Avatars (Token/Wallet)

• Shape: Circle, border-radius: 50%
• Sizes: 24px (small), 32px (medium), 40px (large), 48px (XL)
• Border: 2px solid --hz-white (for overlapping/stacking)
• Fallback: First letter centered, --hz-grey background
• Token pair: Second token offset -8px margin-left, stacked via z-index
• Chain icon: Small (16px) circle badge, positioned bottom-right of avatar