# Ornn — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://ornn.com/
Captured: 2026-10-10
CSS measured: 2026-10-10T05:48:04.102Z at 1440×1000 — https://ornn.com/
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: anthropic/claude-sonnet-5

## Design direction

Ornn utilizes a striking, cinematic dark mode aesthetic characterized by deep blacks, hairline grid separators, and a prominent, shifting golden-orange gradient background. The typography is precise, blending functional grotesque sans-serifs with a monospace font for technical data, reinforcing the financial and technical nature of the product.

## Classification

- Industry: finance
- Site type: Landing, Blog
- Business model: AI, Software
- Styles: minimal, gradient, typographic, corporate, dark-mode, cinematic
- Platform: Framer
- Technology: Tailwind CSS

## Typography

- Display: FK Roman Standard Light — weight 300; size 70px; line-height 70px; tracking -2.8px; Regular (95% role confidence, computed values)
- Heading: PP Neue Montreal Medium — weight 500; size 46px; line-height 48.3px; tracking -0.9px; Regular (100% role confidence, computed values)
- Body: PP Neue Montreal Regular — weight 400; size 18px; line-height 22.5px; tracking 0.4px; Regular (100% role confidence, computed values)
- Mono: Geist Mono — weight 400; size 10px; line-height 14px; tracking 0.5px; uppercase (100% role confidence, computed values)

## Functional palette

