kage
cron.com
Design analysis
A near single-viewport dark landing page built around one massive white headline in a heavy grotesque, with a bright orange reserved for the logo, the sign-up pill and small UI accents in the product shots. The rhythm is announcement banner → oversized statement headline → one-line subcopy → a large composite desktop/mobile app screenshot. The product imagery does the persuading: a realistic dark calendar UI with a command palette open, warm orange event blocks, and an overlapping iPhone. The footer is a single quiet row of text links, keeping the page to one confident idea.
Prompt preview
## Reference images
Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.
- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cron-com/13c2d880-1e0a-4e61-bc53-4a819d6c2d36-1789060767-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cron-com/13c2d880-1e0a-4e61-bc53-4a819d6c2d36-1789060132466.webp
- Design on Kage: https://kage.design/designs/cron-landing-page
## Before you start
Ask the user what product they are building, who it is for, and what brand assets they already have (name, logo, colours, typeface). Wait for the answers, then apply the design language below to their product — never reproduce the reference product's name, copy, logo or screenshots.
## Page structure
- **Top nav**: logo left (a compact wordmark in the accent colour); right-aligned links (Blog, Changelog, Docs, Login) plus one solid pill CTA in the accent colour. Transparent over the dark background, generous vertical padding.
- **Announcement banner**: a small, narrow pill/banner with a subtle border and faint warm glow holding one line of news plus an arrow. Low contrast so it doesn't compete with the headline.
- **Hero headline**: a single huge statement sentence, white, very heavy grotesque, near-black background. Full-bleed horizontal centre, tight tracking, approx 96–140px on desktop.
- **Subheadline**: one plain sentence, small (~18–20px), muted white/gray, directly under the headline. No buttons — the nav holds the CTAs.
- **Product showcase**: a large, realistic desktop-app screenshot (in-app dark theme matching the site) with an overlapping phone mockup offset to the lower right. Show the product doing something (open command palette, active event blocks tinted with the accent colour). Soft ambient glow behind the imagery.
- **Footer**: one thin row of small, low-contrast text links (privacy, terms, web app, download) on a slightly different dark tone. Nothing else.
## Design language
- Palette: near-black background (#0d0d0d–#141414), pure white headline text, one saturated accent (orange ~#ff5a1f) used sparingly: logo, primary CTA, and in-app event highlights. All other text in muted gray (#9a9a9a).
- One idea per page: the headline states the value in a few words; the product screenshot proves it. No feature grids, no cards, no imagery besides the app itself.
- Type: a single heavy geometric grotesque family. Extreme scale contrast between headline and everything else; body text small and quiet.
- Borders/radius: small radii (6–10px) on banners and CTAs; app screenshots get a subtle outer glow or shadow rather than a hard border.
- Density: very low at top, visually dense only inside the product screenshot — let the realistic UI texture create richness.
- Motion: keep it subtle — hover states on nav links, gentle glow behind hero imagery, arrow affordance on the banner.
- Footer must stay minimal: single row, muted, small.
## Never
Do not use the Cron/Notion Calendar name, logo, tagline ("It's about time."), any of its copy, its calendar screenshots, or its orange wordmark. Do not present the result as that product.
