# Rime — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.rime.ai/
Captured: 2026-10-14
CSS measured: 2026-10-14T16:21:07.880Z at 1440×1000 — https://www.rime.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 Rime website employs a bold, colorful, and highly typographic design language. It uses stark contrasting background sections (warm beige and dark brown/black) punctuated by vibrant, saturated accent colors (cyan, magenta, yellow, green) applied to bold graphic elements like overlapping circles and dotted patterns. The typography relies heavily on a condensed, tightly spaced sans-serif typeface (NaN Holo) for primary display roles, creating a strong editorial and slightly technical feel. Motion is heavily utilized through scroll-linked animations, transforming data visualizations and graphics as the user navigates the page.

## Classification

- Industry: ai
- Site type: Landing, Blog
- Business model: Software
- Styles: bold, colourful, geometric, typographic, editorial, data-visualization-driven
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: NaN Holo Condensed — weight 700; size 96px; line-height 96px; tracking -1px; Regular (100% role confidence, computed values)
- Heading: NaN Holo Condensed — weight 700; size 68px; line-height 54.4px; tracking -0.4px; Regular (100% role confidence, computed values)
- Body: NaN Holo Narrow — weight 400; size 16px; line-height 19.2px; tracking normal; Regular (90% role confidence, computed values)
- Mono: Unidentified — weight 400; size 13px; line-height 13px; tracking normal; uppercase (95% role confidence, computed values)

## Functional palette

