/components

Horizen Labs Components

Buttons

Core rule: ALL buttons are sharp rectangles — border-radius: 0. NEVER use pill or rounded buttons.

Base Button Styles

.hl-btn {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  padding: 20px 30px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  transition: var(--hl-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

Variants

Variant	Background	Text	Border	Hover
Primary	--hl-navy	--hl-white	none	--hl-teal bg, --hl-navy text
Secondary	transparent	--hl-navy	2px solid --hl-navy	--hl-navy bg, white text
Teal	--hl-teal	--hl-navy	none	--hl-teal-text bg
Ghost	transparent	--hl-navy	1px solid --hl-grey	--hl-grey-light bg
Link	transparent	--hl-teal-text	none	underline + arrow-box hover

Button States

• Hover: Background shift + translateY(-2px) lift + shadow escalation to --hl-shadow-lg
• Active: Slightly darker bg, translateY(0) (pressed)
• Disabled: opacity: 0.5; cursor: not-allowed; transform: none (no lift)
• Focus: outline: 2px solid var(--hl-teal); outline-offset: 2px

Button Hover (V2 Polish)

.hl-btn-primary:hover {
  background: var(--hl-teal);
  color: var(--hl-navy);
  transform: translateY(-2px);
  box-shadow: var(--hl-shadow-lg);
}
.hl-btn-secondary:hover {
  background: var(--hl-navy);
  color: var(--hl-white);
  transform: translateY(-2px);
}

Key rule: Primary hover flips from navy bg/white text to teal bg/navy text — a high-contrast color shift that provides strong visual feedback. Every button variant gets translateY(-2px) on hover. Disabled buttons must override with transform: none.

Arrow Box Pattern

Used with link buttons and card CTAs. A square icon container with a directional chevron.

.hl-arrow-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 2px solid currentColor;
  border-radius: 0;
  position: relative;
}

.hl-arrow-box::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: -2px;
}

Hover behavior: Arrow translates slightly right, box border color shifts to teal.

Cards

Core rule: ALL cards are sharp rectangles — border-radius: 0.

Base Card

.hl-card {
  background: var(--hl-white);
  border: 1px solid var(--hl-border);
  border-radius: 0;
  padding: 20px;
  box-shadow: var(--hl-shadow-sm);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.hl-card:hover {
  transform: translateY(-4px);
  border-color: var(--hl-border-hover);
  box-shadow: var(--hl-shadow-card-hover);
}

Card Hover — V2 Three-Part Effect

Every card uses a three-part hover: lift + shadow escalation + accent reveal.

Left-border reveal (feature cards):

.hl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--hl-teal), var(--hl-magenta));
  transition: height 0.4s ease;
}
.hl-card:hover::before { height: 100%; }

Bottom-border reveal (reason/info cards):

.hl-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hl-teal), var(--hl-magenta));
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}
.hl-card:hover::after { transform: scaleX(1); }

Key rules:

• Lift: translateY(-4px) to translateY(-6px) depending on card size
• Shadow: --hl-shadow-sm → --hl-shadow-card-hover
• Border reveal: always uses teal→magenta gradient
• Reveal timing: 0.4s ease (slightly slower than the lift for staggered feel)
• Choose left-border OR bottom-border per card type, not both

Card Variants

Variant	Background	Border	Hover	Special
Standard	--hl-white	1px --hl-grey-input	--hl-teal-light bg	Default shadow
Grey	--hl-grey-light	none	--hl-teal-light bg	No shadow
Teal	--hl-white	2px --hl-teal	--hl-teal-light bg	Teal border accent
Dark	--hl-navy	none	--hl-navy-hover bg	White text, rare usage
Expertise	--hl-white	1px --hl-grey-input	--hl-teal-light bg	Fixed width 330px
Blog	--hl-white	none	--hl-teal-light bg	No border, image top
Research	--hl-white	1px --hl-grey-input	--hl-teal-light bg	Horizontal layout

Card Content Pattern

[Optional Image — sharp, no border-radius]
[Badge — sharp, uppercase]
[Title — Azeret Mono, bold]
[Description — Roboto, grey-text]
[Link with Arrow Box]

