Cronitor — developer monitoring landing page

---
version: alpha
name: Cronitor — developer monitoring landing page
colors:
  ink: '#0B0021'
  surface: '#FFFFFF'
  soft: '#FAFAF8'
  accent: '#2E16B5'
  primary: '#0B0021'
typography:
  primary:
    fontFamily: JetBrains Mono
    fontSize: 46px
    fontWeight: 800
    lineHeight: 51.52px
  body:
    fontFamily: Instrument Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 25.5px
  control:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 500
    lineHeight: 15.6px
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: 0px
---

## Overview

A developer-focused monitoring page with monospace headings, framed animated status diagrams, bright health/error signals, numbered product sections and restrained technical typography.

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

## Colors

Observed roles: ink: #0B0021; surface: #FFFFFF; soft: #FAFAF8; accent: #2E16B5; primary: #0B0021. 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 "JetBrains Mono" at 46px / 51.52px, weight 800, with a measured desktop width of 412.00px. Its corresponding mobile sample is 29px / 32.48px across 350.00px. Body and control tokens above come from this reference's own computed styles; `normal` leading is omitted from YAML rather than guessed.

## Layout

Use a thin yellow top rule and compact navigation above a split hero: developer copy and paired actions on the left, a monitoring dashboard illustration on the right. Follow customer logos with a bordered product stack that pairs five numbered explanations with status, job, heartbeat and performance diagrams. Finish with integrations, customer evidence, a centered action band and compact footer.

This is a full-page desktop reference at 1440px width, with a source document height of 4284px. Mobile evidence is a 390×844px opening viewport, not a claim to have inspected every lower-page breakpoint.

Responsive evidence: At 390px the navigation collapses to a logo and hamburger. The 46px hero heading becomes 29px and the two actions stack; the framed monitor demonstration moves beneath the copy. The mobile opening was inspected, but deeper interactive product states were not tested.

## Elevation & Depth

Thin near-black outlines, off-white panels and small offset shadows make the diagrams feel like technical instruments. Green signals communicate health, red marks failures, violet annotates links and yellow marks important thresholds. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

A sampled control in this reference has radius 0px and padding 0px. 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

The captured diagrams are illustrative source animation states, not live customer telemetry. Desktop and mobile may show different moments in the automatic failure sequence. No exact duration, easing, alert delivery or monitoring behavior is asserted.

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