Cronitor — technical signup with benefits sidebar

---
version: alpha
name: Cronitor — technical signup with benefits sidebar
colors:
  ink: '#0B0021'
  surface: '#FFFFFF'
  soft: '#FAFAF8'
  accent: '#2E16B5'
  primary: '#0B0021'
typography:
  primary:
    fontFamily: JetBrains Mono
    fontSize: 22px
    fontWeight: 700
    lineHeight: 28.6px
  body:
    fontFamily: JetBrains Mono
    fontSize: 10.5px
    fontWeight: 400
    lineHeight: 17.85px
  control:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 600
components:
  primary:
    typography: '{typography.primary}'
    textColor: '{colors.primary}'
  body-copy:
    typography: '{typography.body}'
  control-label:
    typography: '{typography.control}'
    rounded: '{rounded.control}'
rounded:
  control: 2px
spacing:
  sampled-control-block: 11px
---

## Overview

A bordered monospace account-creation card paired with an explanatory benefits column, free-plan callout and customer logos.

Source: https://cronitor.io/sign-up. Captured 2026-10-07T06:03:39.179049+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 22px / 28.6px, weight 700, with a measured desktop width of 406.00px. Its corresponding mobile sample is 19px / 24.7px 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

Keep the brand header minimal. On desktop place the registration card on the left and a three-row What you get explanation on the right. Within the card stack Google and GitHub buttons, an OR divider, full-name/email/password fields, the dark Create Account button, legal text and the source CAPTCHA widget.

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

Responsive evidence: At 390px the card becomes a nearly full-width single column with 20px outer margins and the benefits region moves below it. The heading decreases from 22px to 19px. The full card and the beginning of the benefits section are visible in the mobile screenshot.

## Elevation & Depth

A sharp one-pixel border and a slight offset backplate frame the form. White fields use light gray outlines; the dark action gives one strong focal point without a bright filled background. Exact hover elevation, easing and shadow blur values were not measured.

## Shapes

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

This is an empty first-party signup screen with an untouched human-verification checkbox. No account creation, provider login, CAPTCHA solving, field entry or form submission occurred. The widget is part of the real form, not an interstitial replacing the site.

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