Modals

.hl-modal-overlay {
  background: rgba(4, 23, 66, 0.7);
  z-index: var(--hl-z-modal);
}
.hl-modal {
  background: var(--hl-white);
  border-radius: 0;
  max-width: 480px;
  width: 90%;
  padding: 40px;
  box-shadow: var(--hl-shadow-lg);
}
.hl-modal-title {
  font-family: 'Azeret Mono', monospace;
  font-weight: 700;
  font-size: 22px;
  color: var(--hl-navy);
}
.hl-modal-close {
  width: 25px;
  height: 25px;
  border: 2px solid var(--hl-grey);
  border-radius: 0;
  background: none;
  cursor: pointer;
}

Navigation

Key difference: Navigation uses WHITE/frosted background (not dark like other brands).

.hl-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  position: fixed;
  top: 3px;  /* Below gradient accent bar */
  left: 0; right: 0;
  z-index: var(--hl-z-nav);
  border-bottom: 1px solid var(--hl-border);
}

/* Gradient accent bar sits ABOVE the navbar */
.hl-gradient-accent {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hl-magenta), var(--hl-teal));
  z-index: 1000;
}
.hl-nav-link {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--hl-navy);
  text-decoration: none;
}
.hl-nav-link:hover {
  color: var(--hl-teal-text);
}

Nav CTA — Integrated Navy Block

.hl-nav-cta {
  background: var(--hl-navy);
  color: var(--hl-white);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  padding: 0 30px;
  height: 80px;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 0;
  margin-right: -40px; /* Flush with nav edge */
}

Form Inputs

.hl-input {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  padding: 18px 30px;
  border: 1px solid var(--hl-grey-input);
  border-radius: 0;
  background: var(--hl-white);
  color: var(--hl-navy);
  width: 100%;
  transition: var(--hl-transition-fast);
}
.hl-input:focus {
  border-color: var(--hl-teal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 223, 221, 0.2);
}
.hl-input::placeholder {
  color: var(--hl-grey);
}
.hl-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--hl-grey-text);
  margin-bottom: 8px;
  display: block;
}

Newsletter Combo Input

.hl-newsletter-combo {
  display: flex;
  border: 1px solid var(--hl-grey-input);
  border-radius: 0;
}
.hl-newsletter-combo .hl-input {
  border: none;
  flex: 1;
}
.hl-newsletter-combo .hl-btn {
  border-radius: 0;
  white-space: nowrap;
}

Alerts

Style: Left-border alerts — 4px solid left border with status color, status color bg at 12%.

.hl-alert {
  padding: 16px 20px;
  border-radius: 0;
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hl-alert-success {
  border-color: var(--hl-success);
  background: rgba(16, 185, 129, 0.12);
}
.hl-alert-error {
  border-color: var(--hl-error);
  background: rgba(239, 68, 68, 0.12);
}
.hl-alert-warning {
  border-color: var(--hl-warning);
  background: rgba(245, 158, 11, 0.12);
}
.hl-alert-info {
  border-color: var(--hl-info);
  background: rgba(59, 130, 246, 0.12);
}

Badges

.hl-badge {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 2px solid;
  border-radius: 0;
  display: inline-block;
}

Badge Variants

Variant	Background	Border	Text
Default	transparent	--hl-navy	--hl-navy
Teal	--hl-teal-badge-bg	--hl-teal	--hl-teal-text
Magenta	rgba(242,81,234,0.12)	--hl-magenta	--hl-magenta
Success	rgba(16,185,129,0.12)	--hl-success	--hl-success
Error	rgba(239,68,68,0.12)	--hl-error	--hl-error
Grey	--hl-grey-light	--hl-grey	--hl-grey-text

Toasts

.hl-toast {
  background: var(--hl-navy);
  color: var(--hl-white);
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 16px 24px;
  border-radius: 0;
  box-shadow: var(--hl-shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: var(--hl-z-toast);
}

Tables

.hl-table {
  width: 100%;
  border-collapse: collapse;
}
.hl-table th {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--hl-navy);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--hl-teal);
}
.hl-table td {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hl-grey-input);
  color: var(--hl-navy);
}
.hl-table tr:hover td {
  background: var(--hl-teal-light);
}

