---
version: alpha
name: "Cron"
website: "https://www.cron.com"
description: >-
  A calendar app for professionals — acquired by Notion in 2022 and recently relaunched as a standalone site — whose marketing chrome is a single near-black canvas carrying a 140px Helvetica Neue display headline ("It's about time.") in pure white with tight -3px tracking, a 22px subtitle dek immediately beneath, and a single saturated orange pill CTA in the upper-right corner labeled "Sign up." The wordmark renders the C-R-O-N letterforms as orange display glyphs in the same orange hex, the only chromatic moment in the page header. Below the fold a single chromatic product screenshot — a dark macOS calendar canvas with multi-color event blocks — does every other color job. Type runs Helvetica Neue across every tier; the system is binary — pill CTAs at full radius, everything else flat or 4px.

seo:
  title: "Cron Calendar Design System for React — orange #ff4700, Helvetica Neue, 12 components"
  metaDescription: "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. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Display-as-page — the 140px Helvetica Neue headline at weight 700 with -3px tracking takes up half the viewport and is the entire above-fold content"
    - "Single orange voltage — the 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 black — the page floor is a warm dark brown hex rather than #000000, softening the contrast with the white display headline"
    - "Helvetica Neue across every tier — the system uses the macOS system stack exclusively, no display family swap, no monospace voice"
    - "Two radii only — fully rounded pill on CTAs, 4px on the small Notion-acquisition badge above the headline, nothing in between"
  tags:
    - "Productivity & SaaS"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.cron.com"
      title: "Cron — official site"
      description: "Cron's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Cron's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typeface does Cron use, and what should I use as a substitute?"
      answer: "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."
    - id: "canvas-color"
      title: "Why does Cron use a warm brown near-black instead of pure black?"
      answer: "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."
    - id: "headline-scale"
      title: "Why is the Cron hero headline 140px?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own product-launch landing page?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#ff4700"
  ink: "#ffffff"
  ink-muted: "#cccccc"
  canvas: "#161412"
  canvas-deep: "#0f0d0a"
  shadow: "#000000"

typography:
  display-xl:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 140px
    fontWeight: 700
    lineHeight: 126px
    letterSpacing: "-3px"
  body-xl:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 37.4px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 37.4px
    letterSpacing: 0
  button-md:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: 0
  badge-sm:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: "0.15px"
  footer-link:
    fontFamily: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 19.5px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  full: "9999px"

spacing:
  xs: "20px"
  sm: "24px"
  md: "40px"
  base: "80px"
  lg: "140px"
  button-y: "12px"
  button-x: "24px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "46px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 0px"
  top-nav:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "20px 140px 40px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "0px 24px 1px"
  wordmark:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px 140px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-xl}"
    padding: "0px 140px"
  notion-badge:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.badge-sm}"
    rounded: "{rounded.sm}"
    padding: "8px 16px"
    borderColor: "{colors.ink-muted}"
  calendar-canvas:
    backgroundColor: "{colors.canvas-deep}"
    textColor: "{colors.ink}"
    typography: "{typography.body-xl}"
    rounded: "{rounded.sm}"
    padding: "0"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.footer-link}"
    padding: "40px 140px"
  footer-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.footer-link}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-xl}"
    rounded: "{rounded.sm}"
    padding: "12px 24px"
    height: "46px"
---

## Overview

Cron's relaunched marketing page is a single typographic gesture and almost nothing else. **Page-as-headline.** The 140px Helvetica Neue display "It's about time." sits centered halfway down the viewport in pure white on a warm near-black floor, with a single 22px gray dek beneath confirming what the product is. The upper-left carries the orange CRON wordmark with the letterforms rendered as 140px display glyphs in `{colors.primary}` (#ff4700); the upper-right carries a saturated orange pill labeled "Sign up." There is nothing else above the fold — no feature grid, no testimonials, no social proof — just the headline, the wordmark, the CTA, and a small "Cron is now Notion Calendar →" rounded-rectangle badge floating above the headline as a permanent acquisition note.

