Cronitor — centered monospace sign-in card

---
version: alpha
name: Cronitor — centered monospace sign-in card
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: 22px
    fontWeight: 700
    lineHeight: 28.6px
  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 centered squared login card with Google/GitHub alternatives, uppercase field labels, recovery link and a separated SSO option.

Source: https://cronitor.io/app/login. Captured 2026-10-07T06:03:39.834006+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

Position a narrow white bordered card within generous page whitespace. Start with a compact monospace heading, provider buttons and a thin OR rule. Follow email and password fields with right-aligned recovery, a full-width dark Sign In button and a dashed separator above SSO. Retain the spare brand header and legal footer.

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 remains centered with approximately 20px outer margins and the heading reduces from 22px to 19px. Provider actions and fields remain stacked, with the legal footer at the bottom of the captured viewport.

## Elevation & Depth

Use a thin dark outline, minimal corner rounding and an offset pale backplate. Do not replace the intentionally mechanical controls with oversized pill buttons. 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

The login, Google/GitHub, recovery and SSO controls were inspected only in their logged-out default state. No credentials were entered and no authentication action was submitted.

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