# North — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://north.cloud/
Captured: 2026-10-16
CSS measured: 2026-10-16T21:29:29.184Z at 1440×1000 — https://north.cloud/
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

The North website employs a highly technical and brutalist design language, characterized by stark contrasts, precise grid structures, and a distinct lack of organic shapes. The color palette relies heavily on stark blacks and greys, punctuated by a vivid, synthetic purple that serves as the primary accent color. Typography is predominantly sans-serif, using 'Untitled Sans' for prominent headings, and 'Degrad Mono' for functional text, emphasizing the technical nature of the product. The layout makes extensive use of visible grid lines and crosshair markers, creating an interface that feels like a complex control panel or schematic diagram.

## Classification

- Industry: finance
- Site type: Landing, Blog
- Business model: Software, Agency
- Styles: brutalist, corporate, typographic, tech-schematic, dark-mode-first
- Platform: Custom code
- Technology: Astro, Three.js

## Typography

- Display: Untitled Sans — weight 500; size 96px; line-height 88.3px; tracking -3.8px; uppercase (95% role confidence, computed values)
- Heading: Untitled Sans — weight 500; size 64px; line-height 56.3px; tracking -2.6px; uppercase (90% role confidence, computed values)
- Body: Untitled Sans — weight 400; size 32px; line-height 40px; tracking -1.3px; Regular (85% role confidence, computed values)
- Mono: Degrad Mono — weight 400; size 15px; line-height 24px; tracking 0.6px; Regular (95% role confidence, computed values)

## Functional palette