Where Notion paints its marketing with multi-color illustration, Linear leans on a violet-graphite surface ladder, and Calendly carries a feature-dense above-fold scroll, Cron deletes every supporting element. The page commits to the typographic punchline. The fact that "It's about time." is both a calendar-product reference (it's about scheduling) and a relaunch announcement (the page is back after years of silence as Notion Calendar) is the entire content strategy. The 140px scale, the -3px tracking, and the curly apostrophe rendered at full display weight are all in service of landing that joke.

The canvas is deliberately warm — `{colors.canvas}` (#161412) is a near-black brown, not pure black. Most dark-canvas brands (Linear, Vercel use blue-tinted near-blacks; Spline commits to pure black) lean cool. Cron's brown-tinted floor warms the orange voltage and the white display in a single atmospheric move; the orange CTA reads warmer because the canvas behind it carries a hint of the same warmth.

**Key Characteristics:**
- 140px Helvetica Neue display headline (`{typography.display-xl}`) at weight 700 with -3px tracking — the largest typographic moment in the directory.
- Single saturated orange voltage (`{colors.primary}` — #ff4700) reserved for the wordmark fill and the Sign up pill CTA. Four total captured occurrences.
- Warm near-black canvas (`{colors.canvas}` — #161412), deliberately not pure black; brown undertone ties the orange voltage to the dark surface.
- Helvetica Neue across every tier — no display family swap, no monospace voice, no body sans alternative.
- Binary radius scale — `{rounded.full}` 9999px on the Sign up pill, `{rounded.sm}` 4px on the small Notion-acquisition badge, `{rounded.none}` 0px on everything else. No middle tier.
- The page is a single-screen above-fold composition followed by a dark macOS calendar screenshot and a minimal footer — no editorial sections, no feature explanations, no marketing copy beyond the dek.
- Pure white ink (`{colors.ink}` — #ffffff) on the display headline, gray dek tone (`{colors.ink-muted}` — #cccccc) on the sub-paragraph. Two text colors total.
- 140px horizontal page gutter (`{spacing.lg}`) and 80px vertical rhythm — generous to the point of luxury, but the page has so little content that the gutter becomes the layout's main expression.

## Colors

### Brand

- **Cron Orange** (`{colors.primary}` — #ff4700): frequency 4. Used as background (1), shadow (3). The single brand voltage — the wordmark letterform fill, the Sign up pill CTA background, and two highlighted event blocks inside the calendar product screenshot. The orange has a faint glow halo behind the CTA pill (rendered as a soft drop shadow in the same hue), giving it a subtle illuminated quality against the dark canvas.

### Surface

- **Canvas** (`{colors.canvas}` — #161412): frequency 2 — both as background. The warm near-black page floor. Not pure black; the brown undertone is the structural move that warms the orange voltage and the white display.
- **Canvas Deep** (`{colors.canvas-deep}` — #0f0d0a): frequency 1 — as background. A slightly darker brown-black used inside the calendar screenshot frame, sitting one notch deeper than the page floor. Reads as a tonal lift that pulls the screenshot forward without using a border.

### Text

- **Ink** (`{colors.ink}` — #ffffff): frequency 26 — 13 as text, 13 as border. Pure white. Used for the hero display headline, the Sign up CTA label, nav links, and the wordmark stroke variations. The white-on-warm-brown contrast is the system's loudest single typographic moment.
- **Ink Muted** (`{colors.ink-muted}` — #cccccc): frequency 40 — 20 as text, 20 as border. The light-gray tone used for the 22px sub-paragraph dek, the Notion-acquisition badge text, and the footer link rows. The second of the system's two text colors.

### Structural

- **Shadow** (`{colors.shadow}` — #000000): frequency 2 — used as text and border in product screenshot details. The system uses pure black sparingly and only inside the product canvas; the marketing surface uses the warm brown `{colors.canvas}` instead.

## Typography

### Font Family

The system runs **Helvetica Neue** across every typographic tier, with `Helvetica` and `Arial` as fallbacks and `sans-serif` as the safety net. This is the canonical macOS system sans stack, used unmodified — no Inter, no Geist, no custom variable font. The choice is itself a deletion: most product launches lean on a custom display family or a recently-licensed grotesque (Söhne, Roobert, FT Kunst Grotesk) to mark themselves as design-forward; Cron uses the same Helvetica Neue stack the operating system already provides and lets the display scale and tracking do every job a custom family would.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 140px | 700 | 126px | -3px | Hero h1 ("It's about time.") + the CRON wordmark glyphs |
| `{typography.body-xl}` | 22px | 400 | 37.4px | 0 | Sub-paragraph dek beneath the hero headline |
| `{typography.nav-link}` | 22px | 500 | 37.4px | 0 | Top-nav link labels (Blog, Changelog, Docs, Login) |
| `{typography.button-md}` | 22px | 500 | 22px | 0 | Primary pill CTA label ("Sign up") |
| `{typography.badge-sm}` | 15px | 400 | 15px | 0.15px | The Notion-acquisition rounded-rectangle badge above the headline |
| `{typography.footer-link}` | 13px | 500 | 19.5px | 0 | Footer link rows (Privacy Policy, Terms of Service, Web app, Download) |

### Principles

Display weight is 700 with aggressive -3px tracking. The negative tracking is the single most-distinctive typographic move — Stripe uses weight 300 with light tracking, Cloudflare uses weight 500 with -1.4px tracking, Cron uses weight 700 with -3px tracking. The result is dense, cap-height-crowded display text that reads as a single typographic block rather than as individual words.

There is no body / heading ladder. Display sits at 140px and body sits at 22px; the only typographic moments between them are nav at 22px / 500 and the small badge at 15px. The system is binary in type the same way it is binary in radii: a single loud display moment, a single body tone, and almost nothing else.

### Note on Font Substitutes

Helvetica Neue ships with macOS and is licensed on Windows for most current systems. The fallback to Helvetica then Arial then sans-serif covers any platform where it is absent. The closest open-source substitute for the 140px display tier is **Inter** at the same weight with -0.5% tracking, or **Geist** for a slightly tighter feel. For the 22px body and nav tiers, the system stack `system-ui, -apple-system, sans-serif` falls back to the native UI sans and reads close enough to Helvetica Neue to be undetectable.

## Layout

### Spacing System

- **Base unit:** the page is built on a 20-40-80-140 px ladder rather than a 4px or 8px module. Tokens scale exponentially rather than linearly.
- **Tokens:** `{spacing.xs}` 20px · `{spacing.sm}` 24px · `{spacing.md}` 40px · `{spacing.base}` 80px · `{spacing.lg}` 140px (the horizontal page gutter).
- **Page gutter (horizontal):** 140px on both sides — generous to the point of luxury. This is the largest captured padding value and the dominant spacing decision.
- **Hero padding:** 0×140px (zero vertical, 140px horizontal). The vertical rhythm is created by margin between elements rather than by container padding.
- **Footer padding:** 20×140×40 — narrower vertical breathing than the hero section.
- **Button padding:** 12×24 — the Sign up CTA's internal padding.

### Grid & Container

- **Max content width:** ~1280px on the centered hero block, anchored to the 140px page gutter.
- **Hero:** centered headline at full container width, with the 22px dek immediately beneath, and the Notion-acquisition badge floating ~80px above the headline as a rounded-rectangle pill.
- **Below the fold:** a single dark calendar product screenshot rendered as a floating macOS window with subtle drop shadow, paired with a small mobile phone screenshot to its right.
- **Footer:** a single horizontal row of muted-gray links flush left, with no logo or category structure.

### Rhythm

The page has essentially **two bands and a footer**. The first band is the above-fold composition (wordmark, nav, badge, headline, dek, pill CTA). The second band is the product screenshot. The footer carries four text links and nothing else. There is no editorial rhythm, no feature grid, no testimonial section — the rhythm is closer to a poster than to a marketing page. Bands either contain a single visual element or remain empty.

## Elevation

The system has a minimal shadow tier confined to two surfaces:

- **CTA glow:** the Sign up pill carries a soft orange-tinted shadow halo, rendered in `{colors.primary}` with low opacity, that reads as a subtle illuminated quality against the warm dark canvas.
- **Calendar screenshot:** the dark macOS window below the fold floats on a soft black drop shadow that lifts it visually off the canvas.
- **Flat everywhere else:** the hero headline, wordmark, nav links, badge, dek, and footer all sit flat against the canvas with no shadow or border.

There is no shadow tier on cards or modals because there are no cards or modals on the captured surface. Elevation is reserved for the two surfaces that need to read as objects rather than as page chrome.

## Shapes

The radius scale is **binary plus zero**:

- `{rounded.none}` 0px — the wordmark glyphs, the hero headline, the dek, the nav links, the footer. Everything that is typography sits flat against the canvas with no radius.
- `{rounded.sm}` 4px — the small Notion-acquisition badge above the headline; the only middle-tier radius on the page.
- `{rounded.full}` 9999px — the Sign up pill CTA. The only fully-rounded surface on the page; the warmest, most-tappable element by far.

There is no 6 / 8 / 12 / 16 / 24px tier. The system commits to the binary: either a surface is a full pill (the CTA) or it is unrounded (everything else). The 4px tier exists for exactly one element — the acquisition badge — and would not exist at all if the page had a different above-fold composition.

## Components

**`button-primary`** — The signature CTA. Saturated orange `{colors.primary}` fill, white text, `{rounded.full}` 9999px pill radius, 12×24 padding, 46px height. "Sign up" is the canonical instance, sitting in the upper-right corner of the page. The pill carries a soft orange-tinted glow halo behind it, the only meaningfully-elevated element on the marketing surface.

**`button-secondary`** — There is no captured secondary button on the marketing page; the Login link in the top-nav fills the secondary-action slot as a flat nav-link rather than a bordered button.

**`top-nav`** — Transparent surface with the orange CRON wordmark flush left, the Notion-acquisition badge centered, and the right-aligned link cluster (Blog, Changelog, Docs, Login) followed by the Sign up pill. 20×140×40 padding — generous horizontal gutter, narrower vertical breathing.

**`nav-link`** — Transparent background, white text in `{typography.nav-link}` (22px / 500), 0×24×1 padding. The labels sit on the same baseline as the Sign up pill but without any background fill.

**`wordmark`** — The CRON letterforms rendered as 140px Helvetica Neue display glyphs in `{colors.primary}` orange. Not an SVG logo — actual typographic text styled as the display tier and recolored.

**`hero-heading`** — White text on the transparent canvas, `{typography.display-xl}` (140px / 700, -3px tracking, 126px line-height). The single loudest moment in the system, "It's about time." with a curly apostrophe rendered at full display weight.

**`body-paragraph`** — Light-gray `{colors.ink-muted}` text at `{typography.body-xl}` (22px / 400). The sub-paragraph dek beneath the hero ("Cron is the next-generation calendar for professionals and teams").

**`notion-badge`** — The rounded-rectangle "Cron is now Notion Calendar →" badge floating above the hero headline. Transparent fill with a 1px `{colors.ink-muted}` border, `{rounded.sm}` 4px radius, 8×16 padding. The only 4px-radius element in the captured page; functions as a permanent acquisition note rather than an interactive element.

**`calendar-canvas`** — The dark macOS calendar product screenshot below the fold. Deep-warm-black `{colors.canvas-deep}` background, `{rounded.sm}` 4px radius (rendered as the native macOS window radius), no padding (the calendar grid fills the frame edge-to-edge). Carries a soft black drop shadow for visual lift.

**`footer`** — Warm near-black `{colors.canvas}` floor, light-gray link text, 40×140 padding. Four horizontal links (Privacy Policy, Terms of Service, Web app, Download) and nothing else.

**`footer-link`** — White text at `{typography.footer-link}` (13px / 500), no underline. The system's smallest typographic surface.

**`text-input`** — There is no captured text input on the marketing page; the Sign up flow opens on a separate sign-up surface. Documented for completeness with the same 4px radius, 12×24 padding, and 46px height as the primary pill CTA.

## Do's and Don'ts

**Do** keep the orange voltage to a single moment above the fold and a single application in the product screenshot. The system has four total occurrences of `{colors.primary}` on the captured page (wordmark, CTA, two event blocks); multiplying it into a section-header strip or a feature-grid accent would dilute the only chromatic brand signal in the chrome.

**Do** use the warm near-black `{colors.canvas}` (#161412) as the page floor — never pure `#000000`. The brown undertone is the structural move that warms the orange and the white display; swapping to cool blue-near-black would tip the system toward Linear or Vercel and lose the warmth.

**Do** commit to Helvetica Neue across every tier. Introducing a custom display family or a monospace voice would clutter the system; the deletion of a second typeface is part of what makes the 140px headline read as confident rather than decorative.

**Do** render the hero headline at 140px / 700 with -3px tracking. The aggressive negative tracking and heavy weight create the cap-height-crowded density that makes the headline read as a single typographic block; loosening the tracking or dropping the weight to 500 would soften the punchline.

**Don't** introduce a 6 / 8 / 12 / 16 / 24px middle radius tier. The system is binary — full pill on the Sign up CTA, 4px on the Notion-acquisition badge, 0px on everything else. Adding a middle radius would muddy the distinction between the warm CTA pill and the unrounded chrome.

**Don't** use `{colors.ink}` (#ffffff) as a background fill on the marketing surface. White is a text-only token here (26 captured occurrences split between text and decorative-stroke borders); using it as a card or section background would break the dark-canvas commitment.

**Don't** add a body / heading ladder between 140px and 22px. The system intentionally has no 32 / 48 / 64 / 96px display moments — the typographic punchline depends on the gap between the single loud headline and the body dek. Adding a middle tier would turn the page into a conventional editorial layout.

**Don't** swap the centered, single-element above-fold composition for a feature grid or testimonial strip. The page-as-headline move depends on the deletion of supporting chrome; adding a 3-up feature row beneath the dek would collapse the typographic confidence into generic SaaS structure.

## Known Gaps

- **Hover and focus states:** the captured surfaces carry resting states only. The full state matrix for the Sign up pill, nav links, and the Notion-acquisition badge is not exposed in the marketing chrome.
- **Light mode:** the captured page is dark-only. No light variant is exposed on the marketing surface; the product itself ships a light theme inside the macOS app but the marketing site does not represent it.
- **Form input states:** there is no captured text input on the marketing page. The sign-up flow opens on a separate surface that was not captured.
- **Motion:** the orange pill CTA may pulse or glow on hover but the spec captures end-state values only. Animation timing and easing live in the live page CSS.
- **Mobile / responsive tokens:** the captured page is the desktop render at 1440px width. Mobile and tablet breakpoints likely shift the 140px display downward but are not represented in the extracted token list.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Cron / Notion Calendar product (the macOS app, the web app, the mobile clients) carries a much richer token system — calendar grid colors, event-block tints, time-of-day shading, dark/light themes, sidebar surfaces — that is not represented here.
- **Wordmark display variant:** the CRON wordmark is rendered as typographic text, but the marketing page uses a custom-spaced display variant that may not match the standard 140px / 700 / -3px exactly. The exact kerning of the wordmark is not captured.