# Ramp Router: The LLM Gateway That Cuts Inference Costs — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://router.com/
Captured: 2026-10-19
CSS measured: 2026-10-19T16:12:08.673Z at 1440×1000 — https://router.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

The Ramp Router website presents a minimalist, technical, and typographic design language. It relies heavily on grid-based layouts, a muted monochromatic palette accented by neon yellow, and clean sans-serif typography (Lausanne) paired with monospace (IBM Plex Mono) for data and code. Visual hierarchy is established through stark contrasts in scale and weight, utilizing large display text and refined borders to segment information. The overall aesthetic is functional and developer-focused.

## Classification

- Industry: other
- Site type: Waitlist, Landing
- Business model: Software
- Styles: minimal, typographic, corporate, technical-developer-focused, grid-based-structual
- Platform: Custom code
- Technology: Next.js, Tailwind CSS

## Typography

- Display: Lausanne — weight 400; size 64px; line-height 64px; tracking -0.6px; Regular (100% role confidence, computed values)
- Heading: Lausanne — weight 400; size 28px; line-height 32px; tracking normal; Regular (95% role confidence, computed values)
- Body: Lausanne — weight 400; size 16px; line-height 24px; tracking normal; Regular (100% role confidence, computed values)
- Mono: IBM Plex Mono — weight 400; size 14px; line-height 16px; tracking 0.5px; uppercase (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is the primary background color for the main body and majority of the page sections. (100% role confidence, computed values)
- Text — text #000000: color-3: computed rgb(0, 0, 0); AI role: Black (#000000) is the dominant color for headings and primary text. (95% role confidence, computed values)
- Accent — accent #E7F256: color-27: computed rgb(231, 242, 86); AI role: Neon yellow (#E7F256) used for prominent highlights, specifically the large shape in the lower CTA section. (95% role confidence, computed values)
- Muted Text — muted text #6D6A65: color-10: computed rgb(109, 106, 101); AI role: Gray (#6D6A65) used for secondary text, labels, and supporting copy. (90% role confidence, computed values)
- Border — border #BBB8B3: color-15: computed rgb(187, 184, 179); AI role: Light gray (#BBB8B3) used extensively for grid lines and section borders. (85% role confidence, computed values)
- Surface — surface #131313: color-30: computed rgb(19, 19, 19); AI role: Dark gray (#131313) used for product UI mockups and dark mode sections like the footer. (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": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 29,
    "contexts": [
      {
        "tag": "p",
        "text": "One endpoint with automatic fallbacks, request-level observability, built in privacy controls, and Z",
        "top": 395,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Every model behind one key",
        "top": 1063,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Cut inference costs by 40%",
        "top": 1063,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "28px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "h2",
        "text": "Control AI spend from inference to invoice.",
        "top": 3045,
        "property": "font"
      },
      {
        "tag": "blockquote",
        "text": "Choosing the right model makes a meaningful difference to our AI spend. We run billions of tokens th",
        "top": 3542,
        "property": "font"
      },
      {
        "tag": "blockquote",
        "text": "Ramp Router has given us access to a safe one-stop-shop for model providers in a matter of minutes. ",
        "top": 3542,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "600",
    "size": "20.9px",
    "lineHeight": "25.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Turn 58",
        "top": 2125,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Turn 59",
        "top": 2337,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Turn 60",
        "top": 2548,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "64px",
    "lineHeight": "64px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h1",
        "text": "Cut inference costs in seconds",
        "top": 251,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Tokens are money.Save both.",
        "top": 6805,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "48px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Built for CTOs. Loved by CFOs.",
        "top": 1796,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Put to work at Ramp.",
        "top": 4794,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "40px",
    "lineHeight": "40px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "More from the Lab",
        "top": 5882,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "400",
    "size": "37px",
    "lineHeight": "47px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Models",
        "top": 2108,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "400",
    "size": "20.8px",
    "lineHeight": "25px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Cost impact over time",
        "top": 2122,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 63,
    "contexts": [
      {
        "tag": "a",
        "text": "FAQs",
        "top": -40,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Models",
        "top": -40,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Docs",
        "top": -40,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "p",
        "text": "Find the right model for the job. Compare up to four at once.",
        "top": 2157,
        "property": "font"
      },
      {
        "tag": "caption",
        "text": "Available models and providers",
        "top": 2294,
        "property": "font"
      },
      {
        "tag": "th",
        "text": "Model",
        "top": 2253,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 10,
    "contexts": [
      {
        "tag": "p",
        "text": "Jul 1, 2026",
        "top": 6010,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "May 27, 2026",
        "top": 6010,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "May 7, 2026",
        "top": 6010,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Valentin De Matos",
        "top": 3686,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Delphi",
        "top": 3714,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Braden Allchin",
        "top": 3686,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "563.1px",
    "lineHeight": "563.1px",
    "letterSpacing": "-33.8px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Router",
        "top": 466,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Router",
        "top": 466,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Router",
        "top": 466,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Copy for agent",
        "top": 1388,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Select all",
        "top": 4174,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Clear",
        "top": 4174,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "96px",
    "lineHeight": "97.9px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "2.75T+",
        "top": 5202,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "28px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Router was built to reduce inference costs by matching every request to the lowest-cost model that m",
        "top": 1220,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace",
    "weight": "500",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "router.com saves you time and money",
        "top": 212,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace",
    "weight": "500",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "0.5px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Tokens routed monthly",
        "top": 5286,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace, monospace",
    "weight": "400",
    "size": "11.5px",
    "lineHeight": "17.8px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "(shift+tab to cycle) · ← for agents",
        "top": 1392,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 55,
    "contexts": [
      {
        "tag": "caption",
        "text": "Cost impact data across eighteen daily samples",
        "top": 2079,
        "property": "font"
      },
      {
        "tag": "td",
        "text": "1",
        "top": 2127,
        "property": "font"
      },
      {
        "tag": "td",
        "text": "100",
        "top": 2127,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "10px",
    "lineHeight": "10px",
    "letterSpacing": "0.2px",
    "traits": "uppercase",
    "count": 48,
    "contexts": [
      {
        "tag": "span",
        "text": "$26 in model credits",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Free routing with Router API keys",
        "top": 12,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$26 in model credits",
        "top": 12,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace, monospace",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 36,
    "contexts": [
      {
        "tag": "code",
        "text": "Jul 31, 2026",
        "top": 2311,
        "property": "font"
      },
      {
        "tag": "code",
        "text": "—",
        "top": 2311,
        "property": "font"
      },
      {
        "tag": "code",
        "text": "1M",
        "top": 2311,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "span",
        "text": "Automatic savings.",
        "top": 2660,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Smarter defaults.",
        "top": 2660,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "More models. One endpoint.",
        "top": 2648,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "text",
        "text": "90%",
        "top": 4177,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "81%",
        "top": 4249,
        "property": "font"
      },
      {
        "tag": "text",
        "text": "72%",
        "top": 4321,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "400",
    "size": "17.7px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "GPT-5.6 Luna · OpenAI",
        "top": 2171,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Cached input",
        "top": 2246,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "New input",
        "top": 2246,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "$200",
        "top": 2187,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$150",
        "top": 2263,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$100",
        "top": 2339,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace, monospace",
    "weight": "400",
    "size": "16.1px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "dd",
        "text": "269,753",
        "top": 2246,
        "property": "font"
      },
      {
        "tag": "dd",
        "text": "405",
        "top": 2246,
        "property": "font"
      },
      {
        "tag": "dd",
        "text": "117",
        "top": 2246,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Coming soon",
        "top": 1624,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Coming soon",
        "top": 1624,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Coming soon",
        "top": 1624,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace, monospace",
    "weight": "400",
    "size": "12.6px",
    "lineHeight": "19.4px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "CLI",
        "top": 1254,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Switchyard enabled",
        "top": 1254,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Router",
        "top": 1298,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace, monospace",
    "weight": "400",
    "size": "12px",
    "lineHeight": "17.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "code",
        "text": "1:08:05 PM",
        "top": 2358,
        "property": "font"
      },
      {
        "tag": "code",
        "text": "$0.003094",
        "top": 2376,
        "property": "font"
      },
      {
        "tag": "code",
        "text": "1:08:17 PM",
        "top": 2420,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace",
    "weight": "400",
    "size": "14px",
    "lineHeight": "23.3px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "01",
        "top": 1063,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "02",
        "top": 1063,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "03",
        "top": 1063,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "400",
    "size": "17.7px",
    "lineHeight": "32.1px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Cache hit · 100%",
        "top": 2120,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Cache miss",
        "top": 2332,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Cache hit · 99%",
        "top": 2543,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace, monospace",
    "weight": "400",
    "size": "17.7px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "code",
        "text": "$0.003094",
        "top": 2125,
        "property": "font"
      },
      {
        "tag": "code",
        "text": "$3.7531",
        "top": 2337,
        "property": "font"
      },
      {
        "tag": "code",
        "text": "$0.3471",
        "top": 2548,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "400",
    "size": "17.7px",
    "lineHeight": "22.5px",
    "letterSpacing": "normal",
    "traits": "italic",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Follows Turn 57",
        "top": 2172,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Follows Turn 58",
        "top": 2384,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Follows Turn 59",
        "top": 2595,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "700",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "th",
        "text": "Sample",
        "top": 2103,
        "property": "font"
      },
      {
        "tag": "th",
        "text": "Total cost index",
        "top": 2103,
        "property": "font"
      },
      {
        "tag": "th",
        "text": "Flexible routing share",
        "top": 2103,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "11px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Score versus spend",
        "top": 4044,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Metric distributions",
        "top": 4044,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Model summary",
        "top": 4044,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "400",
    "size": "14.8px",
    "lineHeight": "17.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Turn 58Model output",
        "top": 2358,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Turn 59Model output",
        "top": 2420,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Turn 60Model output",
        "top": 2482,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "600",
    "size": "14.8px",
    "lineHeight": "17.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "strong",
        "text": "Turn 58",
        "top": 2358,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Turn 59",
        "top": 2420,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "Turn 60",
        "top": 2482,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", ui-monospace, monospace",
    "weight": "500",
    "size": "14px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Free routing with Router API keys",
        "top": 1181,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "|",
        "top": 1181,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "$26 in model credits",
        "top": 1181,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "Lausanne",
    "fontStack": "Lausanne, Arial, sans-serif, Arial, sans-serif",
    "weight": "400",
    "size": "13px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Search models",
        "top": 2201,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Intelligence Index",
        "top": 2201,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Filters",
        "top": 2201,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#D7D4CE",
    "alpha": 1,
    "cssValue": "rgb(215, 212, 206)",
    "count": 91,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": -544,
        "property": "svg-stroke"
      },
      {
        "tag": "use",
        "text": "",
        "top": -544,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 72,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 113,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://router.com/#organi",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "main",
        "text": "{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://router.com/#organi",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Get the API Key",
        "top": -51,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 8,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 0,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 72,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#090909",
    "alpha": 1,
    "cssValue": "rgb(9, 9, 9)",
    "count": 5,
    "contexts": [
      {
        "tag": "section",
        "text": "Turn 58Cache hit · 100%$0.003094GPT-5.6 Luna · OpenAIFollows Turn 57Cached input269,753New input405O",
        "top": 2078,
        "property": "background"
      },
      {
        "tag": "article",
        "text": "Turn 58Cache hit · 100%$0.003094GPT-5.6 Luna · OpenAIFollows Turn 57Cached input269,753New input405O",
        "top": 2102,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#1A1919",
    "alpha": 1,
    "cssValue": "rgb(26, 25, 25)",
    "count": 181,
    "contexts": [
      {
        "tag": "a",
        "text": "FAQs",
        "top": -40,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "FAQs",
        "top": -40,
        "property": "::after-background"
      },
      {
        "tag": "aside",
        "text": "$26 in model credits. Free routing with Router API keys.$26 in model creditsFree routing with Router",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F9F8F5",
    "alpha": 1,
    "cssValue": "rgb(249, 248, 245)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Router",
        "top": 466,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "curl -fsSL https://router.com/install.sh | sh",
        "top": 1420,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FDFFFF",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.999998 -0.00000980496 0.0000234246 / 0.5)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2009,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F3F0EA",
    "alpha": 1,
    "cssValue": "rgb(243, 240, 234)",
    "count": 14,
    "contexts": [
      {
        "tag": "p",
        "text": "Router",
        "top": 466,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Smarter defaults.Router tests new models against real workloads, so the best fit becomes your defaul",
        "top": 2622,
        "property": "control-background"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 5542,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#0D0E0D",
    "alpha": 1,
    "cssValue": "rgb(13, 14, 13)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Cost impact over time40% lower$200$150$100$50$01/11/91/171/252/240% Default60% FlexCost impact data ",
        "top": 2079,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#6D6A65",
    "alpha": 1,
    "cssValue": "rgb(109, 106, 101)",
    "count": 234,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1038,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Free routing with Router API keys",
        "top": 1181,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Copy for agent",
        "top": 1388,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#86837E",
    "alpha": 1,
    "cssValue": "rgb(134, 131, 126)",
    "count": 31,
    "contexts": [
      {
        "tag": "span",
        "text": "Delphi",
        "top": 3714,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Production value",
        "top": 4996,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Privacy",
        "top": 7359,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#D1CECB",
    "alpha": 1,
    "cssValue": "rgb(209, 206, 203)",
    "count": 31,
    "contexts": [
      {
        "tag": "h2",
        "text": "Turn 58",
        "top": 2125,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Cache hit · 100%",
        "top": 2120,
        "property": "text"
      },
      {
        "tag": "caption",
        "text": "Available models and providers",
        "top": 2294,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#D3CECC",
    "alpha": 1,
    "cssValue": "rgb(211, 206, 204)",
    "count": 59,
    "contexts": [
      {
        "tag": "h2",
        "text": "Cost impact over time",
        "top": 2122,
        "property": "text"
      },
      {
        "tag": "caption",
        "text": "Cost impact data across eighteen daily samples",
        "top": 2079,
        "property": "text"
      },
      {
        "tag": "th",
        "text": "Sample",
        "top": 2103,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#A29D9A",
    "alpha": 1,
    "cssValue": "rgb(162, 157, 154)",
    "count": 89,
    "contexts": [
      {
        "tag": "code",
        "text": "$0.003094",
        "top": 2125,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "GPT-5.6 Luna · OpenAI",
        "top": 2171,
        "property": "text"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2178,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#BBB8B3",
    "alpha": 1,
    "cssValue": "rgb(187, 184, 179)",
    "count": 138,
    "contexts": [
      {
        "tag": "div",
        "text": "01Every model behind one key02Cut inference costs by 40%03Scale to Trillions of tokensFree routing w",
        "top": 1038,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "CLI",
        "top": 1254,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "CLI",
        "top": 1254,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#6F6A68",
    "alpha": 1,
    "cssValue": "rgb(111, 106, 104)",
    "count": 19,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2196,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2568,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#090A09",
    "alpha": 1,
    "cssValue": "rgb(9, 10, 9)",
    "count": 1,
    "contexts": [
      {
        "tag": "aside",
        "text": "Turn 58Model output1:08:05 PM$0.003094Turn 59Model output1:08:17 PM$3.7531Turn 60Model output1:08:25",
        "top": 2344,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#A39D99",
    "alpha": 1,
    "cssValue": "rgb(163, 157, 153)",
    "count": 72,
    "contexts": [
      {
        "tag": "span",
        "text": "$26 in model credits",
        "top": 12,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "Free routing with Router API keys",
        "top": 12,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#A09E98",
    "alpha": 1,
    "cssValue": "rgb(160, 158, 152)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "Coming soon",
        "top": 1624,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4194,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#171717",
    "alpha": 1,
    "cssValue": "rgb(23, 23, 23)",
    "count": 1,
    "contexts": [
      {
        "tag": "thead",
        "text": "Model Provider ReleasedIntelligence Index Context",
        "top": 2253,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#C7C3C0",
    "alpha": 1,
    "cssValue": "rgb(199, 195, 192)",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Turn 58Model output",
        "top": 2358,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "Turn 58",
        "top": 2358,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#0C0A08",
    "alpha": 1,
    "cssValue": "rgb(12, 10, 8)",
    "count": 33,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": -42,
        "property": "svg-fill"
      },
      {
        "tag": "rect",
        "text": "",
        "top": -39,
        "property": "svg-stroke"
      },
      {
        "tag": "a",
        "text": "Get the API Key",
        "top": -51,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#7C92CD",
    "alpha": 1,
    "cssValue": "rgb(124, 146, 205)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2222,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2250,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#FFFFFF",
    "alpha": 0.027450980392156862,
    "cssValue": "rgba(255, 255, 255, 0.027)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Turn 59Model output1:08:17 PM$3.7531",
        "top": 2407,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#0A0A0A",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(9, 9, 9, 0.5)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Search models",
        "top": 2201,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#272727",
    "alpha": 1,
    "cssValue": "rgb(39, 39, 39)",
    "count": 24,
    "contexts": [
      {
        "tag": "article",
        "text": "Turn 58Cache hit · 100%$0.003094GPT-5.6 Luna · OpenAIFollows Turn 57Cached input269,753New input405O",
        "top": 2102,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "Search models",
        "top": 2201,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#E7F256",
    "alpha": 1,
    "cssValue": "rgb(231, 242, 86)",
    "count": 5,
    "contexts": [
      {
        "tag": "i",
        "text": "",
        "top": 2250,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2434,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#1C1C19",
    "alpha": 1,
    "cssValue": "rgb(28, 28, 25)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Cache hit · 100%",
        "top": 2120,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#D2CECC",
    "alpha": 1,
    "cssValue": "rgb(210, 206, 204)",
    "count": 215,
    "contexts": [
      {
        "tag": "span",
        "text": "Intelligence Index",
        "top": 2201,
        "property": "text"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2212,
        "property": "background"
      },
      {
        "tag": "i",
        "text": "",
        "top": 2312,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#131313",
    "alpha": 1,
    "cssValue": "rgb(19, 19, 19)",
    "count": 72,
    "contexts": [
      {
        "tag": "td",
        "text": "",
        "top": 2295,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#34373C",
    "alpha": 1,
    "cssValue": "rgb(52, 55, 60)",
    "count": 1,
    "contexts": [
      {
        "tag": "code",
        "text": "curl -fsSL https://router.com/install.sh | sh",
        "top": 1438,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#2C2B29",
    "alpha": 1,
    "cssValue": "rgb(44, 43, 41)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1300,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#E8E6E1",
    "alpha": 1,
    "cssValue": "rgb(232, 230, 225)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "ScoreScore versus spend",
        "top": 4037,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#BDBBB8",
    "alpha": 1,
    "cssValue": "rgb(189, 187, 184)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "40% Default",
        "top": 2563,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#ED6E6C",
    "alpha": 1,
    "cssValue": "rgb(237, 110, 108)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Cache miss",
        "top": 2332,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#361D1D",
    "alpha": 1,
    "cssValue": "rgb(54, 29, 29)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Cache miss",
        "top": 2332,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#C18064",
    "alpha": 1,
    "cssValue": "rgb(193, 128, 100)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1323,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#60D06F",
    "alpha": 1,
    "cssValue": "rgb(96, 208, 111)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "40% lower",
        "top": 2118,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#142619",
    "alpha": 1,
    "cssValue": "rgb(20, 38, 25)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "40% lower",
        "top": 2118,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#1D1D1C",
    "alpha": 1,
    "cssValue": "rgb(29, 29, 28)",
    "count": 4,
    "contexts": [
      {
        "tag": "table",
        "text": "Available models and providersModel Provider ReleasedIntelligence Index Context DeepSeek-V4-Flash-07",
        "top": 2252,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#908C88",
    "alpha": 0.2784313725490196,
    "cssValue": "rgba(145, 141, 136, 0.28)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2193,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#242524",
    "alpha": 1,
    "cssValue": "rgb(36, 37, 36)",
    "count": 4,
    "contexts": [
      {
        "tag": "section",
        "text": "Cost impact over time40% lower$200$150$100$50$01/11/91/171/252/240% Default60% FlexCost impact data ",
        "top": 2079,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#A39D9A",
    "alpha": 1,
    "cssValue": "rgb(163, 157, 154)",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "$200",
        "top": 2187,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#242424",
    "alpha": 1,
    "cssValue": "rgb(36, 36, 36)",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2312,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#82B436",
    "alpha": 1,
    "cssValue": "rgb(130, 180, 54)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Switchyard enabled",
        "top": 1254,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#111100",
    "alpha": 0.058823529411764705,
    "cssValue": "oklab(0.146455 0.00202614 0.0053184 / 0.06)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 3861,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-47",
    "hex": "#E3BC57",
    "alpha": 1,
    "cssValue": "rgb(227, 188, 87)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1373,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "auto mode on",
        "top": 1367,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-48",
    "hex": "#E9F270",
    "alpha": 1,
    "cssValue": "rgb(233, 242, 112)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1300,
        "property": "background"
      }
    ]
  }
]
```

### 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: Content is structured using a rigid, visible grid system defined by 1px solid borders, creating uniform, boxy padding across sections and components.
- Corner style: Sharp, 0px border radius is standard across layout containers, panels, and most UI elements, reinforcing the brutalist/technical aesthetic.
- Radius: 0px for main layout elements; slight rounding may appear inside specific product UI mockups (e.g., tags).
- Borders: Thin, solid 1px borders (often light gray #BBB8B3) are used extensively to divide layout sections, create tables, and outline cards.
- Buttons: Buttons are typically sharp-edged rectangles, either solid black for primary actions or transparent with thin borders for secondary actions.
- Content width: The layout stretches wide, utilizing full viewport widths for sections while constraining typography to readable max-widths within the grid cells.
- Density: Moderate density. While there is ample whitespace in the macro layout, technical sections (tables, graphs, UI mockups) present data densely.
- Evidence: Visible grid lines separating features, flat background colors, sharp corners on cards and buttons, and clear division of space.

## Sections

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

1. **Hero — Cut inference costs hero** (Home)
   AI suggestion (97% confidence): Complete page-opening hero with promotional strip, navigation, focused value proposition, dual CTAs, and distinctive oversized brand artwork.
   Capture: 1440×966px; page bounds 0–966px of 7423px; source section ID: `dd72c949-68a7-4685-8c69-ea7b297abe13`; image: https://media.designdetails.io/library/1ea4728e74071402bd083201c1dd45d7adefc81dccf309ddba046092d648e91b/dd72c949-68a7-4685-8c69-ea7b297abe13.webp
   SECTION.md v3.2: `dd72c949-68a7-4685-8c69-ea7b297abe13` (deterministic evidence; editorial review pending)
2. **Features — Built for CTOs. Loved by CFOs.** (Home)
   Reusable feature composition from Home, organized around “Built for CTOs. Loved by CFOs.”.
   Capture: 1440×1120px; page bounds 1796–2916px of 7423px; source section ID: `75ea4b2f-be06-43d0-b383-83880f4ee1c4`; image: https://media.designdetails.io/library/627a9e955d03fdfd1b56405d93e1e7b0460913f663193e508a25839f35d58d39/section_crop-75ea4b2f-2026-10-19T16-12-19-758Z.webp
   SECTION.md v3.2: `75ea4b2f-be06-43d0-b383-83880f4ee1c4` (deterministic evidence; editorial review pending)
3. **Features — Control AI spend from inference to invoice.** (Home)
   Reusable feature composition from Home, organized around “Control AI spend from inference to invoice.”.
   Capture: 1440×551px; page bounds 2916–3467px of 7423px; source section ID: `458af72e-fd71-4340-84d7-77346f2488fe`; image: https://media.designdetails.io/library/401b3674df3e94a6f76fb944ed70e9362a02a2908424eec91ff8cd1bcc84fc9e/section_crop-458af72e-2026-10-19T16-12-20-722Z.webp
   SECTION.md v3.2: `458af72e-fd71-4340-84d7-77346f2488fe` (deterministic evidence; editorial review pending)
4. **Testimonials — What teams say about Router** (Home)
   Testimonials composition from Home, organized around “What teams say about Router”.
   Capture: 1440×554px; page bounds 3467–4021px of 7423px; source section ID: `5307ff9c-9925-4970-a1f6-e2b683794e12`; image: https://media.designdetails.io/library/579b9e8926d1f3ba65f3adf31df01bf68aaa52bea62eb0971a04d268007d31c4/section_crop-5307ff9c-2026-10-19T16-12-21-699Z.webp
   SECTION.md v3.2: `5307ff9c-9925-4970-a1f6-e2b683794e12` (deterministic evidence; editorial review pending)
5. **Features — Put to work at Ramp.** (Home)
   Reusable feature composition from Home, organized around “Put to work at Ramp.”.
   Capture: 1440×1088px; page bounds 4794–5882px of 7423px; source section ID: `e97b7cc3-a0dd-4eae-b585-23343e9d1afe`; image: https://media.designdetails.io/library/23df9ad82826a206b40f4eff3ba1f705ffbcc83dec044ed2b91aa7e615d64455/section_crop-e97b7cc3-2026-10-19T16-12-23-548Z.webp
   SECTION.md v3.2: `e97b7cc3-a0dd-4eae-b585-23343e9d1afe` (deterministic evidence; editorial review pending)
6. **Features — Every model behind one key** (Home)
   AI suggestion (94% confidence): Self-contained tabbed feature showcase combining a cost-reduction explanation, install command, product interface visual, and supporting model-provider logo row.
   Capture: 1440×645px; page bounds 1035–1680px of 7423px; source section ID: `231bcd28-faab-4b0c-a8c2-a54cbf020316`; image: https://media.designdetails.io/library/28e2160367229e07c369c21b9efea5b669bfb6b5e8ed951f16c58c792e60ff17/231bcd28-faab-4b0c-a8c2-a54cbf020316.webp
   SECTION.md v3.2: `231bcd28-faab-4b0c-a8c2-a54cbf020316` (deterministic evidence; editorial review pending)
7. **Testimonial Card — Delphi AI Spend Testimonial** (Home)
   AI suggestion (97% confidence): Complete, self-contained customer quote card with brand mark, quantified 92% cost reduction, portrait, name, and company attribution.
   Capture: 1440×357px; page bounds 3473–3830px of 7423px; source section ID: `5b639512-6b55-455b-8f19-4f5ecc01d63b`; image: https://media.designdetails.io/library/e3a014d99b3ac57a86cc2b253694478365c03a7b592fd7ac75f85358d13471a0/5b639512-6b55-455b-8f19-4f5ecc01d63b.webp
   SECTION.md v3.2: `5b639512-6b55-455b-8f19-4f5ecc01d63b` (deterministic evidence; editorial review pending)
8. **Product Demo — Real-Work AI Benchmark Explorer** (Home)
   AI suggestion (93% confidence): Complete split-layout product demonstration pairing a detailed model cost-versus-performance benchmark UI with explanatory copy and a clear exploration CTA.
   Capture: 1440×651px; page bounds 4022–4673px of 7423px; source section ID: `30f7c28e-15db-4a11-b987-83f3a2e19af3`; image: https://media.designdetails.io/library/10a75e4a290b09f41d56032dbfe10769dc5555aba8082378f926d8a7383ee264/30f7c28e-15db-4a11-b987-83f3a2e19af3.webp
   SECTION.md v3.2: `30f7c28e-15db-4a11-b987-83f3a2e19af3` (deterministic evidence; editorial review pending)
9. **Blog — More from the Lab article carousel** (Home)
   AI suggestion (88% confidence): Complete editorial carousel with section heading, dated article cards, summaries, post links, and navigation controls.
   Capture: 1440×571px; page bounds 5876–6447px of 7423px; source section ID: `60c0a01f-bee1-4167-af39-db33da7070b2`; image: https://media.designdetails.io/library/07a7d7b2362aba2f03ddddba1924a919182b8caaaa473dd25a397ef2b8a9fbdd/60c0a01f-bee1-4167-af39-db33da7070b2.webp
   SECTION.md v3.2: `60c0a01f-bee1-4167-af39-db33da7070b2` (deterministic evidence; editorial review pending)
10. **CTA — Tokens are money CTA** (Home)
   AI suggestion (98% confidence): Distinctive full-width conversion section with bold neon graphic, concise value statement, and two clear action buttons.
   Capture: 1440×716px; page bounds 6549–7265px of 7423px; source section ID: `a79cf7d5-9dc2-4a57-94a6-ca75431d8193`; image: https://media.designdetails.io/library/69bbbba602f132503779df29580bc7a55ac074cd30521ea3c5ecab3f51717b04/a79cf7d5-9dc2-4a57-94a6-ca75431d8193.webp
   SECTION.md v3.2: `a79cf7d5-9dc2-4a57-94a6-ca75431d8193` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/f6eaef59746a38b86b3df4e408712b642b2534bb550038da3f5e82e912d18bef/desktop_full-b1ee14cb-2026-10-19T16-12-08-706Z.webp
- Mobile screenshot: https://media.designdetails.io/library/68de618e41df427eabecf2c89991f0dbcf87d3dd800987294d54c5736b5d2557/mobile_full-b1ee14cb-2026-10-19T16-12-56-992Z.webp
- Open Graph image: https://media.designdetails.io/library/059b791691f30a403627f44edce4d6504c41b3b6d8ce1d209496757f0b0d060d/og_image-b1ee14cb-2026-10-19T16-12-16-858Z.webp
- Full-page video: https://media.designdetails.io/library/e1275208b9ce7e8d2340acc7a82a7637d92ca3b14a758351bfcae03e53777a7b/motion-1792427448535.mp4
- Video poster: https://media.designdetails.io/library/148e9799ab1ede58f935b58ae14f16abd16c73c62c54ac589c2951a570654fdb/motion-poster-1792427448535.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
- Feature Card
- Testimonial Card
- Product UI
- Logo Strip
- Editorial Card
- Primary Button
- Outline Button
- Footer
- Data Visualization Block
- Oversized Background Typography

## Quality rubric

Overall: 51/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Ramp Router executes a clean, grid-disciplined, data-literate design system with a confident type pairing and content-specific components, but the near-total absence of motion beyond a single hero scroll effect, combined with a now-familiar 'technical minimalism' visual language, keeps the overall experience solidly competent rather than good or strong.

- Typography (15%): 64 — A deliberate two-family system (Lausanne sans for display/body, IBM Plex Mono uppercase for technical labels/data) is applied with real range and purpose, from a 563px blurred wordmark down to 10px mono tags. Scale steps (96, 64, 48, 40, 28, 24, 16, 13-14, 10-12) are used with apparent intent to separate hero statements, section heads, card titles, and data callouts.
- Color (10%): 58 — The palette is restrained and purposeful: white canvas, black/near-black text, warm neutral grays for borders and secondary text, and a single neon-yellow accent reserved for the CTA blob and chart highlights. This is disciplined but is also a very common contemporary B2B/dev-tool formula (black/white + one accent + dark mockup panels).
- Layout (20%): 66 — A visible, consistently applied grid (1px borders dividing feature cards, tables, testimonials, and blog cards) gives the page a legible structural rhythm that holds across very different content types—marketing copy, data tables, scatter plots, and editorial cards—which is a genuine systemic achievement rather than a single styled section.
- Motion (20%): 28 — The only authored motion identified across the entire scroll is a single scroll-linked blur/focus effect on the oversized background 'Router' text in the hero. No other transitions, hover feedback, card reveals, or chart animation are evidenced; the rest of the page is a static scroll.
- Originality (25%): 42 — The core devices—an oversized blurred background wordmark, a bordered 'technical minimalism' grid, and monospace data labeling—are now widely used across AI infrastructure and dev-tool marketing sites. Execution is clean but the ideas themselves are not distinctive or hard to substitute; this reads as a well-made instance of a familiar idiom rather than a site with several uncommon, purpose-built ideas.
- Content (10%): 63 — Content and layout are well matched: monospace typography and dark 'terminal' panels are reserved specifically for technical/data content (tagged requests, CLI output, cost charts, benchmark scatter plot), while sans-serif and light panels carry narrative and testimonial copy. Specific, real-looking data (model costs, cache hit rates, token counts) is integrated into bespoke components rather than generic stock imagery.

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 huge pale wordmark fading behind a soft grey gradient sets a calm tone before dark terminal style panels show live cost comparisons and command line snippets, grounding an abstract product in real numbers. Numbered sections, mono labelled stats, and a bright yellow closing block pace the long page and make the savings claim easy to scan and trust.

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