- Primary Action — primary action #D591FE: color-6: computed rgb(213, 145, 254); AI role: Vivid purple (#D591FE) used consistently for primary buttons and call-to-action highlights. (95% role confidence, computed values)
- Canvas — canvas #121314: color-3: computed rgb(18, 19, 20); AI role: Near-black (#121314) used as the primary background color for many sections. (90% role confidence, computed values)
- Text — text #000000: color-10: computed rgb(0, 0, 0); AI role: Black text used extensively on lighter grey backgrounds. (90% role confidence, computed values)
- Muted Text — muted text #6C7278: color-1: computed rgb(108, 114, 120); AI role: Grey (#6C7278) used for secondary text or borders. (85% role confidence, computed values)
- Surface — surface #CCCCCC: color-4: computed rgb(204, 204, 204); AI role: Light grey (#CCCCCC) used for contrast blocks or alternating section backgrounds. (80% 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": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "500",
    "size": "96px",
    "lineHeight": "88.3px",
    "letterSpacing": "-3.8px",
    "traits": "uppercase",
    "count": 17,
    "contexts": [
      {
        "tag": "div",
        "text": "The",
        "top": 112,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Financial",
        "top": 215,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Operating",
        "top": 317,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "31.9px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "Features",
        "top": 21546,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Integrations",
        "top": 21546,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Solutions",
        "top": 21546,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "500",
    "size": "64px",
    "lineHeight": "56.3px",
    "letterSpacing": "-2.6px",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Brave drastically cut cloud costs and reclaimed engineering time with North.",
        "top": 13548,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Their Savings,",
        "top": 17934,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Their Words.",
        "top": 18121,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "500",
    "size": "80px",
    "lineHeight": "72px",
    "letterSpacing": "-3.2px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Cloud spend used to run on guesswork.",
        "top": 16152,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Built for the demands of modern teams.",
        "top": 17525,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "normal",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "Legal",
        "top": 21771,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Degrad Mono",
    "fontStack": "\"Degrad Mono\", monospace",
    "weight": "400",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "0.6px",
    "traits": "Regular",
    "count": 105,
    "contexts": [
      {
        "tag": "a",
        "text": "Features",
        "top": 25,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Integrations",
        "top": 25,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Solutions",
        "top": 25,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "40px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "p",
        "text": "One view across every dollar, workload, and cloud you run.",
        "top": 4121,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Your cloud finance team, running on autopilot.",
        "top": 5450,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Hundreds of cloud teams already trust North. Join them and unlock your savings.",
        "top": 6775,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "40px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "$1B+",
        "top": 6759,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "UP TO 50%",
        "top": 6827,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "300M",
        "top": 6895,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "What is North.cloud?",
        "top": 20513,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Is North.cloud an AWS, GCP, or Azure reseller?",
        "top": 20618,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Will North force me to replace my existing savings plans or reserved instances?",
        "top": 20723,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "24px",
    "letterSpacing": "0.6px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "North is the financial operating system for your cloud, AI, and data infrastructure. It's the intell",
        "top": 20553,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "No. North doesn’t resell cloud infrastructure. We integrate with your existing AWS, GCP, and Azure a",
        "top": 20658,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "No. North works alongside whatever commitment strategy you already have—EDPs, CUDs, Reserved Instanc",
        "top": 20763,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Degrad Mono",
    "fontStack": "\"Degrad Mono\", monospace",
    "weight": "400",
    "size": "15px",
    "lineHeight": "15px",
    "letterSpacing": "0.6px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Sign In",
        "top": 33,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Book Demo",
        "top": 33,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Free Trial",
        "top": 33,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Free Trial",
        "top": 14292,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Free Trial",
        "top": 20127,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Book Demo",
        "top": 20127,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "500",
    "size": "32px",
    "lineHeight": "40px",
    "letterSpacing": "-1.3px",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "< 1.5 hr",
        "top": 16713,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "1 mo.",
        "top": 16713,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Untitled Sans",
    "fontStack": "\"Untitled Sans\", sans-serif",
    "weight": "500",
    "size": "120px",
    "lineHeight": "120px",
    "letterSpacing": "-4.8px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "48",
        "top": 16344,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#6C7278",
    "alpha": 1,
    "cssValue": "rgb(108, 114, 120)",
    "count": 524,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 3037,
        "property": "svg-stroke"
      },
      {
        "tag": "use",
        "text": "",
        "top": 3037,
        "property": "svg-stroke"
      },
      {
        "tag": "h2",
        "text": "Intelligence Layer",
        "top": 3871,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#654877",
    "alpha": 1,
    "cssValue": "rgb(101, 72, 119)",
    "count": 3,
    "contexts": [
      {
        "tag": "body",
        "text": "<iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-W8K6PTNV\" height=\"0\" width=\"0\" style=\"d",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Features Manage AI Agent Coststreams Analyze Anomalies GreenOps Optimize Coverage Rightsize Tokenflo",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "With North",
        "top": 16153,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#121314",
    "alpha": 1,
    "cssValue": "rgb(18, 19, 20)",
    "count": 48,
    "contexts": [
      {
        "tag": "p",
        "text": "Free Trial",
        "top": 33,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Free Trial",
        "top": 880,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "Cloud finance We Built It needed a brain.",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#CCCCCC",
    "alpha": 1,
    "cssValue": "rgb(204, 204, 204)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#AFB8C2",
    "alpha": 1,
    "cssValue": "rgb(175, 184, 194)",
    "count": 27,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 22,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 24,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "Features",
        "top": 25,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#D591FE",
    "alpha": 1,
    "cssValue": "rgb(213, 145, 254)",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "Free Trial",
        "top": 24,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Free Trial",
        "top": 24,
        "property": "border"
      },
      {
        "tag": "p",
        "text": "Free Trial",
        "top": 905,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#6C7278",
    "alpha": 0.5019607843137255,
    "cssValue": "color(srgb 0.423529 0.447059 0.470588 / 0.5)",
    "count": 128,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 3040,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#B055E6",
    "alpha": 1,
    "cssValue": "rgb(176, 85, 230)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Book Demo",
        "top": 16532,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 20039,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#131415",
    "alpha": 1,
    "cssValue": "rgb(19, 20, 21)",
    "count": 30,
    "contexts": [
      {
        "tag": "a",
        "text": "Explore Coststreams",
        "top": 7940,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Explore Coststreams",
        "top": 7940,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 406,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 37,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 37,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#6D7177",
    "alpha": 0.30196078431372547,
    "cssValue": "color(srgb 0.423529 0.447059 0.470588 / 0.3)",
    "count": 16,
    "contexts": [
      {
        "tag": "div",
        "text": "Meaningful Cloud Savings In Minutes.",
        "top": 14365,
        "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: Highly structured, reliant on a visible grid system that dictates padding and margins.
- Corner style: Sharp, 0px radius corners dominate the layout, aligning with the grid.
- Radius: Primary buttons feature fully rounded 'pill' shapes, contrasting with the sharp layout.
- Borders: Extensive use of 1px solid borders to create the visible grid structure.
- Buttons: Pill-shaped (fully rounded), often outlined, with solid fills for primary actions.
- Content width: Content often spans the full width of the grid, constrained by the outer margins of the grid system.
- Density: Moderate density; the grid structure organizes information clearly, but large typography and graphics require ample space.
- Evidence: Visible grid lines with crosshairs, 0px radius on layout boxes, pill-shaped buttons with #D591FE, prominent use of mono typography.

## Sections

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

1. **Hero — Financial Operating System Hero** (Home)
   AI suggestion (98% confidence): Complete page-opening hero with integrated navigation, bold product positioning, supporting copy, atmospheric imagery, and paired Free Trial / Book Demo calls to action.
   Capture: 1440×1002px; page bounds 0–1002px of 16852px; source section ID: `1c1a6380-7ae1-4d2c-8549-91e85b9bcd8e`; image: https://media.designdetails.io/library/29e84d9c5a81f68e14794b3e85f91dcb51f40d7dbb396292d7b7b06dc167f5b5/1c1a6380-7ae1-4d2c-8549-91e85b9bcd8e.webp
   SECTION.md v3.2: `1c1a6380-7ae1-4d2c-8549-91e85b9bcd8e` (deterministic evidence; editorial review pending)
2. **Features — INTELLIGENCE LAYER** (Home)
   Reusable feature composition from Home, organized around “INTELLIGENCE LAYER”.
   Capture: 1440×1329px; page bounds 2157–3486px of 16852px; source section ID: `041c9d2b-2282-4477-8e00-f336fc4bb071`; image: https://media.designdetails.io/library/16696711f779c8c06e874059010bf443a94f638268c99ec945b07f63f8ac41ff/section_crop-041c9d2b-2026-10-16T21-29-39-064Z.webp
   SECTION.md v3.2: `041c9d2b-2282-4477-8e00-f336fc4bb071` (deterministic evidence; editorial review pending)
3. **Features — SAVINGS LAYER** (Home)
   Reusable feature composition from Home, organized around “SAVINGS LAYER”.
   Capture: 1440×1333px; page bounds 4811–6144px of 16852px; source section ID: `0bfbe79d-e38e-46e8-ba27-5b5ae9abbbf7`; image: https://media.designdetails.io/library/ed96341b123050c4ce497eed7a57cc707576e5306c9c412c64d8732612abe842/section_crop-0bfbe79d-2026-10-16T21-29-41-174Z.webp
   SECTION.md v3.2: `0bfbe79d-e38e-46e8-ba27-5b5ae9abbbf7` (deterministic evidence; editorial review pending)
4. **Features — MEANINGFUL CLOUD SAVINGS IN MINUTES.** (Home)
   Reusable feature composition from Home, organized around “MEANINGFUL CLOUD SAVINGS IN MINUTES.”.
   Capture: 1440×1746px; page bounds 9002–10748px of 16852px; source section ID: `c31e3183-cb45-4e00-830c-cec994f4146e`; image: https://media.designdetails.io/library/611d9eced7742210461b61c1f22c7d9ef448b445d4e612611da3e1ef605effc0/section_crop-c31e3183-2026-10-16T21-29-43-273Z.webp
   SECTION.md v3.2: `c31e3183-cb45-4e00-830c-cec994f4146e` (deterministic evidence; editorial review pending)
5. **Features — CLOUD SPEND USED TO RUN ON GUESSWORK.** (Home)
   Reusable feature composition from Home, organized around “CLOUD SPEND USED TO RUN ON GUESSWORK.”.
   Capture: 1440×742px; page bounds 10748–11490px of 16852px; source section ID: `8e82c046-04f0-452d-9b45-b5a2cd7addb1`; image: https://media.designdetails.io/library/b360a1c3b65d4157f8327c5e7362030fa734f0218cdda30bbfd8b92f56aadb9a/section_crop-8e82c046-2026-10-16T21-29-44-315Z.webp
   SECTION.md v3.2: `8e82c046-04f0-452d-9b45-b5a2cd7addb1` (deterministic evidence; editorial review pending)
6. **Features — BUILT FOR THE DEMANDS OF MODERN TEAMS.** (Home)
   Reusable feature composition from Home, organized around “BUILT FOR THE DEMANDS OF MODERN TEAMS.”.
   Capture: 1440×1000px; page bounds 11490–12490px of 16852px; source section ID: `5f44a1f1-6e91-47ae-b747-4c2f0c8dc9e4`; image: https://media.designdetails.io/library/49017ff8155c7a82f5897386e2f34d2ee6e6b7da6b4f377d178e7be9384c222a/section_crop-5f44a1f1-2026-10-16T21-29-45-194Z.webp
   SECTION.md v3.2: `5f44a1f1-6e91-47ae-b747-4c2f0c8dc9e4` (deterministic evidence; editorial review pending)
7. **Features — THEIR SAVINGS, THEIR WORDS.** (Home)
   Reusable feature composition from Home, organized around “THEIR SAVINGS, THEIR WORDS.”.
   Capture: 1440×798px; page bounds 12490–13288px of 16852px; source section ID: `08bf3a73-f255-4f28-ba3b-8bdea8c330e4`; image: https://media.designdetails.io/library/aca363e288aa6ace98026986e46ad38d102f4e80c5dcd3c0b93dbbe88a3177b5/section_crop-08bf3a73-2026-10-16T21-29-46-108Z.webp
   SECTION.md v3.2: `08bf3a73-f255-4f28-ba3b-8bdea8c330e4` (deterministic evidence; editorial review pending)
8. **FAQ — FAQS** (Home)
   FAQ composition from Home, organized around “FAQS”.
   Capture: 1440×1113px; page bounds 14836–15949px of 16852px; source section ID: `db3f07a6-567b-4214-9152-d84889540e9e`; image: https://media.designdetails.io/library/806a437182af3d3be95eba83c9cdc0187b773fd97e7ba9be9ad384f0c0046a57/section_crop-db3f07a6-2026-10-16T21-29-48-278Z.webp
   SECTION.md v3.2: `db3f07a6-567b-4214-9152-d84889540e9e` (deterministic evidence; editorial review pending)
9. **Stats — Savings Layer Social Proof** (Home)
   AI suggestion (96% confidence): Complete, self-contained proof section combining a savings-focused headline, customer logos, and prominent cloud-spend outcome metrics in a distinctive bordered layout.
   Capture: 1440×654px; page bounds 5500–6154px of 16852px; source section ID: `3ab2139a-1de2-4424-bf58-1b31c137ec55`; image: https://media.designdetails.io/library/e3240d294bee12211d5dde6c0e834af7478f366472ffd56857b5c591d58c3603/3ab2139a-1de2-4424-bf58-1b31c137ec55.webp
   SECTION.md v3.2: `3ab2139a-1de2-4424-bf58-1b31c137ec55` (deterministic evidence; editorial review pending)
10. **Testimonials — Brave Cloud Savings Customer Story** (Home)
   AI suggestion (94% confidence): Complete customer proof section combining a bold outcome statement, quantified savings, customer quote, Brave branding, and a free-trial CTA.
   Capture: 1440×855px; page bounds 8145–9000px of 16852px; source section ID: `6cf2a0d2-fc23-40d7-b752-a9b1aa621fb6`; image: https://media.designdetails.io/library/2ffcb6ebcb472e49d29ef8e3e33661c71cac80086962d603b1dfaa1d112ba104/6cf2a0d2-fc23-40d7-b752-a9b1aa621fb6.webp
   SECTION.md v3.2: `6cf2a0d2-fc23-40d7-b752-a9b1aa621fb6` (deterministic evidence; editorial review pending)
11. **Stats — Savings in Minutes** (Home)
   AI suggestion (91% confidence): Self-contained impact statement with oversized typography and a complete three-metric strip highlighting time to savings, savings rate, and zero long-term contracts.
   Capture: 1440×753px; page bounds 9000–9753px of 16852px; source section ID: `15bae5ac-eacf-4b74-820a-024fc8fec999`; image: https://media.designdetails.io/library/2476139de5adef599defa8e5966f759bc77f3c01923569044dd5366564969fa4/15bae5ac-eacf-4b74-820a-024fc8fec999.webp
   SECTION.md v3.2: `15bae5ac-eacf-4b74-820a-024fc8fec999` (deterministic evidence; editorial review pending)
12. **CTA — Cloud Finance on Autopilot** (Home)
   AI suggestion (97% confidence): Complete conversion section combining a distinctive abstract hero image, bold cloud-finance headline, supporting copy, and paired Free Trial and Book Demo actions.
   Capture: 1440×1551px; page bounds 13294–14845px of 16852px; source section ID: `9ff3382f-0046-4236-a098-5e04367a8f9d`; image: https://media.designdetails.io/library/abeaff43edf37e47e0ad9e058bbf5f19d42b664d41d9d27aaf5b0e4a32cfb538/9ff3382f-0046-4236-a098-5e04367a8f9d.webp
   SECTION.md v3.2: `9ff3382f-0046-4236-a098-5e04367a8f9d` (deterministic evidence; editorial review pending)
13. **Footer — Newsletter and partner-grid footer** (Home)
   AI suggestion (98% confidence): Complete, substantial footer with a prominent email subscription form, organized navigation and legal columns, oversized North branding, office and certification details, partner badges, and copyright credit.
   Capture: 1440×874px; page bounds 15953–16827px of 16852px; source section ID: `4a63cfd0-97e3-402d-83a8-9f1d4530b0e7`; image: https://media.designdetails.io/library/34fb406f57a591c400ea7e291b4aeaa6bc060d28400bcc2a457be171fffee1d8/4a63cfd0-97e3-402d-83a8-9f1d4530b0e7.webp
   SECTION.md v3.2: `4a63cfd0-97e3-402d-83a8-9f1d4530b0e7` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/d5d212e0ac2b869801258afcfa76b2e452e21e65889f8455e0a6fcd63058c7fa/desktop_full-720cb519-2026-10-16T21-29-29-200Z.jpg
- Mobile screenshot: https://media.designdetails.io/library/869f3dcfc9fea910cc9512d056be3d5e591559931682f6fd31c64c3232558de2/mobile_full-720cb519-2026-10-16T21-30-33-797Z.webp
- Open Graph image: https://media.designdetails.io/library/7902649091812ba7857f694644301a805648d1736a1051edb1b4eb8d21647e86/og_image-720cb519-2026-10-16T21-29-37-150Z.webp
- Full-page video: https://media.designdetails.io/library/88a8401a55e55c33d4ba868a4c047235c4e94a88a8d5e3f6bcd7a3d4a3c39f35/motion-1792428424230.mp4
- Video poster: https://media.designdetails.io/library/856746f22b3ff78be1a019606133c5df6f0ba9253f989fd9282052292d22f42d/motion-poster-1792428424230.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 With Background Imagery
- Primary Button
- Outline Button
- FAQ Accordion
- Newsletter Form
- Footer
- Stat Block
- Logo Strip
- Interactive Layer Diagram
- Grid Interface

## Quality rubric

Overall: 64.6/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: North executes a coherent technical-schematic identity—grid lines with crosshairs, mono/display type pairing, and a content-synced 3D layer diagram—applied consistently across a long page, which lifts it above generic SaaS template work. But the motion system is thin beyond two set-pieces, the palette stays narrow, and the core visual vocabulary echoes an increasingly common 'technical B2B' aesthetic rather than breaking new ground, keeping the site solidly in the good tier rather than strong or exceptional.

- Typography (15%): 66 — A disciplined two-family system (Untitled Sans for display/headings, Degrad Mono for nav/UI/labels) is applied consistently across sections, with a clear size/weight hierarchy (96/80/64px display tiers down to 32/24/15px body and mono labels) and tight, uniform negative tracking that reinforces the technical tone. It's well-executed but the pairing itself (grotesque display + mono labels) is a common 'technical SaaS' convention rather than a distinctive typographic idea.
- Color (10%): 60 — A tight, intentional palette—near-black canvas, grey-blue surface, muted grey text, and a single synthetic purple accent—is used consistently for CTAs and highlights, and alternates convincingly between dark and light sections. However, the range is narrow and doesn't develop secondary hues or tonal nuance beyond the accent-on-neutral formula, so color does more labeling than mood-building.
- Layout (20%): 70 — The grid-with-crosshair-markers motif is carried through nearly every section observed—hero, intelligence/savings layers, the layer-diagram feature list, stats blocks, testimonials, FAQ, and footer—functioning as a genuine structural device rather than a one-off hero flourish. Content blocks consistently align to this visible grid with crosshair intersections, and section transitions (dark-to-purple-to-grey) are handled with full-bleed confidence.
- Motion (20%): 62 — Two distinct, content-tied interactions are evidenced: a scroll-linked zoom on a 3D graphic and a hover-driven 3D layer stack that reorders/highlights in sync with the Allocate/Analyze/Monitor/Optimize/Ask accordion list. This ties motion to explaining product structure rather than pure decoration, which is a genuine strength, but the evidence shows only these two mechanisms recurring—no indication of a broader choreographed system across testimonials, FAQ, or footer sections, which appear static in the capture.
- Originality (25%): 64 — The combination of visible grid/crosshair 'schematic' framing, dithered/halftone textural graphics, and a 3D layer-stack diagram mapped to feature copy gives the site a distinct, cohesive technical identity rather than generic SaaS gradient-and-blob visuals. However, the core vocabulary—blueprint grids, monospace labels, dark-mode infra branding—is now a recognizable convention within technical/FinOps and dev-tool marketing sites, so it reads as a well-crafted variation on an established idiom rather than an unprecedented concept.
- Content (10%): 63 — Stats, testimonials, and feature explanations are paired with graphics that correspond to their topic (bell curves near optimization copy, a waveform near the intelligence-layer copy, a 3D layer stack next to the Allocate/Analyze/Monitor/Optimize/Ask list), showing real intent to integrate visuals with meaning rather than using generic stock imagery. The stat blocks ('48% Effective savings rate', '$1B+ in cloud spend') and logo strip follow a fairly standard enterprise-SaaS proof-section template.

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

Oversized grey headlines sit on a glitchy dark hero, then a jarring violet panel with a brain graphic marks a clear shift in mood. Grainy halftone textures and thin diagram-style icons repeat down the page, giving each 'layer' section a distinct chapter while keeping the data feel consistent and easy to scan.

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