---
version: alpha
name: Cronitor — usage pricing and feature matrix
colors:
  ink: '#0B0021'
  surface: '#FFFFFF'
  soft: '#FAFAF8'
  accent: '#2E16B5'
  primary: '#0B0021'
  highlight: '#EEEBFB'
typography:
  primary:
    fontFamily: JetBrains Mono
    fontSize: 46px
    fontWeight: 800
    lineHeight: 51.52px
  body:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
  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 technical pricing page with three squared plans, a lilac highlighted business column, usage estimate controls and a dense categorized comparison table.

Source: https://cronitor.io/pricing. Captured 2026-10-07T06:03:33.953046+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; highlight: #EEEBFB. 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 1080.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

Center the monospace title above adjacent Hacker, Business and Enterprise panels. Tint Business pale lilac and give it a yellow top accent. Place the monitor/user estimate row directly beneath the tiers, then a broad feature matrix grouped by monitoring, alerts, status pages and team access. Customer evidence and a compact CTA follow.

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

Responsive evidence: At 390px the title falls from 46px to 29px and the plan group stacks vertically, retaining the full-width Business tint and yellow divider. The mobile opening shows the free plan followed by Business; lower matrix scrolling behavior was not tested.

## Elevation & Depth

The design relies on ruled cells and a single highlighted column rather than rounded floating cards. Keep the dense tabular typography legible and secondary billing units muted. 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 source default shows a free Hacker plan and Business billing split by monitor and user; its displayed estimate is not a tested calculator result. Controls, trial creation and plan selection were not operated.

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