Plenrik — AI Influencer Marketing & Ad Management HTML Template

Plenrik is a free, production-ready HTML template for AI and creator-economy SaaS products, influencer-marketing platforms, ad-management dashboards, and modern growth-tooling brands. The visual direction is a deliberate step away from the left-text / right-screenshot SaaS default — a warm off-white paper surface at #FAFAF7, near-black ink at #0F0F0F, and a pastel-card family (lavender, mustard, mint, coral, rose, peach) used both as bento tiles and as floating annotation cards orbiting a centered phone-mockup hero. Onest leads the display, Albert Sans holds the body, and DM Mono carries the eyebrows and captions, with Lobster and Plus Jakarta Sans used sparingly inside the brand strip for diverse client logo styles.

The home page opens with a centered hero headline and an orbital floating-card layout — five annotation cards (a price tag, a sold-this-week stat, an engagement chart, a star rating, a live likes counter) positioned absolute around a centered phone showing an influencer LIVE. The phone is the anchor; the cards are the storytelling. Below the hero, the page steps through a multi-style brand strip (Lobster + Plus Jakarta Sans + Onest mixed wordmarks), a five-tile pastel feature bento (the large lavender card spans two columns), a three-step "how it works" on a paper-grey background with numbered circles, a black stats strip with mustard ~3.5rem numbers and mono labels, three testimonial cards with display-quote italic emphasis, and a closing black CTA banner with a mustard hover state.

Pages

• index.html — Home with the centered orbital hero, brand strip, 5-tile pastel feature bento, 3-step "how it works", black stats strip with mustard numbers, 3 testimonial cards, black CTA banner
• product.html — Product overview with 4 alternating feature rows (each paired with a pastel media tile), integrations strip, custom-demo CTA
• stories.html — Customer stories with a featured mint-card hero, 6-card story grid (each carrying metric chips), and a "load more" CTA
• resources.html — Resources with 3-up featured posts, a dense article index (date / category / read-time), and a newsletter sign-up banner
• pricing.html — Pricing with 3-tier cards (dark-featured "Scale" tier with a mustard badge), monthly / yearly toggle, full comparison table, 6-question FAQ, trial CTA
• contact.html — Contact with 6 routing cards (sales / support / partnerships / press / careers / offices) plus a structured intake form

Tech

• Static HTML, vanilla CSS, vanilla JS — no framework, no build step, no JS dependencies
• Google Fonts: Onest (400/500/600/700 — headlines), Albert Sans (400/500/600/700 — body), DM Mono (400/500 — eyebrows / captions), with Lobster + Plus Jakarta Sans used sparingly inside the brand strip
• Real Unsplash photography linked directly — replace with your own assets before launch
• Reduced-motion friendly, keyboard accessible, semantic landmarks, skip-link, ARIA on interactive controls
• Responsive at 375 / 768 / 1024 / 1440

Design system

All tokens at the top of assets/css/styles.css:

• Palette — --paper (#FAFAF7) warm off-white surface, --ink (#0F0F0F) near-black text, plus a pastel family: --lavender (#E5DCFA), --mustard (#F3D567), --mint (#C5E8CC), --coral (#FFD0C5), --rose (#FBC8D5), --peach (#FFDCBA)
• Typography — three-font system (display / body / mono), italic display weights repurposed as emphasis (<em>), modular type scale
• Layout — 1240px container max, sticky 76px header
• Hero gradient — radial peach-to-cream arc behind the phone, blurred 10px
• Motion — single ease (cubic-bezier(0.22, 1, 0.36, 1)), full reduced-motion fallback

Adjust the :root block to recolour or rescale the whole template. Change --ink and the pastel set to restyle every section across all six pages.

License

Free for personal and commercial projects. Attribution appreciated but not required. Photography is linked from Unsplash; replace before production deployment.