Unique Horizen Labs Patterns

Numbered List Items

.hl-numbered-item {
  background: var(--hl-grey-light);
  padding: 25px;
  border-radius: 0;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.hl-numbered-item-number {
  font-family: 'Azeret Mono', monospace;
  font-weight: 700;
  font-size: 22px;
  color: var(--hl-teal-text);
  min-width: 40px;
}
/* Number format: "01", "02", "03" — always two digits */

Left-Border Tabs

.hl-tab {
  font-family: 'Azeret Mono', monospace;
  font-weight: 700;
  font-size: 22px;
  color: var(--hl-grey);
  padding: 16px 24px;
  border-left: 6px solid transparent;
  cursor: pointer;
  transition: var(--hl-transition-fast);
}
.hl-tab:hover {
  color: var(--hl-navy);
  border-color: var(--hl-grey);
}
.hl-tab.active {
  color: var(--hl-navy);
  border-color: var(--hl-teal);
}

Accordion

.hl-accordion-header {
  font-family: 'Azeret Mono', monospace;
  font-weight: 700;
  font-size: 22px;
  color: var(--hl-navy);
  padding: 20px 0;
  border-bottom: 1px solid var(--hl-grey-input);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.hl-accordion-header:hover {
  color: var(--hl-teal-text);
}
.hl-accordion-icon {
  font-size: 24px;
  transition: var(--hl-transition-normal);
}
/* Closed: "+" icon. Open: rotates to "x" (45deg rotation) */
.hl-accordion-header.open .hl-accordion-icon {
  transform: rotate(45deg);
}
.hl-accordion-body {
  padding: 20px 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--hl-grey-text);
}

Web3 Components

Wallet Connection Modal

.hl-wallet-modal {
  background: var(--hl-white);
  border-radius: 0;
  max-width: 480px;
  padding: 40px;
}
.hl-wallet-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--hl-grey-input);
  border-radius: 0;
  cursor: pointer;
  transition: var(--hl-transition-fast);
}
.hl-wallet-option:hover {
  background: var(--hl-teal-light);
  border-color: var(--hl-teal);
}
.hl-wallet-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl-wallet-status {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

Transaction Modals

.hl-tx-modal {
  background: var(--hl-white);
  border-radius: 0;
  max-width: 480px;
  padding: 40px;
  text-align: center;
}
.hl-tx-hash {
  font-family: 'Azeret Mono', monospace;
  font-size: 13px;
  color: var(--hl-grey-text);
  background: var(--hl-grey-light);
  padding: 8px 12px;
  border-radius: 0;
  word-break: break-all;
}

Network Badge

.hl-network-badge {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 2px solid var(--hl-teal);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hl-network-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%; /* One of the few round elements */
  background: var(--hl-success);
}

Address Display

.hl-address {
  font-family: 'Azeret Mono', monospace;
  font-size: 14px;
  color: var(--hl-navy);
  background: var(--hl-grey-light);
  padding: 10px 16px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hl-address-copy {
  width: 25px;
  height: 25px;
  border: 2px solid var(--hl-grey);
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

Avatars

CRITICAL: Avatars are SHARP SQUARES, not circles. This is a key brand distinction.

.hl-avatar {
  width: 40px;
  height: 40px;
  background: var(--hl-navy);
  border-radius: 0; /* SQUARE, not circle */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hl-white);
  font-family: 'Azeret Mono', monospace;
  font-weight: 700;
  font-size: 14px;
}
/* Sizes: sm 32px, md 40px, lg 56px, xl 72px */

Icons & Illustrations

Icon Library

• 44 icons in SVG sprite format
• viewBox="0 0 76 76" for each icon
• Display size: 25x25px
• Default fill: #041742 (navy)
• Grid class: .hl-icon-grid
• Item class: .hl-icon-item

Complete Icon List (44)

arrow-right, arrow-left, arrow-up, arrow-down, chevron-right, chevron-left, chevron-up, chevron-down, close, menu, search, settings, home, user, users, mail, phone, link, external-link, copy, check, plus, minus, edit, trash, download, upload, filter, sort, calendar, clock, globe, lock, unlock, eye, eye-off, code, terminal, database, server, shield, zap, layers, grid

Illustration Library

• 29 illustrations in SVG sprite format
• viewBox="0 0 152 152" for each illustration
• Display size: 70x70px
• IDs: #illus-1 through #illus-29

Icon Tile Pattern

.hl-icon-tile {
  width: 70px;
  height: 70px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl-icon-tile--mint {
  background: var(--hl-teal-light);
}
.hl-icon-tile--teal {
  background: var(--hl-teal);
}

Icon Usage Rules

1. Use SVG sprite with <use> pattern:

   <svg class="hl-icon" width="25" height="25">
     <use href="#icon-arrow-right"></use>
   </svg>
   

2. Include hidden sprite after opening <body> tag.
3. Icons inherit fill from parent via currentColor.
4. Labels below icons use uppercase + letter-spacing.
5. Always include aria-hidden="true" on decorative icons.
6. Use aria-label on interactive icon-only buttons.

V2 Polish — Interaction, Animation & Visual Depth

Ambient Glow Effects

Soft glows around interactive and status elements:

/* Teal glow on active progress dots */
.step-active .progress-dot {
  box-shadow: 0 0 16px rgba(76, 223, 221, 0.4);
}

/* Status dot glow */
.status-dot.online {
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* Spinner glow */
.spinner-large {
  box-shadow: 0 0 24px rgba(76, 223, 221, 0.3);
}

/* Teal shadow token for balloons/tooltips */
--shadow-teal: 0 4px 24px rgba(76, 223, 221, 0.15);

Rules:

• Glows use the associated element's color at 15–40% opacity
• Glows are additive (via box-shadow), never replace structural shadows
• Only use glows on interactive or status elements, not on static content

Background Patterns

Subtle grid and dot patterns add texture to sections without competing with content:

Grid Background

.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(4, 23, 66, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 23, 66, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

Dot Pattern

.dot-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(4, 23, 66, 0.1) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 50% 60% at 50% 30%, black 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

Dark Variant (on navy backgrounds)

.dark-section .grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}

Rules:

• Always apply a radial mask-image so patterns fade out toward edges
• Use on hero sections and feature sections, not on every section
• Grid size: 60px, dot spacing: 24px
• Never exceed 0.1 opacity for patterns

Ambient Glow Blobs

Large blurred circles placed behind hero content create atmosphere:

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

/* Typical placement */
.hero .glow-teal { width: 700px; height: 700px; background: rgba(76, 223, 221, 0.08); top: 5%; right: -15%; }
.hero .glow-magenta { width: 600px; height: 600px; background: rgba(242, 81, 234, 0.05); bottom: 5%; left: -15%; }

Rules:

• Max 2 glow blobs per section
• Teal blob: 6–8% opacity, Magenta blob: 4–6% opacity
• Position partially offscreen (-5% to -15%)
• Always z-index: 0, content must have z-index: 1
• Blur: 120px

Gradient Text

Use for hero headings or emphasis words — sparingly:

.gradient-text {
  background: linear-gradient(135deg, var(--hl-teal-text) 0%, var(--hl-magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Rules:

• Only on 1–3 key words per page, never full paragraphs
• Prefer the teal→magenta direction
• Ensure surrounding text stays navy for contrast

Section Label Pattern

A consistent label format used above every section heading:

.section-label {
  font-family: var(--hl-font-heading);  /* Azeret Mono */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--hl-teal-text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--hl-teal);
}

Rules:

• Every section starts with: [teal dash] SECTION LABEL → heading → optional subhead
• Labels are 11px, 4px letter-spacing, uppercase
• The ::before dash is 24px wide, 1px tall, teal

Hero Eyebrow

A centered decorative label with gradient dashes on both sides:

.hero-eyebrow {
  font-family: var(--hl-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--hl-teal-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hero-eyebrow::before { content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--hl-teal)); }
.hero-eyebrow::after  { content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, var(--hl-teal), transparent); }

Micro-Animations

Log Entry Blink (attention pulse)

.log-entry.highlight {
  border-left-color: var(--hl-teal);
  background: rgba(76, 223, 221, 0.05);
  animation: log-blink 0.6s ease 3;
}

@keyframes log-blink {
  0%, 100% { background: rgba(76, 223, 221, 0.05); }
  50% { background: rgba(76, 223, 221, 0.15); }
}

Pulse Text (processing indicator)

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* Usage: animation: pulse-text 2s ease-in-out infinite; */

Animated Arrow Dots (data flow visualization)

.arrow-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  animation: arrow-move 1s ease-in-out infinite alternate;
}

.arrow-dot.teal { background: var(--hl-teal); box-shadow: 0 0 16px var(--hl-teal); }
.arrow-dot.magenta { background: var(--hl-magenta); box-shadow: 0 0 16px var(--hl-magenta); }

@keyframes arrow-move { from { left: 0; } to { left: calc(100% - 12px); } }

Animation Rules

• Attention pulses: 3 repetitions max, then stop
• Processing indicators: infinite, slow (2s)
• Data flow dots: infinite, 1s, ease-in-out
• Always respect prefers-reduced-motion: reduce

Dark Section Treatment

For sections on navy backgrounds (architecture diagrams, demo panels):

.dark-section {
  background: var(--hl-navy-deep);  /* #020e2b — slightly darker than navy */
}

/* Frosted glass cards within dark sections */
.dark-section .card {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
}

.dark-section .card:hover {
  border-color: var(--hl-teal);
  box-shadow: 0 0 40px rgba(76, 223, 221, 0.2);
}

Rules:

• Dark sections use rgba(255,255,255,*) for borders and text (not named colors)
• Text hierarchy: 0.9 for headings, 0.6 for body, 0.4 for labels, 0.15 for borders
• Grid backgrounds switch to white lines at 0.04 opacity
• Dark sections are rare — use for architecture diagrams, demo panels, stats strips

Color-Coded Meaning System

Use consistent color coding for semantic categories:

Color	Meaning	Examples
Navy (#041742)	User/system, primary actions	Buyer column, buttons, headings
Teal (#4CDFDD)	Platform/TEE, active states	Vela column, active dots, highlights
Magenta (#F251EA)	Accent, gradients, special emphasis	Seller column, gradient endpoints
Specific blues (#6C8EFF)	Buyer-specific UI elements	Buyer header dots

Rules:

• In multi-actor UIs, assign each actor a distinct color from the palette
• Color-coded elements include: header dots (8x8px squares), border accents, glow colors
• Never use color as the only differentiator — pair with labels

Custom Scrollbar

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(4, 23, 66, 0.15); }
::-webkit-scrollbar-thumb:hover { background: rgba(4, 23, 66, 0.25); }

Responsive Clamp Values

Instead of rigid breakpoints for type and spacing, use clamp():

/* Heading sizes */
font-size: clamp(28px, 4vw, 48px);   /* Section headings */
font-size: clamp(36px, 6vw, 72px);   /* Hero h1 */
font-size: clamp(32px, 5vw, 56px);   /* Page hero h1 */

/* Section padding */
padding: clamp(60px, 10vw, 120px) 0;

/* Content container */
padding: 0 clamp(20px, 4vw, 48px);

Rules:

• clamp() for all heading font sizes and section padding
• Use vw as the preferred unit (2vw–6vw range)
• Keep the minimum large enough for mobile readability

Polish Checklist

When building any new page, ensure these are present:

• Gradient accent bar at top
• Frosted glass navbar
• Background patterns (grid or dot) on hero/feature sections
• Ambient glow blobs on hero sections
• Section labels with teal dash prefix
• Card hover: lift + shadow escalation + gradient accent reveal
• Button hover: translateY(-2px) + shadow lift
• Gradient text on 1–3 hero emphasis words
• Dark sections for technical/architecture content
• prefers-reduced-motion respected
• Custom scrollbar styling
• Footer mirrors the gradient accent bar at top