{
  "slug": "editorial-landing-page",
  "name": "Editorial Landing Page",
  "tagline": "A marketing page that reads like a magazine. Type first, one warm accent, no blob.",
  "version": "07e55d2",
  "url": "https://dontmakeitugly.com/packs/editorial-landing-page",
  "markdownUrl": "https://dontmakeitugly.com/packs/editorial-landing-page.md",
  "designMdUrl": "https://dontmakeitugly.com/packs/editorial-landing-page/DESIGN.md",
  "files": [
    {
      "path": "DESIGN.md",
      "content": "---\nversion: alpha\nname: Editorial Landing Page\ndescription: A marketing page that reads like a well-set magazine. Type does the work; one warm accent does the pointing.\ncolors:\n  paper: \"#f7f4ee\"\n  surface: \"#fffdf9\"\n  ink: \"#1a1815\"\n  ink-2: \"#4a4640\"\n  ink-3: \"#7a756c\"\n  line: \"#e6e1d7\"\n  line-strong: \"#cfc8bb\"\n  primary: \"#c2410c\"\n  primary-soft: \"#fbe9df\"\n  on-primary: \"#fffdf9\"\n  ink-inverse: \"#f7f4ee\"\n  surface-inverse: \"#1a1815\"\ntypography:\n  display:\n    fontFamily: Fraunces\n    fontSize: 72px\n    fontWeight: 500\n    lineHeight: 1.0\n    letterSpacing: -0.02em\n    fontVariation: \"'opsz' 144, 'SOFT' 30\"\n  headline:\n    fontFamily: Fraunces\n    fontSize: 40px\n    fontWeight: 500\n    lineHeight: 1.1\n    letterSpacing: -0.015em\n  lead:\n    fontFamily: Manrope\n    fontSize: 20px\n    fontWeight: 400\n    lineHeight: 1.55\n  body:\n    fontFamily: Manrope\n    fontSize: 17px\n    fontWeight: 400\n    lineHeight: 1.65\n  label:\n    fontFamily: Manrope\n    fontSize: 13px\n    fontWeight: 600\n    lineHeight: 1.3\n    letterSpacing: 0.08em\n  caption:\n    fontFamily: Manrope\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 1.5\nrounded:\n  none: 0px\n  sm: 2px\n  md: 4px\n  full: 9999px\nspacing:\n  base: 8px\n  xs: 8px\n  sm: 16px\n  md: 24px\n  lg: 40px\n  xl: 64px\n  2xl: 96px\n  3xl: 144px\n  gutter: 32px\n  measure: 640px\n  container: 1200px\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.ink}\"\n    textColor: \"{colors.ink-inverse}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.sm}\"\n    height: 48px\n  button-secondary:\n    backgroundColor: \"{colors.paper}\"\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.label}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.sm}\"\n    height: 48px\n  eyebrow:\n    textColor: \"{colors.primary}\"\n    typography: \"{typography.label}\"\n  section:\n    backgroundColor: \"{colors.paper}\"\n    padding: \"{spacing.2xl}\"\n  section-inverse:\n    backgroundColor: \"{colors.surface-inverse}\"\n    textColor: \"{colors.ink-inverse}\"\n    padding: \"{spacing.2xl}\"\n  card:\n    backgroundColor: \"{colors.surface}\"\n    textColor: \"{colors.ink}\"\n    rounded: \"{rounded.md}\"\n    padding: \"{spacing.md}\"\n  pull-quote:\n    textColor: \"{colors.ink}\"\n    typography: \"{typography.headline}\"\n---\n\n# Editorial Landing Page\n\n## Overview\n\nA 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.\n\nThe audience is anyone whose product is better explained than demoed: tools for thinking, services, publications, small serious software.\n\n## Colors\n\nWarm neutrals and one accent. The warmth is the identity; a cool grey page would be a different product.\n\n- **Paper (#f7f4ee):** the page. Off-white with a touch of cream. Surface (#fffdf9) is one step lighter for cards and inputs.\n- **Ink (#1a1815), Ink 2 (#4a4640), Ink 3 (#7a756c):** headings, body, captions. Warm blacks, never pure #000.\n- **Line (#e6e1d7):** hairlines and dividers. Line strong for input borders.\n- **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.\n- **Inverse pair:** one section per page may flip to ink background with paper text for contrast. Never two in a row.\n\n## Typography\n\nThe typeface is the design. Two families, both free on Fontsource.\n\n- **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.\n- **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.\n- Headline measure is short: no more than 12 words, wrapping at around 20 characters per line on desktop. Body measure caps at 640px.\n- Never centre body text. Centre a headline only in the hero, and even then prefer left-aligned with a wide left margin.\n\n## Layout\n\nA 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.\n\nUse whitespace as the divider. If you feel the need to add a border between sections, add 32px of space instead.\n\nImage treatment: full-bleed or on the grid, never floating with a shadow. One image per section.\n\n## Elevation & Depth\n\nNone. 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.\n\n## Shapes\n\nNearly square. Buttons and images use a 4px radius; tags 2px; only avatars are round. Fully rounded buttons would break the editorial feel.\n\n## Components\n\n- **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.\n- **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.\n- **Section header:** eyebrow, headline, optional lead. Left-aligned.\n- **Feature list:** a numbered list with a headline and a paragraph each, stacked, not three cards in a row.\n- **Pull quote:** headline typography with a hairline above and below, attribution in caption.\n- **Logo strip:** SVGL logos in monochrome ink at 60% opacity, one row, no heading longer than \"Used by\".\n- **Pricing:** at most three tiers, one highlighted with a primary eyebrow, plain feature names. Look at real pricing tables before writing one.\n- **Footer:** one inverse section with columns of links and a large wordmark.\n\n## Do's and Don'ts\n\n- Do use only Fraunces and Manrope. Fraunces on headlines only; body copy in a serif is a different design.\n- Do keep every colour inside the palette. Photography brings its own colour; the interface does not.\n- Do keep contrast at WCAG AA: primary orange on paper is fine for labels, not for body text.\n- Do respect `prefers-reduced-motion`. Motion here is limited to a fade-up on scroll and a hover underline.\n- Don't use gradients, glows, blurred blobs or glassmorphism. If a hero needs texture, use a photograph or a flat shape.\n- Don't stack three feature cards with icons. Write the features as a list.\n- Don't use more than one accent colour, and never use it as a button fill.\n- Don't add a second effect from a component library. One signature moment per page, then calm.\n",
      "overwrite": "never"
    },
    {
      "path": "dmiu.config.json",
      "content": "{\n  \"pack\": \"editorial-landing-page\",\n  \"designMd\": \"DESIGN.md\",\n  \"baseUrl\": \"http://localhost:3000\",\n  \"routes\": [\n    \"/\"\n  ],\n  \"viewports\": [\n    {\n      \"width\": 1280,\n      \"height\": 800\n    },\n    {\n      \"width\": 390,\n      \"height\": 844\n    }\n  ],\n  \"tolerance\": {\n    \"color\": 6,\n    \"spacing\": 1\n  },\n  \"forbidGradients\": true,\n  \"ignore\": [],\n  \"baselines\": {\n    \"dir\": \".dmiu/baselines\",\n    \"threshold\": 0.02\n  }\n}\n",
      "overwrite": "never"
    },
    {
      "path": ".dmiu/references/README.md",
      "content": "# Reference screens for Editorial Landing Page\n\nThese are third-party sites we point at, not assets to copy. Take the principle, not the pixels.\n\n## Godly\n\nhttps://godly.website\n\nThe gallery to open first. Nearly everything on it shows what restraint and good type look like on a real page.\n\nLook at: headline scale, margins, how few elements sit above the fold\n\nPreview: https://dontmakeitugly.com/previews/godly.jpg\n\n## Supahero\n\nhttps://supahero.io\n\nHundreds of heroes side by side. Proof that a hero does not have to be a centred headline with two buttons.\n\nLook at: left-aligned layouts, single calls to action, image placement\n\nPreview: https://dontmakeitugly.com/previews/supahero.jpg\n\n## Typewolf\n\nhttps://www.typewolf.com\n\nTypefaces shown on real sites, with pairings. Where the Fraunces and Manrope choice comes from.\n\nLook at: serif display over sans body, sizing contrast between headline and lead\n\nPreview: https://dontmakeitugly.com/previews/typewolf.jpg\n",
      "overwrite": "always"
    }
  ],
  "agentsSnippet": "<!-- BEGIN:dontmakeitugly -->\n## Design contract (Editorial Landing Page)\n\nThis project uses a DESIGN.md contract from Don't Make It Ugly. Before writing or changing any UI:\n\n1. Read `DESIGN.md`. Use only its fonts, colours, spacing scale and radii. If something you need isn't there, ask before inventing it.\n2. Read `.dmiu/references/README.md` for the reference screens and what to take from each.\n3. 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.\n4. Never edit `DESIGN.md` to make a check pass. Change the code.\n\nCurated resources for this pack (each page says how an agent can use it):\n\n- Godly: https://dontmakeitugly.com/resources/godly.md\n- Supahero: https://dontmakeitugly.com/resources/supahero.md\n- Navbar Gallery: https://dontmakeitugly.com/resources/navbar-gallery.md\n- CTA Gallery: https://dontmakeitugly.com/resources/cta-gallery.md\n- Typewolf: https://dontmakeitugly.com/resources/typewolf.md\n- Fontsource: https://dontmakeitugly.com/resources/fontsource.md\n- Magic UI: https://dontmakeitugly.com/resources/magic-ui.md\n- SVGL: https://dontmakeitugly.com/resources/svgl.md\n- Web Interface Guidelines: https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md\n<!-- END:dontmakeitugly -->",
  "references": [
    {
      "resource": "godly",
      "name": "Godly",
      "caption": "The gallery to open first. Nearly everything on it shows what restraint and good type look like on a real page.",
      "focus": "headline scale, margins, how few elements sit above the fold",
      "url": "https://godly.website",
      "image": "https://dontmakeitugly.com/previews/godly.jpg"
    },
    {
      "resource": "supahero",
      "name": "Supahero",
      "caption": "Hundreds of heroes side by side. Proof that a hero does not have to be a centred headline with two buttons.",
      "focus": "left-aligned layouts, single calls to action, image placement",
      "url": "https://supahero.io",
      "image": "https://dontmakeitugly.com/previews/supahero.jpg"
    },
    {
      "resource": "typewolf",
      "name": "Typewolf",
      "caption": "Typefaces shown on real sites, with pairings. Where the Fraunces and Manrope choice comes from.",
      "focus": "serif display over sans body, sizing contrast between headline and lead",
      "url": "https://www.typewolf.com",
      "image": "https://dontmakeitugly.com/previews/typewolf.jpg"
    }
  ],
  "resources": [
    {
      "slug": "godly",
      "name": "Godly",
      "tagline": "Astronomically good web design inspiration, hand-picked.",
      "url": "https://godly.website",
      "markdownUrl": "https://dontmakeitugly.com/resources/godly.md",
      "agentPrompt": "Use Godly as a visual and design reference for this project.\n\nWhat it is: Astronomically good web design inspiration, hand-picked.\n\nWebsite: https://godly.website\n\nUse it specifically for:\n- landing-page inspiration\n- startup sites\n- visual direction\n\nHow you can access it: Public website.\n\nStudy the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements."
    },
    {
      "slug": "supahero",
      "name": "Supahero",
      "tagline": "Hundreds of website hero sections from real sites, nothing else.",
      "url": "https://supahero.io",
      "markdownUrl": "https://dontmakeitugly.com/resources/supahero.md",
      "agentPrompt": "Use Supahero as a visual and design reference for this project.\n\nWhat it is: Hundreds of website hero sections from real sites, nothing else.\n\nWebsite: https://supahero.io\n\nUse it specifically for:\n- hero section layouts\n- landing-page first screens\n- headline and type sizing\n\nHow you can access it: Public website.\n\nStudy the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements."
    },
    {
      "slug": "navbar-gallery",
      "name": "Navbar Gallery",
      "tagline": "550+ real website navbars, sorted by type: mega menus, sidebars, tabs and the rest.",
      "url": "https://www.navbar.gallery",
      "markdownUrl": "https://dontmakeitugly.com/resources/navbar-gallery.md",
      "agentPrompt": "Use Navbar Gallery as a visual and design reference for this project.\n\nWhat it is: 550+ real website navbars, sorted by type: mega menus, sidebars, tabs and the rest.\n\nWebsite: https://www.navbar.gallery\n\nUse it specifically for:\n- navigation patterns\n- mega menus and sidebars\n- header design\n\nHow you can access it: Public website.\n\nStudy the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements."
    },
    {
      "slug": "cta-gallery",
      "name": "CTA Gallery",
      "tagline": "Real calls to action, sorted into buttons, forms, modals, pricing and newsletters.",
      "url": "https://www.cta.gallery",
      "markdownUrl": "https://dontmakeitugly.com/resources/cta-gallery.md",
      "agentPrompt": "Use CTA Gallery as a visual and design reference for this project.\n\nWhat it is: Real calls to action, sorted into buttons, forms, modals, pricing and newsletters.\n\nWebsite: https://www.cta.gallery\n\nUse it specifically for:\n- pricing tables\n- call-to-action patterns\n- signup and newsletter forms\n\nHow you can access it: Public website.\n\nStudy the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements."
    },
    {
      "slug": "typewolf",
      "name": "Typewolf",
      "tagline": "What's trending in type, with real sites showing each font in use.",
      "url": "https://www.typewolf.com",
      "markdownUrl": "https://dontmakeitugly.com/resources/typewolf.md",
      "agentPrompt": "Use Typewolf as a visual and design reference for this project.\n\nWhat it is: What's trending in type, with real sites showing each font in use.\n\nWebsite: https://www.typewolf.com\n\nUse it specifically for:\n- choosing typefaces\n- font pairing\n- typography inspiration\n\nHow you can access it: Public website.\n\nStudy the visual direction: typography, spacing, colour, hierarchy and motion. Describe what makes the references work, then apply those principles to this project's existing visual language. Do not copy layouts or assets directly; build something consistent with our own brand and accessibility requirements."
    },
    {
      "slug": "fontsource",
      "name": "Fontsource",
      "tagline": "Self-host any open-source font with an npm install.",
      "url": "https://fontsource.org",
      "markdownUrl": "https://dontmakeitugly.com/resources/fontsource.md",
      "installCommand": "npm install @fontsource-variable/inter",
      "agentPrompt": "Use Fontsource as a design and implementation reference for this project.\n\nWhat it is: Self-host any open-source font with an npm install.\n\nWebsite: https://fontsource.org\nDocumentation: https://fontsource.org/docs/getting-started/introduction\nGitHub: https://github.com/fontsource/fontsource\nInstall: npm install @fontsource-variable/inter\n\nUse it specifically for:\n- self-hosting fonts\n- Vite and Astro projects\n- privacy-conscious sites\n\nHow you can access it: Docs, GitHub, npm.\nWorks with: Astro, Svelte, Vue, React, Framework agnostic.\nLicense: MIT (tooling); fonts keep their own licences. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "magic-ui",
      "name": "Magic UI",
      "tagline": "Animated React components and effects for landing pages, built to sit alongside shadcn/ui.",
      "url": "https://magicui.design",
      "markdownUrl": "https://dontmakeitugly.com/resources/magic-ui.md",
      "installCommand": "npx shadcn@latest add \"https://magicui.design/r/marquee\"",
      "agentPrompt": "Use Magic UI as a design and implementation reference for this project.\n\nWhat it is: Animated React components and effects for landing pages, built to sit alongside shadcn/ui.\n\nWebsite: https://magicui.design\nDocumentation: https://magicui.design/docs\nGitHub: https://github.com/magicuidesign/magicui\nInstall: npx shadcn@latest add \"https://magicui.design/r/marquee\"\n\nUse it specifically for:\n- landing pages\n- marketing sites\n- hero sections\n- product showcases\n\nHow you can access it: Docs, GitHub, CLI, Copy/paste.\nWorks with: React, Next.js, Tailwind CSS.\nLicense: MIT. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    },
    {
      "slug": "svgl",
      "name": "SVGL",
      "tagline": "A beautiful library of full-colour SVG logos with light and dark variants.",
      "url": "https://svgl.app",
      "markdownUrl": "https://dontmakeitugly.com/resources/svgl.md",
      "agentPrompt": "Use SVGL as a design and implementation reference for this project.\n\nWhat it is: A beautiful library of full-colour SVG logos with light and dark variants.\n\nWebsite: https://svgl.app\nGitHub: https://github.com/pheralb/svgl\n\nUse it specifically for:\n- logo walls\n- tech-stack sections\n- colour brand marks\n\nHow you can access it: Public website, GitHub, API, Copy/paste.\nWorks with: Framework agnostic.\nLicense: MIT (code). Respect it.\n\nStudy the relevant design and implementation patterns, but adapt them to this project's existing architecture, visual language, accessibility requirements and conventions. Do not blindly copy the entire resource."
    },
    {
      "slug": "vercel-web-interface-guidelines",
      "name": "Web Interface Guidelines",
      "tagline": "A concise, agent-readable checklist of what a well-built web interface must get right.",
      "url": "https://github.com/vercel-labs/web-interface-guidelines",
      "markdownUrl": "https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md",
      "agentPrompt": "Use Web Interface Guidelines as a design and implementation reference for this project.\n\nWhat it is: A concise, agent-readable checklist of what a well-built web interface must get right.\n\nWebsite: https://github.com/vercel-labs/web-interface-guidelines\nGitHub: https://github.com/vercel-labs/web-interface-guidelines\n\nUse it specifically for:\n- agent rules files\n- design reviews\n- accessibility basics\n- polish\n\nHow you can access it: GitHub, Copy/paste, CLI.\nWorks with: Framework agnostic.\nLicense: MIT. Respect it.\n\nRead the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource."
    }
  ],
  "check": {
    "routes": [
      "/"
    ],
    "colorTolerance": 6,
    "spacingTolerance": 1,
    "forbidGradients": true
  }
}