MarketingCursorClaude CodeCodex

Editorial Product Landing Page

A complete conversion system for product launches: warm editorial composition, signal-red action hierarchy, product evidence, section rhythm, copy limits, and mobile rules.

Sections
10
Type families
2 + mono
Tokens
13
Viewport
Desktop + Mobile

Preview Lab

Live

Inspect theme and responsive behavior

Conversion system overview

Editorial energy, conversion discipline

The system combines expressive launch storytelling with strict conversion hierarchy. Large display type establishes the promise; compact proof, product evidence, and repeated single-purpose actions move the reader through the page without turning every section into a card.

Relay is fictional preview content. The reusable contract is the page rhythm, type pairing, signal-red action hierarchy, product evidence treatment, copy limits, media rules, and responsive marketing states.

Display headline

Ship the story your product deserves.

CTA hierarchy

One filled action per section. Secondary actions remain quiet text links.

Product evidence

Evidence linked18
Message approved04
Tasks ready03

Page anatomy

Full landing sequence

The template defines the whole conversion path, from navigation to footer. Each step has purpose, density, responsive behavior, and a known failure mode.

Section
Purpose
Failure to avoid

01Navigation

Compact

Orient the visitor and expose one primary action.

Five equal nav actions with no conversion hierarchy.

02Hero promise

Spacious copy, dense media

State one concrete promise and show product evidence.

Generic centered SaaS hero with hidden product UI.

03Social proof

Compact

Make the main promise feel earned before asking for trust.

Unlabeled fake logo boxes.

04Product evidence

Medium

Show how evidence, tasks, and messaging connect.

Screenshot too small to inspect.

05Feature narrative

Medium

Explain the mechanism behind the promise.

Three identical icon cards.

06Testimonial

Spacious

Humanize the workflow with a specific result.

Anonymous wall-of-text testimonial.

Typography

Editorial display, practical body

Hero Display

4.75rem / 0.95 / 500

Ship the story your product deserves.

Tracking -0.02em. Keep line length controlled for mobile.

Section Display

2.875rem / 1.02 / 500

From scattered launch tasks to one clear release narrative.

Tracking -0.015em. Keep line length controlled for mobile.

Feature Headline

1.75rem / 1.1 / 600

Turn evidence into release messaging

Keep line length controlled for mobile.

Testimonial Quote

2.125rem / 1.18 / 500

Trusted by small teams with ambitious release cycles.

Keep line length controlled for mobile.

Body Large

1.1875rem / 1.55 / 400

Relay connects evidence, tasks, and messaging in one launch workspace.

Keep line length controlled for mobile.

Body

0.9375rem / 1.65 / 400

Start building your next launch.

Keep line length controlled for mobile.

Navigation / UI

0.8125rem / 1.2 / 600

Product

Keep line length controlled for mobile.

Eyebrow / Annotation

0.75rem / 1.2 / 700

LAUNCH 04

Tracking 0.12em. Keep line length controlled for mobile.

CTA Label

0.875rem / 1 / 700

Build launch plan

Keep line length controlled for mobile.

Mono Metadata

0.75rem / 1.4 / 600

REL-204 / READY

Keep line length controlled for mobile.

Marketing components

States that a real landing page needs

CTA button

Use scale 0.96 on press Preserve width during loading Focus ring uses Evidence Blue

6 states
defaulthoveractivefocusloadingdisabled

Product media frame

Frame with Surface and Rule Caption below media Never hide product behind decoration

4 states
loadedloading skeletonfallbackcaptioned

FAQ row

Use button semantics Expose aria-expanded Maintain 44px touch target

3 states
closedopenfocus-visible

Waitlist input

Label remains visible Errors are specific Success explains the next step

5 states
defaultfocuserrorsuccessloading

Copy system

Voice and conversion copy

The template keeps claims concrete and makes each CTA describe the real outcome.

Good

  • Turn every product release into a story customers can follow.
  • Connect evidence, tasks, and messaging in one launch workspace.
  • Build launch plan

Avoid

  • revolutionize
  • supercharge
  • next-generation
  • seamless
  • unlock the power of AI

Media and conversion

Guardrails for the AI agent

Media rules

  • Show real product UI when claiming workflow clarity
  • Use abstract composition only for proof labels or issue markers
  • Crop screenshots around the active release timeline
  • Place captions below media
  • Use 10px media radius and a thin Rule outline
  • Mobile crops preserve labels and primary task state

Conversion rules

  • One primary conversion action per section
  • Proof appears before the visitor has to trust a large claim
  • Primary CTA uses Signal Red and should not compete with another filled button
  • Evidence Blue is reserved for product proof and selected data
  • Final CTA repeats the highest-intent action with reassurance
  • Secondary actions are text links or quiet outlines

Do

  • State one concrete promise in the hero
  • Make product evidence visible in the first viewport
  • Use one primary conversion action per section
  • Alternate narrative density intentionally
  • Keep body copy to readable line lengths
  • Pair claims with proof
  • Use display type selectively
  • Preserve a strong mobile reading order

Don't

  • No generic “Build faster, ship smarter” copy
  • No purple gradients because the page is SaaS
  • No every-section-inside-a-card layout
  • No repeated centered layout from top to bottom
  • No fake logos without text labels
  • No six-line mobile hero headlines
  • No two equal primary CTAs beside each other
  • No arbitrary Tailwind colors

