What is Cron's primary brand color?

Cron's brand voltage is a saturated orange captured at hex ff4700 — a warm, slightly red-shifted orange that reads as alarm-bell rather than peach. It appears four times across the captured page: as the fill of the wordmark letterforms in the upper-left, as the background of the Sign up pill CTA in the upper-right, and as the highlighted event-block colors inside the dark calendar product screenshot below the fold. The page floor itself is a near-black warm brown, deliberately not pure black; the orange voltage reads as warmer because the canvas behind it carries a hint of the same warmth.

What typeface does Cron use, and what should I use as a substitute?

Cron runs Helvetica Neue across every typographic tier — display, body, nav, button — with Helvetica and Arial as fallbacks. The system is the canonical macOS system sans stack, used without modification or substitution. The display tier is the loudest moment: 140px in weight 700 with -3px letter-spacing and a 126px line-height, deliberately tighter than the cap height to make adjacent words touch optically. Body sits at 22px in weight 400, nav at 22px in weight 500. The closest open-source substitute is Inter at the same weights with -0.5% tracking on the 140px display, or the Geist sans family for a tighter alternative.

Why does Cron use a warm brown near-black instead of pure black?

The page floor is a near-black warm brown captured at hex 161412, not pure 000000. The warmth is deliberate and consistent — the orange wordmark and CTA pill read warmer against the brown-tinted canvas than they would against pure black, and the white display headline reads as slightly more luminous. Most dark-canvas brands lean toward cool near-blacks (Linear, Vercel use blue-tinted near-blacks; Spline uses pure black) — Cron's warm-brown floor is the move that ties the orange voltage and the dark surface into a single warm atmosphere.

Why is the Cron hero headline 140px?

The hero h1 sits at 140px in weight 700 with -3px tracking and a 126px line-height — the largest single typographic moment in the entire shadcn.io design directory. The scale is intentional: It's about time. is a calendar-product pun, and the typography itself is the joke. The cap height crowds the viewport vertically, the negative tracking makes the words read as a single typographic unit, and the curly apostrophe in It's is rendered at the same display weight rather than smaller. There is no surrounding chrome competing with the headline; the page deletes everything else so the joke lands.

Can I use this DESIGN.md to build my own product-launch landing page?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Cron's specific moves: warm near-black canvas, single saturated orange voltage held to the wordmark and one pill CTA, Helvetica Neue across every tier, binary radius scale, and a 140px display headline that takes up half the viewport. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the page-as-headline move only works if your single sentence carries the brand — if your headline is generic SaaS copy, the deletion of supporting chrome will read as an empty page rather than a confident one.

Cron Design System

Cron's marketing system is a 140px Helvetica Neue display headline on near-black with a single orange pill CTA — the relaunched calendar acquired by Notion.

About Cron DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source cron.com

Productivity & SaaS

Cron's relaunched marketing page does almost nothing — and that is the entire move. The page floor is a warm dark brown near-black, the upper-left carries the orange CRON wordmark with the letterforms rendered as display glyphs, the upper-right carries a saturated orange pill labeled "Sign up." Centered halfway down the viewport, a 140px Helvetica Neue display headline in pure white reads "It's about time." with a curly typographic apostrophe and tight -3px tracking. A single 22px subtitle dek in light gray beneath ("Cron is the next-generation calendar for professionals and teams") confirms what the product is. Where Notion paints its marketing with multi-color illustration and Linear leans on a violet-graphite surface ladder, Cron deletes everything that is not the typography and the product screenshot. The page IS the headline.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 6 color tokens drawn from the captured marketing surface — one orange voltage, one warm dark brown canvas, white ink, a gray dek tone, and the two near-black-and-gray structural shades; 6 typography tokens running Helvetica Neue from a 140px / 700 display down to a 13px / 500 nav label; 3 corner-radius tokens (none, 4px, full pill); 7 spacing values centered on a 140px page-gutter unit; and 12 component definitions covering the orange pill CTA, the wordmark, the hero display, the Notion-acquisition badge, and the dark calendar canvas screenshot frame.

Feed this file to an AI coding tool and it reproduces Cron's specific moves: warm near-black canvas instead of pure black, single saturated orange voltage held to the wordmark and one pill CTA above the fold, Helvetica Neue at weight 700 with aggressive -3px tracking on the display, and a binary radius scale (pill or 4px). The one move worth borrowing only if you have a single confident sentence: the willingness to make a 140px headline the entire above-fold content. Most marketing pages need more — Cron's "It's about time." earns its scale because the timing-pun double-meaning carries the page on its own.

What makes it distinct

Display-as-pagethe 140px Helvetica Neue headline at weight 700 with -3px tracking takes up half the viewport and is the entire above-fold content
Single orange voltagethe brand orange appears just four times on the page, as the wordmark fill, the Sign up pill CTA, and two product accents inside the calendar screenshot
Near-black canvas, not pure blackthe page floor is a warm dark brown hex rather than #000000, softening the contrast with the white display headline
Helvetica Neue across every tierthe system uses the macOS system stack exclusively, no display family swap, no monospace voice
Two radii onlyfully rounded pill on CTAs, 4px on the small Notion-acquisition badge above the headline, nothing in between

Live at cron.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

cron.com

Explore Cron

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Cron design system FAQ

Common questions about Cron's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Cron — official site

Cron's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.