# Gradium — Design Reference

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

## Design direction

The website employs a highly striking, dark-themed visual language centered around massive, scroll-responsive typography and dense, data-driven interactive visualizations. The design relies heavily on stark contrast, using a deep black canvas punctuated by bright, high-chroma neon accents in structural blocks and charts. Layered, semi-transparent UI mockups float above complex, particle-based background animations, creating a strong sense of depth and technical sophistication.

## Classification

- Industry: ai
- Site type: Landing, Blog
- Business model: Software
- Styles: bold, typographic, minimal, colourful, dark-mode-native, glassmorphic-tech
- Platform: Custom code
- Technology: Next.js, Three.js

## Typography

- Display: favorit — weight 700; size 180px; line-height 180px; tracking -10.8px; Regular (100% role confidence, computed values)
- Heading: favorit — weight 400; size 56px; line-height 56px; tracking normal; Regular (95% role confidence, computed values)
- Body: IBM Plex Sans — weight 400; size 18px; line-height 29.3px; tracking normal; Regular (90% role confidence, computed values)
- Mono: IBM Plex Mono — weight 400; size 12px; line-height 16px; tracking normal; uppercase (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #121314: color-1: computed rgb(18, 19, 20); AI role: The dominant dark background color (rgb 18, 19, 20) applied to the body and major sections. (100% role confidence, computed values)
- Text — text #FFFFFF: color-8: computed rgb(255, 255, 255); AI role: Solid white used for high-contrast primary text, headings, and active buttons against the dark canvas. (95% role confidence, computed values)
- Muted Text — muted text #7E7E7E: color-6: computed rgb(126, 126, 126); AI role: A mid-grey (#7E7E7E) used extensively for secondary text, inactive UI elements, and subtle labels. (90% role confidence, computed values)
- Accent — accent #DAFF52: color-15: computed rgb(218, 255, 82); AI role: A vibrant neon yellow/green (#DAFF52) used for the announcement bar and primary data visualization bars. (90% role confidence, computed values)
- Surface — surface #AED2FF: color-3: computed rgb(174, 210, 255); AI role: A light blue (#AED2FF) used as a distinct, high-contrast background block for the infrastructure section. (85% role confidence, computed values)
- Accent — accent #1CA0FF: color-14: computed rgb(28, 160, 255); AI role: A bright blue (#1CA0FF) used as the background color for one of the prominent testimonial cards. (85% 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": "favorit",
    "fontStack": "favorit, \"favorit Fallback\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h3",
        "text": "Real-time API",
        "top": 6510,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Runs where you need it",
        "top": 6690,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "One-prompt install SDKs.",
        "top": 6523,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\", sans-serif",
    "weight": "400",
    "size": "56px",
    "lineHeight": "56px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Built by the pioneers of voice AI",
        "top": 4894,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Agents that stay accurate and on time at scale, not just in the demo.",
        "top": 5344,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "The voice layer of products people actually talk to.",
        "top": 7186,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "56px",
    "lineHeight": "56px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Full suite of voice AI models to power your agents",
        "top": 1467,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\", sans-serif",
    "weight": "400",
    "size": "52px",
    "lineHeight": "52px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Behaves the same for one request or a hundred thousand.",
        "top": 6186,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "29.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "p",
        "text": "Built to withstand the hard real-world problems: latency, reliability, and scale.",
        "top": 1595,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Expressive streaming, timestamp-accurate, custom pronunciations, scalable concurrency.",
        "top": 2313,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Code-switching, controllable latency, custom pronunciation, semantic VAD for turn-taking.",
        "top": 2313,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "p",
        "text": "Original voice",
        "top": 2799,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Cloned voice",
        "top": 2799,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "[ 1 ] Venus de Milo (Aphrodite). Date: 2nd century BC (c. 150–125 BC), Hellenistic period. Material:",
        "top": 8895,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Live Translation",
        "top": 3547,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Models",
        "top": 9141,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Showcase",
        "top": 9141,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "No credit card required",
        "top": 1270,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Click to start recording",
        "top": 2105,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Translate to",
        "top": 3430,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "24px",
    "lineHeight": "39px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Text-to-Speech",
        "top": 2272,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Speech-to-Text",
        "top": 2272,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Voice Cloning",
        "top": 3097,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Streaming WebSocket APIs with latency that stays flat as concurrency climbs, and deployment that fit",
        "top": 6306,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Bidirectional WebSocket streaming. Start sending before ready returns; first audio in ~200 ms. Telep",
        "top": 6538,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Cloud API, dedicated instances, self-hosted, on-prem for data sovereignty, and cloud-provider market",
        "top": 6718,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "komuna",
    "fontStack": "komuna, \"komuna Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "3px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Powering live conversations every day",
        "top": 1116,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Models",
        "top": 1435,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Infrastructure",
        "top": 6154,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "IBM Plex Mono",
    "fontStack": "\"IBM Plex Mono\", \"IBM Plex Mono Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "CEO at COVAL",
        "top": 7848,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "CEO at Daily",
        "top": 8055,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "CEO at Acolad",
        "top": 7615,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\"",
    "weight": "700",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Brooke Hopkins",
        "top": 7830,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Bertrand Gstalder",
        "top": 7597,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Marine Boudot",
        "top": 7935,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Coval's evaluation agents only work if the synthetic callers sound real and behave consistently acro",
        "top": 7678,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "At Wonderful, we put voice agents into production inside enterprises, where customers judge an agent",
        "top": 7766,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Check it out",
        "top": 13,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "© 2026 Gradium. All rights reserved.",
        "top": 9736,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "104px",
    "lineHeight": "104px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "5.3%",
        "top": 5630,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Choosing the right models for voice agents is very important. We recommend Gradium for low latency, ",
        "top": 7791,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "By combining our deep linguistic expertise and global operational scale with Gradium’s groundbreakin",
        "top": 7391,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\"",
    "weight": "700",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Kwindla Hultman Kramer",
        "top": 8034,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\"",
    "weight": "350",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "NewIntroducing Phonon ・ Our first open, on-device TTS model",
        "top": 13,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
    "weight": "400",
    "size": "4px",
    "lineHeight": "4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 100,
    "contexts": [
      {
        "tag": "span",
        "text": "0.414",
        "top": 6472,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "0.049",
        "top": 6472,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "0.982",
        "top": 6472,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "button",
        "text": "Products",
        "top": 67,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pricing",
        "top": 67,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Blog",
        "top": 67,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "a",
        "text": "Try now",
        "top": 1220,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Talk to us",
        "top": 1220,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Clone your voice",
        "top": 2859,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "0:00",
        "top": 620,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "0:00",
        "top": 1896,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "5.3%",
        "top": 5625,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "textarea",
        "text": "Real-time, expressive voice models, built for the hard parts of real conversations... Yeah! That's t",
        "top": 494,
        "property": "font"
      },
      {
        "tag": "textarea",
        "text": "Real-time, expressive voice models, built for the hard parts of real conversations... Yeah! That's t",
        "top": 1772,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "A calm woman in her forties, clearly audible…",
        "top": 2732,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Harper",
        "top": 621,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "English",
        "top": 621,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Eva",
        "top": 2875,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "English",
        "top": 3469,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "French",
        "top": 3469,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Spanish",
        "top": 3469,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\"",
    "weight": "400",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Apple",
        "top": 3452,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Android",
        "top": 3452,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Raspberry",
        "top": 3452,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "TTS",
        "top": 5637,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sonic 3.6",
        "top": 5694,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "TTS Flash 2",
        "top": 5752,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\", sans-serif",
    "weight": "700",
    "size": "180px",
    "lineHeight": "180px",
    "letterSpacing": "-10.8px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Start",
        "top": 8367,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "building",
        "top": 8547,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "500",
    "size": "172px",
    "lineHeight": "172px",
    "letterSpacing": "-6.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Real-world",
        "top": 288,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "voice models",
        "top": 596,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "komuna",
    "fontStack": "komuna, \"komuna Fallback\"",
    "weight": "400",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "New",
        "top": 13,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "IBM Plex Sans",
    "fontStack": "\"IBM Plex Sans\", \"IBM Plex Sans Fallback\", -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "a",
        "text": "Text-to-Speech",
        "top": 9173,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Speech-to-Text",
        "top": 9204,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Live Translation",
        "top": 9235,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "a",
        "text": "Discover",
        "top": 2396,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Discover",
        "top": 2396,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Discover",
        "top": 3220,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\", sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "button",
        "text": "Text-to-speech",
        "top": 442,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Speech-to-text",
        "top": 442,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Voice clone",
        "top": 442,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\", sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "World-level streaming",
        "top": 5530,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Ultra-low stable latency",
        "top": 5530,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Scalable, on any infra",
        "top": 5530,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\"",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "a",
        "text": "[ 1 ]",
        "top": 1811,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "[ 2 ]",
        "top": 6641,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "[ 3 ]",
        "top": 7575,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\", sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "French woman",
        "top": 2808,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Radio host",
        "top": 2808,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Texan elder",
        "top": 2808,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "favorit",
    "fontStack": "favorit, \"favorit Fallback\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Cookie Settings",
        "top": 9359,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#121314",
    "alpha": 1,
    "cssValue": "rgb(18, 19, 20)",
    "count": 130,
    "contexts": [
      {
        "tag": "body",
        "text": "{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Gradium\",\"url\":\"https://gradium.ai\",",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "New",
        "top": 13,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "Powering live conversations every dayTry nowTalk to usNo credit card required",
        "top": 1044,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 22,
    "contexts": [
      {
        "tag": "p",
        "text": "NewIntroducing Phonon ・ Our first open, on-device TTS model",
        "top": 13,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Check it out",
        "top": 7,
        "property": "control-background"
      },
      {
        "tag": "section",
        "text": "Real-worldvoice modelsText-to-speechSpeech-to-textVoice cloneVoice DesignLive TranslationReal-time, ",
        "top": 44,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#AED2FF",
    "alpha": 1,
    "cssValue": "rgb(174, 210, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "InfrastructureBehaves the same for one request or a hundred thousand.Streaming WebSocket APIs with l",
        "top": 6034,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#F2F2F2",
    "alpha": 1,
    "cssValue": "rgb(242, 242, 242)",
    "count": 90,
    "contexts": [
      {
        "tag": "div",
        "text": "NewIntroducing Phonon ・ Our first open, on-device TTS modelNewIntroducing Phonon ・ Our first open, o",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Check it out",
        "top": 13,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 16,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#1D1E21",
    "alpha": 1,
    "cssValue": "rgb(29, 30, 33)",
    "count": 38,
    "contexts": [
      {
        "tag": "a",
        "text": "Sign in",
        "top": 58,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Real-time, expressive voice models, built for the hard parts of real conversations... Yeah! That's t",
        "top": 1752,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "English",
        "top": 3469,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#7E7E7E",
    "alpha": 1,
    "cssValue": "rgb(126, 126, 126)",
    "count": 183,
    "contexts": [
      {
        "tag": "span",
        "text": "Real-world",
        "top": 288,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Speech-to-text",
        "top": 442,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Powering live conversations every day",
        "top": 1116,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#212225",
    "alpha": 1,
    "cssValue": "rgb(33, 34, 37)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2498,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 22,
    "contexts": [
      {
        "tag": "button",
        "text": "Text-to-speech",
        "top": 442,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 473,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "",
        "top": 610,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#18191B",
    "alpha": 1,
    "cssValue": "rgb(24, 25, 27)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Real-time, expressive voice models, built for the hard parts of real conversations... Yeah! That's t",
        "top": 1740,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#1E1E21",
    "alpha": 0.30196078431372547,
    "cssValue": "oklab(0.235214 0.000130512 -0.00591978 / 0.3)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Real-time, expressive voice models, built for the hard parts of real conversations... Yeah! That's t",
        "top": 474,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#000000",
    "alpha": 0.30196078431372547,
    "cssValue": "oklab(0 0 0 / 0.3)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Click to start recording",
        "top": 1996,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#D895FF",
    "alpha": 1,
    "cssValue": "rgb(216, 149, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "[ 3 ]",
        "top": 7567,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#000000",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(0, 0, 0, 0.1)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Text-to-speechSpeech-to-textVoice cloneVoice DesignLive TranslationReal-time, expressive voice model",
        "top": 426,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#1CA0FF",
    "alpha": 1,
    "cssValue": "rgb(28, 160, 255)",
    "count": 28,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 6464,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "By combining our deep linguistic expertise and global operational scale with Gradium’s groundbreakin",
        "top": 7279,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#DAFF52",
    "alpha": 1,
    "cssValue": "rgb(218, 255, 82)",
    "count": 26,
    "contexts": [
      {
        "tag": "span",
        "text": "New",
        "top": 13,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "5.3%",
        "top": 5613,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#000000",
    "alpha": 0.1450980392156863,
    "cssValue": "oklab(0 0 0 / 0.144218)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "ProductsPricingBlogResourcesTalk to usSign inTalk to usSign inSpotlight postGradium Extends Funding ",
        "top": 44,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "oklab(0 0 0 / 0.2)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "0:00HarperEnglish",
        "top": 602,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFFFFF",
    "alpha": 0.12549019607843137,
    "cssValue": "rgba(255, 255, 255, 0.125)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "5.3%",
        "top": 5671,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#0C0D0F",
    "alpha": 1,
    "cssValue": "rgb(12, 13, 15)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6546,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#4A4B4E",
    "alpha": 1,
    "cssValue": "rgb(74, 75, 78)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Streaming WebSocket APIs with latency that stays flat as concurrency climbs, and deployment that fit",
        "top": 6306,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#1C1E21",
    "alpha": 0.6,
    "cssValue": "oklab(0.235214 0.000130512 -0.00591978 / 0.6)",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "CEO at COVAL",
        "top": 7848,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#7F7F7F",
    "alpha": 0.6,
    "cssValue": "oklab(0.5931 0.0000270307 0.0000119209 / 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Coval 30d · Gradium Default.",
        "top": 5791,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#A5A6AA",
    "alpha": 1,
    "cssValue": "rgb(165, 166, 170)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Real-time, expressive voice",
        "top": 3591,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#F2F2F2",
    "alpha": 0.0784313725490196,
    "cssValue": "oklab(0.961146 0.00004372 0.0000192523 / 0.08)",
    "count": 3,
    "contexts": [
      {
        "tag": "button",
        "text": "Radio host",
        "top": 2808,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#F0F0F0",
    "alpha": 0.2,
    "cssValue": "oklab(0.961145 0.00004372 0.0000192523 / 0.2)",
    "count": 63,
    "contexts": [
      {
        "tag": "button",
        "text": "Harper",
        "top": 613,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "Talk to us",
        "top": 1220,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2424,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#FFFFFF",
    "alpha": 0.8,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.8)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Harper",
        "top": 1979,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#37383A",
    "alpha": 1,
    "cssValue": "rgb(55, 56, 58)",
    "count": 38,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1362,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 5314,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#F3F3F3",
    "alpha": 0.1607843137254902,
    "cssValue": "oklab(0.961145 0.00004372 0.0000192523 / 0.16)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "French woman",
        "top": 2808,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#F1F1F1",
    "alpha": 0.5019607843137255,
    "cssValue": "oklab(0.961145 0.00004372 0.0000192523 / 0.5)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Translate to",
        "top": 3430,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#FFFFFF",
    "alpha": 0.01568627450980392,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.0160242)",
    "count": 1,
    "contexts": [
      {
        "tag": "nav",
        "text": "ProductsPricingBlogResourcesTalk to usSign inTalk to usSign inSpotlight postGradium Extends Funding ",
        "top": 44,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.2)",
    "count": 5,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 3739,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "",
        "top": 9415,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#60E21A",
    "alpha": 1,
    "cssValue": "rgb(96, 226, 26)",
    "count": 27,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 6464,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#FFB592",
    "alpha": 1,
    "cssValue": "rgb(255, 181, 146)",
    "count": 23,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 6464,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#FFFFFF",
    "alpha": 0.2980392156862745,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.3)",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "English",
        "top": 3461,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "oklab(0.999994 0.0000455678 0.0000200868 / 0.1)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1948,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#7E7E7E",
    "alpha": 0.27058823529411763,
    "cssValue": "rgba(126, 126, 126, 0.27)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 60,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#F2F2F2",
    "alpha": 0.4,
    "cssValue": "oklab(0.961145 0.00004372 0.0000192523 / 0.4)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Sign in",
        "top": 58,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#FFFFFF",
    "alpha": 0.6980392156862745,
    "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.7)",
    "count": 3,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 3747,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 3750,
        "property": "svg-stroke"
      }
    ]
  }
]
```

### 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 macro-spacing between sections to allow scroll animations to breathe; tighter, structured padding within grid cards and UI mockups.
- Corner style: Consistent use of soft, rounded corners on container elements, including product interface mocks, feature cards, and buttons.
- Radius: Medium border radii (likely 8px-16px) visible on buttons and nested UI elements, with slightly larger radii on the outer feature cards.
- Borders: Subtle, highly transparent borders (e.g., rgba(255,255,255,0.1) or low-alpha greys) used to define edges of glassmorphic containers without visual heavy lines.
- Buttons: Pill-shaped containers with distinct states: solid white for primary actions, and dark semi-transparent for secondary/ghost buttons.
- Content width: Variable; standard readable line lengths for paragraph copy, expanding to wide, multi-column grids for feature matrices and testimonials.
- Density: Variable density. Very sparse in hero and typographic transition zones to emphasize scale, but highly dense inside the product UI mockups.
- Evidence: Derived from CSS border-radius and spacing visible in the visual crops, the contrast between massive text and small UI details, and the structural grid layouts observed in the screenshots.

## Sections

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

1. **Hero — Real-world voice models hero** (Home)
   AI suggestion (98% confidence): Complete, substantial hero with oversized messaging, distinctive particle-loop artwork, and a centered interactive voice demo panel.
   Capture: 1440×966px; page bounds 48–1014px of 9782px; source section ID: `7df7f3d9-e45b-4975-a57b-53d407d78b13`; image: https://media.designdetails.io/library/09a74608683c37a4e061f860e89ba83a6925c470603ba81df70dff4f1639d06b/7df7f3d9-e45b-4975-a57b-53d407d78b13.webp
   SECTION.md v3.2: `7df7f3d9-e45b-4975-a57b-53d407d78b13` (deterministic evidence; editorial review pending)
2. **Logo Cloud — Customer logo cloud and trial CTA** (Home)
   AI suggestion (94% confidence): Self-contained trust section featuring a full row of customer logos, supporting statement, and compact Try now/Talk to us conversion actions.
   Capture: 1440×345px; page bounds 1026–1371px of 9782px; source section ID: `4b62a6f2-dc74-42b4-b3a7-044df0a517f5`; image: https://media.designdetails.io/library/496f53f27f8c636681fe25e180104ce0d5763c21202a482e8667e0e1b90dc43f/4b62a6f2-dc74-42b4-b3a7-044df0a517f5.webp
   SECTION.md v3.2: `4b62a6f2-dc74-42b4-b3a7-044df0a517f5` (deterministic evidence; editorial review pending)
3. **Founder — Built by the pioneers of voice AI** (Home)
   AI suggestion (96% confidence): Complete founder-story banner with a full team portrait, prominent positioning statement, supporting copy, and video action; visually distinctive and useful as a standalone reference.
   Capture: 1440×999px; page bounds 4205–5204px of 9782px; source section ID: `d2023fb6-23cf-441d-bfca-30946d228006`; image: https://media.designdetails.io/library/1b18c1d543d2d625aca559b5476c99c621643945708982bc0b33b7fbe6d252d3/d2023fb6-23cf-441d-bfca-30946d228006.webp
   SECTION.md v3.2: `d2023fb6-23cf-441d-bfca-30946d228006` (deterministic evidence; editorial review pending)
4. **Features — Scalable Voice Infrastructure** (Home)
   AI suggestion (98% confidence): Complete light-blue infrastructure section with its own heading, supporting copy, four capability descriptions, central product artwork, and clear boundaries above and below.
   Capture: 1440×993px; page bounds 6043–7036px of 9782px; source section ID: `54f4d051-b7f8-4a3f-9153-bb3b2543e1bf`; image: https://media.designdetails.io/library/e692a9becd593054691b3762e6e630eb6d84203a0f87b96273530cb4cf80d994/54f4d051-b7f8-4a3f-9153-bb3b2543e1bf.webp
   SECTION.md v3.2: `54f4d051-b7f8-4a3f-9153-bb3b2543e1bf` (deterministic evidence; editorial review pending)
5. **CTA — Start Building CTA** (Home)
   AI suggestion (91% confidence): Distinctive conversion section with prominent “Start building” headline, two action buttons, particle-based artwork, and supporting attribution details.
   Capture: 1440×882px; page bounds 8206–9088px of 9782px; source section ID: `f7f84271-b676-4fda-b37b-d0959566c997`; image: https://media.designdetails.io/library/b946f3fd69f18dcbdbe427b16edf1335876c75f56386763bb1420159a0a13297/f7f84271-b676-4fda-b37b-d0959566c997.webp
   SECTION.md v3.2: `f7f84271-b676-4fda-b37b-d0959566c997` (deterministic evidence; editorial review pending)
6. **Footer — Gradium Link Footer** (Home)
   AI suggestion (98% confidence): Complete, substantial footer with organized navigation columns, legal links, divider, copyright, and an oversized Gradium wordmark.
   Capture: 1440×664px; page bounds 9118–9782px of 9782px; source section ID: `9f60787b-1adc-4d84-9710-7d580c2b9706`; image: https://media.designdetails.io/library/26ca87a9d7b2a450b0be2619e88947a9c421cfb9d77f82cbf2cd63cf28268ba9/9f60787b-1adc-4d84-9710-7d580c2b9706.webp
   SECTION.md v3.2: `9f60787b-1adc-4d84-9710-7d580c2b9706` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/92fc0c63ef32e9e1eba3e1cc07a59870e5660d2251f3869a25ab3400d75d9c81/desktop_full-56897e0d-2026-10-24T19-28-56-752Z.webp
- Mobile screenshot: https://media.designdetails.io/library/309f78b431a61815beb649be663186bab2c4b28addabe8d7df6e88f7b76657f1/mobile_full-56897e0d-2026-10-24T19-29-49-355Z.webp
- Open Graph image: https://media.designdetails.io/library/41107dad5059ed4ca831ed62d84d6c7ed5195f8fb7b40e18c456593fbd818166/og_image-56897e0d-2026-10-24T19-29-06-036Z.webp
- Full-page video: https://media.designdetails.io/library/28637d896a1576d4ebb639ffe65911220c0e2ce9444dcc7113d6893a980aee3b/motion-1792870453671.mp4
- Video poster: https://media.designdetails.io/library/66b278cb55fb1fa7d5ff66650c28253005d10728bb30272a566c09dfa6e33c24/motion-poster-1792870453671.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
- Product UI
- Stat Block
- Testimonial Card
- Footer
- Scroll Reactive Typography
- Masonry Testimonial Grid
- Particle Depth Field

## Quality rubric

Overall: 59.8/100 (Competent)
Evidence coverage: 100%
Judge tier: Good
Verdict: Gradium executes a polished, internally consistent version of the current dark-mode AI-startup aesthetic: a confident type hierarchy anchored by oversized tracked display text, product-accurate UI mockups woven into feature copy, and a data-visualization stat block that gives the typography real content weight. Its main limitation is that nearly every signature move — the particle depth field, the scroll-scrubbed hero text, the neon-on-black palette — is now a widely recognized convention in this product category, so the site reads as very competent genre execution rather than a landmark or highly original design statement. Motion evidence is also concentrated almost entirely in the hero, leaving the rest of the page's dynamic behavior unverified.

- Typography (15%): 69 — A deliberate three-tier type system (180px/172px Favorit display, 52-56px Favorit headings, 18px IBM Plex Sans body, 12px IBM Plex Mono/komuna uppercase labels) is applied consistently across the page, with the oversized display type doubling as structural/background art via extreme negative tracking (-10.8px, -6.1px). This is executed cleanly and the hierarchy holds together, but the 'giant tight-tracked display word over art' move is now a common genre convention for AI/SaaS sites rather than a distinguishing typographic idea.
- Color (10%): 58 — A near-black canvas (#121314) with white text and a single neon lime accent (#DAFF52) for data bars/announcement bar is a now-familiar dark-mode-plus-neon AI-startup palette. The light blue infrastructure block and the saturated lime/blue/purple testimonial cards add welcome punctuation, but the palette reads as competent genre execution rather than a considered, original color system.
- Layout (20%): 64 — The page follows a conventional but well-executed SaaS marketing structure: hero, logo bar, 2x2 feature-card grid, stat block, inverted infra section, masonry testimonials, mega-logo footer. Spacing rhythm and card structure are consistent, and density is varied purposefully (sparse hero vs. dense UI mockups), but the overall skeleton is a standard template rather than a structurally inventive layout.
- Motion (20%): 61 — Observed motion is concentrated in the hero: large text layers translate and scale in direct response to scroll position, reversibly, and a particle field animates continuously behind them. This scroll-scrubbing technique is well-implemented and reversible, but the recording shows no comparable motion sophistication in the feature grid, testimonials, or footer beyond scroll itself, so the system's motion language appears limited to one strong hero effect plus ambient background particles rather than a motion system spanning the page.
- Originality (25%): 47 — The combination of an infinity-loop particle field, scroll-scrubbed oversized type, dark-plus-neon palette, and glassmorphic UI mockups is stylish but closely matches a widely repeated current idiom among AI/voice-tech marketing sites. No single hard-to-substitute idea stands out as unique to this brand; the particle shape and recording/translation UI mockups are the most distinctive touches but function as skinned versions of common patterns rather than novel mechanisms.
- Content (10%): 69 — Product UI mockups (recording interface, voice-cloning fingerprint visual, translation panel, on-device TTS phone mock) are embedded directly beside their matching feature copy, and the benchmark stat block visualizes an actual claimed metric (5.3% WER) against competitors. Testimonials are color-differentiated by brand and paired with real company logos. This is a genuine integration of product substance into the visual system, stronger than typical stock-photo-driven SaaS pages.

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 massive particle-cloud ribbon wraps around huge grey and white type on a near-black background, giving a voice-data feel before the product interface even loads. Four-panel grids with matching dark cards let visitors scan each model type at a glance, while one bright blue band and a plain team photo break up the dark sections for pacing 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.