- Canvas — canvas #F0E9DD: color-1: computed rgb(240, 233, 221); AI role: Warm beige (#F0E9DD) used as the primary background color for the majority of the page. (100% role confidence, computed values)
- Text — text #24211D: color-2: computed rgb(36, 33, 29); AI role: Primary dark color (#24211D) used for headings and body text on light backgrounds. (100% role confidence, computed values)
- Surface — surface #24211D: color-2: computed rgb(36, 33, 29); AI role: Dark brown/black (#24211D) used for contrasting full-width sections (interactive demo, footer). (90% role confidence, computed values)
- Text — text #F0E9DD: color-1: computed rgb(240, 233, 221); AI role: Light color (#F0E9DD) used for text on the dark background sections. (90% role confidence, computed values)
- Accent — accent #2CC3E9: color-7: computed rgb(44, 195, 233); AI role: Bright cyan (#2CC3E9) used heavily in graphics, tags, and the interactive demo play button. (90% role confidence, computed values)
- Accent — accent #FFA0FF: color-3: computed rgb(255, 160, 255); AI role: Bright magenta (#FFA0FF) used in data visualizations and highlight graphics. (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": "NaN Holo Condensed",
    "fontStack": "\"NaN Holo Condensed\", Arial, sans-serif",
    "weight": "700",
    "size": "96px",
    "lineHeight": "96px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "Voice",
        "top": 586,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "models",
        "top": 586,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "made",
        "top": 586,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "NaN Holo Condensed",
    "fontStack": "\"NaN Holo Condensed\", Arial, sans-serif",
    "weight": "700",
    "size": "68px",
    "lineHeight": "54.4px",
    "letterSpacing": "-0.4px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h2",
        "text": "Crafted to keep customers on the line",
        "top": 1137,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "For the calls you can't get wrong",
        "top": 1980,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "A voice for every conversation",
        "top": 2507,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "NaN Holo Narrow",
    "fontStack": "\"NaN Holo Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "a",
        "text": "Pricing",
        "top": 17,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Company",
        "top": 17,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Resources",
        "top": 25,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "NaN Holo Mono",
    "fontStack": "\"NaN Holo Mono\", Arial, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "product",
        "top": 680,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Company",
        "top": 684,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "account",
        "top": 684,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": null,
    "fontStack": "monospace",
    "weight": "400",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 315,
    "contexts": [
      {
        "tag": "span",
        "text": "F",
        "top": 2966,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "X",
        "top": 2966,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Q",
        "top": 2966,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": null,
    "fontStack": "monospace",
    "weight": "500",
    "size": "20.5px",
    "lineHeight": "20.5px",
    "letterSpacing": "1px",
    "traits": "uppercase",
    "count": 120,
    "contexts": [
      {
        "tag": "div",
        "text": "HEALTHCARE",
        "top": 2571,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "FOOD ORDERING",
        "top": 41,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "FINANCE",
        "top": 80,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": null,
    "fontStack": "monospace",
    "weight": "500",
    "size": "13px",
    "lineHeight": "13px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 85,
    "contexts": [
      {
        "tag": "span",
        "text": "T",
        "top": 3008,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "U",
        "top": 3008,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "R",
        "top": 3008,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "NaN Holo Narrow",
    "fontStack": "\"NaN Holo Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 40,
    "contexts": [
      {
        "tag": "div",
        "text": "Ali Mansoor",
        "top": 4674,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Pratik Mundra",
        "top": 4674,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Rahul Aggarwal",
        "top": 4674,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "NaN Holo Mono",
    "fontStack": "\"NaN Holo Mono\", Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 19,
    "contexts": [
      {
        "tag": "div",
        "text": "Professional",
        "top": 2635,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Casual",
        "top": 2543,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Formal",
        "top": 2522,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "NaN Holo Condensed",
    "fontStack": "\"NaN Holo Condensed\", Arial, sans-serif",
    "weight": "700",
    "size": "28px",
    "lineHeight": "30.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "blockquote",
        "text": "\"Mist v3 on a co-located endpoint has been a 3x latency improvement for us. We're consistently seein",
        "top": 4404,
        "property": "font"
      },
      {
        "tag": "blockquote",
        "text": "\"The latency stays low even under heavy loads. It's a true enterprise production-grade system.\"",
        "top": 4404,
        "property": "font"
      },
      {
        "tag": "blockquote",
        "text": "\"It was clear that the voice made a real impact on the phone. When guests feel comfortable right awa",
        "top": 4404,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "NaN Holo Condensed",
    "fontStack": "\"NaN Holo Condensed\", Arial, sans-serif",
    "weight": "700",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "How good are the voices?",
        "top": 5067,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "How fast are the voices?",
        "top": 5163,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "What languages do you support?",
        "top": 5259,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "NaN Holo Narrow",
    "fontStack": "\"NaN Holo Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "22px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "🇷🇺",
        "top": 4737,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "🇮🇳",
        "top": 4993,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "🇹🇷",
        "top": 4853,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "NaN Holo Mono",
    "fontStack": "\"NaN Holo Mono\", Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Reliability",
        "top": 1928,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "voices",
        "top": 2454,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "linguistics",
        "top": 3049,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "NaN Holo Mono",
    "fontStack": "\"NaN Holo Mono\", Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "banking",
        "top": 2360,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "healthcare",
        "top": 2360,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "food ordering",
        "top": 2360,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "NaN Holo Narrow",
    "fontStack": "\"NaN Holo Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "21.2px",
    "lineHeight": "25.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Rime voice models power the world's most",
        "top": 768,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "important conversations.",
        "top": 793,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "NaN Holo Narrow",
    "fontStack": "\"NaN Holo Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "17px",
    "lineHeight": "20.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Blog",
        "top": 78,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Docs",
        "top": 123,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": null,
    "fontStack": "monospace",
    "weight": "500",
    "size": "12.5px",
    "lineHeight": "15px",
    "letterSpacing": "0.8px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "00:00",
        "top": 2071,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "NaN Holo Narrow",
    "fontStack": "\"NaN Holo Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "12.5px",
    "lineHeight": "12.5px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "SURE, ONE MOMENT",
        "top": 2072,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "NaN Holo Narrow",
    "fontStack": "\"NaN Holo Narrow\", Arial, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 11,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Try for free",
        "top": 11,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Book a call",
        "top": 851,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F0E9DD",
    "alpha": 1,
    "cssValue": "rgb(240, 233, 221)",
    "count": 163,
    "contexts": [
      {
        "tag": "body",
        "text": ":root { --coda: #8be89a; --mist: #f0be4d; --dot-pink: var(--base-color-brand--pink-light); --dot-blu",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "PricingCompanyResourcesBlogDocsDocsLog inBook a demoTry for free",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Try for free",
        "top": 11,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#24211D",
    "alpha": 1,
    "cssValue": "rgb(36, 33, 29)",
    "count": 191,
    "contexts": [
      {
        "tag": "div",
        "text": ":root { --coda: #8be89a; --mist: #f0be4d; --dot-pink: var(--base-color-brand--pink-light); --dot-blu",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Pricing",
        "top": 17,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Resources",
        "top": 25,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFA0FF",
    "alpha": 1,
    "cssValue": "rgb(255, 160, 255)",
    "count": 71,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 217,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 2131,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FFD46F",
    "alpha": 1,
    "cssValue": "rgb(255, 212, 111)",
    "count": 59,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 61,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 2090,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F8F3EA",
    "alpha": 1,
    "cssValue": "rgb(248, 243, 234)",
    "count": 7,
    "contexts": [
      {
        "tag": "section",
        "text": "Questions, answeredHow good are the voices?From banking to food ordering to healthcare, you can shap",
        "top": 4888,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "product",
        "top": 680,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Guides",
        "top": 933,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#12A3BE",
    "alpha": 1,
    "cssValue": "rgb(18, 163, 190)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Spoken like a local🇷🇺🇮🇳🇹🇷Multilingual fluencyDialects and accents that sound localControls to ",
        "top": 3512,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#2CC3E9",
    "alpha": 1,
    "cssValue": "rgb(44, 195, 233)",
    "count": 57,
    "contexts": [
      {
        "tag": "button",
        "text": "",
        "top": 1369,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2772,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Reliability",
        "top": 1928,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#108FA7",
    "alpha": 1,
    "cssValue": "rgb(16, 143, 167)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Multilingual fluency",
        "top": 4056,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#958A7A",
    "alpha": 1,
    "cssValue": "rgb(149, 138, 122)",
    "count": 315,
    "contexts": [
      {
        "tag": "span",
        "text": "F",
        "top": 2966,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#DDD6C9",
    "alpha": 1,
    "cssValue": "rgb(221, 214, 201)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Book a demo",
        "top": 11,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "bankinghealthcarefood ordering",
        "top": 2354,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#24211D",
    "alpha": 0.7490196078431373,
    "cssValue": "rgba(36, 33, 29, 0.75)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "banking",
        "top": 2360,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#333333",
    "alpha": 1,
    "cssValue": "rgb(51, 51, 51)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 29,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 33,
        "property": "svg-fill"
      }
    ]
  }
]
```

### Extraction limits

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

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between major sections, utilizing full viewport height for immersive moments. Tighter, structured spacing within grids and components.
- Corner style: Mix of sharp corners for full-width sections and distinct rounded corners for buttons, tags, and specific content containers (like the dark demo section).
- Radius: Buttons and tags use a fully rounded/pill shape (e.g., ~50% border-radius). Content cards use a moderate rounded corner (e.g., ~16px-24px).
- Borders: Borders are generally absent on major components, relying on color contrast for separation. Fine dotted borders are used as horizontal section dividers.
- Buttons: Pill-shaped, solid fill with no borders. High contrast (dark button on light background, light text).
- Content width: Content is generally centered within a maximum width, but decorative graphics often bleed to the edges of the viewport.
- Density: Spacious. The design relies on large typography and graphic elements with significant surrounding negative space to create impact.
- Evidence: Observation of layout structure in full-page screenshots, specific border-radius on elements like the 'Try for free' button and the dark demo container, and the dotted line divider visible between sections.

## Sections

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

1. **Hero — Voice models made for human conversation** (Home)
   Opening hero composition from Home, organized around “Voice models made for human conversation”.
   Capture: 1440×965px; page bounds 112–1077px of 6937px; source section ID: `6fda696b-d413-42dc-ab11-02da53de889c`; image: https://media.designdetails.io/library/5fe1e56c8e1bee7c6c8902d59d4be5cac899806e832ca5995e7b55a282ef4a22/section_crop-6fda696b-2026-10-14T16-21-24-741Z.webp
   SECTION.md v3.2: `6fda696b-d413-42dc-ab11-02da53de889c` (deterministic evidence; editorial review pending)
2. **Features — Crafted to keep customers on the line** (Home)
   Reusable feature composition from Home, organized around “Crafted to keep customers on the line”.
   Capture: 1440×648px; page bounds 1077–1725px of 6937px; source section ID: `4b9bce52-a22a-49b3-b8d7-d2eb7cd5b05d`; image: https://media.designdetails.io/library/0afd5cd7e7f4987ae2463b5a8fb7ccc4052518380dee17534ec503e9f7473a8f/section_crop-4b9bce52-2026-10-14T16-21-26-106Z.webp
   SECTION.md v3.2: `4b9bce52-a22a-49b3-b8d7-d2eb7cd5b05d` (deterministic evidence; editorial review pending)
3. **Features — For the calls you can't get wrong** (Home)
   Reusable feature composition from Home, organized around “For the calls you can't get wrong”.
   Capture: 1440×423px; page bounds 1824–2247px of 6937px; source section ID: `c9665ed0-9e8b-44ca-82d9-bf8372a8865c`; image: https://media.designdetails.io/library/1d8fd6389036e1047092befb0286e45d3497517def5dad32592ae027128662af/section_crop-c9665ed0-2026-10-14T16-21-27-181Z.webp
   SECTION.md v3.2: `c9665ed0-9e8b-44ca-82d9-bf8372a8865c` (deterministic evidence; editorial review pending)
4. **Features — A voice for every conversation** (Home)
   Reusable feature composition from Home, organized around “A voice for every conversation”.
   Capture: 1440×602px; page bounds 2250–2852px of 6937px; source section ID: `558ca72e-01e8-41a0-bfe7-496f55865f1a`; image: https://media.designdetails.io/library/1531317957577b9aba22402e3d081be2a0511a15ca1c5a7e60f7cc485c345725/section_crop-558ca72e-2026-10-14T16-21-28-276Z.webp
   SECTION.md v3.2: `558ca72e-01e8-41a0-bfe7-496f55865f1a` (deterministic evidence; editorial review pending)
5. **Features — Built by linguists** (Home)
   Reusable feature composition from Home, organized around “Built by linguists”.
   Capture: 1440×550px; page bounds 2854–3404px of 6937px; source section ID: `059c2abf-d268-42bd-b786-0ff7d2eb8019`; image: https://media.designdetails.io/library/da85ac0503ab83b1cc39ff5192b7b3a77fccbc145343304b9eaf68e38752fb9f/section_crop-059c2abf-2026-10-14T16-21-30-533Z.webp
   SECTION.md v3.2: `059c2abf-d268-42bd-b786-0ff7d2eb8019` (deterministic evidence; editorial review pending)
6. **Features — Spoken like a local** (Home)
   Reusable feature composition from Home, organized around “Spoken like a local”.
   Capture: 1440×813px; page bounds 3408–4221px of 6937px; source section ID: `083f4c1d-8b60-49f0-82e8-0a3d8a1f6379`; image: https://media.designdetails.io/library/df267628c61d279284390cac620bb7b9ae563e645762de5eb8c36b5cf50ea416/section_crop-083f4c1d-2026-10-14T16-21-31-869Z.webp
   SECTION.md v3.2: `083f4c1d-8b60-49f0-82e8-0a3d8a1f6379` (deterministic evidence; editorial review pending)
7. **Features — From the teams that put us on the line** (Home)
   Reusable feature composition from Home, organized around “From the teams that put us on the line”.
   Capture: 1440×667px; page bounds 4220–4887px of 6937px; source section ID: `b2855823-acdb-45aa-94ce-cbb15d390031`; image: https://media.designdetails.io/library/6cec5ba085ffc33259c127d6d525c88ae85979485110b3be626cfe591ecf9233/section_crop-b2855823-2026-10-14T16-21-33-495Z.webp
   SECTION.md v3.2: `b2855823-acdb-45aa-94ce-cbb15d390031` (deterministic evidence; editorial review pending)
8. **FAQ — Questions, answered** (Home)
   FAQ composition from Home, organized around “Questions, answered”.
   Capture: 1440×667px; page bounds 4888–5555px of 6937px; source section ID: `4d14253f-dbae-4911-8d50-6cb5e50fd327`; image: https://media.designdetails.io/library/a67423709b96e6a96f6698c22907a85c79bf38117d085b96f30f7c82e7bb6b82/section_crop-4d14253f-2026-10-14T16-21-35-152Z.webp
   SECTION.md v3.2: `4d14253f-dbae-4911-8d50-6cb5e50fd327` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/a6717fb68818a29d66898ff5dc5e6754afa883778168098bff24d399789be146/desktop_full-9c2d38f8-2026-10-14T16-21-07-909Z.webp
- Mobile screenshot: https://media.designdetails.io/library/d60b84f89e41accbd271136acaa8eef65ee829484f5713a3a8d15985a1e02276/mobile_full-9c2d38f8-2026-10-14T16-22-12-181Z.webp
- Open Graph image: https://media.designdetails.io/library/a7fbad260c748b87df15f08b7e8882f419bbe0daaff884510dd6e433c4e8694f/og_image-9c2d38f8-2026-10-14T16-21-23-846Z.webp
- Full-page video: https://media.designdetails.io/library/4b8149cced1b57cab465823af2f023c35b00c4828dde5641feb821b7bc53b777/motion-1791996235133.mp4
- Video poster: https://media.designdetails.io/library/901059e5186d9c7701b0ed1a2b8496a9f62bccbe5852326faa3998ca99f39aa6/motion-poster-1791996235133.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

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

## Reusable components

- Navigation Bar
- Hero
- Logo Strip
- Product UI
- Testimonial Card
- Tag
- Footer
- Interactive Audio Demo
- Scroll Animated Data Graphics
- Secondary Button
- FAQ Accordion
- Primary Button

## Quality rubric

Overall: 64.8/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Rime.ai executes a genuinely cohesive design system: a recurring dot/circle metaphor for voice and sound runs through the hero, feature diagrams, globe, and footer, reinforced by a consistent condensed/mono/narrow type hierarchy and motion that touches nearly every section rather than just the top of the page. The content-to-graphic pairing is unusually tight for a marketing site—diagrams and interactive pickers genuinely illustrate the claims beside them. What keeps it at 'good' rather than 'strong' is that the overall section sequence and color/visual vocabulary (bright accent dots on a neutral canvas, overlapping circles, Venn diagrams) sit squarely within a now-common contemporary SaaS aesthetic, and the available evidence cannot confirm animation polish or interactive refinement beyond scroll-triggered reveals.

- Typography (15%): 66 — A condensed display face (NaN Holo Condensed) is paired consistently with a mono label face and a narrower body face, giving three legible roles (display/label/body) that repeat across sections. Scale jumps (96px hero, 68px section heads, 28-32px quote/FAQ type, 16-18px body) are deliberate and the negative letter-spacing on display sizes is consistent. This is a competent, repeated system rather than a single hero flourish, but the toolkit itself (one condensed grotesk + one mono) is a fairly simple, common formula and doesn't show unusual refinement in spacing/kerning beyond the obvious condensed treatment.
- Color (10%): 62 — A warm beige canvas and dark brown surface anchor the page, with a small repeating accent set (cyan #2CC3E9, magenta #FFA0FF, yellow #FFD46F, teal #12A3BE/#108FA7) applied consistently to tags, buttons, and all decorative dot graphics. The system is legible and consistently applied, but the 'neutral canvas + bright accent dots' formula is now a widely used SaaS convention, and the accent palette doesn't do anything distinctive beyond providing contrast and category-coding.
- Layout (20%): 58 — The page follows a standard top-to-bottom marketing sequence: hero, logo marquee, feature block, testimonial cards, FAQ accordion, CTA, footer. Sections are well-organized with generous spacing and consistent max-width content columns, and decorative graphics bleed to the edges for visual variety, but there is no structural risk-taking (asymmetric grids, overlapping content/graphic zones, unconventional section ordering) that would distinguish it layout-wise from typical B2B SaaS templates.
- Motion (20%): 71 — Motion is distributed across nearly every section rather than confined to the hero: the waveform dot-grid animates continuously, the demo panel's option lists animate on scroll, a circular tracker, a Venn diagram, a crossword grid, and a rotating dotted globe all transform in sync with scroll position, and the footer reveals an animated circle arc. This breadth and the tailoring of each animation to its section's content (e.g., Venn diagram for voice traits, globe for multilingual reach) indicates a considered motion system rather than one decorative scroll effect. However, the evidence only documents scroll-triggered reveal/transform behavior; it does not establish animation quality such as easing, frame rate, or interaction-triggered motion (e.g., clicking play, expanding FAQ items).
- Originality (25%): 64 — The site builds a throughline metaphor—dots/circles standing in for sound, voice traits, and global reach—connecting the hero waveform, the Venn diagram of voice styles, the crossword of linguistic terms, and the dotted globe into one coherent visual language. This conceptual consistency is the site's most interesting idea and goes beyond a single disconnected hero effect. However, overlapping colored circles, Venn-style diagrams, and dot-matrix globes are now common tropes in contemporary SaaS/startup visual design, so while the execution is unified, the core visual vocabulary itself is not especially novel or hard to substitute.
- Content (10%): 69 — Visual elements are tightly matched to their adjacent copy: the industry/style picker in the dark demo panel visually lists the exact categories (finance, healthcare, food ordering) and tones (casual, professional, calm) being described; the Venn diagram's labeled circles (formal/casual/energetic/professional) directly illustrate the 'voice for every conversation' claim; the crossword graphic spells out linguistics vocabulary (fluency, cadence, resonance) for the 'Built by linguists' section; and the dotted globe accompanies the multilingual/localization claims. This is a well-executed alignment between decorative graphics and the specific claims they sit beside.

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

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

## Verification checklist

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

## Curator notes

A dot-matrix waveform in bright primary colours turns an abstract idea like voice synthesis into something tactile, and the same dot motif returns as a globe and a logo cluster to tie the page together. Dark panels with scattered industry and mood labels break up the warm beige background, pacing the scroll into clear, scannable chapters.

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