# Hyperbolic — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://hyperbolic.xyz/
Captured: 2026-10-29
CSS measured: 2026-10-29T17:16:14.588Z at 1440×1000 — https://www.hyperbolic.ai/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The website presents a minimal and technological design, leveraging a predominantly monochrome palette with strategic purple accents. Typography is clean, relying on 'geist' for readability and 'mono' for technical details, enforcing a structured, systematic feel. The layout makes heavy use of whitespace and thin grid lines to organize content, complementing the abstract, geometric line-art graphics that mutate on scroll. Key components include a sticky navigation bar, a logo marquee for social proof, and expandable FAQ accordions to manage information density. The overall aesthetic is precise and modern, targeting a technical audience.

## Classification

- Industry: ai
- Site type: Landing, Blog
- Business model: Software
- Styles: minimal, corporate, typographic, illustrative, technical
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Display: geist — weight 400; size 78px; line-height 78px; tracking -3.9px; Regular (85% role confidence, computed values)
- Heading: geist — weight 400; size 48px; line-height 50.4px; tracking -1.2px; Regular (90% role confidence, computed values)
- Body: geist — weight 400; size 16px; line-height 25.6px; tracking normal; Regular (85% role confidence, computed values)
- Mono: mono — weight 400; size 12px; line-height 12px; tracking 1px; uppercase (90% role confidence, computed values)

## Functional palette

