---
title: "Cron design system"
variant: extended
source: https://www.cron.com/
captured_at: 2026-10-12
theme: dark
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/cron-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Cron · Design System

> A quiet dark canvas, energized by time and orange.

**Theme:** dark · **Industry:** productivity · **Source:** https://www.cron.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Cron pairs an expansive dark canvas with oversized white typography and a vivid orange signup accent. A centered calendar product preview grounds the minimal hero in a tangible view of the app.

## North star

Keep the dark canvas and oversized centered message quiet enough that the real product interface becomes the hero’s visual proof.

## Overview

The page builds its identity from a near-black brown canvas (#161412), restrained white and muted-gray text, and a small but highly visible orange accent (#ff4700). The header keeps the logo and navigation on one horizontal line; the hero shifts attention to an enormous, centered headline in bold Helvetica Neue, followed by a quiet supporting sentence. A compact outlined announcement link sits above the headline, while the orange pill-shaped signup button is the primary color signal. The calendar interface is presented as a centered product image rather than surrounded by decorative UI, with the phone overlapping the desktop preview to suggest a connected product. Generous vertical breathing room separates the header, announcement, copy, and showcase. A subtly darker footer closes the page with understated utility links. The effect is focused and product-led: typography and the real interface carry the visual story, while color stays disciplined.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Umber | `#161412` | `--color-midnight-umber` | brand | Primary page canvas across the navigation and hero. |
| Clean Signal | `#ffffff` | `--color-clean-signal` | neutral | Hero headline, logo details, prominent navigation, and signup-button text. |
| Soft Silver | `#cccccc` | `--color-soft-silver` | neutral | Supporting copy and quieter navigation text against the dark canvas. |
| Deep Soot | `#0f0d0a` | `--color-deep-soot` | surface | Distinct, darker footer band beneath the main page canvas. |
| Cron Ember | `#ff4700` | `--color-cron-ember` | accent | Signup button fill and the brand mark; the strongest interface accent. |

### Semantic aliases

`--color-canvas` → `#161412` (Midnight Umber) · `--color-surface` → `#0f0d0a` (Deep Soot) · `--color-text` → `#ffffff` (Clean Signal) · `--color-text-muted` → `#cccccc` (Soft Silver) · `--color-accent` → `#ff4700` (Cron Ember) · `--color-on-accent` → `#ffffff` (Clean Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#161412` | 18.37:1 | AAA |
| `#ffffff` | `#0f0d0a` | 19.4:1 | AAA |
| `#cccccc` | `#161412` | 11.44:1 | AAA |
| `#cccccc` | `#0f0d0a` | 12.08:1 | AAA |
| `#ff4700` | `#161412` | 5.38:1 | AA |
| `#ff4700` | `#0f0d0a` | 5.69:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue | `--font-body` | system | 400, 500, 700 | All page typography, from display headline and navigation to body copy and links. | Inter |

- **Helvetica Neue:** Use a clean sans-serif voice; the display headline is bold and tightly tracked, while navigation and body remain restrained.

### Type scale — Custom (ratio ≈ 3.282, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 140px | 700 | 0.9 | -0.021em | — | Helvetica Neue | Oversized, bold centered hero headline. |
| h1 | 22px | 400 | 1.7 | 0 | — | Helvetica Neue | Measured heading style for supporting hero-level heading text. |
| body | 13px | 500 | 1.5 | 0 | — | Helvetica Neue | Compact supporting copy describing the calendar. |
| button | 22px | 500 | 1 | 0 | — | Helvetica Neue | Signup CTA label. |
| nav | 22px | 500 | 1.7 | 0 | — | Helvetica Neue | Header navigation labels. |
| link | 15px | 400 | 1 | 0.01em | — | Helvetica Neue | Announcement link above the hero headline. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 12, 20, 24, 40, 80, 140 px.
- Section rhythm 140px · element gap — · card padding — · max content width 1000px.

Use a centered content composition within the measured 1000px page maximum, with a horizontal header and a single-column hero. Center-align the announcement, headline, supporting copy, and product showcase. Preserve the spacious section rhythm, measured at 140px, rather than adding extra cards or columns. The navigation remains visually light, and the footer becomes a separate, darker horizontal band. Keep the overall density low: each major element should have room to read independently.

## Shape & elevation

- Radius: button `9999px` · link `4px`
- Shadow `xl` (button): `rgba(255, 71, 0, 0.2) 0px 0px 100px 0px`
- Shadow `inset` (link): `rgba(255, 71, 0, 0.5) 0px 0px 0px 0.5px inset, rgba(255, 72, 0, 0.2) 0px 0px 28px 0px`
- Motion: standard transition `0.175s ease` on interactive elements.

The page is mostly flat, with contrast between the main canvas and the darker footer doing the structural work. The announcement link has a subtle orange inset edge and glow; the orange signup pill carries a broad, soft glow. The product image supplies its own layered depth through the overlapping phone mockup.

## Imagery

The hero uses a product screenshot of Cron’s dark calendar interface, framed as a wide desktop view with a mobile phone layered in front. Keep the image centered below the copy and let its interface details provide color and texture. It is product imagery, not a decorative illustration; avoid adding unrelated photography, gradients, or visual effects that compete with it.

## Components

### Header navigation

Place the orange Cron mark at the left and muted-light links at the right, ending with a filled orange signup pill.

### Announcement link

A compact, centered outlined link reading “Cron is now Notion Calendar →,” with a subtle orange inset edge and glow.

### Hero headline

Use an exceptionally large, bold white centered statement, followed by one line of muted supporting copy.

### Product showcase

Center the dark desktop calendar preview beneath the hero copy and overlap it with a foreground mobile calendar mockup.

### Signup button

Use the measured #ff4700 fill, white label, fully rounded pill shape, and restrained orange glow.

### Footer links

Set privacy, terms, web app, and download links quietly on the deeper #0f0d0a footer band.

### Measured component styles

- **Primary button** (“Sign up”): background #ff4700 · text #ffffff · radius 9999px · padding 12px 24px · 500 22px Helvetica Neue · shadow rgba(255, 71, 0, 0.2) 0px 0px 100px 0px
- **Link** (“Cron is now Notion Calendar →”): transparent background · text #ffffff · radius 4px · padding 0px 24px 1px 24px · 400 15px Helvetica Neue · shadow rgba(255, 71, 0, 0.5) 0px 0px 0px 0.5px inset, rgba(255, 72, 0, 0.2) 0px 0px 28p
- **Navigation item** (“Blog Changelog Docs Login Sign up”): transparent background · text #cccccc · radius 0px · padding 0px · 400 22px Helvetica Neue

## Do

- Use #161412 as the dominant canvas.
- Reserve #ff4700 for brand marks and primary actions.
- Keep the headline oversized, bold, and centered.
- Show the product interface as the main visual proof.
- Separate the footer with the measured darker surface.
- Leave generous space between hero elements.

## Don't

- Do not introduce unmeasured palette colors.
- Do not add gradients or decorative background patterns.
- Do not crowd the spacious single-column hero.
- Do not turn product imagery into generic illustration.
- Do not make every link an orange CTA.
- Do not add cards, borders, or shadows without a clear role.

## Agent prompt

Build a new page in Cron’s restrained, product-led visual style. Use Midnight Umber (#161412) as the main canvas, Clean Signal (#ffffff) for the primary headline, and Soft Silver (#cccccc) for supporting text. Reserve Cron Ember (#ff4700) for the logo and a prominent pill-shaped primary action; use Deep Soot (#0f0d0a) for a distinct footer band. Set typography in Helvetica Neue or a close sans-serif substitute, with a very large, bold, tightly tracked display heading and calm supporting text. Keep the navigation horizontal and the main content centered in a spacious single column. Present a real product interface as the visual centerpiece, not decorative stock imagery. Keep surfaces mostly flat, adding only subtle orange glow to the primary action.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Horizontal header with brand mark on the left and navigation links plus signup action on the right. | Brand-home link, Primary signup action | Dark canvas, Orange logo, Pill CTA |
| 2 | hero | Centered announcement, oversized headline, supporting copy, and a desktop calendar preview layered with a phone. | Announcement link, Product proof, Centered message | Large white display type, Muted supporting text, Dark product mockup |
| 3 | footer | Single-column darker band with a compact row of utility links. | Policy access, Product destinations | Deep Soot background, Low-emphasis links |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/cron-com