- Canvas — canvas #000000: color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000) used as the primary background color for the body and main sections. (100% role confidence, computed values)
- Text — text #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for primary headings and body text to contrast against the black canvas. (100% role confidence, computed values)
- Muted Text — muted text #848991: color-8: computed rgb(132, 137, 145); AI role: Grey (#848991) used for secondary text, metadata, and table headers. (95% role confidence, computed values)
- Primary Action — primary action #F3F3F3: color-5: computed rgb(243, 243, 243); AI role: Light grey/white (#F3F3F3) used for primary interactive buttons like 'Buy Compute'. (95% role confidence, computed values)
- Surface — surface #0B0B0C: color-2: computed rgb(11, 11, 12); AI role: Very dark greys (#0B0B0C) used for slightly elevated surfaces or interface mockups. (90% role confidence, computed values)
- Border — border #29292A: color-17: computed rgb(41, 41, 42); AI role: Dark grey (#29292A) used extensively for the hairline grid separators. (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": "PP Neue Montreal Medium",
    "fontStack": "\"PP Neue Montreal Medium\", \"PP Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "46px",
    "lineHeight": "48.3px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h1",
        "text": "The Foundation of the Compute Market",
        "top": 352,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Ornn Compute is the bridge between buyers and sellers of compute",
        "top": 3503,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "The OCPI. The reference price for compute.",
        "top": 5389,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "PP Neue Montreal Medium",
    "fontStack": "\"PP Neue Montreal Medium\", \"PP Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "34px",
    "lineHeight": "37.4px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Ornn in the News",
        "top": 6439,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "The compute economy is here.Ornn is its market.",
        "top": 8912,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Neue Montreal",
    "fontStack": "\"Neue Montreal\", \"Neue Montreal\", \"Helvetica Neue\", sans-serif",
    "weight": "500",
    "size": "24px",
    "lineHeight": "32px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Reserve",
        "top": 3898,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "PP Neue Montreal Medium",
    "fontStack": "\"PP Neue Montreal Medium\", \"PP Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 39,
    "contexts": [
      {
        "tag": "p",
        "text": "Ornn Just Raised $33M led by A16Z | Watch the Launch Video",
        "top": -60,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Ornn Just Raised $33M led by A16Z | Watch the Launch Video",
        "top": -25,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Home",
        "top": 32,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Geist Mono",
    "fontStack": "\"Geist Mono\", \"Geist Mono Placeholder\", monospace",
    "weight": "400",
    "size": "10px",
    "lineHeight": "14px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 15,
    "contexts": [
      {
        "tag": "p",
        "text": "H100 index price",
        "top": 351,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Trusted by",
        "top": 847,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Case Study",
        "top": 914,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "PP Neue Montreal Regular",
    "fontStack": "\"PP Neue Montreal Regular\", \"PP Neue Montreal Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "22.5px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "p",
        "text": "Compute trades in the world’s most opaque market. Ornn makes it something you can price, finance, an",
        "top": 569,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The OCPI tracks live traded spot prices for GPU compute across major hardware types: H100, H200, B20",
        "top": 3832,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "H100",
        "top": 3854,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "PP Neue Montreal Medium",
    "fontStack": "\"PP Neue Montreal Medium\", \"PP Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "20px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Ornn Compute",
        "top": 1747,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Access capacity",
        "top": 1767,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Ornn Data ↗",
        "top": 1747,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Neue Montreal",
    "fontStack": "\"Neue Montreal\", \"Neue Montreal\", \"Helvetica Neue\", sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "16.9px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Dedicated GPU capacity for sustained workloads",
        "top": 3928,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Need compute now?Spin up a GPU instance in minutes",
        "top": 3988,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Type",
        "top": 4118,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "PP Neue Montreal Medium",
    "fontStack": "\"PP Neue Montreal Medium\", \"PP Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "0.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Brand + Website by Haptic",
        "top": 9540,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Brand + Website by Haptic",
        "top": 9539,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Brand + Website by Haptic",
        "top": 9565,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "FK Roman Standard Light",
    "fontStack": "\"FK Roman Standard Light\", \"FK Roman Standard Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "70px",
    "lineHeight": "70px",
    "letterSpacing": "-2.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "OCPI-H100",
        "top": 5706,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "SXM",
        "top": 5776,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "PP Neue Montreal Regular",
    "fontStack": "\"PP Neue Montreal Regular\", \"PP Neue Montreal Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "30px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "“Ornn gave us the flexibility to train ambitiously without locking up our capital, at half the price",
        "top": 4685,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "\"We do not believe in wasting any GPU cycle. Demand for inference is cyclical. It’s very high during",
        "top": 4925,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "PP Neue Montreal Regular",
    "fontStack": "\"PP Neue Montreal Regular\", \"PP Neue Montreal Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Bots Hit 57% of the Web, China Simulates 1B Agents, 4 Labs Lose Containment w/ Kush Bavaria",
        "top": 7227,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "PP Neue Montreal Medium",
    "fontStack": "\"PP Neue Montreal Medium\", \"PP Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "17px",
    "lineHeight": "21.3px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Watch video",
        "top": 2834,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "PP Neue Montreal Medium",
    "fontStack": "\"PP Neue Montreal Medium\", \"PP Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "34px",
    "lineHeight": "39.1px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "span",
        "text": "Compute",
        "top": 2051,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "is",
        "top": 2051,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "the",
        "top": 2051,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Neue Montreal",
    "fontStack": "\"Neue Montreal\", \"Neue Montreal\", \"Helvetica Neue\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "21px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 30,
    "contexts": [
      {
        "tag": "div",
        "text": "B300",
        "top": 4155,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "32 nodes (256 GPUs)",
        "top": 4155,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Sep 25 2026 - Sep 25 2028",
        "top": 4147,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "PP Neue Montreal Medium",
    "fontStack": "\"PP Neue Montreal Medium\", \"PP Neue Montreal Medium Placeholder\", sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "22.5px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "strong",
        "text": "X",
        "top": 9261,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "LinkedIn",
        "top": 9261,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Careers",
        "top": 9261,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Neue Montreal",
    "fontStack": "\"Neue Montreal\", \"Neue Montreal\", \"Helvetica Neue\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "21px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "GPUs",
        "top": 3932,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Listings",
        "top": 3962,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Orchestration",
        "top": 3992,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Neue Montreal",
    "fontStack": "\"Neue Montreal\", \"Neue Montreal\", \"Helvetica Neue\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Any; no restriction",
        "top": 4071,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Any; no restriction",
        "top": 4071,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "FK Roman Standard Light",
    "fontStack": "\"FK Roman Standard Light\"",
    "weight": "400",
    "size": "70px",
    "lineHeight": "70px",
    "letterSpacing": "-3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "$2.79",
        "top": 352,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Neue Montreal",
    "fontStack": "\"Neue Montreal\", \"Neue Montreal\", \"Helvetica Neue\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "15.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Launch Compute",
        "top": 4022,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Neue Montreal",
    "fontStack": "\"Neue Montreal\", \"Neue Montreal\", \"Helvetica Neue\", sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "15.6px",
    "letterSpacing": "0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Search capacity",
        "top": 4061,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 487,
    "contexts": [
      {
        "tag": "body",
        "text": "html body { background: var(--token-6f334155-d9f6-4e54-a5c4-a6ac2323cf9b, rgb(0, 0, 0)); } html { fo",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Ornn Just Raised $33M led by A16Z | Watch the Launch VideoOrnn Just Raised $33M led by A16Z | Watch ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Ornn Just Raised $33M led by A16Z | Watch the Launch VideoOrnn Just Raised $33M led by A16Z | Watch ",
        "top": -34,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#0B0B0C",
    "alpha": 1,
    "cssValue": "rgb(11, 11, 12)",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": ".ocd{--muted:#595f68;--font-neue-montreal:var(--font-copy);--body-font:var(--font-copy), \"Helvetica ",
        "top": 3860,
        "property": "background"
      },
      {
        "tag": "main",
        "text": "GPUsListingsOrchestrationStorageImagesNetworkReserveDedicated GPU capacity for sustained workloadsNe",
        "top": 3860,
        "property": "background"
      },
      {
        "tag": "aside",
        "text": "GPUsListingsOrchestrationStorageImagesNetwork",
        "top": 3863,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 86,
    "contexts": [
      {
        "tag": "h1",
        "text": "The Foundation of the Compute Market",
        "top": 352,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Compute trades in the world’s most opaque market. Ornn makes it something you can price, finance, an",
        "top": 569,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1755,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#0C0C0D",
    "alpha": 1,
    "cssValue": "rgb(12, 12, 13)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "ReserveDedicated GPU capacity for sustained workloadsNeed compute now?Spin up a GPU instance in minu",
        "top": 3873,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F3F3F3",
    "alpha": 1,
    "cssValue": "rgb(243, 243, 243)",
    "count": 47,
    "contexts": [
      {
        "tag": "p",
        "text": "Ornn Just Raised $33M led by A16Z | Watch the Launch Video",
        "top": -60,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 38,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Buy ComputeBuy ComputeBuy Compute",
        "top": 26,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#8C8C8C",
    "alpha": 1,
    "cssValue": "rgb(140, 140, 140)",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 852,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "Trusted by",
        "top": 847,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#181818",
    "alpha": 0.45098039215686275,
    "cssValue": "oklab(0.209453 0.000553876 -0.00186583 / 0.45)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Need compute now?Spin up a GPU instance in minutesLaunch Compute",
        "top": 3965,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#848991",
    "alpha": 1,
    "cssValue": "rgb(132, 137, 145)",
    "count": 73,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 3933,
        "property": "svg-fill"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 3942,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "GPUs",
        "top": 3932,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#808080",
    "alpha": 1,
    "cssValue": "rgb(128, 128, 128)",
    "count": 13,
    "contexts": [
      {
        "tag": "p",
        "text": "Case study",
        "top": 1010,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "Careers",
        "top": 9261,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1212,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#161617",
    "alpha": 1,
    "cssValue": "rgb(22, 22, 23)",
    "count": 1,
    "contexts": [
      {
        "tag": "form",
        "text": "Any; no restrictionAny; no restrictionSearch capacity",
        "top": 4056,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#2B2B2B",
    "alpha": 1,
    "cssValue": "rgb(43, 43, 43)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5784,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#EBEBEB",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(234, 234, 234, 0.15)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Watch video",
        "top": 2816,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#A6A6A6",
    "alpha": 1,
    "cssValue": "rgb(166, 166, 166)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5793,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "We also support OCPI-H200, OCPI-B200, OCPI-RTX5090, and more...",
        "top": 5818,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.0784313725490196,
    "cssValue": "rgba(255, 255, 255, 0.08)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Listings",
        "top": 3956,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#343435",
    "alpha": 1,
    "cssValue": "rgb(52, 52, 53)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4060,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "B30032 nodes (256 GPUs)Sep 25 2026 - Sep 25 2028Europe$4.85/GPU-hr",
        "top": 4139,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#212121",
    "alpha": 1,
    "cssValue": "rgb(33, 33, 33)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 6893,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#29292A",
    "alpha": 1,
    "cssValue": "rgb(41, 41, 42)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "ReserveDedicated GPU capacity for sustained workloadsNeed compute now?Spin up a GPU instance in minu",
        "top": 3873,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#343436",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.325406 0.000504047 -0.00166619 / 0.5)",
    "count": 4,
    "contexts": [
      {
        "tag": "section",
        "text": "Need compute now?Spin up a GPU instance in minutesLaunch Compute",
        "top": 3965,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#343434",
    "alpha": 0.34901960784313724,
    "cssValue": "color(srgb 0.203922 0.203922 0.207843 / 0.35)",
    "count": 4,
    "contexts": [
      {
        "tag": "form",
        "text": "Any; no restrictionAny; no restrictionSearch capacity",
        "top": 4056,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#F5F5F5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 245)",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Watch video",
        "top": 2834,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1039,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#29292A",
    "alpha": 0.7098039215686275,
    "cssValue": "oklab(0.281325 0.000519648 -0.00172973 / 0.71)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "TypeQuantityTermRegionPrice",
        "top": 4109,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#F0F0F0",
    "alpha": 1,
    "cssValue": "rgb(240, 240, 240)",
    "count": 27,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 4204,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#0052B4",
    "alpha": 1,
    "cssValue": "rgb(0, 82, 180)",
    "count": 5,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 4156,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#D80027",
    "alpha": 1,
    "cssValue": "rgb(216, 0, 39)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 4206,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#FFD733",
    "alpha": 1,
    "cssValue": "rgb(255, 215, 51)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 4158,
        "property": "svg-fill"
      }
    ]
  }
]
```

### 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 vertical padding between sections, utilizing a strict fluid grid system that dictates the placement of content and the drawing of border lines.
- Corner style: Fully rounded (pill-shaped) for primary buttons and badges, with slightly rounded corners on interface mockups and dropdown containers.
- Radius: Buttons use maximum border-radius for a pill effect. Interface mockups use smaller, subtle radii (approx 4-8px).
- Borders: Hairline (1px) solid borders in dark grey are a defining structural element, acting as a visible grid overlay.
- Buttons: High-contrast solid light buttons for primary actions (pill shape), and ghost/outline styles for secondary interactions.
- Content width: Full-bleed backgrounds with a wide, structured internal grid that scales to the viewport width.
- Density: Low to medium density. The layout breathes with ample negative space, though technical data tables condense information effectively.
- Evidence: Observed via CSS facts: borders mapped to #29292A, typography scales (46px headings, 18px body), button styles in screenshots, and grid layout structures spanning the viewport.

## Sections

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

1. **Hero — Compute Market Hero with Trust Logos** (Home)
   AI suggestion (97% confidence): Complete page-opening hero with navigation, market-price focal point, value proposition, CTA, distinctive abstract imagery, and an integrated customer logo cloud.
   Capture: 1440×1293px; page bounds 0–1293px of 10033px; source section ID: `a416f9cf-5cb7-4572-aff2-ce8198931a40`; image: https://media.designdetails.io/library/b548300ac4c51fe69118f6f864ba242966d8bf93392e69c4f615615710ff830e/a416f9cf-5cb7-4572-aff2-ce8198931a40.webp
   SECTION.md v3.2: `a416f9cf-5cb7-4572-aff2-ce8198931a40` (deterministic evidence; editorial review pending)
2. **Feature Grid — Ornn Product Suite** (Home)
   AI suggestion (94% confidence): Complete two-card product grid presenting Ornn Compute and Ornn Data with product screenshots, labels, and clear section boundaries.
   Capture: 1440×810px; page bounds 1203–2013px of 10033px; source section ID: `27511cc2-4b4c-43e3-b645-7e9ebf461366`; image: https://media.designdetails.io/library/d9f4e82b3855d66194d74f6a366d48c471567b2b51c30d9a8e3d00009c525dbc/section-manual-27511cc2-4b4c-43e3-b645-7e9ebf461366-1791701416769.webp
   SECTION.md v3.2: `27511cc2-4b4c-43e3-b645-7e9ebf461366` (deterministic evidence; editorial review pending)
3. **Features — Compute Marketplace Bridge** (Home)
   AI suggestion (94% confidence): Complete dark feature block with a clear headline, explanatory copy, CTA, and a substantial marketplace dashboard visual.
   Capture: 1440×1072px; page bounds 3448–4520px of 10033px; source section ID: `75935e5d-6f57-4cee-821f-dd407cc71354`; image: https://media.designdetails.io/library/926eb9c56f82c2712d2c40fdd8ed24531b143a02bf1bbb2d47a0aa72b58099e8/section-manual-75935e5d-6f57-4cee-821f-dd407cc71354-1791701427638.webp
   SECTION.md v3.2: `75935e5d-6f57-4cee-821f-dd407cc71354` (deterministic evidence; editorial review pending)
4. **Testimonials — Customer Compute Testimonials** (Home)
   AI suggestion (92% confidence): Self-contained testimonial section with its own label, two attributed customer quotes, consistent dividers, and a clear ending before the next section.
   Capture: 1440×579px; page bounds 4571–5150px of 10033px; source section ID: `96f2a13f-804b-4aa6-84af-43e85ad9c3a9`; image: https://media.designdetails.io/library/6d438613f8c26ce7c9bf15925eca908e0fe952b84e147a12fd4aba635b5dbe8a/96f2a13f-804b-4aa6-84af-43e85ad9c3a9.webp
   SECTION.md v3.2: `96f2a13f-804b-4aa6-84af-43e85ad9c3a9` (deterministic evidence; editorial review pending)
5. **Pricing — OCPI Compute Price Index** (Home)
   AI suggestion (94% confidence): Complete product feature with its own headline, large pricing-index visualization, index title, explanatory copy, and data CTA.
   Capture: 1440×951px; page bounds 5305–6256px of 10033px; source section ID: `c4062f4f-f526-4ad7-804b-e5aa6f51a9bf`; image: https://media.designdetails.io/library/3f2d64eeff212e73dc6d0a3b12916074b23b2e1bc8e35c707d8cacc63ba100f6/section-manual-c4062f4f-f526-4ad7-804b-e5aa6f51a9bf-1791701433912.webp
   SECTION.md v3.2: `c4062f4f-f526-4ad7-804b-e5aa6f51a9bf` (deterministic evidence; editorial review pending)
6. **Editorial — Ornn in the News** (Home)
   AI suggestion (92% confidence): Self-contained press and media section featuring one prominent video story followed by a complete three-column row of publication coverage.
   Capture: 1440×1170px; page bounds 6628–7798px of 10033px; source section ID: `c613907a-0332-49ff-99e6-9539ae73e106`; image: https://media.designdetails.io/library/2bb4d3fb19d06c498d7cde52fbf74878e95ba4fdf4eaf0efbbd59d35f3f72689/section-manual-c613907a-0332-49ff-99e6-9539ae73e106-1791701486162.webp
   SECTION.md v3.2: `c613907a-0332-49ff-99e6-9539ae73e106` (deterministic evidence; editorial review pending)
7. **CTA — The market behind compute** (Home)
   AI suggestion (96% confidence): Complete image-led conversion banner with a prominent headline and centered “Talk to our team” action.
   Capture: 1440×603px; page bounds 8247–8850px of 10033px; source section ID: `e97e4017-2ea7-454a-a2e2-3fc55bcf513b`; image: https://media.designdetails.io/library/c60c11fd3b80f82fa5933ece3ad8d491226aac1c2fe9594d659288deb2087872/section-manual-e97e4017-2ea7-454a-a2e2-3fc55bcf513b-1791701499085.webp
   SECTION.md v3.2: `e97e4017-2ea7-454a-a2e2-3fc55bcf513b` (deterministic evidence; editorial review pending)
8. **Footer — Compute economy footer** (Home)
   AI suggestion (97% confidence): Complete, substantial footer combining a brand statement, platform tag, social links, company navigation, legal details, credits, and a distinctive line-pattern graphic.
   Capture: 1440×1190px; page bounds 8843–10033px of 10033px; source section ID: `847883eb-cbda-4158-9282-56901d51583b`; image: https://media.designdetails.io/library/8ad2566d82752e3c843a4bc63080a5ba4448e1a1e01214e959a34b33921c792e/847883eb-cbda-4158-9282-56901d51583b.webp
   SECTION.md v3.2: `847883eb-cbda-4158-9282-56901d51583b` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/b29931a02361d025b1f368f9f0f4eaf10eaa01e7fe710cfc9de0d5f12c8a6fde/desktop_full-6808d002-2026-10-10T05-48-04-122Z.webp
- Mobile screenshot: https://media.designdetails.io/library/22706faa7f443ac126906354c7817e22eeb7a597d16025162914ee42e2f23f64/mobile_full-6808d002-2026-10-10T05-48-40-551Z.webp
- Open Graph image: https://media.designdetails.io/library/0836d46488b7e0eb4b1c7dbb9d969e5b2b840222fda41592862b859839930efb/og_image-6808d002-2026-10-10T05-48-12-077Z.webp
- Full-page video: https://media.designdetails.io/library/2f097f59ddf75fc3d92401c9404dc1934213ab13a88cc8644c3f9bcb12de0d7d/motion-1791694378504.mp4
- Video poster: https://media.designdetails.io/library/914aed8a47417a591d353e87112faf963a0551de5f0785ba99a0af524777ddd9/motion-poster-1791694378504.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

- Announcement Bar
- Navigation Bar
- Hero With Background Imagery
- Logo Strip
- Testimonial Card
- Pricing Table
- Primary Button
- Video Frame
- Footer
- Hairline Grid System
- Index Ticker Display
- Interface Mockups

## Quality rubric

Overall: 63/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Ornn pairs a disciplined dark-mode visual language with a few well-chosen signature moves — a vertical gold-gradient motif and financial-ticker serif numerals — that tie its design to its 'compute as commodity' positioning. Content (pricing tables, testimonials, press mentions) is cleanly integrated into the type and grid system. However, the page's overall structure and scroll-reveal motion remain close to standard AI/fintech landing-page conventions, keeping the execution solidly in the good tier rather than pushing into a more systemic, harder-to-replicate design statement.

- Typography (15%): 72 — A genuinely layered type system: PP Neue Montreal carries headings/UI across several weights, Geist Mono handles uppercase technical labels (index prices, 'Trusted by'), and FK Roman Standard Light is reserved for large serif numerals (OCPI-H100 SXM, $2.79) that evoke financial-index typography. Tracking is deliberately tuned (negative on headings, positive on mono labels), giving each role a distinct voice tied to content function.
- Color (10%): 62 — A disciplined but conventional black/white/grey dark-mode palette elevated chiefly by one recurring signature element: the gold/orange vertical-ray gradient bookending hero and footer. Hairline borders (#29292A) create a secondary tonal layer. Outside the gradient, this reads as standard fintech/AI dark-mode styling rather than a distinctive color system.
- Layout (20%): 64 — A consistent hairline-grid structure organizes hero, logo strip, dual product cards, problem statement, dashboard mockups, testimonial pairs, index/ticker display, news grid, and CTA footer with generous vertical rhythm. The sequence and section patterns, however, follow a familiar SaaS/fintech landing-page template (hero → social proof → features → testimonials → pricing → press → CTA) without structural surprises beyond the grid overlay itself.
- Motion (20%): 56 — Motion is limited to a now-common scroll-reveal vocabulary: staggered fade/translate-up on logos and testimonials, scale-up reveals for product and dashboard mockups, and one clip/expand transition on a video element. These are competently staggered and sequenced but are generic patterns seen broadly across modern marketing sites rather than a bespoke motion language; the ambient gradient shift is the more distinctive animated element.
- Originality (25%): 60 — A handful of hard-to-substitute ideas exist — the full-bleed vertical gold-gradient 'light ray' motif, the serif financial-ticker numerals for index prices, and the hairline grid acting as a visible structural overlay — all of which connect meaningfully to the compute-as-commodity concept. But the overall page skeleton (hero, trust logos, feature cards, testimonials, pricing table, press logos, CTA) is a well-worn SaaS/fintech template, limiting how far these distinctive touches can lift the whole experience.
- Content (10%): 70 — Content (dashboard mockups, pricing/reserve tables, CEO testimonials with named attributions, a live-style price chart, and real press logos/headlines from The Economist, WSJ, and Bloomberg) is tightly matched to the typographic and visual system — technical labels in mono, index numbers in serif, body copy in grotesque — giving the data-heavy material a coherent presentational logic appropriate to a 'financial products for compute' positioning.

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
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A dense field of flame-colored vertical bars reads like a trading waveform, giving an abstract commodity a tangible visual identity on a near-black background. Live-looking price tickers, dashboard screenshots and a logo row of known names like Nvidia and Bloomberg sit close together, building trust fast before the page settles into plainer black sections with large serif pull quotes.

## 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.