Tokens

Color system

Named roles from the template contract. Signal Red is reserved for conversion; Evidence Blue is reserved for product proof and data, keeping the editorial system restrained.

Brand

Surfaces

Text

Semantic

Data visualization

Source file

Raw DESIGN.md and export formats

This is the single canonical source view. Anonymous visitors see a short preview; signed-in users get the complete Markdown and generated implementation formats.

# Editorial Product Landing Page DESIGN.md

## Template intent

Build an editorial product landing page for Relay, a fictional launch-operations product for small
product teams. The page should turn scattered product changes, customer evidence, launch tasks, and
message drafts into one clear release narrative.

This is a full landing-page system, not a hero-only template. It defines the page anatomy,
conversion hierarchy, copy rules, media behavior, responsive composition, accessibility states, and
implementation tokens needed for Cursor, Claude Code, or Codex.

## Visual thesis

Editorial launch system with signal red.

- Use warm paper instead of pure white.
- Use deep carbon ink instead of generic slate.
- Use signal red for the one primary conversion action in each section.
- Use evidence blue only for product proof, metrics, and data evidence.
- Let typography and asymmetry do the work before decoration.
- Keep controls square or lightly rounded.
- Use thin rules, proof labels, issue numbers, and annotations.
- Show product evidence in the first viewport.
- Do not add gradients, glassmorphism, random floating pills, or AI sparkle decoration.

## Page anatomy

1. Navigation
   - Purpose: orient the visitor and expose one primary action.
   - Anatomy: wordmark, compact links, product status label, primary CTA.
   - Primary action: Build launch plan.
   - Mobile: collapse links behind a menu; keep CTA visible or inside the first menu row.
   - Failure: a centered nav with five equal actions and no hierarchy.

2. Hero promise
   - Purpose: state one concrete promise and show product evidence.
   - Anatomy: eyebrow, H1, body copy, CTA pair, proof label, launch desk media.
   - Primary action: Build launch plan.
   - Density: spacious text, dense media.
   - Mobile: copy before media, two CTAs stacked only when width requires it.
   - Failure: vague "Build faster, ship smarter" copy with hidden product UI.

3. Social proof
   - Purpose: make the main promise feel earned before asking for trust.
   - Anatomy: proof label, monochrome team names, one metric, accessible text fallback.
   - Primary action: none.
   - Mobile: wrap names into two columns.
   - Failure: fake logo shapes with no labels.

4. Product evidence
   - Purpose: show how evidence, tasks, and messaging connect.
   - Anatomy: screenshot frame, release timeline, customer quote, task lane, caption.
   - Primary action: See the workspace.
Checking your session…

Use with AI Coding Agents

Copy one of these prompts into your AI coding agent to apply the Editorial Product Landing Page DESIGN.md design system to your project. The DESIGN.md file in your repo root is the source of truth.

# .cursor/rules (or DESIGN.md)
You are working in a project that uses the Editorial Product Landing Page DESIGN.md design system.

Read the DESIGN.md file in this project root and follow it strictly when generating UI.
Match the brand's exact colors, typography, spacing scale, and border radius.
Do not create generic Tailwind UI — apply the visual language from DESIGN.md.

Key rules:
- Use the defined color palette, not arbitrary hex values
- Apply the correct font family and weight scale
- Follow spacing tokens (4/8/12/16/24/32px scale)
- Match component patterns: buttons, cards, inputs, badges as specified

Frequently Asked Questions

Can I use the Editorial Product Landing Page DESIGN.md with Cursor, Claude Code, or Codex?

Yes. Copy the DESIGN.md file into your project root and reference it in your agent rules. For Cursor, add it to .cursor/rules. For Claude Code, include it as CLAUDE.md. For Codex, add it to your system prompt. The agent will read it and apply the Editorial Product Landing Page visual system to any UI it generates.

Is this an official Editorial Product Landing Page file?

No — this is an independent reference created for AI coding agent compatibility. It is not officially endorsed by Editorial Product Landing Page. The visual system was analyzed and documented to help AI agents produce UI that matches the Editorial Product Landing Page aesthetic. Always verify against official Editorial Product Landing Page documentation.

What is a DESIGN.md file?

A DESIGN.md file is a Markdown document that describes a product's visual design system in a format that AI coding agents can read and follow. It captures color palettes, typography, spacing, component patterns, and usage rules — giving AI agents like Cursor, Claude Code, and Codex a source of truth for consistent UI generation.

Can I use the Editorial Product Landing Page color tokens and visual style in my own project?

The design tokens and visual patterns documented here are for reference and AI agent guidance. If you are building a project inspired by the Editorial Product Landing Page visual style, ensure your use is consistent with Editorial Product Landing Page's brand guidelines and any applicable trademark or copyright rules. This file helps AI agents understand a style — it does not grant license to use proprietary brand assets.

How do I add this to my project?

Download the DESIGN.md file (requires free account) and place it in your project root. Then tell your AI agent to read it: "Read the DESIGN.md file in this project and follow its design system when generating UI." The agent will pick it up automatically in most modern AI coding tools.