Editorial Landing Page

---
version: alpha
name: Editorial Landing Page
description: A marketing page that reads like a well-set magazine. Type does the work; one warm accent does the pointing.
colors:
  paper: "#f7f4ee"
  surface: "#fffdf9"
  ink: "#1a1815"
  ink-2: "#4a4640"
  ink-3: "#7a756c"
  line: "#e6e1d7"
  line-strong: "#cfc8bb"
  primary: "#c2410c"
  primary-soft: "#fbe9df"
  on-primary: "#fffdf9"
  ink-inverse: "#f7f4ee"
  surface-inverse: "#1a1815"
typography:
  display:
    fontFamily: Fraunces
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.02em
    fontVariation: "'opsz' 144, 'SOFT' 30"
  headline:
    fontFamily: Fraunces
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.015em
  lead:
    fontFamily: Manrope
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
  body:
    fontFamily: Manrope
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
  label:
    fontFamily: Manrope
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.08em
  caption:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  none: 0px
  sm: 2px
  md: 4px
  full: 9999px
spacing:
  base: 8px
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 64px
  2xl: 96px
  3xl: 144px
  gutter: 32px
  measure: 640px
  container: 1200px
components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-inverse}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm}"
    height: 48px
  button-secondary:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm}"
    height: 48px
  eyebrow:
    textColor: "{colors.primary}"
    typography: "{typography.label}"
  section:
    backgroundColor: "{colors.paper}"
    padding: "{spacing.2xl}"
  section-inverse:
    backgroundColor: "{colors.surface-inverse}"
    textColor: "{colors.ink-inverse}"
    padding: "{spacing.2xl}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  pull-quote:
    textColor: "{colors.ink}"
    typography: "{typography.headline}"
---

# Editorial Landing Page

## Overview

A landing page that trusts its words. Instead of a centred headline, a gradient blob and three feature cards, it borrows from print: a large serif headline set with real optical sizing, generous margins, one warm accent, and images that sit in the grid rather than float over it. The page should feel considered and slightly slow, like something worth reading.

The audience is anyone whose product is better explained than demoed: tools for thinking, services, publications, small serious software.

## Colors

Warm neutrals and one accent. The warmth is the identity; a cool grey page would be a different product.

- **Paper (#f7f4ee):** the page. Off-white with a touch of cream. Surface (#fffdf9) is one step lighter for cards and inputs.
- **Ink (#1a1815), Ink 2 (#4a4640), Ink 3 (#7a756c):** headings, body, captions. Warm blacks, never pure #000.
- **Line (#e6e1d7):** hairlines and dividers. Line strong for input borders.
- **Primary (#c2410c):** burnt orange. Eyebrows, links, the underline on hover, one highlighted word in a headline at most. It is not a button colour; buttons are ink.
- **Inverse pair:** one section per page may flip to ink background with paper text for contrast. Never two in a row.

## Typography

The typeface is the design. Two families, both free on Fontsource.

- **Fraunces** for display and headlines. Use the variable axes: high optical size for the hero, a little softness. Weight 500, not bold; the size does the shouting.
- **Manrope** for everything else. Lead paragraphs at 20px, body at 17px with a long line height, labels at 13px semibold in uppercase with wide tracking.
- Headline measure is short: no more than 12 words, wrapping at around 20 characters per line on desktop. Body measure caps at 640px.
- Never centre body text. Centre a headline only in the hero, and even then prefer left-aligned with a wide left margin.

## Layout

A 1200px container with 32px gutters. Vertical rhythm is 8px-based and generous: 96px between sections on desktop, 144px around the hero, 64px on mobile. Sections alternate between a single centred column and a two-column split with text on one side and one image on the other.

Use whitespace as the divider. If you feel the need to add a border between sections, add 32px of space instead.

Image treatment: full-bleed or on the grid, never floating with a shadow. One image per section.

## Elevation & Depth

None. This is a flat page. Depth comes from the type scale, the inverse section and photography. No shadows, no glass, no gradients. A card is surface on paper with a hairline; that is the entire elevation system.

## Shapes

Nearly square. Buttons and images use a 4px radius; tags 2px; only avatars are round. Fully rounded buttons would break the editorial feel.

## Components

- **Hero:** eyebrow in primary, display headline, one lead paragraph, one primary button and one text link. No second button, no badge row, no "as seen in" strip above the fold.
- **Buttons:** 48px tall, ink background with paper text, label typography in uppercase. Secondary is a text-only button with an underline that turns primary on hover.
- **Section header:** eyebrow, headline, optional lead. Left-aligned.
- **Feature list:** a numbered list with a headline and a paragraph each, stacked, not three cards in a row.
- **Pull quote:** headline typography with a hairline above and below, attribution in caption.
- **Logo strip:** SVGL logos in monochrome ink at 60% opacity, one row, no heading longer than "Used by".
- **Pricing:** at most three tiers, one highlighted with a primary eyebrow, plain feature names. Look at real pricing tables before writing one.
- **Footer:** one inverse section with columns of links and a large wordmark.

## Do's and Don'ts

- Do use only Fraunces and Manrope. Fraunces on headlines only; body copy in a serif is a different design.
- Do keep every colour inside the palette. Photography brings its own colour; the interface does not.
- Do keep contrast at WCAG AA: primary orange on paper is fine for labels, not for body text.
- Do respect `prefers-reduced-motion`. Motion here is limited to a fade-up on scroll and a hover underline.
- Don't use gradients, glows, blurred blobs or glassmorphism. If a hero needs texture, use a photograph or a flat shape.
- Don't stack three feature cards with icons. Write the features as a list.
- Don't use more than one accent colour, and never use it as a button fill.
- Don't add a second effect from a component library. One signature moment per page, then calm.