---
version: alpha
name: Cronitor — customer quote and case-study panel
colors:
  ink: '#0B0021'
  surface: '#FFFFFF'
  soft: '#FAFAF8'
  accent: '#2E16B5'
  primary: '#3E3B52'
typography:
  primary:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
  body:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
  control:
    fontFamily: JetBrains Mono
    fontSize: 16px
    fontWeight: 400
components:
  primary:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  control-label:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 0px
spacing:
  sampled-control-block: 28px
---

## Overview

A bordered evidence panel combining one rotating customer quotation with author attribution and two understated case-study cards.

Source: https://cronitor.io/. Captured 2026-10-07T06:07:04.402690+00:00. This is an observed reference, not an official brand specification.

## Colors

Observed roles: ink: #0B0021; surface: #FFFFFF; soft: #FAFAF8; accent: #2E16B5; primary: #3E3B52. Values are measured source colors and inspected surfaces. Do not apply the accent indiscriminately to secondary copy or disabled controls.

## Typography

The primary sampled text uses "Instrument Sans" at 16px / 25.6px, weight 400, with a measured desktop width of 732.00px. Its corresponding mobile sample is 16px / 25.6px across 308.00px. Body and control tokens above come from this reference's own computed styles; `normal` leading is omitted from YAML rather than guessed.

## Layout

Lead with a small numbered From the field label. Inside one dark outline, place the featured quote across the upper row with portrait and author at the right, then a low-key progress strip. Divide the lower row into equal Aloft and GreatWaves case studies, each with brand, small category label, bold title, supporting quotation and violet text link.

The selected root's measured raster is 1440×630px on desktop and 390×1053px on mobile. The screenshot contains only `section.fieldsec`.

Responsive evidence: The section measures 1440×630px on desktop and 390×1053px on mobile. Author attribution moves beneath the quote, and the two case studies stack. Desktop captured Natalie Gordon; mobile captured Jonathan Reinink after the automatic rotation advanced. This difference is temporal, not a breakpoint-specific content rule.

## Elevation & Depth

A single enclosing hairline and internal dividers organize the evidence. The lower cards use off-white fill rather than independent shadows; violet progress and link accents are deliberately small. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius 0px and padding 28px. Those measurements belong to that sample, not every container. Preserve the visible geometry and spacing hierarchy; any additional spacing scale would be an implementation estimate.

## Components

Quotes and names are copied only by the original site rendering and are not independent endorsements by this guide. Rotation was observed during capture, but manual navigation, timing, easing and case-study destinations were not tested.

## Do's and Don'ts

- Do preserve the documented content order, visual hierarchy and measured responsive changes.
- Do retain source field labels, attribution and clear differences between primary, secondary and disabled controls.
- Do treat visible prices, statistics and quotations as dated source content.
- Don't fabricate customer evidence, expanded states, errors or successful form submissions.
- Don't infer unobserved interactions, dark mode, additional breakpoints or exact motion timings.