Skip to main content
Version: Endpoint V2

LayerZero Design System

A unified design language for LayerZero documentation and developer tools.

Core Principles​

1. Clean & Modern​

  • Minimal visual clutter
  • Clear information hierarchy
  • Purposeful use of space

2. Consistent Spacing​

  • Use the spacing scale for all margins and padding
  • Maintain visual rhythm throughout

3. Clear Hierarchy​

  • Typography that guides the eye
  • Proper heading levels for accessibility
  • Visual weight that matches importance

4. Subtle Interactions​

  • Smooth transitions (0.2s ease)
  • Gentle hover effects
  • Meaningful state changes

Design Tokens​

Colors​

Already defined in custom.scss:

  • Primary: var(--tc-primary) - Main text color
  • Secondary: var(--tc-secondary) - Supporting text
  • Tertiary: var(--tc-tertiary) - Subtle text
  • Accent: var(--tc-accent-3) - LayerZero purple (#6366f1)
  • Backgrounds: var(--bc-main), var(--bc-secondary), etc.

Spacing Scale​

--lz-space-1: 4px; // Tight spacing
--lz-space-2: 8px; // Small gaps
--lz-space-3: 12px; // Default small spacing
--lz-space-4: 16px; // Default medium spacing
--lz-space-5: 20px; // Medium gaps
--lz-space-6: 24px; // Large gaps
--lz-space-7: 32px; // Section spacing
--lz-space-8: 40px; // Large section spacing
--lz-space-9: 48px; // Extra large spacing
--lz-space-10: 64px; // Page sections
--lz-space-11: 80px; // Major sections

Border Radius​

--lz-radius-sm: 4px; // Small elements
--lz-radius-md: 6px; // Default radius
--lz-radius-lg: 8px; // Cards, containers
--lz-radius-xl: 12px; // Large cards
--lz-radius-2xl: 16px; // Extra large
--lz-radius-full: 9999px; // Pills, badges

Shadows​

--lz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--lz-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
--lz-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
--lz-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
--lz-shadow-accent: 0 4px 12px rgba(139, 92, 246, 0.3);

Typography​

// Headings
--lz-h1-font-size: 28px;
--lz-h2-font-size: 24px;
--lz-h3-font-size: 20px;
--lz-h4-font-size: 18px;
--lz-h5-font-size: 16px;
--lz-h6-font-size: 14px;

// Body text
--lz-p1-font-size: 16px;
--lz-p2-font-size: 14px;
--lz-caption-font-size: 12px;

Component Patterns​

Cards​

.lz-card {
  background: var(--bc-main);
  border: 1px solid var(--c-divider);
  border-radius: var(--lz-radius-lg);
  padding: var(--lz-space-6);
  transition: all var(--lz-transition-base);

  &:hover {
    border-color: var(--tc-accent-3);
    transform: translateY(-1px);
    box-shadow: var(--lz-shadow-md);
  }
}

Buttons​

Primary Button​

.lz-button--primary {
  background: var(--tc-accent-3);
  color: white;
  padding: var(--lz-space-3) var(--lz-space-6);
  border-radius: var(--lz-radius-lg);
  font-weight: 500;
  transition: all var(--lz-transition-base);

  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--lz-shadow-accent);
  }
}

Secondary Button​

.lz-button--secondary {
  background: transparent;
  color: var(--tc-primary);
  border: 1px solid var(--c-divider);
  padding: var(--lz-space-3) var(--lz-space-6);
  border-radius: var(--lz-radius-lg);

  &:hover {
    border-color: var(--tc-accent-3);
    color: var(--tc-accent-3);
  }
}

Tables​

.lz-table {
  background: var(--bc-main);
  border: 1px solid var(--c-divider);
  border-radius: var(--lz-radius-lg);
  overflow: hidden;

  th {
    background: var(--bc-secondary);
    padding: var(--lz-space-3) var(--lz-space-4);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  td {
    padding: var(--lz-space-3) var(--lz-space-4);
    border-bottom: 1px solid var(--c-divider);
  }
}

Form Elements​

.lz-input {
  padding: var(--lz-space-2) var(--lz-space-3);
  border: 1px solid var(--c-divider);
  border-radius: var(--lz-radius-md);
  background: var(--bc-main);
  transition: all var(--lz-transition-base);

  &:focus {
    border-color: var(--tc-accent-3);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
  }
}

Badges​

.lz-badge {
  padding: var(--lz-space-1) var(--lz-space-3);
  border-radius: var(--lz-radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lz-badge--primary {
  background: var(--tc-accent-3);
  color: white;
}

Interactive States​

Hover Effects​

  • Lift: transform: translateY(-1px)
  • Glow: box-shadow: var(--lz-shadow-md)
  • Color shift: Change border or text to accent color

Focus States​

  • Ring: box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1)
  • Border: border-color: var(--tc-accent-3)

Active States​

  • Pressed: transform: translateY(0)
  • Selected: Add accent border or background

Implementation Guidelines​

1. Use Design Tokens​

Always use the CSS variables instead of hard-coded values:

// ❌ Don't
padding: 16px;
border-radius: 8px;
color: #6366f1;

// ✅ Do
padding: var(--lz-space-4);
border-radius: var(--lz-radius-lg);
color: var(--tc-accent-3);

2. Consistent Spacing​

Use the spacing scale for all margins and padding:

// ❌ Don't mix arbitrary values
margin: 12px 20px 8px 16px;

// ✅ Do use consistent scale
margin: var(--lz-space-3) var(--lz-space-5) var(--lz-space-2) var(--lz-space-4);

3. Smooth Transitions​

Always include transitions for interactive elements:

transition: all var(--lz-transition-base); // 0.2s ease

4. Accessible Contrast​

Ensure sufficient contrast ratios:

  • Normal text: 4.5:1
  • Large text: 3:1
  • Interactive elements: 3:1

5. Mobile-First​

Design for mobile first, then enhance for larger screens:

.component {
  // Mobile styles first
  padding: var(--lz-space-3);

  @media (min-width: 768px) {
    // Desktop enhancements
    padding: var(--lz-space-6);
  }
}

Component Library​

  • Navbar: Clean horizontal navigation with subtle hover states
  • Sidebar: Hierarchical navigation with clear active states
  • Breadcrumbs: Minimal path indicators

Content Components​

  • Cards: Information containers with hover effects
  • Tables: Data display with sortable headers
  • Code Blocks: Syntax-highlighted code examples

Interactive Components​

  • Buttons: Primary, secondary, and ghost variants
  • Forms: Input fields, selects, and checkboxes
  • Modals: Overlay dialogs with backdrop

Feedback Components​

  • Alerts: Info, success, warning, and error states
  • Loading: Skeleton screens and spinners
  • Tooltips: Contextual help text

Best Practices​

  1. Consistency: Use the same patterns throughout the documentation
  2. Clarity: Make interactive elements obvious
  3. Performance: Use CSS transforms for animations
  4. Accessibility: Include focus states and ARIA labels
  5. Responsiveness: Test on all device sizes

Migration Guide​

To update existing components to use the design system:

  1. Replace hard-coded colors with CSS variables
  2. Update spacing to use the scale
  3. Add consistent hover and focus states
  4. Ensure proper heading hierarchy
  5. Test responsive behavior

Resources​