{
  "name": "Press Patterns",
  "status": "starter collection",
  "format": "HTML + CSS",
  "patterns": [
    {
      "slug": "studio-hero",
      "title": "A bold first impression",
      "category": "Hero",
      "tone": "yellow",
      "headline": "Good ideas deserve a great website.",
      "description": "An editorial hero with a clear headline and a focused call to action.",
      "url": "https://presspatterns.com/patterns/studio-hero/",
      "source": "<section class=\"pp-section\" aria-labelledby=\"section-title\">\n  <p class=\"pp-label\">A fresh perspective</p>\n  <h2 id=\"section-title\">Good ideas deserve a great website.</h2>\n  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>\n  <a class=\"pp-action\" href=\"#next\">Explore what’s possible ↗</a>\n</section>\n<style>\n.pp-section{background:#FFE500;color:#0F1521;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}\n</style>"
    },
    {
      "slug": "product-features",
      "title": "Make the benefits clear",
      "category": "Features",
      "tone": "blue",
      "headline": "Less busywork. More possibility.",
      "description": "Three concise benefits for a product, service or new idea.",
      "url": "https://presspatterns.com/patterns/product-features/",
      "source": "<section class=\"pp-section\" aria-labelledby=\"section-title\">\n  <p class=\"pp-label\">A fresh perspective</p>\n  <h2 id=\"section-title\">Less busywork. More possibility.</h2>\n  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>\n  <div class=\"pp-columns\"><article><h3>Find your focus</h3><p>Make space for the work that matters.</p></article><article><h3>Keep it simple</h3><p>Build a process that works for you.</p></article><article><h3>Move forward</h3><p>Turn your next idea into something real.</p></article></div>\n</section>\n<style>\n.pp-section{background:#EFF6FE;color:#0F1521;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}\n</style>"
    },
    {
      "slug": "simple-pricing",
      "title": "Keep the choice simple",
      "category": "Pricing",
      "tone": "light",
      "headline": "A little plan. A big possibility.",
      "description": "A straightforward pricing section with three clearly defined plans.",
      "url": "https://presspatterns.com/patterns/simple-pricing/",
      "source": "<section class=\"pp-section\" aria-labelledby=\"section-title\">\n  <p class=\"pp-label\">A fresh perspective</p>\n  <h2 id=\"section-title\">A little plan. A big possibility.</h2>\n  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>\n  <div class=\"pp-columns\"><article><h3>Starter</h3><p>For your next idea.</p></article><article><h3>Studio</h3><p>For your growing practice.</p></article><article><h3>Team</h3><p>For working together.</p></article></div>\n</section>\n<style>\n.pp-section{background:#F9FAFB;color:#0F1521;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}\n</style>"
    },
    {
      "slug": "customer-story",
      "title": "Let your customers talk",
      "category": "Testimonials",
      "tone": "dark",
      "headline": "“Finally, a little room to think bigger.”",
      "description": "A spacious customer quote with attribution and a supporting introduction.",
      "url": "https://presspatterns.com/patterns/customer-story/",
      "source": "<section class=\"pp-section\" aria-labelledby=\"section-title\">\n  <p class=\"pp-label\">A fresh perspective</p>\n  <h2 id=\"section-title\">“Finally, a little room to think bigger.”</h2>\n  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>\n  <p>Alex Morgan · Example customer</p>\n</section>\n<style>\n.pp-section{background:#0F1521;color:#fff;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}\n</style>"
    },
    {
      "slug": "newsletter-cta",
      "title": "Give the next step a home",
      "category": "Call to action",
      "tone": "blue",
      "headline": "Your next chapter starts here.",
      "description": "A compact call to action that guides visitors to a single destination.",
      "url": "https://presspatterns.com/patterns/newsletter-cta/",
      "source": "<section class=\"pp-section\" aria-labelledby=\"section-title\">\n  <p class=\"pp-label\">A fresh perspective</p>\n  <h2 id=\"section-title\">Your next chapter starts here.</h2>\n  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>\n  <a class=\"pp-action\" href=\"#next\">Explore what’s possible ↗</a>\n</section>\n<style>\n.pp-section{background:#EFF6FE;color:#0F1521;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}\n</style>"
    },
    {
      "slug": "common-questions",
      "title": "A few good answers",
      "category": "FAQ",
      "tone": "light",
      "headline": "Glad you asked.",
      "description": "An accessible accordion for answering common questions.",
      "url": "https://presspatterns.com/patterns/common-questions/",
      "source": "<section class=\"pp-section\" aria-labelledby=\"section-title\">\n  <p class=\"pp-label\">A fresh perspective</p>\n  <h2 id=\"section-title\">Glad you asked.</h2>\n  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>\n  <details><summary>Can I customise this section?</summary><p>Yes. Change the text, colours and layout to suit your website.</p></details><details><summary>Does it need a framework?</summary><p>No. This example uses HTML and CSS.</p></details>\n</section>\n<style>\n.pp-section{background:#F9FAFB;color:#0F1521;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}\n</style>"
    }
  ]
}