- Text — text #000000: color-1: computed rgb(0, 0, 0); AI role: Primary black color used for headings and main body text. (95% role confidence, computed values)
- Primary Action — primary action #5B25D4: color-5: computed rgb(91, 37, 212); AI role: Vibrant purple used for main call-to-action buttons like 'Get Started' and 'Deploy GPU Clusters'. (95% role confidence, computed values)
- Canvas — canvas #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: Primary white background color used across most sections of the page. (90% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "24px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "250K+ Engineers",
        "top": 5602,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Minutes, Not Weeks",
        "top": 5602,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Zero Quota Limit",
        "top": 5602,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "48px",
    "lineHeight": "50.4px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h2",
        "text": "Hyperbolic makes it simple to buy, sell, resell, manage, and orchestrate compute",
        "top": 1356,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "simple",
        "top": 1350,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "For AI builders moving fast and pushing boundaries. For providers making every GPU count.",
        "top": 3290,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "23.4px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h6",
        "text": "From the CEO: Our $30M Round and the Next Chapter of Hyperbolic",
        "top": 7948,
        "property": "font"
      },
      {
        "tag": "h6",
        "text": "Announcing Hyperbolic’s $30M Series A1 Funding",
        "top": 7948,
        "property": "font"
      },
      {
        "tag": "h6",
        "text": "GPUs are financed for years. AI workloads run for weeks",
        "top": 7948,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "Spend more time building AI. Less time managing compute.",
        "top": 3575,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Move from idea to experiment faster.",
        "top": 3847,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Bring more compute options into one operating environment.",
        "top": 4119,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "36px",
    "lineHeight": "37.8px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "On-Demand GPU Clusters, Without the Complexity",
        "top": 2179,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Run Leading AI Models",
        "top": 2762,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "32px",
    "lineHeight": "36.8px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "On-Demand GPU Compute",
        "top": 1708,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 35,
    "contexts": [
      {
        "tag": "p",
        "text": "Rent GPUs for experimentation, fine-tuning, inference, and production through one platform. Start wi",
        "top": 3609,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Find the hardware and cluster configuration your research needs without lengthy procurement cycles. ",
        "top": 3881,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Source GPU cloud capacity across providers, hardware configurations, and regions through a single pl",
        "top": 4153,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "mono",
    "fontStack": "mono, \"mono Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 21,
    "contexts": [
      {
        "tag": "label",
        "text": "On-Demand GPUs",
        "top": 2151,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Inference",
        "top": 2734,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "Who it's for",
        "top": 3262,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "25.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 19,
    "contexts": [
      {
        "tag": "p",
        "text": "Hyperbolic is making global AI compute liquid for teams that need fast, flexible access to GPU compu",
        "top": 8267,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Instead of waiting on legacy cloud quotas, long procurement cycles, or rigid contracts, teams can st",
        "top": 8407,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "You can launch an on-demand GPU instance in minutes. Create an account, add a payment method, choose",
        "top": 8340,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "leveraging Hyperbolic’s AI infrastructure",
        "top": 5634,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "to deploy a cluster",
        "top": 5634,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "for GPU rentals",
        "top": 5634,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "mono",
    "fontStack": "mono, \"mono Fallback\"",
    "weight": "400",
    "size": "11px",
    "lineHeight": "11px",
    "letterSpacing": "0.9px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Products",
        "top": 103,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Company",
        "top": 287,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Schedule a Call →",
        "top": 967,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Provision H100, H200, and B200 capacity in minutes. Across providers, clusters vary in hardware, net",
        "top": 2278,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Scale from experimentation to training, fine-tuning, and inference with flexible, on-demand capacity",
        "top": 2481,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Build AI applications with leading models through an OpenAI-compatible API. Start generating without",
        "top": 2824,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "24.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Turn heterogeneous GPU compute into productive AI infrastructure. Access global capacity, manage clu",
        "top": 392,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Access NVIDIA H100, H200, and B200 GPUs for AI training, fine-tuning, and inference. Launch on-deman",
        "top": 1759,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "0.8px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Trusted by leading AI teams",
        "top": 1009,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "78px",
    "lineHeight": "78px",
    "letterSpacing": "-3.9px",
    "traits": "Regular",
    "count": 27,
    "contexts": [
      {
        "tag": "span",
        "text": "M",
        "top": 196,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "a",
        "top": 196,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "k",
        "top": 196,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "25.2px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 21,
    "contexts": [
      {
        "tag": "span",
        "text": "After adding additional models to the platform, we needed H100 capacity quickly for production infer",
        "top": 6153,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Access to compute remains one of the biggest bottlenecks for democratizing AI. Hyperbolic Labs is re",
        "top": 6153,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Hyperbolic’s speed in delivering the latest open-source models and strong commitment to the AI devel",
        "top": 6153,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "600",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "Schedule a Call",
        "top": 10,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Schedule a Call",
        "top": 56,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Get Started",
        "top": 10,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "mono",
    "fontStack": "mono, \"mono Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 1656,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 1726,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 1796,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "X",
        "top": 8921,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "LinkedIn",
        "top": 8945,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "YouTube",
        "top": 8969,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "Log In",
        "top": 26,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "socials",
        "top": 8874,
        "property": "font"
      },
      {
        "tag": "label",
        "text": "pages",
        "top": 8874,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "11.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Learn More",
        "top": 2570,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Learn More",
        "top": 2961,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Start Building",
        "top": 3733,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "GPUs",
        "top": 9,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Inference",
        "top": 9,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "About",
        "top": 9,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "On-Demand GPU Compute",
        "top": 1650,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Inference",
        "top": 1720,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Managed Kubernetes",
        "top": 1790,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "21.6px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "GPUs",
        "top": 191,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Inference",
        "top": 191,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "H100, H200, B200 on demand or reserved",
        "top": 219,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Leading models through one API",
        "top": 219,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "label",
        "text": "Email Address",
        "top": 8970,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "17px",
    "lineHeight": "25.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "About",
        "top": 310,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Docs",
        "top": 363,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Careers",
        "top": 415,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "geist",
    "fontStack": "geist, \"geist Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "See pricing",
        "top": 1898,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 203,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 21,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 28,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "GPUs",
        "top": 9,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 45,
    "contexts": [
      {
        "tag": "span",
        "text": "Get Started",
        "top": 10,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "Trusted by leading AI teamsHyperbolic makes it simple to buy, sell, resell, manage, and orchestrate ",
        "top": 1000,
        "property": "background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 8769,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#1A1A1A",
    "alpha": 0.6509803921568628,
    "cssValue": "rgba(26, 26, 26, 0.65)",
    "count": 82,
    "contexts": [
      {
        "tag": "span",
        "text": "H100, H200, B200 on demand or reserved",
        "top": 219,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 329,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 332,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F3F3F3",
    "alpha": 1,
    "cssValue": "rgb(243, 243, 243)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "High-Performance Infrastructure.Deploy GPUsDeploy GPUs",
        "top": 5104,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#5B25D4",
    "alpha": 1,
    "cssValue": "rgb(91, 37, 212)",
    "count": 57,
    "contexts": [
      {
        "tag": "div",
        "text": "Get StartedGet Started",
        "top": 9,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Products",
        "top": 103,
        "property": "::before-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 966,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "oklab(0 0 0 / 0.2)",
    "count": 14,
    "contexts": [
      {
        "tag": "div",
        "text": "Schedule a CallSchedule a Call",
        "top": 9,
        "property": "::after-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 956,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#EBEBEB",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0.949113 0.0000431836 0.0000190735 / 0.15)",
    "count": 109,
    "contexts": [
      {
        "tag": "div",
        "text": "Trusted by leading AI teams",
        "top": 1000,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 1103,
        "property": "border"
      },
      {
        "tag": "label",
        "text": "socials",
        "top": 8874,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#000000",
    "alpha": 0.12156862745098039,
    "cssValue": "color(srgb 0 0 0 / 0.12)",
    "count": 132,
    "contexts": [
      {
        "tag": "a",
        "text": "About",
        "top": 310,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "01On-Demand GPU Compute02Inference03Managed Kubernetes04Private Cloud",
        "top": 1627,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "01On-Demand GPU Compute",
        "top": 1628,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#1A1A1A",
    "alpha": 1,
    "cssValue": "rgb(26, 26, 26)",
    "count": 7,
    "contexts": [
      {
        "tag": "h2",
        "text": "High-Performance Infrastructure.",
        "top": 5260,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 9023,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#BBBBBB",
    "alpha": 1,
    "cssValue": "rgb(187, 187, 187)",
    "count": 4,
    "contexts": [
      {
        "tag": "label",
        "text": "socials",
        "top": 8874,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#000000",
    "alpha": 0.011764705882352941,
    "cssValue": "rgba(36, 36, 36, 0.01)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "GPUs",
        "top": 9,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#EBEBEB",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(238, 238, 238, 0.1)",
    "count": 1,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 9001,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#1B1B1B",
    "alpha": 0.14901960784313725,
    "cssValue": "oklab(0.217785 0.00000996143 0.00000435114 / 0.15)",
    "count": 21,
    "contexts": [
      {
        "tag": "div",
        "text": "Schedule a CallSchedule a Call",
        "top": 9,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "",
        "top": 9001,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "",
        "top": 9001,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#000000",
    "alpha": 0.1607843137254902,
    "cssValue": "color(srgb 0 0 0 / 0.16)",
    "count": 12,
    "contexts": [
      {
        "tag": "a",
        "text": "GPUsH100, H200, B200 on demand or reserved",
        "top": 132,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "GPU ComputeOn-Demand GPU ComputeAccess NVIDIA H100, H200, and B200 GPUs for AI training, fine-tuning",
        "top": 1627,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#756EF7",
    "alpha": 1,
    "cssValue": "rgb(117, 110, 247)",
    "count": 6,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 147,
        "property": "svg-stroke"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 152,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 156,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#000000",
    "alpha": 0.14901960784313725,
    "cssValue": "color(srgb 0 0 0 / 0.15)",
    "count": 40,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 6604,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 8215,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#EEEEEE",
    "alpha": 1,
    "cssValue": "rgb(238, 238, 238)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 9100,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#A986F9",
    "alpha": 1,
    "cssValue": "rgb(169, 134, 249)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 9100,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#000000",
    "alpha": 0.30196078431372547,
    "cssValue": "color(srgb 0 0 0 / 0.3)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "See pricing",
        "top": 1898,
        "property": "border"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous use of vertical whitespace separates major sections. Padding within containers (like cards or buttons) appears standardized to maintain alignment.
- Corner style: Slightly rounded corners on buttons and cards, suggesting a modern, approachable feel while maintaining a technical edge.
- Radius: Small border radii (likely 4px-8px) on primary buttons and feature/testimonial cards.
- Borders: Thin, subtle borders (1px) used extensively to separate layout sections, enclose cards, and define outline buttons. Often light gray (color-7 or color-8).
- Buttons: Primary buttons are solid purple (color-5) with white text. Secondary buttons are white or transparent with subtle borders.
- Content width: Content is constrained within a maximum width (likely around 1200px), centered on the page, with elements like the navigation bar extending further but keeping content aligned.
- Density: Low density. The layout breathes well, using whitespace and large typography to present information sequentially rather than cramming it.
- Evidence: Observed from the uniform spacing between headings and paragraphs, the consistent rounding on the 'Get Started' button and 'Hear from the humans' cards, the prevalent 1px gray borders defining the grid, and the centered main column.

## Sections

Gallery section count: 11. Each entry corresponds to one gallery capture.

1. **Navbar — Hyperbolic Navbar** (Home)
   Few text links and a single filled button keep the sign-up action obvious while the thin gradient line adds brand colour.
   Capture: 1440×77px; page bounds 0–77px of 9154px; source section ID: `367b3ed7-6531-47d1-a184-a9c24bb82142`; image: https://media.designdetails.io/library/301dbcc362ca2eeb8fd2600afc99824b000c62e489817b8f4d9cfbf9ce227ca8/367b3ed7-6531-47d1-a184-a9c24bb82142.webp
   SECTION.md v3.2: `367b3ed7-6531-47d1-a184-a9c24bb82142` (deterministic evidence; editorial review pending)
2. **Hero — Large headline hero with dual buttons** (Home)
   An oversized headline over a short paragraph and a filled primary button against an outline one sets a clear first action.
   Capture: 1440×923px; page bounds 77–1000px of 9154px; source section ID: `7a69c8dc-5b05-4b9d-a2eb-c18309c20d9d`; image: https://media.designdetails.io/library/3348f2a756142d13b7d1d6b041a420eb089d10c115b47d06dc6fd0bf98b27913/7a69c8dc-5b05-4b9d-a2eb-c18309c20d9d.webp
   SECTION.md v3.2: `7a69c8dc-5b05-4b9d-a2eb-c18309c20d9d` (deterministic evidence; editorial review pending)
3. **Logo Cloud — Logo grid above tabbed product list** (Home)
   A dense grid of customer logos builds trust before the numbered tabs let visitors scan the core services one at a time.
   Capture: 1440×1063px; page bounds 1000–2063px of 9154px; source section ID: `74c2c064-c30b-4234-9b27-e157f85e536e`; image: https://media.designdetails.io/library/c67d8aa97e93e2c6a1e4851dbe5a24de24bbd3a1da6d3eecf5213d5a4873740b/74c2c064-c30b-4234-9b27-e157f85e536e.webp
   SECTION.md v3.2: `74c2c064-c30b-4234-9b27-e157f85e536e` (deterministic evidence; editorial review pending)
4. **Features — Alternating text and illustration rows** (Home)
   Zig-zag rows pair short descriptions and buttons with abstract line art, so each offering reads separately and the eye keeps moving.
   Capture: 1440×1200px; page bounds 2063–3263px of 9154px; source section ID: `ac87d6c6-0b40-4630-b625-c68eb2c4a1ad`; image: https://media.designdetails.io/library/8aaf486925fdfb825d87f7453f168b29c3c162d5506149e1c06b9d9c2c867912/ac87d6c6-0b40-4630-b625-c68eb2c4a1ad.webp
   SECTION.md v3.2: `ac87d6c6-0b40-4630-b625-c68eb2c4a1ad` (deterministic evidence; editorial review pending)
5. **Features — Audience segments list beside illustration** (Home)
   Small labelled blocks with a heading, short text and link let each audience find its own path quickly.
   Capture: 1440×1753px; page bounds 3263–5016px of 9154px; source section ID: `64482853-56b6-4803-8549-4f5ab1a15b92`; image: https://media.designdetails.io/library/a4eba2cbf7afc74273a606e06fff9c12c82abf57fa6560613eb9bcdc7b027948/64482853-56b6-4803-8549-4f5ab1a15b92.webp
   SECTION.md v3.2: `64482853-56b6-4803-8549-4f5ab1a15b92` (deterministic evidence; editorial review pending)
6. **Stats — Banner with four key proof points** (Home)
   A large gradient banner with a bold button leads into four short numbered claims that give quick reassurance under it.
   Capture: 1440×743px; page bounds 5016–5759px of 9154px; source section ID: `05ef56d8-2212-48af-bf41-b07383bf77cf`; image: https://media.designdetails.io/library/422ec91c9bdfa48e3298b67a893383245aed29617f581fc6ea905985579d76ef/05ef56d8-2212-48af-bf41-b07383bf77cf.webp
   SECTION.md v3.2: `05ef56d8-2212-48af-bf41-b07383bf77cf` (deterministic evidence; editorial review pending)
7. **Testimonials — Quote cards with company logos** (Home)
   Cards pair each quote with a logo, name and role, so credibility comes from recognisable companies and real people.
   Capture: 1440×917px; page bounds 5759–6676px of 9154px; source section ID: `c98c6471-43b0-4400-b34d-25f3e452c34d`; image: https://media.designdetails.io/library/bbe8af8ef0230f80f59ff28ac983f5b71c691f150320dc8e24cd62dca94bf997/c98c6471-43b0-4400-b34d-25f3e452c34d.webp
   SECTION.md v3.2: `c98c6471-43b0-4400-b34d-25f3e452c34d` (deterministic evidence; editorial review pending)
8. **Features — Numbered use case grid** (Home)
   A two-column grid of numbered short entries lets visitors scan the workloads supported without reading long copy.
   Capture: 1440×853px; page bounds 6676–7529px of 9154px; source section ID: `651ff6bc-fcb2-4c6b-9c3a-2d9cceb6a464`; image: https://media.designdetails.io/library/ac69c31ed780fe210e019aac9489aefaf7b9db28e14969d2f9dc3558c5ff8db7/651ff6bc-fcb2-4c6b-9c3a-2d9cceb6a464.webp
   SECTION.md v3.2: `651ff6bc-fcb2-4c6b-9c3a-2d9cceb6a464` (deterministic evidence; editorial review pending)
9. **Editorial — Latest news card carousel** (Home)
   Dated cards with image thumbnails and headlines show the company is active, and arrows let visitors browse more.
   Capture: 1440×577px; page bounds 7529–8106px of 9154px; source section ID: `807c0fa4-fa00-479c-a651-f672890d0b97`; image: https://media.designdetails.io/library/b962cd63fde83bbc84edda08046924047915f1e4a5d30cfd37120eea31a72698/807c0fa4-fa00-479c-a651-f672890d0b97.webp
   SECTION.md v3.2: `807c0fa4-fa00-479c-a651-f672890d0b97` (deterministic evidence; editorial review pending)
10. **FAQ — Collapsible question list** (Home)
   Plain rows with plus icons and thin dividers keep many questions compact so visitors can open only what they need.
   Capture: 1440×527px; page bounds 8106–8633px of 9154px; source section ID: `963c8644-f743-480f-b7e0-168d1975e868`; image: https://media.designdetails.io/library/fdfdaa43b06bfd49aef945e3226b72e5def088694901f78a584b472ecdd4c4ed/963c8644-f743-480f-b7e0-168d1975e868.webp
   SECTION.md v3.2: `963c8644-f743-480f-b7e0-168d1975e868` (deterministic evidence; editorial review pending)
11. **Footer — Dark footer with link columns** (Home)
   A black background with four boxed columns of links and an email field separates the footer and organises navigation clearly.
   Capture: 1440×521px; page bounds 8633–9154px of 9154px; source section ID: `b839ea18-6433-473d-8930-893640e2b075`; image: https://media.designdetails.io/library/a947fe3745fa3fd556ea9ff9dac843c0af099be684e849ed07235cbb5b2f04b2/b839ea18-6433-473d-8930-893640e2b075.webp
   SECTION.md v3.2: `b839ea18-6433-473d-8930-893640e2b075` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/1e276e7b84d46ab17e75a73e9efe426bbd30411e4d8a4da43b1d6316e9f65c83/desktop_full-6e7b0a11-2026-10-29T17-16-14-609Z.webp
- Mobile screenshot: https://media.designdetails.io/library/196e899dc5f6fa2e64a5f514318d9fa2270b7424907e47dfc6d80d4fcf656a16/mobile_full-6e7b0a11-2026-10-29T17-16-59-586Z.webp
- Open Graph image: https://media.designdetails.io/library/604e300f6795afbaa0a0bb30e4fb241a2e92e022c20ec1d25dcbf1134a3d83b2/og_image-6e7b0a11-2026-10-29T17-16-22-664Z.webp
- Full-page video: https://media.designdetails.io/library/bb6e6ca33a7af38bc03e302c136eb431353b2a7ce7a172e8987fa9486e05197e/motion-1793298322514.mp4
- Video poster: https://media.designdetails.io/library/3a97f3809b58e1796293c62a430cf8031b7638ba864dc86768116211981e580e/motion-poster-1793298322514.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Logo Strip
- Feature Collection
- Testimonial Card
- FAQ Accordion
- Primary Button
- Outline Button
- Chat Widget
- Footer
- Sticky Graphic Mutator
- Numbered Feature List

## Quality rubric

Overall: 51.9/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Hyperbolic's site is a well-organized, professionally executed example of the contemporary AI-infrastructure marketing template: a monochrome base with a single purple accent, geist/mono typography, abstract wireframe graphics tied loosely to the brand's mathematical name, and a full complement of expected SaaS sections (hero, logo-proof strip, tabbed feature explainer, audience segmentation, stat band, testimonials, use-case grid, updates, FAQ, footer). Execution is consistent — spacing, borders, and type scale are applied uniformly, and the sticky graphic that mutates in sync with scrolling copy is a nice narrative touch. But almost every component and motion pattern used here (marquee, accordion, numbered tab list, testimonial carousel) is now a category default, and the color and typographic choices don't push past competent, conventional application. The single site-specific idea — curves and meshes evoking 'hyperbolic' geometry — is a good seed but isn't carried through pervasively enough to read as a distinctive, ownable system. The result is clean and credible but largely interchangeable with peer AI-compute sites.

- Typography (15%): 58 — A single family (geist) carries almost the whole page, paired with a mono face for uppercase labels and numerals. The scale is deliberate (78px display, 48/36/32/20/16/14/12px steps) with tightening letter-spacing at large sizes, giving a clean, legible hierarchy typical of contemporary SaaS sites. However nearly everything sits at weight 400, so hierarchy is carried almost entirely by size rather than weight/contrast, and there is no distinctive typographic voice beyond the established two-family system.
- Color (10%): 55 — The palette is restrained: black text on white, with a single purple accent (#5B25D4) for CTAs and a lighter purple (#756EF7) for decorative linework. This produces a clean, legible, low-risk system, but it is essentially the default 'black/white plus one tech-purple accent' formula seen across many current AI/infra SaaS sites, with no secondary hue or tonal variation to differentiate sections.
- Layout (20%): 62 — The page uses a consistent constrained content column, generous vertical whitespace, and repeating structural patterns (numbered tabbed feature block, alternating text/graphic feature rows, 4-up stat band, testimonial carousel, FAQ accordion, multi-column footer). Thin 1px borders and grid lines are used systematically to delineate sections. This is a coherent, well-organized system across many sections, though the structural vocabulary (list + graphic, card grid, accordion) is conventional and repeats without much structural variation.
- Motion (20%): 55 — Motion includes a continuous logo marquee, a sticky wireframe graphic whose lines reconfigure as the user scrolls through adjacent copy, and standard FAQ accordion expansion. The scroll-linked graphic mutation is the more considered idea, tying abstract line art to narrative progress, but the overall motion vocabulary (marquee, sticky scroll-tied graphic, accordion) is a now-common toolkit in SaaS/infra sites rather than a distinctive system, and nothing here demonstrates fine-grained easing, choreography, or novel interaction beyond these established patterns.
- Originality (25%): 34 — The overall idiom—monochrome base with purple accent, geist font, abstract wireframe/line-art graphics, numbered feature lists, logo-strip social proof, testimonial cards, and FAQ accordion—is extremely close to the prevailing template for AI-infrastructure/compute startups circa 2024–2025. The one genuinely site-specific idea is tying the abstract curve/mesh graphics conceptually to the 'Hyperbolic' brand name (a hyperbola curve appears in the hero), which is a thoughtful touch, but it's a single motif rather than a pervasive, hard-to-substitute design system. Nothing here could not be relabeled for a dozen competing GPU-cloud sites without much visual change.
- Content (10%): 58 — Copy and visuals are paired reasonably: numbered navigation items correspond to a detail panel and graphic, testimonials carry named attributions and logos, and use-case lists are organized with consistent iconography. The pairing is functional and tidy but mostly literal (label + paragraph + icon/graphic) rather than demonstrating any deeper integration where content shapes the visual form.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A thin purple hyperbola curve under the headline turns an abstract math concept into a literal logo for elastic compute, while a dense grid of university and AI-lab badges builds trust fast. White space and a repeating pattern of left-hand labels next to right-hand feature cards keep a long page of GPU options easy to scan section by section.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.