--- name: Editorial Landing Page slug: editorial-landing-page url: "https://dontmakeitugly.com/packs/editorial-landing-page" install: npx dontmakeitugly init editorial-landing-page designMd: "https://dontmakeitugly.com/packs/editorial-landing-page/DESIGN.md" manifest: "https://dontmakeitugly.com/packs/editorial-landing-page.json" audience: builder stack: - agnostic - tailwind resources: - godly - supahero - navbar-gallery - cta-gallery - typewolf - fontsource - magic-ui - svgl - vercel-web-interface-guidelines createdAt: "2026-09-04" --- # Editorial Landing Page A marketing page that reads like a magazine. Type first, one warm accent, no blob. - Audience: For people who ship - Stack: Framework agnostic, Tailwind CSS - Install: `npx dontmakeitugly init editorial-landing-page` ## What this pack is A contract for landing pages that are better explained than demoed. A large serif headline with real optical sizing, generous whitespace, warm paper, one burnt-orange accent and images that sit in the grid. It replaces the centred-headline-and-three-cards layout every agent reaches for with something you would actually read. ## How to use it Look at the reference screens before you write a word of prompt, so you are describing something real. Install the pack, then pull sections from Magic UI sparingly and logos from SVGL. Typewolf shows the type in use; Fontsource installs it. Run the check before you show anyone. ## What `init` puts in your repo - `DESIGN.md`: the visual contract below. Tokens in the front matter, reasoning in the prose. - `dmiu.config.json`: which routes the design check screenshots and how strict it is. - `.dmiu/references/README.md`: the reference screens and what to take from each. - A block in `AGENTS.md` (and `CLAUDE.md` if you have one) telling the agent to read the contract first and run the check before finishing. ## Reference screens - [Godly](https://godly.website): The gallery to open first. Nearly everything on it shows what restraint and good type look like on a real page. Look at: headline scale, margins, how few elements sit above the fold. Preview: https://dontmakeitugly.com/previews/godly.jpg - [Supahero](https://supahero.io): Hundreds of heroes side by side. Proof that a hero does not have to be a centred headline with two buttons. Look at: left-aligned layouts, single calls to action, image placement. Preview: https://dontmakeitugly.com/previews/supahero.jpg - [Typewolf](https://www.typewolf.com): Typefaces shown on real sites, with pairings. Where the Fraunces and Manrope choice comes from. Look at: serif display over sans body, sizing contrast between headline and lead. Preview: https://dontmakeitugly.com/previews/typewolf.jpg ## Resources, in order 1. [Godly](https://dontmakeitugly.com/resources/godly.md) — Astronomically good web design inspiration, hand-picked. Agent: Limited. 2. [Supahero](https://dontmakeitugly.com/resources/supahero.md) — Hundreds of website hero sections from real sites, nothing else. Agent: Limited. 3. [Navbar Gallery](https://dontmakeitugly.com/resources/navbar-gallery.md) — 550+ real website navbars, sorted by type: mega menus, sidebars, tabs and the rest. Agent: Limited. 4. [CTA Gallery](https://dontmakeitugly.com/resources/cta-gallery.md) — Real calls to action, sorted into buttons, forms, modals, pricing and newsletters. Agent: Limited. 5. [Typewolf](https://dontmakeitugly.com/resources/typewolf.md) — What's trending in type, with real sites showing each font in use. Agent: Limited. 6. [Fontsource](https://dontmakeitugly.com/resources/fontsource.md) — Self-host any open-source font with an npm install. Agent: Excellent. Install: `npm install @fontsource-variable/inter` 7. [Magic UI](https://dontmakeitugly.com/resources/magic-ui.md) — Animated React components and effects for landing pages, built to sit alongside shadcn/ui. Agent: Excellent. Install: `npx shadcn@latest add "https://magicui.design/r/marquee"` 8. [SVGL](https://dontmakeitugly.com/resources/svgl.md) — A beautiful library of full-colour SVG logos with light and dark variants. Agent: Excellent. 9. [Web Interface Guidelines](https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md) — A concise, agent-readable checklist of what a well-built web interface must get right. Agent: Excellent. ## Related collections - [Make your landing page better](https://dontmakeitugly.com/collections/better-landing-pages.md) ## The contract (DESIGN.md) ```markdown --- 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. ``` ## Agent instructions (added to AGENTS.md) ```markdown ## Design contract (Editorial Landing Page) This project uses a DESIGN.md contract from Don't Make It Ugly. Before writing or changing any UI: 1. Read `DESIGN.md`. Use only its fonts, colours, spacing scale and radii. If something you need isn't there, ask before inventing it. 2. Read `.dmiu/references/README.md` for the reference screens and what to take from each. 3. When you finish a UI change, start the dev server and run `npx dontmakeitugly check`. Read `.dmiu/report.md` and fix every error before you say you're done. 4. Never edit `DESIGN.md` to make a check pass. Change the code. Curated resources for this pack (each page says how an agent can use it): - Godly: https://dontmakeitugly.com/resources/godly.md - Supahero: https://dontmakeitugly.com/resources/supahero.md - Navbar Gallery: https://dontmakeitugly.com/resources/navbar-gallery.md - CTA Gallery: https://dontmakeitugly.com/resources/cta-gallery.md - Typewolf: https://dontmakeitugly.com/resources/typewolf.md - Fontsource: https://dontmakeitugly.com/resources/fontsource.md - Magic UI: https://dontmakeitugly.com/resources/magic-ui.md - SVGL: https://dontmakeitugly.com/resources/svgl.md - Web Interface Guidelines: https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md ``` ## The check After building, run `npx dontmakeitugly check` with the dev server running. It screenshots / at desktop and mobile widths and fails on fonts outside the contract, colours off the palette (tolerance 6), WCAG AA contrast failures, purple/blue gradients, animation that ignores reduced motion, and screenshot drift. The report lands in `.dmiu/report.md`.